pasjaonline.pl
asj
asj
asj
asj
Wstąp w świat grafika #1 – Tworzymy ikonę
autor

Hubert Murawski

date

Cześć, czytając wasze komentarze oraz wiadomości doszedłem do wniosku, że dalszy rozwój „Od Psd do WordPressa” wznowimy, po zagłębieniu się w podstawy grafiki. W tej serii głębiej omówimy w jaki sposób tworzyć projekty oparte o Google Material Design, co nam wolno robić, a czego nie powinniśmy tworzyć w projektach.

Przeglądając bibliotekę ikon stworzoną przez Google, brakowało mi w niej megafonu, dlatego w pierwszym wpisie z nowej serii poruszymy temat teoretycznie banalnie prosty,  stworzymy ikonę opartą o GMD.

Na początku zacznijmy od samego szkicu, w moim przypadku używałem tabletu graficznego, jeżeli nie posiadacie takiego urządzenia, to równie dobrym sposobem jest kartka i ołówek.

 

Następnym krokiem będzie pobranie pliku z gridem ikony, przygotowanego przez Google –link.

 

Wrzućmy grid do illustratora i stwórzmy 2 zaokrąglone prostokąty:

 

Odchudźmy je do 1 px oraz dodajmy 2 linie o grubości 1 kratki:

 

Stwórzmy teraz zaokrąglony prostokąt wielkości 5 kratek:

 

Następnie dodajmy kwadrat o długości 5 kratek i wysokości półtora kratki umieszczając go pod górną granicą poprzedniego obiektu:

 

Dodajmy nowy zaokrąglony prostokąt o długości 3 kratek:

 

Umieścimy go teraz po środku poprzednio stworzonych obiektów oraz przesuńmy go o jedną kratkę w górę. Następnie użyjmy 2 opcji w pathfinderze:

sss

 

efekt:

12

 

Teraz nasz prostokąt dopasujmy do 1 kratki. Korzystając z pathfindera jak w poprzednim punkcie utnijmy trochę prawy bok:

 

Dosuńmy rączkę do gramofonu i dodajmy do niego wizualizacje światła:

27

 

Pozostało nam tylko wyśrodkować rączkę oraz nałożyć kolor zgodny ze specyfikacją ikon Google, która znajduje się tutaj.

 

Swoje prace możecie nadsyłać na naszego maila: kontakt@pasjaonline.pl – najlepsze ikony wybiorę i przedstawię w kolejnym wpisie z serii.

Powodzenia!