Przewodnik krok po kroku dotyczący projektowania niestandardowych ilustracji bez umiejętności rysowania

Widzę, że wiele firm używa dziś ilustracji lub obrazów stockowych. Chociaż te opcje są tanie, przekaz marki jest osłabiony, ponieważ wizualizacje nie dotyczą wyłącznie produktu.

W świecie, w którym 74% marketerów w mediach społecznościowych i B2B wykorzystuje elementy wizualne w swoich promocjach, sposób, w jaki wyróżniasz się wizualnie, ma kluczowe znaczenie.

Jeśli Twoja marka jest płodna, ludzie nauczą się języka wizualnego związanego z Twoją marką. Gdy tylko zobaczą te same ilustracje stockowe związane z innym produktem, tożsamość Twojej marki osłabnie.

Dzięki niestandardowym ilustracjom elementy tożsamości marki mogą łączyć się wokół wspólnej perspektywy i osobowości. Komunikują się z klientami na intuicyjnym poziomie i pomagają markom w trwały sposób opowiedzieć swoją historię.

Jednak wielu projektantów unika pracy jako ilustratorzy z obawy, że nie mają umiejętności rysowania. Jesteśmy tutaj, aby pokazać, jak każdy projektant może tworzyć piękne ilustracje bez konieczności rysowania.

Przyjrzymy się trzem popularnym stylom ilustracji i zastosujemy bardzo proste kroki, aby stworzyć własną grafikę od podstaw. Możesz śledzić i zastosować to, czego się nauczysz, aby stworzyć świetnie wyglądające elementy do następnego projektu.

Odtwórz słynną ilustrację kosmosu.

Projektantka i ilustratorka Nina Georgieva jest pionierem tego słynnego dzieła Dribbble, a teraz styl stał się sam w sobie trendem.

Czerpiąc inspirację z Georgievy, w kilku prostych krokach stworzymy własną ilustrację kosmiczną.

To właśnie dostaniesz w końcu.

1. Zacznij od gwiazd.

Używając „narzędzia gwiazdy” programu Illustrator, utwórz czteroramienną gwiazdę. Następnie spraw, aby był przezroczysty w 75 procentach.

Po zaznaczeniu zduplikuj go w miejscu, naciskając Ctrl+C, a następnie Ctrl+F.

Zmniejsz kształt z przodu.

Następnie dodaj efekt świecenia; wybierz większy kształt; i zastosuj efekt „Rozmycie Gaussa” z panelu „Wygląd”.

Na koniec możesz przechowywać swój kształt gwiazdy w panelu „Symbole”, aby użyć go później w kompozycji.

2. Utwórz kształt chmury.

Układaj razem prostokąty o różnych szerokościach.

Połącz je razem z panelem „Pathfinder”.

Zakończ, nadając całemu kształtowi wysoką wartość „promienia naroża”.

3. Zrób teksturę planety z chmur

Zaczynając od kształtu chmury, stwórz efekt tekstury planety, jak pokazano powyżej.

Ułóż razem wiele kształtów chmur i upewnij się, że masz szereg krzywych zewnętrznych i wewnętrznych, aby utworzyć falisty wzór.

4. Dostosuj teksturę.

Uprość falisty wzór przed nałożeniem go na kształt planety.

Usuń dodatkowe punkty po jednej stronie tekstury i spłaszcz ją.

5. Stwórz teksturowaną planetę.

Nałóż falisty wzór na okrąg i utwórz podział za pomocą opcji „Podziel” w panelu „Odnajdywanie ścieżek”.

Usuń dodatkowy kształt utworzony poza okręgiem i stwórz efekt oświetlenia, stosując różne wartości szarości po każdej stronie planety.

6. Dodaj atmosferę do planety.

Utwórz dwa większe okręgi i wklej je za planetą za pomocą Ctrl+X, a następnie Ctrl+B.

Dopasuj je odpowiednio.

Dodaj przezroczystość do nowych kręgów i efekt rozmycia do trzeciego kręgu (w panelu „Wygląd”).

Grupuj (Ctrl+G) i przechowuj wynik w panelu „Symbol”.

7. Powiel i pokoloruj planety.

Skopiuj kilka kształtów planet z panelu „Symbole” i pokoloruj je ponownie, używając dwóch różnych kolorów dla każdej strony.

Użyj „Narzędzia do bezpośredniego zaznaczania (A)”, aby wybrać i „Narzędzia do zakraplania (I)”, aby wybrać i zastosować kolor.

8. Skaluj i ustawiaj swoje planety

Przesuwaj planety w różnych pozycjach za pomocą „Narzędzia wyboru (V)” i nadaj im różne rozmiary, przeciągając białe rogi, które pojawiają się po wybraniu (utrzymaj klawisz „Shift”, aby uzyskać proporcjonalne skalowanie).

9. Dodaj pierścienie.

Narysuj kilka linii okręgów wokół planet, aby utworzyć pierścienie.

Aby wkleić mniejsze planety przed pierścieniami, zaznacz je, a następnie naciśnij Ctrl+X (wytnij) i Ctrl+F (wklej z przodu).

10. Dodaj trochę chmur i gwiazd na niebie.

Wracając do panelu „Symbol”, przeciągnij i upuść kilka kształtów chmur i gwiazd.

Powiel, skaluj i rozmieszczaj je w dowolnej przestrzeni.

Oto ostateczny wynik.

Baw się skalą, pozycją i kolorami, aby naprawdę dostosować je do swoich potrzeb.

Dodaj trochę typografii i voila, masz nowe, dostosowane tło pulpitu.

Odtwórz styl ilustracji na blogu Toptal

Blog Toptal jest cennym źródłem spostrzeżeń i inspiracji stworzonych przez największe talenty na całym świecie. Podobnie jak ten, który właśnie czytasz, większość artykułów zawiera ilustracje wspierające treść. Do przedstawiania obiektów używamy prostych geometrycznych kształtów i jasnych kolorów.

Zobaczmy, jak możesz zastosować ten styl do tworzenia własnych ilustracji jedzenia.

To właśnie dostaniesz w końcu.

1. Narysuj prosty narybek.

Aby stworzyć narybek, zacznij od długiego prostokąta i dodaj wiele punktów na krawędziach za pomocą „Narzędzia Pióro (P)”.

Dostosuj kształt, przesuwając punkty, używając „Narzędzia do bezpośredniego zaznaczania (A)”.

2. Utwórz pojemnik na majonez.

Utwórz trzy koła o zmniejszających się rozmiarach, od tyłu do przodu.

Zewnętrzny okrąg to pojemnik, środkowy (w kolorze białym) to majonez, a wewnętrzny, mniejszy okrąg (z kolorowym obrysem) służy do efektu oświetlenia.

Przetnij wewnętrzny okrąg na pół i upewnij się, że „Cap” i „Corner” z panelu „Stroke” są okrągłe.

3. Zrób keczup i musztardę.

Powiel filiżankę majonezu, aby uzyskać musztardę i keczup.

Po prostu nałóż różne kolory na sos i światło, jak sugerowano powyżej.

4. Dodaj sałatę w kształcie fali.

Za pomocą „Narzędzia Pióro (P)” wykreśl linię prostą i dodaj do niej kilka punktów.

Rozłóż ich odstępy w poziomie z panelu „Wyrównaj”.

Przeciągnij w dół zmieniające się punkty i zaokrąglaj każdy róg do maksimum, aż będzie całkowicie gładki.

5. Stwórz kromkę chleba.

Stwórz długi owal; nałóż go na kształt fali i utwórz podział, korzystając z opcji „Podziel” z panelu „Wyszukiwarka ścieżek”.

Usuń dodatkowy kształt uzyskany z narzędzia „Podziel”, a następnie ponownie pokoloruj kromkę chleba.

6. Zrób burgerowy chleb.

Odbij kromkę chleba w pionie i dodaj punkt przechylenia do górnej warstwy.

Zaokrąglij tę krawędź, aby uzyskać gładką bułkę do burgera.

7. Dokończ burgera.

Pokoloruj sałatę na zielono.

Następnie utwórz różne „Zaokrąglone prostokąty” dla mięsa, sera i pomidorów, używając odpowiednio brązowego, żółtego i czerwonego koloru.

Przesuwaj rzeczy, aby odpowiednio ułożyć burgera.

8. Stwórz hot doga z burgera.

Zaczynając od ilustracji z burgerem, usuń pomidory i ser, pokoloruj sałatę na majonez i musztardę i powtórz dolny chleb, aby uzyskać bardziej symetryczny hot doga.

9. Zaprojektuj kształt pizzy.

Zacznij od górnej warstwy burgera, przesuń dolne punkty w dół i zbliż je do siebie.

Powiel kształt trójkąta, zmniejsz go i spraw, aby był żółty, aby uzyskać tandetną podstawę.

10. Dodaj kształty pomidorów.

Nałóż duży czerwony okrąg z mniejszymi wewnętrznymi okręgami i użyj opcji „Minus Front” z panelu „Pathfinder”.

Umieść wiele plasterków pomidora o różnych rozmiarach i pozycjach na kształcie pizzy.

11. Stwórz kilka plasterków mięsa.

Narysuj organiczny brązowy kształt za pomocą duplikatu „Pióro (P)” i wyskaluj go na wierzch swojej pizzy.

12. Dodaj dodatkowe dodatki.

Dodaj mniejsze, kolorowe, zaokrąglone pociągnięcia w pustych przestrzeniach, aby wykończyć dodatki do pizzy.

13. Stwórz słomkę.

Gwiazda z długim białym prostokątem.

Dodaj dwa punkty za pomocą „Narzędzia Pióro (P)” i przesuń górne krawędzie, aby wygiąć słomkę.

Skopiuj i wklej środkowy punkt na prawej krawędzi, a następnie zastosuj do niego czerwoną kreskę bez wypełnienia.

Przesuń czerwoną linię na środku białego prostokąta.

14. Stwórz puszkę po napojach.

Narysuj ośmioboczny wielokąt; dodaj puszkę; przesuń cztery górne punkty w górę; i przesuń (S) górną i dolną krawędź na zewnątrz, aby wyglądała bardziej jak puszka.

Dodaj zaokrąglone prostokąty na górze i na dole, aby utworzyć felgi.

15. Dostosuj kształt puszki i skaluj słomkę.

Przesuwaj punkty, aby dostosować kształty, a następnie przeskaluj puszkę i słomkę do odpowiednich proporcji.

16. Zakończ z wzorem fali na puszce.

Narysuj na puszce organiczny i falisty kształt.

Następnie utwórz podział za pomocą panelu „Pathfinder” i usuń dodatkowe kształty zewnętrzne.

Oto ostateczny wynik.

Odtwórz ilustrację inspirowaną grą Monument Valley

Monument Valley to najlepiej sprzedająca się gra stworzona przez studio UsTwo. Zdobył dziesiątki nagród, w tym najlepszą grę Apple na iPada z 2014 roku, a jej ilustracyjny styl jest inspirowany piękną geometryczną grafiką Eschera.

Teraz dowiesz się, jak łatwo stworzyć ten sam styl wizualny, który sprawił, że ta gra odniosła tak ogromny sukces.

To właśnie dostaniesz w końcu.

Jako cegiełek dla całej ilustracji użyjesz tylko samolotów i sześcianów.

Paleta kolorów obejmuje cztery kolory wody, trawy, drewna i budynku – każdy w trzech odcieniach symulujących naturalne światło.

1. Utwórz płaszczyznę izometryczną.

Zacznij od kwadratu, a następnie wykonaj te trzy kroki, aby utworzyć kształt izometryczny. Zwróć uwagę, ponieważ będziesz powtarzać ten proces za każdym razem, gdy będziesz potrzebować innego izometrycznego kształtu.

Nazwiemy to „efektem izometrycznym”:

Przejdź do Effect > 3D > Extrude & Bevel Wybierz „Isometric Top” w menu rozwijanym „Position” – w panelu opcji, który się pojawi. Ustaw „Głębokość wyciągnięcia” na zero w pierwszej opcji „Wyciągnięcie i ukos”.

Masz teraz płaszczyznę izometryczną.

Aby lepiej bawić się kształtem, przejdź do Obiekt > Rozwiń wygląd.

Dzięki temu będziesz mógł zmieniać kolor samolotu i swobodnie przesuwać punkty.

Nazwiemy to „efektem rozszerzenia”.

2. Śledź twarze wyspy.

Aby utworzyć trzy powierzchnie kształtu wyspy, utwórz kwadrat i dwa wydłużone prostokąty.

Powtórz „Efekt izometryczny” na każdym.

W kroku drugim zastosuj odpowiednio „Góra izometryczna”, „Góra izometryczna” i „Prawo izometryczna”.

3. Uzupełnij i pokoloruj podstawę wyspy.

Zastosuj „Efekt rozszerzenia” i pokoloruj każdą twarz różnymi odcieniami zieleni, z najjaśniejszym zawsze na wierzchu.

4. Utwórz sześciany w perspektywie.

Zastosuj „Efekt izometryczny” na trzech kwadratach, z izometrycznym lewym, górnym i prawym w kroku drugim. To daje ci trzy twarze, których potrzebujesz, aby uzyskać sześcian izometryczny.

Zwróć uwagę, że każdy obiekt na ilustracji będzie miał tylko trzy twarze. Na tym polega piękno perspektywy izometrycznej.

5. Skomponuj kostkę.

Uwolnij kształty za pomocą „Efektu rozwinięcia”, połącz twarze i zastosuj trzy odcienie szarości, aby symulować oświetlenie.

Wskazówka: najjaśniejszy odcień jest zawsze na wierzchu; najciemniejszy, po prawej; a ton środkowy po lewej stronie. Zastosowanie tego do każdego kształtu na ilustracji stworzy wrażenie naturalnego światła.

6. Uruchom podstawę drzewa.

Wykonaj te same kroki, co sześcian izometryczny, i tym razem wydłuż lewą i prawą ścianę przed połączeniem całości.

Następnie zastosuj trzy odcienie brązu, aby przedstawić drewno.

7. Dokończ drzewo.

Zmniejsz kory drzewa; zduplikować kostkę; i pokoloruj jego twarze, tak jak ukształtowanie terenu na zielono.

8. Użyj kostki do tworzenia klocków

Powiel kostkę i pokoloruj ją na różowo jako materiał budowlany.

Baw się skalą; przesuń niższe punkty w dół, aby utworzyć podstawę wieży; i zmniejsz go, aby stworzyć filar.

9. Zmontuj wieże.

Dopasuj podstawę wieży i różową kostkę.

Zostaw trochę miejsca między nimi i umieść trzy filary w tej przerwie.

Aby uzyskać idealne wyrównanie, upewnij się, że ustawiłeś „Przyciągaj do punktu” i „Inteligentne prowadnice” w opcji menu „Widok”.

10. Mostuj wieże.

Wybierz górny i prawy punkt z górnej płaszczyzny i uchwyć punkty z równoważną płaszczyzną w podwójnej wieży.

Po prostu zduplikuj i zmień rozmiar płaszczyzny po prawej stronie, aby utworzyć krawędź dla mostu wieży.

11. Stwórz schody.

Skopiuj i wklej trzy twarze z wieży; wyrównaj krawędzie, aby utworzyć blok; a następnie przesuń dolne punkty, aby utworzyć stopień z jednym schodkiem.

Zduplikuj i ustaw kroki kilka razy.

12. Zamknij schody.

Wyrównaj punkty z lewej strony, aby zamknąć szczeliny od schodów.

13. Odwróć schody.

Wybierz ukończone schody i użyj narzędzia „Odbij (O)”, aby utworzyć drugi blok skierowany w lewo.

Upewnij się, że zmieniłeś kolory lewej i prawej powierzchni, aby uwzględnić efekt oświetlenia – ciemniejszy odcień po prawej stronie, średni odcień po lewej i jaśniejszy odcień na górze.

14. Połącz schody.

Przymocuj kilka kostek do schodów, aby utworzyć stopnie i połącz je z wieżami.

15. Stwórz efekt głębi wody.

Powiel i zmniejsz jasnoniebieską powierzchnię.

Umieść go w różnych pozycjach i dodaj jeszcze ciemniejszy odcień niebieskiego, aby zakończyć efekt głębi morza.

16. Uruchom talię, korzystając z istniejących samolotów

Podobnie jak w przypadku schodów i mostu na wieży, zacznij od istniejących ścian, następnie odpowiednio wyrównaj punkty, aby zamknąć kształt, a na koniec nałóż brązowe odcienie drewna.

17. Dodaj filary do talii.

Wybierz korę drzewa, a następnie zduplikuj, zmniejsz i ustaw, aby utworzyć filary pokładu.

Oto ostateczny wynik.

Możesz dodać większe, ciemne plamy na morzu lub mniejsze, kolorowe kwadraty izometryczne na płaszczyźnie wyspy, aby symulować trawę i kwiaty.

Ogólnie baw się dobrze, przesuwaj i buduj fajne wieże, używając prostych klocków, których się właśnie nauczyłeś.

Podsumowując

Jak widzieliśmy w tych trzech przewodnikach, nie potrzebujesz zbyt wielu umiejętności rysowania, aby stworzyć dobrze wyglądające ilustracje.

Wszystko, o czym musisz pamiętać, to te 3 zasady:

• Zacznij od jasnego pomysłu lub koncepcji - co przedstawiasz?
• Zainspiruj się istniejącymi dziełami sztuki i stylami — kradnij jak artysta.
• Obserwuj i przekształcaj złożone elementy w podstawowe kształty geometryczne, z których możesz pracować - zachowaj prostotę.

Baw się, tworząc własne ilustracje i przesyłając nowe dzieło sztuki w Dribbble i w innych miejscach w Internecie. Cieszyć się!

• • •

Dalsza lektura na blogu Toptal Design:

• eCommerce UX – przegląd najlepszych praktyk (z infografiką)
• Znaczenie projektowania zorientowanego na człowieka w projektowaniu produktu
• Najlepsze portfolio projektantów UX – inspirujące studia przypadków i przykłady
• Zasady heurystyczne dla interfejsów mobilnych
• Projekt przewidujący: jak tworzyć magiczne doświadczenia użytkownika