Podczas codziennej pracy grafika, często korzystamy z ikon, czy to w projektach strony internetowych, aplikacji czy materiałach drukowanych. Aby zminimalizować czas poświęcony projektowi, pobieramy ikony z darmowych stron oferujących takie zasoby. Niestety nie zawsze wiemy, gdzie szukać albo zajmuje to więcej czasu, niż byśmy chcieli. Ten poradnik pokazuje, jak narysować prostą ikonę typu line icon i zapisać ją jako SVG.

Photoshop czy Illustrator?

Pracujemy w różnych programach graficznych, ale tak naprawdę dopiero ich połączenie daje nam całkowity komfort. Osobiście uważam, że jedne rzeczy powinno się projektować w Photoshopie, a inne w Illustratorze. Dlatego tematem tego wpisu będzie Illustrator, bo on daje nam największą swobodę w pracy z różnymi kształtami i nie zamyka drzwi na późniejsze zmiany. Illustrator,, w przeciwieństwie do Photoshopa, to większa ilość narzędzi do edycji obiektów i przede wszystkim praca na wektorach od początku do końca.

Rysujemy ikonę w Illustratorze

Narysujmy prostą postać, a raczej głowę z okularami VR; wirtualna rzeczywistość to dość popularny ostatnio temat.

  1. Stwórzmy sobie nowy artboard w Illustratorze; najlepiej w formie kwadratu( wymiary nie mają większego znaczenia na tym etapie).
  2. Generalnie możemy się posługiwać, albo gotowymi kształtami, jak Rectangle tool (M), a następnie je modyfikować pod nasze potrzeby, albo mamy również Pen tool (P), który pozwala nam na tworzenie kształtu od podstaw; punkt po punkcie.
  3. Narysujmy gotowy kształt Rounded Rectangle dostępny w pasku po lewej stronie po rozwinięciu listy kształtów, o której pisałem powyżej. Nadajmy mu tak jak i innym kształtom, które będziemy tworzyć później, wypełnienie w kolorze białym oraz obrys w odcieniu szarości. Obie opcje są dostępne w lewym górnym rogu interfejsu zaraz pod menu.
  4. Teraz będziemy musieli dostosować kształt narysowanego prostokąta na wzór okularów, przesuwając punkty w odpowiednie miejsca. Do tego typu zadań służy Direct Selection Tool (A). Łapiemy dany punkt i go przesuwamy. Możemy też modyfikować linie, które od niego odchodzą tzw. wąsami.
  5. Gdy chcemy dodać jakiś nowy punkt, wybieramy narzędzie Pen i  wciskamy klawisz “+”, analogicznie dla usuwania. Na poniższym zdjęciu widać, jak ścieżki przechodzą przez kształt.
  6. Kolejnym krokiem będzie narysowanie zaczepu, który znajduje się nad głową. W tym celu również wykorzystamy Rectangle tool, ale tym razem bez zaokrągleń, bo zrobimy je sami. Zaznaczając jakiś obiekt możemy zauważyć w jego rogach okrągły kształt. Wystarczy że złapiemy za niego i przeciągniemy go do środka obiektu.
  7. Kształtem głowy będzie spłaszczona elipsa. Pamiętajmy, aby przesunąć ją na sam spód.
  8. Rysując powtarzalne obiekty, jak dolna cześć twarzy na naszej grafice, możemy się posłużyć prostą sztuczką i narysować tylko jej lewą część, a następnie ją sklonować i odbić. Gdy narysujemy jedną stronę Pen toolem kliknijmy na niej prawym przyciskiem i z list wybierzmy transform > reflect. W oknie zaznaczamy opcję vertical i klikamy copy. Tworzy nam się duplikat tej warstwy, teraz wystarczy ją tylko odpowiednio ustawić.
  9. Na koniec narysujmy usta i przycisk na okularach według już poznanych technik.
  10. Ikona jest gotowa i czas ją odpowiednio przygotować do eksportu. Zaznaczamy wszystkie elementy oprócz przycisku i sprawdzamy, czy grubość linii jest taka sama. Jeśli nie jest, zmieniamy na odpowiednią wartość 7 px oraz wyłączamy obrys. Informacja o tym jest na samej górze.  Zamienimy wszystkie obrysy na obiekt, aby w kolejnym kroku pozbyć się zbędnych ścieżek, które są teraz widoczne. Zrobimy to w menu object > path > outline stroke.
  11. Najlepszym narzędziem do tego typu prac jest Pathfinder dostępny w menu window. Opcja minus front z tego panelu wytnie warstwę, która jest powyżej w tej pod spodem. W tym przypadku najlepiej wykorzystać warstwę z okularami, trzeba ją skopiować dwa razy i wkleić w to samo miejsce (Ctrl+f) . Każda taka skopiowana warstwa będzie służyć do odcięcia jednego z elementów. Wszystkie zbędne ścieżki, które zostały nam po tej operacji zaznaczmy i naciskamy klawisz delete.
  12. Tak przygotowany obiekt możemy wyeksportować do SVG.

Eksport do SVG

Nie będę rozpisywać się na temat, co to jest SVG, bo zrobię to szerzej w osobnym wpisie. W naszym przypadku będzie to wektorowy plik graficzny do użytku na stronie internetowej jako ikona. Dzięki swoim właściwością jest on zawsze idealnie ostry na każdym urządzeniu. W menu file wybieramy opcje export > export as i następnie SVG. Jeśli zaznaczmy opcje use artbord zostanie wyeksportowany również artboard. Zostawmy ją odznaczoną, a otrzymamy plik o wymiarach stworzonej ikony.