Hogyan készítsünk színátfedéseket a designban?

 Hogyan készítsünk színátfedéseket a designban?

John Morrison

Hogyan készítsünk színátfedéseket a designban?

A színek szinte minden design fontos részét képezik. Akár az élénk, merész árnyalatok rajongója, akár a minimalistább fekete-fehéret kedveli, a színek használata nagy hatással lehet az általános designra.

A színek használatának egyik módja a színhasználat, ha a dizájn egy színátfedést tartalmaz. Ez azt jelenti, hogy egy képet vagy videót félig átlátszó színes dobozzal fed le. A hatás jelentést adhat egy képnek, felhívhatja a figyelmet egy dizájnra, és segíthet a legtöbbet kihozni a korlátozott művészeti választékból.

Ma különböző színátfedéseket fogunk megnézni, hogy egy kis inspirációként szolgáljon a saját készítéséhez.

Envato Elements felfedezése

Próbáljon ki egy gradienst

A színátmenetek ismét menők. Nagyszerű (és figyelemfelkeltő) lehetőséget nyújtanak akkor is, ha színátmenettel szeretnél dolgozni.

Ami különösen szép a gradiensben, hogy pár színnel dolgozhatsz - gondolj itt a márkaépítésedre -, vagy egyetlen színt használhatsz a fókusz megteremtéséhez. A világos párosítások segíthetnek a felhasználókat a designba vonzani, és a képeknek némi szikrát adhatnak.

Ennek a trendnek nagy része a Spotify-hoz köthető, amely elkezdte használni a gradiens és duotone overlay-eket a lejátszási listák kiemelésére. A színek új életet adtak a felhasználók által megszokott képeknek (zenészek sajtófotói).

Ezt a koncepciót Ön is könnyen megismételheti.

  • Válasszon egy fényképet.
  • Hozzon létre egy gradienst a márka színeivel.
  • Jó szórakozást!

Az egyszínű színek megadják a hangot

Az egyszínű átfedés ugyanolyan feltűnő lehet, mint a színátmenetes minta, de gyakran a színválasztáshoz jobban társítható egy határozott jelentés. Vegyük például a szepia átfedést. Azonnal a régi idők és a történelem érzéseit kelti.

Ugyanez mondható el a trendi színválasztás kiválasztásáról is. A lapos vagy anyagdizájnhoz kapcsolódó élénk, telített színek valamelyikének használatával a modernizmus vagy a high-fashion érzését keltheti.

Ha egyetlen színt használsz átfedésként, gondold át a szín telítettségének és átlátszóságának mértékét. Ezek az elemek is jelentést adhatnak. A nehezebb színkombinációk - kevésbé átlátszó és nagyobb telítettségűek - nagyobb hangsúlyt helyeznek magára a színre, mint a mögötte lévő képre. A világosabb, finomabb kombinációk nagyobb hangsúlyt helyeznek a képre.

Fontolja meg a sötét vagy világos

Nem kell mindig színt használnia az átfedés létrehozásához, néha lehet fekete, fehér vagy szürke is. Ezeknek az árnyalatoknak és tónusoknak a használata valóban megváltoztathatja a projekt hangulatát.

Amint az valószínűleg várható, a sötétebb átfedések hangulatosabb környezetet teremtenek. A világosabb átfedések a vidámsággal társulnak. Egy másik hozzájáruló tényező, amikor ezekről az érzésekről és a fekete-fehérről van szó, maga a kép. Hogyan működik együtt az árnyalat vagy a tónus? A kép és a szín, valamint az üzenetküldés együtt működik?

A Call me Ish (fent) egy fekete-fehér fotó tetején fehér fedőfelületet használ, hogy a képernyőn megjelenő szavakra összpontosítson. De figyelje meg a fotós arckifejezését: széles vigyorral mosolyog. A szín és a fotó kombinációja hívogató, és arra késztet, hogy kapcsolatba lépjen a fotóssal, és esetleg fel is vegye őt egy munkára.

Válassza a nagy kontrasztú képeket

Amikor egy tervezési projektben képátfedést tervezel, fontos a fotó (vagy videó) kompozíciója. Egy egyhangú kép egyhangú színátfedési eredményt fog eredményezni. A legjobb eredményt akkor kapod, ha egy olyan fotóval kezded, amely sok kontrasztot tartalmaz, sötét és világos terekkel a képen.

Ha a kép nem elég kontrasztos, fontolja meg a kontraszt hozzáadását a képszerkesztő szoftverben, vagy válasszon egy másik képet. Ellenkező esetben a képhatás elmaradhat.

Lásd még: 20+ Üdvözlőlap Mockup sablonok (ingyenes és prémium)

Van egy másik trükk is a hatás eléréséhez, ha egy fekete-fehér fotóval kezdünk. Különösen kezdők számára könnyebb lehet látni és fokozni a kontrasztot egy fekete-fehér képen. A Just Actions remek példát nyújt egy fekete-fehér képre a színes átfedéssel rendelkező képek mellett. (Ráadásul klassz hatás, ha színtelen és élénk színű kontrasztos képeket párosítunk.)

A képeknek természetesnek kell látszaniuk (vagy nem)

A színátfedésekkel való munka során két lehetősége van:

  1. A képeknek továbbra is természetesnek kell tűnniük. A színeknek, a megvilágításnak és az árnyékoknak természetes helyen kell megjelenniük. Az átfedés kissé finom, mint például az Abednego Coffee (fent).
  2. A képek teljesen megváltozottnak tűnnek. Nem lehet kitalálni, hogy színátfedést használtak (mint például a legtöbb példában ebben a cikkben).

Itt nem igazán van középút. Ha a képek nem esnek a fenti "szélsőségek" egyikébe sem, a felhasználók túl sokat gondolkodhatnak a színválasztáson, és nem a webhely tartalmára koncentrálhatnak. A színátfedési technikával nem akarod elterelni a figyelmet; a színnek a designt kell erősítenie.

Lásd még: Mi az a logórács, és miért érdemes használni?

Próbáljon ki egy Overlay akcentust

Bár az előző példákban bemutattuk, hogyan használhatod a színátfedést nagyméretű képekhez, például hero header stílusú opciókhoz, nem ez az egyetlen módja, hogy a legtöbbet hozd ki ebből a technikából. A színátfedési effektek hangsúlyként is nagyon jól működhetnek.

A fenti két példa különböző módokat mutat be ennek hatékony megvalósítására.

A Knot Clothing (fent) egy élénkzöld, átlátszó navigációs sávot használ. Ezt még jobban kiemeli a felette lévő egyszínű vonás. Az effekt segít fenntartani a márka színpalettáját az egész dizájnban, miközben a különböző színű termékeket mutatja be. Az effekt egyszerű, segít az oldalnak egy kicsit lágyabbnak tűnni, mintha a navigáció egyszínű lenne, és lefelé vonzza a szemet az oldalon, ésa tervezésen keresztül.

A Nuts and Woods egy másik megközelítést alkalmaz. A dizájn egy színátfedést használ lebegő effektként, hogy többet mondjon a weboldal egyes elemeiről. Minden olyan elem, amely piros színátfedést kap, egyben kattintható elem is. Ami figyelemre méltó ebben a dizájnban, hogy a színátfedés vizuális jelként szolgál a felhasználók számára, pontosan megmondja nekik, hogy mit akarnak tudni, és utat mutat a tartalomban található linkekhez.

Következtetés

A színátfedés az egyik olyan technika, amely nem mindig működik. A legtöbb tervező úgy találja, hogy csak egy vagy két projektnél tud megúszni vele, mielőtt túlzásnak tűnne. (Ilyenkor egy akcentus átfedés jobb választás lehet.)

Mint minden tervezési technikánál, itt is ügyelj arra, hogy a megfelelő kontextusban alkalmazd. Soha ne használj színátfedést csak azért, mert egy másik projekt inspirált; mentsd el az ötletet, és használd fel a megfelelő designhoz.

John Morrison

John Morrison tapasztalt tervező és termékeny író, aki több éves tapasztalattal rendelkezik a tervezési iparban. A tudás megosztása és a másoktól való tanulás iránti szenvedélyével John a szakma egyik legjobb dizájnbloggerjeként szerzett hírnevet. Napjait kutatással, kísérletezéssel és a legújabb tervezési trendekről, technikákról és eszközökről írva tölti, azzal a céllal, hogy inspirálja és oktassa a tervezőtársakat. Amikor nem veszett el a dizájn világában, John szívesen túrázik, olvas, és a családjával tölti az idejét.