Opracowanie:
INSEKTPoziom trudności:
łatwy
Na pewno nie jednemu z was bardzo podobają się
ikonki wykonane przez
Sebastiana, które można wykorzystać w swoim systemie operacyjnym, jeśli standardowe już się nam znudzą. W tym tutorialu pokażę, jak w łatwy sposób wykonać takie ikony.
Stworzymy zakładkę, na której będziecie mogli umieścić własną grafikę, zależnie od preferowanego przez was tematu. Ja za przykład wezmę sobie ikonę folderu w systemie Windows XP i wykonam własny folder. Wejdźcie sobie w
Moje dokumenty, a następnie zobaczcie ikony folderów
Moje obrazy,
Moja muzyka,
Moje wideo. To na nich będę się wzorował.
Tutorial napisany w wersji GIMP 2.4. W innych wersjach nazwy narzędzi i pojęć mogą się różnić.
Zaczynamy 1. Tworzymy
Nowy obraz o wymiarach
250x
250px.
2. Pierwszą czynnością, jaką wykonamy, będzie nałożenie na obraz
prowadnic. Będziemy musieli stworzyć ich kilka. Są one nam potrzebne do idealnego i łatwego umieszczenia granic naszej ikony na obrazie (jeśli ktoś uważa, że jego umiejętności posługiwania się ścieżkami są świetne, może pominąć ten punkt). Tak więc:
Obraz -> Prowadnice -> Nowa prowadnica (w procentach) i teraz tworzymy prowadnice o wartościach:
- Poziome - Położenie (w %): 20, 24, 30, 70, 80
- Pionowe - Położenie (w %): 20, 23, 46, 50, 80
Powinno to wyglądać tak:
3. Teraz, za pomocą
ścieżek (B), tworzymy wielokąt, taki jaki widać na obrazku poniżej. Zwróćcie uwagę, aby kąty naszego wielokąta rozmieścić na odpowiednich przecięciach prowadnic. Nieprawidłowe ich rozmieszczenie może pogorszyć efekt.
4. Następnie pozbywamy się prowadnic (
Obraz -> Prowadnice -> Usuń wszystkie prowadnice). Tak wygląda nasze zaznaczenie po ich usunięciu:
5. Tworzymy
nową warstwę o nazwie
Folder - Biała Ramka. Wybieramy narzędzie
Wypełnienie kubełkiem [Shift+B] oraz kolor
biały. Klikamy na
Zaznaczenie -> Ze ścieżki i wypełniamy zaznaczenie.
Nie usuwamy zaznaczenia, niech jest ono cały czas aktywne. Powinno to wyglądać tak (warstwę
Tło na chwilę zrobiłem niewidoczną, aby lepiej było widać):
6. Zmniejszamy zaznaczenie o
2px (
Zaznaczenie -> Zmniejsz...) i usuwamy wnętrze warstwy
Folder - Biała Ramka (
Edycja -> Wyczyść [Delete]). Powinna nam pozostać tylko biała ramka.
Zaznaczenie niech jest cały czas aktywne. Tworzymy teraz
nową warstwę i nazywamy ją
Folder. Wybieramy narzędzie
Gradient [L], ustawiamy kolory:
kolor pierwszoplanowy - #ffff99,
kolor tła - #f1bd48, a następnie wypełniamy zaznaczenie za pomocą gradientu od góry do dołu, tak jak jest to pokazane na zdjęciu:
7. Tworzymy jeszcze jedną warstwę o nazwie
Folder - Pomarańczowa Ramka. Mając wciąż aktywne zaznaczenie wybieramy
Zaznaczenie -> Powiększ... i zwiększamy o
6px. Wypełniamy
[Shift+B] zaznaczenie kolorem
#d0a33e. Ponownie zmniejszamy zaznaczenie o
4px i usuwamy (
Edycja -> Wyczyść [Delete]).
Ustawiamy nasze warstwy od góry do dołu w takiej kolejności:
- Folder
- Folder - Biała Ramka
- Folder - Pomarańczowa Ramka
- Tło
8. Teraz każdą z naszych warstw rozmywamy (
Filtry -> Rozmycie -> Rozmycie Gaussa...) z wartościami
4px. Warstwę
Folder - Biała Ramka raz
duplikujemy [Shift+Ctrl+D], klikamy
PPM (Prawy Przycisk Myszy) na zduplikowanej warstwie i wybieramy opcję
Połącz w dół. To samo robimy z warstwą
Folder - Pomarańczowa Ramka, tyle że trzykrotnie:
Duplikuj warstwę, Połącz w dół, Duplikuj warstwę, Połącz w dół, Duplikuj warstwę, Połącz w dół. Całość powinna wyglądać tak:
Nie przejmujemy się rozmazanymi konturami naszego folderu. Pamiętajmy, że jeśli zechcemy podmienić ikony w naszym systemie operacyjnym, ulegną one pomniejszeniu, a wtedy efekt stanie się najbardziej zbliżony do tego z Windows XP.
9. Nasza teczka musi się otwierać. Tworzymy więc nowe prowadnice, tym razem o takich wartościach:
- Poziome - Położenie (w %): 20, 30, 35, 40, 44, 70, 80
- Pionowe - Położenie (w %): 20, 30, 50, 55, 80, 90
10. Podobnie jak wcześniej, za pomocą ścieżek
(B), tworzymy nowe zaznaczenie, tym razem o takich kształtach:
11. Teraz naszym zadaniem będzie powtórzenie czynności z pierwszej części tutoriala.
Usuwamy prowadnice. Tworzymy
nową warstwę o nazwie
Zakładka - Biała Ramka, wybieramy
Zaznaczenie -> Ze ścieżki i wypełniamy
białym kolorem. Zmniejszamy zaznaczenie o
2px i usuwamy
[Delete]. Mając ciągle aktywne zaznaczenie, tworzymy
nową warstwę Zakładka i wypełniamy ją gradientem
[L] w taki sam sposób oraz o takich samych ustawieniach jak wcześniej.
12. Zwiększamy zaznaczenie o
6px, tworzymy
nową warstwę o nazwie
Zakładka - Pomarańczowa Ramka i wypełniamy kolorem
#d0a33e. Zmniejszamy zaznaczenie o
4px i usuwamy
[Delete]. Rozmywamy za pomocą
Rozmycia Gaussa wszystkie 3 nowo powstałe warstwy, każdą o ustawieniach
4px. Warstwę
Zakładka - Biała Ramka duplikujemy
[Shift+Ctrl+D] i łączymy duplikat z oryginalną warstwą. Przy warstwie
Zakładka - Pomarańczowa Ramka wykonujemy tę czynność 2 razy. Warstwę
Zakładka ustawiamy na samej górze, a jej
krycie zmniejszamy do
50-60. Nasza obecna praca powinna wyglądać tak:
13. Otwieramy teraz jakiś render. Może to być np. nuta, jeśli chcemy zrobić folder dla muzyki (przykład z Windowsa) lub np. jakieś arkusze, jeśli chcemy uzyskać folder na dokumenty. Ja wziąłem to co miałem pod ręką, mianowicie mój wykreowany w GIMPie podpis.
14. Po odpowiednim skalowaniu (
PPM na warstwie -> Skaluj warstwę... [Shift+T]) i obróceniu (
Warstwa -> Przekształcenie -> Dowolny obrót... [Shift+R]) umieszczamy nasz render pod warstwą
Zakładka - Pomarańczowa Ramka.
15. Następnie czynimy nasze białe
Tło niewidocznym
, resztę warstw natomiast łączymy ze sobą (
Obraz -> Połącz widoczne warstwy... -> Przycięta do obrazu), a powstałą w ten sposób warstwę nazywamy
Folder. Możemy nasze
Tło znów zrobić widzialnym
. Wybieramy warstwę
Folder i przechylamy ją odrobinę:
Warstwa -> Przekształcenie -> Dowolny obrót... [Shift+R] -
kąt ustawiamy na
-4. Za pomocą narzędzia
Przesunięcie [M] możemy wyśrodkować nasz folder, jeśli za bardzo odchyla się w którąś stronę. Klikamy
PPM na warstwę
Folder i wybieramy opcję
Dopasuj wymiary warstwy do obrazu. Ponownie klikamy
PPM na tej samej warstwie i wybieramy
Kanał alfa na zaznaczenie. Musimy się pozbyć powstałego zaznaczenia wskazanego na czerwono:
16. W tym celu używamy narzędzia
Odręczne zaznaczanie obszarów [F] lub
Zaznaczenie rozmyte (U). Ja użyłem tego drugiego. Mając teraz zaznaczenie wokół naszego folderu, możemy zrobić cień. W tym celu wybieramy:
Filtry -> Światło i cień -> Rzucanie cienia... z ustawieniami:
Przesunięcie X - 3,
Przesunięcie Y - 3,
Promień rozmycia - 12,
Kolor - czarny,
Krycie - 85. Nasza paleta warstw powinna wyglądać teraz tak:
17. Pozostaje nam już tylko usunąć/wyłączyć białe
Tło, połączyć warstwę
Folder z cieniem oraz zeskalować wynik końcowy do preferowanych przez nas rozmiarów.
18. Tak to wygląda po skalowaniu:
Koniec
Inne przykłady:
Oczywiście nie musicie odgórnie stosować się do wszystkich punktów w tutorialu. Wykażcie się inwencją twórczą, dodajcie coś od siebie, eksperymentujcie z kolorami, odblaskami. Tworzenie własnych ikon to świetna zabawa, można uzyskać naprawdę ciekawe efekty.
Oto przykładowe ikony wykonane przez Sebastiana:
Do konwersji naszych ikon na format obsługiwany przez system służy program
ConvertIcon. Wystarczy załadować obraz, a konwerter zrobi za nas resztę.
A jeśli ktoś jest bardziej wprawiony, ikony zapisywać może bezpośrednio z GIMP-a. Trzeba wtedy zrobić minimum 4 warstwy, a na nich ikony skalowane do wymiarów:
256px,
48px,
32px i
16px. Aby zobaczyć jak to zrobić, możecie ściągnąć i podejrzeć w GIMP-ie moje
niebieskie foldery.
W załączniku znajdziecie pliki
.XCF Życzę miłej zabawy.