Utwórz proste ilustracje dla sieci

Sep 12, 2025

Jak

Usiadłem, grałem trochę muzyki, przyciemniałem światła i otworzył mój laptop. Miałem wiele do zrobienia. W celu przywołania inspiracji zacząłem rysować Doodle Art. Linie z jednego rogu ekranu na drugą, kiedy widziałem formularz komet. "Hmm", mój mózg powoli zaczął: "Co jeśli podłączę je i dodać kilka planet?"

Kilka godzin później miałem moją najpopularniejszą drybble ilustracji. Nadal nie pamiętam, jak to się stało, ale po kilku kopaniu przez mózg, odkryłem mój wewnętrzny algorytm do tworzenia ilustracji - nie tylko tego, ale jakikolwiek inny, zrobiłem. To zabawne, oczekiwałem, że będzie bardziej złożony. No cóż…

Styl ilustracji

Zanim zaczniesz pracować nad ilustracją, upewnij się, że rozumiem jego cel i kontekst, w którym będzie żyć. Czy to jest w aplikacji lub strona internetowa lub tapeta? Czy będzie na nim tekst, a to będzie zlokalizowane w ruchliwym środowisku? Czy powinien symbolizować akcję, czy też jest tam, aby oddać pewien klimat?

Jeśli ilustracja ma przekaźnik jasny pomysł lub symbolizować konkretny obiekt lub działanie, zdecydowam się na proste wykonanie, gdzie koncentruje się na ważnej części. Jeśli jednak będę w szczególności na "cicho" ilustracji tła, wybiorę podejście podobne do wzorów, lub upewnij się, że nie ma oczywistych elementów chwytających uwagę, aby zminimalizować możliwość nadmiernej interpretacji . W przypadku ilustracji in-App próbuję utrzymać rzeczy, aby uniknąć obciążenia uwagi z funkcjonalności.

Reguły estetyczne

Mój mózg lubi tworzyć wszystkie te dziwne zasady. Są jak śmieszne wyzwania, które nie mogę znieść, aby przejść: co jeśli narysuję człowieka tylko za pomocą kręgów? Co jeśli zilustrowałem zachód słońca przy użyciu tylko jednego koloru?

Zasady geometryczne, progresje logiczne, symetria. Jest coś bardzo atrakcyjne w zakresie ścisłych zasad matematycznych stosowanych do art. Czuje się jak magia inżynierii wstecznej; Dopasowuje mistyczny element w sztuce, więc prawie jak ujawniając naukę za tym.

Kompleksowa ilustracja; Prosta paleta kolorów.

A city illustration with a complex level of detail, which has been combined with a simple, analogous colour palette — Ilustracja miasta z kompleksowym poziomem szczegółowości, która została połączona z prostą, analogiczną palety kolorów (Kredyt obrazu: Nina Geometrieva)

Jak się okazuje, mój mózg jest dość leniwy, jeśli chodzi o wybór koloru, więc ma dwa ogólne typy palety kolorów, które wybierają się z: Jeden na złożone ilustracje; inny dla prostych.

Złożone ilustracje mają wysoki poziom ziarnistości, z wieloma kształtami / przedmiotami i wiele szczegółów. Są one zwykle naturalną naturą i nie mają jasnego punktu centralnego. Mój mózg zdecydował, że te rodzaje ilustracje dobrze działają z monochromatycznymi lub analogicznymi paletami kolorów. Lub, w szerszych warunkach - mniej kolorów i mniej kontrastu kolorów.

Wszystko to sprowadza się do równowagi wizualnej; Jeśli kształty są szalone, kolory powinny być mrożone. Jeden wyjątek jest w przypadku, w którym chcę podwycić nacisk na pewnego obiektu, który inaczej nie wyróżnia się. Można to osiągnąć za pomocą wysoce kontrastowego koloru, podczas gdy wszystko inne jest utrzymywane monochromatyczne i oswojone. Idealne saldo wizualne jest gdzieś między nadzieniem (głośnymi kolorami, złożonymi kształtami, dużo szczegółów, wszystko krzyczy na twoją twarz) i podsumulacja (zły typ minimalnego, nudnego, nic nowego lub interesującego).

Monochromatyczne palety

Analogous or monochrome palettes work effectively when there is a visual progression or repetition of elements — Analogiczne lub monochromatyczne palety działają skutecznie, gdy istnieje wizualny postęp lub powtórzenie elementów (Kredyt obrazu: Nina Geometrieva)

Monochromatyczna paleta kolorów składa się z odcieniach lub odcieni jednego koloru. Odcienie się dzieje, gdy kolor jest stopniowo zmieszany z białym; Odcienie się dzieje, gdy stopniowo miesza się z czarnym. Jednym z problemów, jakiego zawsze miałem z monochromatycznymi palety, jest to, że odcienie i odcienie stopniowo tracą wibrację, ze względu na charakter mieszania koloru białymi lub czarnymi, z których oba mają zero nasycenie.

Aby uniknąć tego stopniowego nęcenia, używam prostego oszustwa: jak również dodawanie białego lub czarnego, stopniowo przesuwam odcień trochę. Jest to zasadniczo subtelna analogiczna paleta zamiast monochromatycznej palety. Na przykład, jeśli chcę stworzyć czerwone odcienie monochromatyczne, przesunąłbym odcień w stronę pomarańczy. Jeśli chcę stworzyć czerwone odcienie monochromatyczne, przesunąłbym odcień w stronę Magenta, gdy zaciemnia. Jeśli chcę uzyskać lżejsze odcienie niebieskiego, przechodzę w kierunku cyjanu; W przypadku ciemnych odcieni niebieskiego, zmieniam się w innym kierunku, w kierunku fioletu.

Powoduje to palety, która nadal czuje się nieco monochromatyczna, ale jest o wiele bardziej żywa i zdecydowanie ma kopnięcie. Odkąd to odkryłem, nigdy więcej nie stworzyłem prawdziwej palety monochromatycznej.

Prosta ilustracja; Kompleksowa paleta kolorów.

Ilustracje z niższą złożonością zazwyczaj mają wyraźny centralny punkt i hierarchię obiektów. Kształty mają tendencję do bardziej prostych, więc wybory kolorów mogą być dzikim. Myślę o wysokiej kontrastowych kolorach każdego rodzaju - uzupełniające, triadycowe, tetradyczne - tak długo, jak to jest przyciągająca wzrok, paleta stymulująca.

Pomiędzy tym, co opisałem jako złożone i proste ilustracje. Ale mój mózg nie jest zbyt zbyt zaniepokojony tymi widmem - woli oznaczyć dowolną ilustrację jako złożoną lub prostą.

Palety kolorów o wysokiej kontraście nie są tak proste jak pobieranie przeciwnych kolorów na kolorze koła. Koło kolorów jest świetną bazą wypadową, ale nie ma końca procesu. Na przykład, wybierając dobrą kombinację pomarańczową i niebieską, zwracam uwagę na kilka rzeczy: postrzeganej luminancji i jak kolory akcentów działają z domyślnymi kolorami.

Postrzegana luminancję

Jeśli obie kolory mają tę samą postrzeganą luminancję, mózg stwierdza, że trudno jest odróżnić granicę między nimi - więc patrząc na obraz czuje się nieswojo. Chyba że kolory nigdy nie powinny się nawzajem dotykać, warto upewnić się, że nie mają tej samej postrzeganej luminancji.

Och, a jeśli jesteś ciekawy, dlaczego używam słowa "postrzegane", spójrz na efekt Helmholtz-Kohlrausch, który pokazuje, że kolory o tej samej luminancji mogą być postrzegane, aby mieć różne wartości. Ponieważ na przykład pomarańczowy ma wyższą postrzeganą luminancję niż niebieski, łatwo jest dalsze zwiększenie dysproporcji między dwoma kolorami przy użyciu lżejszej pomarańczowej i ciemniejszego niebieskiego.

Akcent w porównaniu z domyślnymi kolorami

An illustration for the Zopim homepage. Blue shades are dominant, with orange providing the accents — Ilustracja dla strony głównej Zopim. Niebieskie odcienie są dominujące, z pomarańczowym dostarczaniem akcentów (Kredyt obrazu: Nina Geometrieva)

Jeśli użycie każdego koloru jest znacznie inna, odpowiednio dostosuję wartości kolorów. Będąc odważnym kolorem akcentowym i grając bezpiecznie z domyślnymi kolorami, to moje podejście do podróży.

W pomarańczowo-niebieskim przykładzie, używałbym niebieski jako uspokajający kolor do wypełnienia większych obszarów, dla tła i dużych elementów, a niektóre dzikie pomarańczowe dla przycisków, ikon i innych małych elementów. W kontekście ilustracja miałbym błękitne odcienie jako podstawę, a znowu pomarańczowy jako akcent - być może w drodze podkreślania ciekawego detali lub ważnego elementu.

Kontrola równowagi wizualnej.

Niezależnie od tego, co kończysz, wykonując powyższe przewodniki, upewnij się, że zrobisz krok do tyłu i sprawdź, czy wszystko to ma sens razem. Istnieje tak wiele wyjątków z zasadami na ilustracji, że byłoby niemożliwe, aby wymienić wszystkie kombinacje, które rodzi niesamowitą ilustrację. Zawsze wypróbuj, które wydają się interesujące, a kiedy coś cię zaskakuje, upewnij się, że rozumiesz, abyś mógł zachować poprawę intuicji.

Ten artykuł pierwotnie pojawił się magazyn netto. wydać 286; Kupuj tutaj !

Powiązane artykuły

7 Web Design Dos and Naks
6 najlepszych portfeli Freelance 2016
6 najlepszych narzędzi Photoshop dla projektantów stron internetowych

Utwórz proste ilustracje dla sieci

Styl ilustracji

Reguły estetyczne

Kompleksowa ilustracja; Prosta paleta kolorów.

Monochromatyczne palety

Prosta ilustracja; Kompleksowa paleta kolorów.

Postrzegana luminancję

Akcent w porównaniu z domyślnymi kolorami

Kontrola równowagi wizualnej.

Jak - Najpopularniejsze artykuły

Jak narysować konia

Zbuduj komponent głowicy przyjazny SEO dla NextJS / React

Jak skonfigurować środowisko rozwoju lokalnego

Buduj teren w Houdini 17

Jak zmienić czcionkę na swoim Twitterze Bio

Popraw swoje umiejętności artystyczne w Photoshopie

Stwórz realistyczny rycerz fantasy

Wprowadzenie do testowania Frontend

Kategorie