Inny wymiar, nowe mistrzostwo – samouczek ilustracji izometrycznych

Ilustracja nie ma sobie równych pod względem zdolności do pobudzania zwykłych obiektów i przekazywania złożonych pomysłów z wizualną wyrazistością, ale co z ilustracjami izometrycznymi? Czy nie są one notorycznie trudne i czasochłonne? Ten samouczek z ilustracją izometryczną w sześciu prostych krokach sprawia, że ​​proces jest szybki i nieskomplikowany.

Chcesz ożywić stronę docelową? Wizualizuj nudne dane? Dodać dziurkacz do mdłego opakowania? Ilustracja jest odpowiedzią na wszystkie fronty.

W ostatnich latach ilustracje izometryczne zyskały popularność ze względu na sposób, w jaki przedstawiają trójwymiarową głębię w dwuwymiarowej przestrzeni. Ponadto siatka izometryczna neguje potrzebę utrzymywania iluzji perspektywy, która jest powszechnym źródłem frustracji ilustracyjnej.

W programie Adobe Illustrator tradycyjny proces ilustracji izometrycznej jest żmudny. Zrób siatkę izometryczną, narysuj kwadrat, pochyl go -30°, obróć -30°, w kółko. Na szczęście jest lepszy sposób. Program Illustrator oferuje efekty 3D, które przyspieszają i ułatwiają wykonywanie ilustracji izometrycznych: „Wyciągnij i ukosuj”, „Obróć” i „Obróć”.

Ten samouczek pokazuje, jak tworzyć ilustracje izometryczne za pomocą „Obrót”, ale spostrzeżenia dotyczą także pozostałych efektów 3D programu Illustrator.

Gotowy zaimponować klientom, zachwycić użytkowników i poznać tajniki ilustracji izometrycznej?

Revolve & Refine: samouczek dotyczący ilustracji izometrycznych

Kto nie lubi lodowatego napoju? Uczcijmy radość płynnego orzeźwienia projektując izometryczną butelkę z etykietą.

*Wskazówka dla profesjonalistów: Przed rozpoczęciem znajdź odniesienie do obiektu, aby poinformować, jak będzie wyglądać butelka.

Krok #1: Narysuj butelkę i płyn

1.1) Utwórz nowy dokument Adobe Illustrator.

1.2) Dodaj odniesienie do butelki do dokumentu.

1.3) Narysuj kontur butelki i znajdującej się w niej cieczy.

1.4) Podziel butelkę i płyn na pół (jak pokazano poniżej).

1.5) Grubość obrysu konturu butelki określa grubość szkła.

* Wskazówka dla profesjonalistów: skopiuj i wklej grafikę poza obszarem roboczym jako kopię zapasową.

Krok #2: Zastosuj efekt Revolve

Jak sama nazwa wskazuje, „Revolve” obraca kształt wokół własnej osi. W programie Illustrator pozycja osi „Obrót” jest ustalona w pionie. Dlatego butelka została obrysowana i podzielona na pół.

*Wskazówka dla profesjonalistów: ani kontur butelki, ani płynny obiekt nie powinny mieć gradientów jako kolorów wypełnienia.

2.1) Aby znaleźć efekt „Revolve”, przejdź do: Effect > 3D > Revolve…

2.2) W górnej części okna dialogowego znajduje się pole „Pozycja”. Wybierz „Izometryczny lewy”.

2.3) Kąt – Jest to stopień obrotu wokół osi obiektu. Jeśli ustawiono na 180°, wynikiem będzie butelka podzielona pionowo na pół. Ustaw kąt na 360 °, aby uzyskać w pełni obrotową butelkę.

2.4) Przesunięcie – Kontroluj odległość przesunięcia od pionowej osi obiektu. Wpisz „0”.

2.5) Powierzchnia – Ustaw właściwości materiału i oświetlenia obiektu. Wybierz „Bez cieniowania”.

Ta-da! Butelka izometryczna z płynem. Czas odpocząć, zrelaksować się i czekać! Ta butelka potrzebuje etykiety.

*Wskazówka dla profesjonalistów: Nie używaj funkcji „Rozszerz wygląd” na butelce, dopóki etykieta nie zostanie utworzona.

Krok 3: Przygotuj etykietę

3.1) Użyj butelki, aby określić wymiary etykiety.

3.2) Na przykładowym obrazku (poniżej) wysokość etykiety na ciele jest widoczna, ale wysokość etykiety na szyi nie jest wyraźna, ponieważ powierzchnia nie jest równoległa do osi. Wystarczy przybliżona wysokość.

3.3) Długość etykiety oblicza się ze wzoru na obwód koła 2πr.

3.4) Po zaprojektowaniu zadowalającej etykiety, przekształć obie etykiety w symbole. Paleta „Symbole” znajduje się w: Okno > Symbole

3.5) Indywidualnie przeciągnij i upuść projekty etykiet do palety, aby utworzyć symbole.

*Uwaga: Symbole w programie Illustrator i Sketch działają podobnie.

Krok 4: Przypisz etykietę do butelki

Dopóki butelka nie została zwektoryzowana przy użyciu funkcji „Rozwiń wygląd”, można ją w pełni edytować.

4.1) Wybierz butelkę i wyświetl paletę „Wygląd”: Okno > Wygląd

4.2) Następnie wybierz „3D Revolve” i pojawi się okno dialogowe z poprzedniego.

4.3) Aby odwzorować projekt na butelce, kliknij lewą dolną opcję: „Map Art”.

4.4) Umożliwia to wybór i dopasowanie symbolu butelki.

4.5) Upewnij się, że symbol został dopasowany do właściwej powierzchni (patrz poniżej).

4.6) Kliknij „Skaluj, aby dopasować”, a etykieta zostanie odwzorowana na butelce.

4.7) Wykonaj te same kroki dla etykiety na szyi.

Krok 5: Unikaj niechlujnego pliku

5.1) Teraz nadszedł czas, aby zmienić butelkę w krzywe Beziera za pomocą funkcji „Rozwiń wygląd”: Obiekt > Rozwiń wygląd

Program Illustrator nie jest przeznaczony przede wszystkim do manipulacji obiektami 3D. Rozszerzanie wyglądu obiektu tworzy zgrupowaną kolekcję mniejszych elementów, które dają iluzję obiektu 3D.

5.2) Aby zachować porządek, połącz elementy za pomocą narzędzia „Pathfinder” lub „Shape Builder” (patrz poniżej).

*Wskazówka dla profesjonalistów: łączenie obiektów tworzy niechciane punkty zakotwiczenia. Zmniejsz je, przechodząc do Obiekt> Ścieżka> Uprość. Dla tych, którzy regularnie korzystają z programu Illustrator, wysoce zalecana jest wtyczka VectorScribe i jej narzędzie do usuwania punktów.

Krok #6: Dodaj życie kolorami i gradientami

W ostatnim kroku ożyw butelkę za pomocą kolorów i gradientów. W tym miejscu do gry wkracza indywidualny artyzm. Dodaj odbicia, światła i cienie, aby uzyskać realistyczny wygląd, lub użyj pociągnięć i uproszczonej palety kolorów, aby uzyskać bardziej graficzny klimat. Dzięki solidnej podstawie możliwości stylistyczne są nieograniczone.

Pozdrowienia dla ilustracji izometrycznych!

Izometryczne ilustracje nadają głębi, wymiarowości i osobowości szerokiej gamie projektów projektowych. Skorzystaj z zasad przedstawionych w tym samouczku, aby poznać więcej możliwości izometrycznych, i nie zapomnij wypróbować innych efektów 3D programu Illustrator: „Obróć” i „Wyciągnij i ukosuj”.

Pozwól nam wiedzieć co myślisz! Zostaw swoje przemyślenia, komentarze i opinie poniżej.

• • •

Dalsza lektura na blogu Toptal Design:

• Wizualny okres przydatności do spożycia — dlaczego ilustracje do projektowania stron internetowych stają się nieaktualne
• Przewodnik krok po kroku dotyczący projektowania niestandardowych ilustracji bez umiejętności rysowania
• Nowe rzeczywistości: VR, AR, MR i przyszłość designu
• Krawędź projektanta — przegląd wtyczek programu Photoshop
• Ewoluujące emotikony: projektowanie z myślą o nowej odsłonie wiadomości