#Flatdesign – wektorowa planeta w Adobe Illustrator

Z pewnością każdy z was zna termin „Flat design”, lecz jeżeli jakimś cudem umknął waszej uwadze to po krótce wyjaśnię – jest to styl stawiający na jak największą prostotę, nie spotkamy tutaj ani gradientów ani cieniowania, wszystko jest jak najbardziej uproszczone, zarówno kształty, kolorystyka jak i typografia. Właśnie te cechy sprawiają, że jest tak często stosowany w webdevie, infografikach, ikonach a nawet w brandingu. Przykłady? Jeden z moich ulubionych kanałów na youtubie, mianowicie Kurzgesagt. Jest to kanał poświęcony nauce, a w większości filmów do wizualnej prezentacji stosują właśnie grafiki wykonane w duchu flat’u, dzięki czemu są one prostsze w odbiorze. W tym wpisie pokażę Ci jak proste jest stworzenie prostej kosmicznej scenki inspirowanej właśnie twórczością ludzi odpowiedzialnych za Kurzgesagt.

Zaczniemy od stworzenia zwykłego prostkąta oraz koła (za pomocą narzędzie prostokąt oraz narzędzie elipsa), nadając im odpowiednio kolory wypełnienia #005073 oraz #107dac. Kolor tła natomiast ustawiłem na wartość #1e1e3a. Oczywiście zadbajcie o to, aby nasze figury były odpowiednio duże. Po ukończeniu tych operacji powinniście otrzymać mniej więcej coś takiego:

 

Następnym krokiem będzie skopiowanie naszych prostokątów. Najłatwiejszym sposobem aby tego dokonać będzie włączenie inteligentnych linii pomocniczych (widok > inteligentne linie pomocnicze) a następnie przytrzymanie klawisza alt oraz shift i pociągnięciu w dół lewym przyciskiem myszy, lecz oczywiście nie mam zamiaru wam zabraniać używania ctrl+c ctrl+v. Zalecam zrobić około 15 lub nawet więcej elementów, ja na tym etapie używałem ich zaledwie 7 i pod koniec nie wyglądało to za dobrze. Efekt oczywiście powinien wyjść mniej więcej taki:

 

Teraz należy nadać każdemu prostokątowi różne długości, aczkolwiek zachowując zasadę ‚jeden długi drugi krótki’ (oczywiście możecie kombinować w jaki tylko sposób checie, jednak na potrzeby poradnika radzę zastosować właśnie taki układ). Najlepiej każdy element wybrać narzędziem zaznaczenia bezpośredniego i nacisnąć ctrl na klawiaturze w celu szybkiego transformowania obiektu. Przykładowy efekt końcowy:

 

Kiedy mamy już swoją ‚antypiramidę’ wybieramy wszystkie prostokąty używając narzędzia zaznaczenia bezpośredniego oraz wybieramy opcję odnajdywanie ścieżek > połącz (dwa białe kwadraty nachodzące na siebie) znajdujące się po prawej stronie interfejsu. Po wykonaniu tej czynności wszystkie obiekty powinny się połączyć w jeden. Teraz przytrzymujemy klawisz shift i łapiemy za dowolny okrągły punkt na brzegach i przeciągamy na maxa w prawo. Możemy to również zrobić za pomocą narzędzia zaokrąglone rogi znajdującego się w efekty > stylizacja > zaokrąglone rogi w górnym pasku. Mimo obranej metody wynik powinnien być następujący:

 

Następnie wybieramy narzędzie zaznaczenie i za pomocą inspektora obracamy obiekt o 25°.

 

Przenosimy naszą figurę na wcześniej stworzoną elipse której to wykonujemy duplikat i przeciągamy gdzieś na bok. Natomiast dwie stykające się figury zaznaczamy i wybieramy odnajdywanie ścieżek > przetnij. Efekt powinien być następujący:

 

Obydwie figury nakładamy na siebie dzięki pomocy linii pomocniczych a następnie przesuwamy pociętą figurę na wierzch.

 

Obydwie figury grupujemy ze sobą a następnie wybieramy opcje efekty > stylizacja > blask zewnętrzny. Kolorem poświaty będzie kolor elipsy, mianowicie #107dac, przezroczystość ustawiamy na 100% a rozmycie na 55cm.

 

Po zakończeniu projektu tworzonego na potrzeby poradnika otrzymałem efekt ukazany na obrazku nr 1, lecz poświęcając na niego 30 minut więcej i używając dokładnie tych samych technik można uzyskać efekt ukazany na obrazku nr 2, powodzenia!

Dodaj komentarz

*Wypełnij wszystkie pola poprawnie

BYĆ MOŻE TO CIĘ ZAINTERESUJE

Dodane przez Alex Pietrzak | 5 marca 2018
Proces projektowania logotypu od podszewki
Stworzenie logo potrafi być wyzwaniem. W sytuacji, kiedy dostajesz zlecenie na stworzenie logotypu dla restauracji o wdzięcznej nazwie "Devil Burgers", a jedyna informacja jaką udaje Ci się uzyskać od klienta...