Sposobów na stworzenie ikonek jest prawdopodobnie tyle ile stylów, w jakich mogą one powstać. Jedną z zalet dobrze wykonanej ikonki jest możliwość jej skalowania do odpowiedniego rozmiaru (ewentualnie jej responsywne warianty, ale to temat na inny wpis). W dzisiejszym tutorialu zamierzam przygotować set ikonek przydatnych przy tworzeniu layoutu sklepu internetowego z wykorzystaniem prostej techniki zamiany odręcznego rysunku na wektorowy kształt w Photoshopie.

Po co wektorowy kształt i dlaczego w Photoshopie, a nie np. Illustratorze? Wektor w odróżnieniu od grafiki rastrowej jest całkowicie skalowalny w obie strony, co znaczy, że możemy go dowolnie powiększać i pomniejszać bez straty na jakości. Dlaczego zatem nie używam programu do grafiki wektorowej, w którym od razu mogę narysować wektorowe ikonki? Ponieważ wygodniej jest mi rysować w Photoshopie. Skoro istnieje prosta technika zamiany rastrowego rysunku na wektor, to dlaczego miałabym sobie utrudniać poprzez zmianę ulubionego narzędzia?

Do czego dążymy:

Krok 1

Zaczynamy od przygotowania odręcznych rysunków ikonek:

– koszyk
– zaloguj się/wyloguj się
– wyszukiwanie
– home
– newsletter
– promocja

Do wykonania tego kroku możemy posłużyć się tabletem graficznym, albo innym urządzeniem, które daje nam możliwość wprowadzania odręcznych rysunków (np. smartfony z rysikami) jeśli dają one satysfakcjonujące efekty. Możemy także przygotować szkice na zwykłej kartce i je zeskanować.

Na potrzeby tego szybkiego poradnika użyję swoich szkiców przygotowanych przy pomocy tabletu graficznego.
Istotne jest, aby rysunek został przygotowany (czy też zeskanowany) w wysokiej rozdzielczości (minimum 300 ppi), dzięki temu poszczególne linie nie będą sprawiały wrażenia rozpikselowanych po zamianie na wektor. Trudno wyobrazić sobie rozpikselowany wektor, ale chodzi o to, że linia będzie gładka, mniej poszarpana, bez niepotrzebnych punktów kontrolnych układających się w charakterystyczne „schodki”.

Dla swojego nowego dokumentu ustawiłam następujące parametry:

Najpierw wybieramy odpowiedni brush. Będziemy potrzebować mocnych, czytelnych linii, dlatego wybieramy okrągły pędzel o twardości 100%, a kolor ustawiamy na kontrastujący z tłem (#000000):

Krok 2

Mamy już satysfakcjonujące rysunki ikonek…

…teraz powinniśmy je dokładnie zaznaczyć. Celowo narysowałam ikonki na warstwie tła, a nie osobnej, aby pokazać Wam, jak można postępować również w przypadku skanu, gdzie rysunek i tło będą stanowiły jedną warstwę.

W menu wybieramy Zaznacz>Zakres koloru (Menu>Select>Color Range):

Następnie na pasku opcji wybieramy Popraw krawędź (Refine Edge):

W tym przypadku warto zmienić podgląd na ten wskazany poniżej, dzięki temu będziemy doskonale widzieć, czy dobrze skorygowaliśmy zaznaczenie (rysunek powinien pozostać czarny, a przestrzeń dookoła czerwona, bez białych obszarów):

Korygujemy zaznaczenie:

Ponieważ będziemy zajmować się jedną ikonką na raz, powinniśmy odznaczyć pozostałe ikonki przy pomocy narzędzia Prostokątne zaznaczenie (Rectangular Marquee Tool) z wciśniętym klawiszem Alt.

Krok 3

Kiedy zaznaczenie spełnia nasze wymagania klikamy na nim prawym przyciskiem myszy i wybieramy Utwórz ścieżkę roboczą (Make Work Path):

Mamy już wektor, ale żeby stał się on pełnoprawną ikonką, której będziemy używać w dowolnym momencie wybieramy narzędzie Prostokąt (Rectangle Tool), klikamy prawym przyciskiem myszy i wybieramy Zdefiniuj kształt własny (Definite Custom Shape):

Teraz wybieramy narzędzie Własny kształt (Custom Shape Tool) i na rozwijanej liście widzimy podgląd naszej świeżo utworzonej ikonki:

Podobnie postępujemy z pozostałymi ikonkami.
Cały set wygląda następująco…:

…i jest dostępny do pobrania tutaj.
Mam nadzieję, że dzisiejszy szybki poradnik przyda się wszystkim tym, którzy nie znali tej techniki zamiany grafiki rastrowej na wektorową.
 

Podziel się dobrocią!