Készítsen egyszerű illusztrációkat az internethez

Leültem, játszottam egy kis zenét, tompítottam a fényeket és kinyitottam a laptopomat. Sok dolgom volt. Az ihlet megidézése érdekében elkezdtem rajzolni firka művészet vonalak a képernyő egyik sarkából a másikba, amikor üstökösformát láttam. - Hmm - lassan beindult az agyam -, mi van, ha összekapcsolom őket, és hozzáadok néhány bolygót?

Néhány órával később megvan a legnépszerűbb Dribbble illusztrációm. Még mindig alig emlékszem, hogyan történt, de némi ásatás után az agyamban felfedeztem egy belső algoritmusomat az illusztráció készítéséhez - nem csak ezt, hanem bármely más, amit csináltam. Vicces, valahogy azt vártam, hogy összetettebb lesz. Nos, hát…

Illusztráció stílusa

Mielőtt elkezdenék dolgozni egy illusztráción, meg kell győződnöm arról, hogy megértem a célját és a kontextust, ahol élni fog. Ez az alkalmazáson belüli vagy webhely, vagy háttérkép? Lesz rajta szöveg, és forgalmas környezetben fog elhelyezkedni? Szimbolizálnia kellene egy cselekvést, vagy csak azért van, hogy egy bizonyos hangulatot adjon ki?



Ha az illusztrációnak világos elképzelést kell közvetítenie, vagy egy adott tárgyat vagy műveletet szimbolizálnia kell, akkor egy egyszerű végrehajtást választok, ahol minden figyelem a fontos részre összpontosul. Ha azonban kifejezetten „csendes” háttér-illusztrációra törekszem, akkor egy mintaszerű megközelítést választok, vagy gondoskodom arról, hogy ne legyenek nyilvánvaló figyelemfelkeltő elemek, hogy minimalizáljam az emberek túlértelmezésének lehetőségét. . Az alkalmazáson belüli illusztrációk esetében megpróbálom szelídíteni a dolgokat, hogy elkerüljem a figyelem kisiklását a funkcionalitástól.

Esztétikai szabályok

Az agyam szereti megalkotni ezeket a furcsa szabályokat. Olyanok, mint a nevetséges kihívások, amelyeken nem bírom elhaladni: Mi van, ha csak köröket használva rajzolok egy embert? Mi van, ha csak egy színnel illusztrálom a naplementét?

Geometriai szabályok, logikai progressziók, szimmetria. Van valami nagyon vonzó abban, ha szigorú matematikai szabályokat alkalmaznak a művészetre. Fordított mérnöki varázslatnak tűnik; eltávolítja a művészet misztikus elemét, így majdnem olyan, mint felfedni a mögötte álló tudományt.

Komplex illusztráció; egyszerű színpaletta

Bonyolult részletességű városillusztráció, amelyet egyszerű, analóg színpalettával kombináltak

Bonyolult részletességű városillusztráció, amelyet egyszerű, analóg színpalettával kombináltak(Kép jóváírása: Nina Geometrieva)

Mint kiderült, az agyam meglehetősen lusta a szín kiválasztásában, ezért kétféle színpalettával rendelkezik, amelyek közül választhat: az egyik a komplex illusztrációkhoz; egy másik az egyszerűek számára.

A komplex illusztrációk részletességi szintje sok, sok forma / tárgy és sok részlet van. Ezek természetüknél fogva általában mintaszerűek, és nincs egyértelmű fókuszpontjuk. Az agyam úgy döntött, hogy az ilyen típusú illusztrációk jól működnek monokromatikus vagy analóg színpalettákkal. Vagy tágabb értelemben - kevesebb szín és kevesebb színkontraszt.

Mindez vizuális egyensúlyig forral; ha a formák őrültek, akkor a színeknek unalmasnak kell lenniük. Az egyik kivétel az az eset, amikor egy bizonyos tárgyat szeretnék hangsúlyozni, amely egyébként nem tűnne ki. Ez nagy kontrasztú szín használatával érhető el, míg minden más monokromatikus és szelíd. A tökéletes vizuális egyensúly valahol a túlstimulálás (hangos színek, összetett formák, sok részlet, minden az arcodra sikít) és az alulértékelés (a minimális, unalmas, semmi új vagy érdekes dolog rossz típusa) között van.

Monokromatikus paletták

Az analóg vagy monokróm paletták akkor működnek hatékonyan, ha vizuálisan haladnak vagy ismétlődnek az elemek

Az analóg vagy monokróm paletták akkor működnek hatékonyan, ha vizuálisan haladnak vagy ismétlődnek az elemek(Kép jóváírása: Nina Geometrieva)

A monokróm színpaletta egy szín árnyalatából vagy árnyalatából áll. Az árnyalatok akkor fordulnak elő, ha egy színt fokozatosan kevernek a fehérhez; árnyalatok történnek, ha fokozatosan keveredik a feketével. A monokromatikus palettákkal kapcsolatban mindig is az volt a kérdésem, hogy az árnyalatok és az árnyalatok fokozatosan elveszítik a vibráltságot, mivel a szín fehér vagy fekete színnel keveredik, és mindkettő nulla százalékos telítettségű.

Ennek a fokozatos tompulásnak az elkerülése érdekében egyszerű csalást használok: amellett, hogy fehéret vagy feketét adok hozzá, fokozatosan kissé eltolom az árnyalatot. Ez lényegében finom analóg paletta, nem pedig monokromatikus paletta. Például, ha piros monokromatikus árnyalatokat szeretnék létrehozni, akkor az árnyalatot a narancs felé tolnám. Ha vörös monokromatikus árnyalatokat szeretnék létrehozni, akkor az árnyalatot a bíborvörös felé tolnám, ahogy besötétedik. Ha világosabb kék árnyalatokat szeretnék kapni, akkor a cián felé váltok; a kék sötét árnyalatai esetében a másik irányba, a lila felé tolok.

Ez egy olyan palettát eredményez, amely még mindig kissé monokromatikusnak tűnik, de sokkal élőbb és határozottan rúg. Amióta ezt felfedeztem, soha többé nem készítettem igazi monokromatikus palettát.

Egyszerű illusztráció; összetett színpaletta

Az alacsonyabb összetettségű illusztrációk általában világos fókuszponttal és objektumhierarchiával rendelkeznek. A formák általában egyszerűbbek, ezért a színválasztás vadabb lehet. Bármilyen nagy kontrasztú színben gondolkodom - kiegészítő, triádikus, tetradikus -, feltéve, hogy ez figyelemfelkeltő, stimuláló paletta.

Egy egész univerzum áll a kettő között, amit összetett és egyszerű illusztrációként leírtam. De az agyam nem foglalkozik túlzottan azzal a spektrummal - minden ábrát inkább összetettnek vagy egyszerűnek jelölne.

A nagy kontrasztú színpaletta nem olyan egyszerű, mint az ellentétes színek kiválasztása egy színkeréken. A színes kerék remek kiindulópont, de korántsem jelenti a folyamat végét. Például egy jó narancssárga és kék kombináció kiválasztásakor néhány dologra figyelek: az észlelt fényerőre és arra, hogy az akcentusszínek hogyan működnek az alapértelmezett színekkel.

Észlelt fényerő

Ha mindkét színnek azonos az észlelt fényereje, akkor az agynak nehéz megkülönböztetni a köztük lévő határt - így a képet nézve kényelmetlen érzés. Kivéve, ha a színek soha nem érintik egymást, érdemes megbizonyosodni arról, hogy nem azonos az észlelt fényerő.

Ja, és ha kíváncsi, miért használom az „észlelt” szót, keresse meg a Helmholtz – Kohlrausch-effektust, amely bizonyítja, hogy az azonos fényerejű színek különböző értékekkel érzékelhetők. Mivel például a narancs fényérzékenysége nagyobb, mint a kéké, könnyű tovább növelni a két szín közötti különbséget egy világosabb narancssárga és egy sötétebb kék használatával.

Kiemelés az alapértelmezett színekkel szemben

A Zopim honlapjának illusztrációja. A kék árnyalatok a dominánsak, a hangsúlyt a narancs adja

A Zopim honlapjának illusztrációja. A kék árnyalatok a dominánsak, a hangsúlyt a narancs adja(Kép jóváírása: Nina Geometrieva)

Ha az egyes színek felhasználása jelentősen eltér, akkor ennek megfelelően állítom be a színértékeket. Az, hogy bátor vagyok az akcentussal és biztonságosan játszom az alapértelmezett színekkel, az én megközelítésem.

A fenti narancs-kék példában a kéket nyugtató színként használnám nagyobb területek kitöltésére, háttér és nagy elemek kitöltésére, és néhány vad narancssárgát gombokra, ikonokra és egyéb apró elemekre. A szemléltetés kapcsán kék színárnyalatok lennének az alapjaim, és ismét a narancssárga színű akcentus - talán egy érdekes részlet vagy egy fontos elem hangsúlyozásával.

Vizuális egyensúlyellenőrzés

Bármelyik illusztrációt is kapja a fenti útmutatások követésével, győződjön meg róla, hogy hátrált egy lépést, és ellenőrizze, hogy mindennek van-e értelme együtt. Annyi kivétel van az illusztrációs szabályok alól, hogy lehetetlen lenne felsorolni az összes olyan kombinációt, amely csodálatos illusztrációt szül. Mindig próbálkozzon olyan dolgokkal, amelyek érdekesnek tűnnek, és ha valami meglep, akkor mindenképpen értse meg, hogy tovább fejlessze intuícióját.

Ez a cikk eredetileg itt jelent meg net magazin 286. szám; vásárolja meg itt !

Kapcsolódó cikkek