Jak tworzyć ikony przy pomocy Adobe Illustrator

ikona-title.jpg

Jednym z istotniejszych elementów interfejsu użytkownika są ikony. Wprawdzie w sieci dostępne jest wiele darmowych zestawów ikon i przycisków, ale czasem chcielibyśmy, aby były one niepowtarzalne. Dziś pokarze jak prosto można stworzyć takie elementy graficzne. Rozpoczynamy od wybrania podstawowych elementów, czyli bazy. Może to być dowolna figura geometryczna. Ja wybrałam kwadrat z okrągłymi rogami. Jeżeli chcemy odgórnie zdefiniować wymiary naszego kwadratu wystarczy, że po wybraniu Narzędzia Prostokąt Zaokrąglony klikniemy raz w dowolne miejsce pojawi nam się okno z możliwością podania dokładnych parametrów figury.

Prostokąt zaokrąglony

Stworzyłam 3 elementy o wymiarach: 120x120 r25, 110x110 r20 i 100x100 r15. Obiekty wyśrodkowałam względem siebie. Teraz odejmę prostokąt 110 od 120 tworząc ramkę (Odejmij wierzch). Całość grupujemy.

Grupowanie

Środek ikony zależy od tego, co nasz przycisk ma reprezentować. Illustrator oferuje olbrzymią ilość gotowych wektorów prezentujących większość popularnych znaków. Znajdują się one w panelu Symbole. Należy wejść do Menu Biblioteki Symboli i wybrać interesującą nas paletę. Pojedyncze kliknięcie na symbol spowoduje dodanie go do menu podręcznego. Najlepiej korzystać jest z elementów monochromatycznych. Oczywiście można też stworzyć własny obrys. Wybieramy element, ustawiamy go na środku naszej ikony i odejmujemy od górnego prostokąta. Uwaga skorzystamy tu z dynamicznego przekształcenia (wciśnięty klawisz Alt).

Grupa kształtu

Po rozwinięciu drzewka zauważymy, że pojawił się element Kształt złożony, a w nim mamy nasz symbol i prostokąt. Jeśli wybierzemy element symbolu, u mnie Video to zauważymy ze w górnym pasku możemy jednym kliknięciem zmienić go na dowolny inny z palety podręcznej. W ten sposób można z jednego wzoru stworzyć dziesiątki innych elementów jednym kliknięciem. Jeżeli użyliśmy elementu stworzonego przez nas, a chcemy zachować tą funkcjonalność możemy dodać go do symboli tak jak pokazałam w artykule Operacje 3D w Adobe Illustrator – bryła obrotowa, kompozycja.

Zmiana symbolu

Teraz nadamy odrobinę barw na nasz element. Proponuje narzucić jakiś delikatny gradient liniowy.

Gradient

Pokażę teraz różne efekty, jakimi dysponuje Illustrator. Najprostszymi elementami są należące do grupy Stylizacja efekty blasku zewnętrznego i wewnętrznego oraz cienie i wtapianie. Na poniższym rysunku są zaprezentowane kolejno: 1 - Blask wewnętrzny…; 2 -Blask zewnętrzny…; 3 - Dodaj cień…; 4 - Wtapianie…

Efekty

Nakładając na siebie kilka tych efektów można uzyskać ciekawy wygląd. Ja dokonałam poniższych czterech operacji:

Na obiekcie wewnętrznym:
Blask wewnętrzny, tryb: Łagodne światło, krycie: 100%, rozmycie: 10px, kolor: czarny, opcja: Brzeg
Blask wewnętrzny
, tryb: Łagodne światło, krycie: 50%, rozmycie: 15px, kolor: biały, opcja: Środkowy

Na obiekcie zewnętrznym:
Blask wewnętrzny, tryb: Łagodne światło, krycie: 100%, rozmycie: 2px, kolor: czarny, opcja: Brzeg
Blask zewnętrzny
, tryb: Łagodne światło, krycie: 75%, rozmycie: 10px, kolor: granatowy

Uzyskując poniższe transformacje:

Transformacja

Dodatkowo dodałam odrobinę blasku do samej ikony. Wykorzystałam Narzędzie elipsa (L) rysując ją, a następnie dobierając jej kolor na biały, przeźroczystość na Łagodne światło a krycie na 20%.

Blask ikony

Następnie pozbędziemy się cię cieni poza ikoną. W tym celu należy zgrupować wszystkie elementy i wejść do trybu maski. Znajduje się on w panelu Przeźroczystość zaraz obok widoku obiektu należy kliknąć dwukrotnie, aby nałożyć i przejść do edycji maski. Zasada jest prosta, czarny zasłania obraz, biały pokazuje, szarości i inne kolory dają efekt przeźroczysty w zależności od ich jasności. Rysujemy prostokąt o zaokrąglonych rogach, bez koloru krawędzi z wypełnieniem białym o wymiarach największego w ikonie, a następnie nakładamy go na nią. Z trybu maski wychodzimy klikając na miniaturę obiektu.

Nakładanie maski

Maska utnie nam wszystko poza białym obszarem. Ikona jest już gotowy. Można bardzo łatwo zmieniać jej wygląd edytując symbol wstawiony w środku oraz kolor gradientu i cieniowania zewnętrznego pasa.

Ikony

Ikona

Dodaj komentarz Komentarze są moderowane, a przy linkach używane jest rel="nofollow". Prosimy o nie reklamowanie i nie spamowanie w komentarzach.
Linki tworzone za pomocą tagu [url] np: [url=www.xyz.pl]xyz[/url]
Źródła za pomoc tagu [code] z wskazaniem języka np. [code=php] echo [/code]

Copyright © 2024 Webnote

Projekt i wykonanie: Tworzenie stron internetowych

Dodaj link