Hozzon létre egyszerű illusztrációkat az interneten

Feb 4, 2026

kézikönyv

Leültem, játszottam néhány zenét, elhomályosította a fényeket, és kinyitotta a laptopomat. Rengeteg voltam. Az inspiráció megsemmisítése érdekében elkezdtem rajzolni doodle művészet vonalak a képernyő egyik sarkáról a másikra, amikor láttam egy üstökös formát. - Hmm, "az agyam lassan elindult," mi van, ha összekapcsolok őket, és hozzáadok néhány bolygót? "

Néhány órával később volt a legnépszerűbb dribbleble illusztráció. Még mindig alig emlékszem, hogy történt, de miután néhányat az agyamon keresztül ásottam, felfedeztem a belső algoritmusomat egy illusztráció létrehozására - nem csak ez, de más, amit tettem. Vicces, elvárom, hogy összetettebb legyen. Nos, hát…

Illusztráció stílus

Mielőtt elkezdenem dolgozni egy illusztráción, győződjön meg róla, hogy megértem a célját és a kontextust, ahol élni fog. Ez az alkalmazás, vagy weboldal, vagy háttérkép? Lesz szöveges szöveg, és egy forgalmas környezetben lesz? Meg kell jelölnie egy cselekvést, vagy csak ott van, hogy egy bizonyos hangulatot adjon ki?

Ha az illusztráció egyértelmű elképzelést kell adnia, vagy szimbolizálja egy adott objektumot vagy cselekvést, akkor egy egyszerű végrehajtást választok, ahol minden figyelmet a fontos részre összpontosít. Ha azonban kifejezetten egy "csendes" háttér illusztrációjára megyek, akkor egy minta-szerű megközelítést választok, vagy győződjön meg róla, hogy nincsenek nyilvánvaló figyelemfelkeltő elemek, hogy minimalizálják az emberek túlzott értelmezése . Az in-app illusztrációknál megpróbálom megtartani a dolgokat, hogy elkerüljem a figyelmet a funkcionalitásról.

Esztétikai szabályok

Az agyam szereti ezeket a furcsa szabályokat. Olyanok, mint a nevetséges kihívások, amelyeket nem tudok átadni: Mi van, ha egy embert csak körök segítségével rajzolok? Mi van, ha illusztrálnám egy naplementét csak egy színnel?

Geometriai szabályok, logikai előrehaladások, szimmetria. Van valami nagyon vonzó, hogy szigorú matematikai szabályokat alkalmazzanak a művészetre. Úgy érzi, mint a fordított mérnöki mágia; Elszívja a művészet misztikus elemét, így szinte olyan, mint a mögöttes tudomány feltárása.

Komplex illusztráció; Egyszerű színpaletta

A city illustration with a complex level of detail, which has been combined with a simple, analogous colour palette — A városi illusztráció összetett részletességgel, amelyet egy egyszerű, analóg színpalettával kombináltak (Kép hitel: Nina GeomeTrieva)

Ahogy kiderül, az agyam meglehetősen lusta, ha a szín kiválasztása, így két általános típusú színpaletta van, amely úgy dönt, hogy az egyik a komplex illusztrációkhoz; egy másik az egyszerűek számára.

A komplex illusztrációk nagy szemcsézettséggel rendelkeznek, sok formával / tárgyzal és sok részletekkel. Ezek általában a természet minta, és nincsenek világos fókuszpontja. Az agyam úgy döntött, hogy ezek az illusztrációk jól működnek a monokromatikus vagy analóg színpalettákkal. Vagy szélesebb körben - kevesebb szín és kevesebb szín kontraszt.

Mindez a vizuális egyensúlyra áll; Ha az alakzatok őrültek, a színeknek kell lennie. Az egyik kivétel abban az esetben van, ahol szeretnék hangsúlyozni egy bizonyos objektumot, amely egyébként nem áll fenn. Ezt rendkívül kontrasztos színnel lehet elérni, míg minden más monokromatikus és szelíd. A tökéletes vizuális egyensúly valahol az overstimuláció (hangos színek, összetett formák, sok részlet, minden sikoly az arcodon) és az alulértékesítés (a rossz típusú minimális, unalmas, semmi új vagy érdekes).

Monokromatikus paletták

Analogous or monochrome palettes work effectively when there is a visual progression or repetition of elements — Analóg vagy monokróm paletták hatékonyan működnek, ha vizuális progresszió vagy elemek ismétlése van (Kép hitel: Nina GeomeTrieva)

A monokromatikus színpaletta egy színű árnyalatokból vagy árnyalatokból áll. Tinták történnek, ha egy színt fehéren keverjük össze; Az árnyalatok akkor történnek, ha fokozatosan keveredik a fekete. Az egyik kérdés, amit mindig monokromatikus palettákkal voltam, az, hogy a színárnyalatok és az árnyalatok fokozatosan elveszítik a vibrációt, mivel fehér vagy fekete színű, mindkettő nulla százalékos telítettséggel rendelkezik.

A fokozatos dulling elkerülése érdekében egyszerű csalást használok: valamint fehér vagy fekete hozzáadásával, fokozatosan átállítottam a színárnyalatot. Ez lényegében egy finom analóg paletta egy monokromatikus paletta helyett. Például, ha vörös monokromatikus árnyalatokat akarok létrehozni, a színárnyalatot narancssárga felé mozdítom. Ha piros monokromatikus árnyalatokat akarok létrehozni, a színárnyalatot a bíbor felé irányítanám, ahogy sötétben van. Ha a kék színű árnyalatokat szeretném kapni, cián felé fordítok; A kék kék árnyalatok esetében a másik irányba mozdulok, lila felé.

Ez egy olyan palettát eredményez, amely még mindig kissé monokromatikusnak érzi magát, de sokkal élesebb és határozottan rúg. Mivel ezt felfedeztem, soha többé nem hoztam létre valódi monokromatikus palettát.

Egyszerű illusztráció; Komplex színes paletta

Az alacsonyabb komplexitású illusztrációk általában világos fókuszponttal és objektumhierarchiával rendelkeznek. Az alakzatok általában egyszerűbbek, így a színválaszték lehet vadabb. Úgy gondolok, hogy nagy kontrasztos színek bármilyen jellegű - kiegészítő, triadic, tetradic - mindaddig, amíg szemet gyönyörködtető, stimuláló paletta.

Van egy egész univerzum, amit komplex és egyszerű illusztrációként írtam le. De az agyam nem túl aggódott mindazt a spektrummal - inkább az illusztrációt komplex vagy egyszerűvé teszi.

A nagy kontrasztú színpaletták nem olyan egyszerűek, mint a színes kerék ellentétes színek kiválasztása. A színkerék nagyszerű kiindulási pont, de ez sem jelenti a folyamat végét. Például, amikor egy jó narancssárga és kék kombinációt választ, figyelek néhány dologra: észlelt fényerő, és az akcentus színek alapértelmezett színekkel működnek.

Érzékelt fényerő

Ha mindkét színek ugyanazt az észlelt fénysűrűséggel rendelkeznek, akkor az agy nehezen megkülönböztetni a határokat közöttük - így nézi a képet kényelmetlenül érzi magát. Hacsak a színek soha nem kellene megérinteniük egymást, érdemes meggyőződni arról, hogy nem rendelkeznek ugyanazokkal az észlelt fénysűrűséggel.

Ja, és ha kíváncsiak vagyunk, hogy miért használom a szót az „észlelt”, keresd ki a Helmholtz-Kohlrausch hatás, ami azt bizonyítja, hogy a színek az azonos fényesség érzékelhető, hogy a különböző értékeket. Mivel a narancs nagyobb érzékelt fénysűrűséggel rendelkezik, például a kék, például könnyű tovább növelni a két szín közötti különbséget egy könnyebb narancssárga és sötétebb kék segítségével.

Accent és az alapértelmezett színek

An illustration for the Zopim homepage. Blue shades are dominant, with orange providing the accents — Illusztráció a zopim honlapjára. A kék árnyalatok dominánsak, narancssárga az ékezetekkel (Kép hitel: Nina GeomeTrieva)

Ha minden egyes szín használata nagymértékben eltérő, akkor ennek megfelelően állítom be a színértékeket. A bátorságú akcentus színekkel és az alapértelmezett színekkel biztonságos lejátszása az én megyem megközelítésem.

A fenti narancssárga-kék példában kéket használok, mint egy nyugtató színt, hogy feltöltsen nagyobb területeket, háttereket és nagy elemeket, valamint néhány vad narancssárga gombokat, ikonokat és más kis elemeket. Az illusztráció összefüggésében a kék színárnyalatok alapul, és újra, a narancssárga, mint az akcentus - talán az érdekes részletesség hangsúlyozása, vagy fontos elem.

Vizuális mérlegellenőrzés

Bármi is legyen az illusztráció a fenti útmutatók követésével, győződjön meg róla, hogy lépést tesz vissza, és ellenőrizze, hogy mindez értelme együtt. Olyan sok kivétel van az illusztrációban szereplő szabályokról, hogy lehetetlen lenne felsorolni az összes kombinációt, amely született egy csodálatos illusztráció. Mindig próbáld ki a dolgokat, amelyek érdekesnek tűnnek, és amikor valami meglepő, győződjön meg róla, hogy megérti, hogy továbbra is javíthatja az intuíciót.

Ez a cikk eredetileg megjelent net magazin 286. kiadás; Vásárolja meg itt !

Kapcsolódó cikkek

7 Web Design Dos és Neuts
A 2016-os legjobb szabadúszó portfóliók közül 6
A 6 legjobb Photoshop eszköz a webes tervezők számára

Hozzon létre egyszerű illusztrációkat az interneten

Illusztráció stílus

Esztétikai szabályok

Komplex illusztráció; Egyszerű színpaletta

Monokromatikus paletták

Egyszerű illusztráció; Komplex színes paletta

Érzékelt fényerő

Accent és az alapértelmezett színek

Vizuális mérlegellenőrzés

kézikönyv - Most Popular Articles

Hogyan írhatunk HTML kódot gyorsabban

Mester a keverő kefe a Photoshop

Modell egy idegen kalóz teremtmény zbrush-ben

Ismerje meg az x-részecskékkel való lombozat növekedését

Level Up Játék karakterek kreatív összeszerelésével

Hogyan kell digitálisan szobrot Zbruscore-ban

Hogyan hozhat létre reális CG ruhát

Hozzon létre egy splash effektust a realflow-ban

Kategóriák