Polskie Forum Użytkowników GIMP-a

---

Na pewno nie jednemu z was bardzo podobają się ikonki (http://www.gimpuj.info/index.php?action=gallery;su=user;cat=157;u=1197) wykonane przez Sebastiana (http://www.gimpuj.info/profiles/greensand-u1197.html), 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ć.

---

(http://www.gimpuj.info/gallery/4021_29_07_08_6_09_29.png) Zaczynamy

(http://www.gimpuj.info/gallery/4021_29_07_08_6_09_29.png) 1. Tworzymy Nowy obraz o wymiarach 250x250px.



(http://www.gimpuj.info/gallery/4021_29_07_08_6_09_29.png) 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:



(http://www.gimpuj.info/gallery/4021_29_07_08_6_09_29.png) 3. Teraz, za pomocą ścieżek <sciezki> (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.



(http://www.gimpuj.info/gallery/4021_29_07_08_6_09_29.png) 4. Następnie pozbywamy się prowadnic (Obraz -> Prowadnice -> Usuń wszystkie prowadnice). Tak wygląda nasze zaznaczenie po ich usunięciu:



(http://www.gimpuj.info/gallery/4021_29_07_08_6_09_29.png) 5. Tworzymy nową warstwę o nazwie Folder - Biała Ramka. Wybieramy narzędzie Wypełnienie kubełkiem <wypelnienie> [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ć):



(http://www.gimpuj.info/gallery/4021_29_07_08_6_09_29.png) 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 <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:



(http://www.gimpuj.info/gallery/4021_29_07_08_6_09_29.png) 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

(http://www.gimpuj.info/gallery/4021_29_07_08_6_09_29.png) 8. Teraz każdą z naszych warstw rozmywamy (Filtry -> Rozmycie -> Rozmycie Gaussa...) z wartościami 4px. Warstwę Folder - Biała Ramka raz duplikujemy <duplikowanie-warstwy> [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.

(http://www.gimpuj.info/gallery/4021_29_07_08_6_09_29.png) 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

(http://www.gimpuj.info/gallery/4021_29_07_08_6_09_29.png) 10. Podobnie jak wcześniej, za pomocą ścieżek (B), tworzymy nowe zaznaczenie, tym razem o takich kształtach:



(http://www.gimpuj.info/gallery/4021_29_07_08_6_09_29.png) 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.



(http://www.gimpuj.info/gallery/4021_29_07_08_6_09_29.png) 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:




(http://www.gimpuj.info/gallery/4021_29_07_08_6_09_29.png) 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.

(http://www.gimpuj.info/gallery/4021_29_07_08_6_09_29.png) 14. Po odpowiednim skalowaniu (PPM na warstwie -> Skaluj warstwę... <skalowanie> [Shift+T]) i obróceniu (Warstwa -> Przekształcenie -> Dowolny obrót... <obrot> [Shift+R]) umieszczamy nasz render pod warstwą Zakładka - Pomarańczowa Ramka.




(http://www.gimpuj.info/gallery/4021_29_07_08_6_09_29.png) 15. Następnie czynimy nasze białe Tło niewidocznym <widocznosc>, 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 <widocznosc>. Wybieramy warstwę Folder i przechylamy ją odrobinę: Warstwa -> Przekształcenie -> Dowolny obrót... <obrot> [Shift+R] - kąt ustawiamy na -4. Za pomocą narzędzia Przesunięcie <przesuwanie> [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:



(http://www.gimpuj.info/gallery/4021_29_07_08_6_09_29.png) 16. W tym celu używamy narzędzia Odręczne zaznaczanie obszarów <lasso> [F] lub Zaznaczenie rozmyte <rozdzka> (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:



(http://www.gimpuj.info/gallery/4021_29_07_08_6_09_29.png) 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.

(http://www.gimpuj.info/gallery/4021_29_07_08_6_09_29.png) 18. Tak to wygląda po skalowaniu:


(http://www.gimpuj.info/gallery/4021_29_07_08_6_09_29.png) 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 (http://converticon.com/). 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 (http://www.gimpuj.info/index.php?action=gallery;sa=view;id=65966).

W załączniku znajdziecie pliki .XCF :)
Życzę miłej zabawy.

---

Moj efekt:
(http://www.gimpuj.info/gallery/9554_13_03_08_8_10_41_2.jpg)
(2dzien Gimpowania,4rysunek)

Lepiej ten folder narysować tak, żeby zapełniał jak największą powierzchnię dostępnego miejsca bo inaczej po ustawieniu ikonki dla jakiegoś pliku itd. folder będzie za mały i bardzo "chropowaty"(efekt schodków)

Po ukończeniu pracy efekt wystarczy wykadrować.
Ja osobiście opisanego przez Ciebie problemu nie mam, gdyż wielkość wyświetlanych ikon mam ustawioną na wysokim poziomie (100x100px).

Efekt:

(http://www.gimpuj.info/replacement.png)

Dzięki za tuta.

Super tutek! :)

Oto moje dzieło:
(http://www.gimpuj.info/gallery/5692_02_04_08_1_54_03.png)

Świetny tutek :D

(http://www.gimpuj.info/replacement.png)

(http://i32.tinypic.com/5490mh.png) I jak? Troche zmniejszyłem.

a jak "podmienić" moją pracę z inną ikoną, bo na pewno się da? jest zapisana w formacie #.ico



INSEKT:
Właściwości -> Dostosowywanie -> Zmień ikonę...

Dziękuję :)

A oto mój folder ;]
(http://images30.fotosik.pl/249/2d62df4bec49eea3.jpg)
Mam pytanie jak usunąć białe tło?  :D

Tutorial napisany bardzo dobrze z całkiem niezłym efektem końcowym.

Moja praca:
(http://i38.tinypic.com/23tf3f7.png)

fajny tut:) dobrze wyjaśniony :) dzięki!

a to moje wykonanie dla milosników piesów xD

Tut Extra oto moja praca:
(http://images46.fotosik.pl/2/37b1f99cc8f9cdf2.png) (http://www.fotosik.pl)

A oto moja prace (bądźcie wyrozumiali):

(http://www.gimpuj.info/replacement.png) (http://img230.imageshack.us/my.php?image=haloicondl0.jpg)(http://img230.imageshack.us/images/thpix.gif) (http://g.imageshack.us/thpix.php)

I mam problem: mam ta prace w .ico ale jak podmieniam to wychodzi ze caly folder jest czarny pomocy... :-[

Fajny i przydatny tutek...

Moja praca:
(http://www.gimpuj.info/gallery/15643_11_10_08_4_52_10.jpg) (http://www.gimpuj.info/)

Wyszło mi całkiem nieźle, ale opisz niektórym po co duplikować warstwy i połączać je ze sobą na następny raz, ok?  ;)
Jeżeli zobaczyłem dobrze, ta czynność służy do tego żeby "ramki" były grubsze i bardziej
wyraźne po rozmyciu.
A tu moja praca:
(http://losdb.yoyo.pl/folder.png)
#Edit:
A tu dałem jedną poprawkę :) :
(http://losdb.yoyo.pl/folder1.png)

Tak, właśnie temu ta czynność ma służyć.

A ja pokombinowałem i wyszło coś takiego:

(http://www.gimpuj.info/gallery/18753_12_12_08_4_09_15.png)
mi wyszło coś takiego czekam na kolejne tutki tego typu
niclas4 świetny efekt :)

A co jak nie mogę już 2 punktu zrobić bo nie mam zielonego pojęcia jak połączyć początek i koniec ścieżki   :'(

Przytrzymujesz "Ctrl" i klikasz na punkcie, z którym chcesz połączyć.

A to przyda Ci się na przyszłość:
http://www.gimpuj.info/techniczne/346cie380ki-poradnik-t88.0.html (http://www.gimpuj.info/techniczne/346cie380ki-poradnik-t88.0.html)

Wie ktoś jak ustawić kolor Gradientu?w gimpie 2.6

Fajny tutek :)

Moj efekt:

(http://www.gimpuj.info/gallery/5737_29_01_09_7_07_34.png)

Fajny tutek.
Ja nie miałem czego wstawić to zrobiłem sam folder ;)
(http://www.gimpuj.info/replacement.png)

Fajny i przydatny efekt :D
(http://www.gimpuj.info/replacement.png)

Moje dzieło:
(http://www.gimpuj.info/gallery/27768_24_06_09_8_50_24.png)

a mi chyba coś nie wyszło  :-[ :

(http://iv.pl/images/b4mv7v07y9wnfd3v91ri.png)

A oto mój efekt :P Że nie miałem żadnego rendera pod ręką zrobiłem sobie sam obrazek xD
(http://ifotos.pl/img/hqxasw.PNG)

Moja praca
(http://www.gimpuj.info/replacement.png) (http://img37.imageshack.us/i/gothic3.png/)

Miałem długą przerwę z Gimp'owaniem i troszkę zajął mi ten tutek. Ogólnie tut dobrze napisany.

Efekt:
(http://www.gimpuj.info/replacement.png)

Zaje... fajny tut.

Moja praca :)

(http://www.gimpuj.info/replacement.png)

super tutek, oto moje folderki :)
(http://www.gimpuj.info/gallery/30551_11_09_09_9_24_57_2.png)(http://www.gimpuj.info/gallery/30551_11_09_09_9_24_57_1.png)(http://www.gimpuj.info/gallery/30551_11_09_09_9_24_57_0.png)(http://www.gimpuj.info/gallery/30551_11_09_09_9_24_05_4.png)(http://www.gimpuj.info/gallery/30551_11_09_09_9_24_05_0.png)(http://www.gimpuj.info/gallery/30551_11_09_09_9_24_05_1.png)(http://www.gimpuj.info/gallery/30551_11_09_09_9_24_05_2.png)(http://www.gimpuj.info/gallery/30551_11_09_09_9_24_05_3.png)
pliki XCF w galerii XFCow

Ten tutorial taki sztywny jest (podajesz współrzędne itp.), ale ogólnie to bardzo fajny efekt końcowy, no i ten efekt przezroczystości =P.

A to moje dziełko ;) :

(http://www.gimpuj.info/gallery/20842_21_09_09_12_17_30.png)

POMOCY!!! Już nie wyrobię. Zrobiłem ikonkę 250x250px. Jak podmieniłem, ją za inną, to tylko mały punkcik było widać. Powiększałem, powiększałem, aż doszedłem do tego, że w GIMP'ie ikonka ma 5000x5000px, ale po przekonwerterowaniu nadal jest mniejsza od normalnych ikonek. Chyba bym musiał zroibić 20tys na 20tys pixeli, żeby była dobra, ale 7000x7000, to już obciąża mi komputer. Co mam robić. Męczę się od 3 godzin, zrobiłem 5, albo 6 prób i ciągle jest zamałe. Pomocy!

A próbowałeś przyciąć obraz do rozmiaru ikonki i potem zeskalować ręcznie do np. 50x50 px?

Super tut i fajny efekt

Moja praca

(http://www.otofotki.pl/img11/obrazki/zv9476_folder.png)

Mi wyszlo takie cos: (http://www.iv.pl/images/zdqslzx0i1ch37n9fkv1.png)

Hah XD Ja sobie zrobiłam folder do muzy xD Kiedyś se zrobię więcej i wrzucę na galerie . To moja pracka :
 (http://www.gimpuj.info/replacement.png) (http://img145.imageshack.us/i/bigfolder.png/)

Dobra, nie wysiliłam się, ale to jedna z moich pierwszych poważnych prac w Gimpie. Pierwsze prace w gimpie to były drzewka i domki w wieku 5 lat :D

(http://i48.tinypic.com/2rh4l0m.jpg)

Tutek nad tutki :D Mój efekt w załączniku

Fajny tut ;)
Moje prace:(niebieski folder troche lewo wyszedł  <lol>)

majne prace  :P :
(http://ifotos.pl/img/folder-pi_xewrxw.png)

JAK DAJESZ INSTRUKCJE TO NA 100% a nie 90% >:D >:D >:D >:D >:D >:D >:D
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:

Jak mam ten obwód zaznaczyć na ten inny kolor powiesz mi czy mam się sam domyślić >:D >:D >:D >:D >:D

Ten tutorial jest dobrze opisany, a Ty nie znasz nawet podstaw GIMP-a, więc się nie dziw.

Jak jesteś baran, to nic Ci już na to nie poradzę. Inni sobie poradzili, więc? Na 90% to Ty myślisz, w tym problem.

Bardzo dobrze opisany i łatwy do zrobienia poradnik nawet dla takiego nowicjusza jak ja.
1.(http://img42.imageshack.us/img42/9705/folderxp.png)

a tutaj bardziej odpicowany:
2.(http://www.gimpuj.info/replacement.png)

No siema All :D ja zrobiłem se tez foldera i nie mogę podmienić jak wchodzę we "właściwości ---> dostosowanie ---> zmień ikonę..." to jak zrobię przeglądaj to znajdę ten mój plik .ico ale jak nacisnę ok to mi pisze ze folder .ico nie zawiera ikon...  :-[ co mam zrobić...  :(

dobra sorry za kłopot już zrobiłem już wiem jak mam robić :D

super tut :D

Moja praca:

Dobrze napisany tutek. Dzięki.
Szkoda, że nie przyszło mi do głowy kolorek podmienić. Dwa nowe folderki, do GIMPa i do muzyki.

(http://i44.tinypic.com/40t2b.jpg)

Dobry tutek, jak go pierwszy raz zobaczyłem myślałem, że bardzo trudne ale jak opanowałem warstwy to banalne :D

To jest moje dzieło:
(http://www.gimpuj.info/replacement.png)

mam taki sam problem jak niektorzy....jak ustawiam ikone to jest ona malej wielkosci moge sie dowiedziec dlaczego i jak zrobic aby byla taka sama jak pozostale?

z gory dziekuje....

Usunąłeś nadmiar tła, zostawiając samą ikonkę?

(http://fotoo.pl/zdjecia/files/2010-05/4244cf6d.png)
Haha wymazałem ze środka  :D.

Odpowiedź do Qby_: Tak, usunolem tlo i zostawilem sama ikonke

A oto mój

(http://www.gimpuj.info/gallery/31221_15_06_10_8_24_51.png)

Moja

---

Praca:

---

(http://img13.imageshack.us/img13/2048/folderpngduzy.png)

A to moja praca, ciekawy tut

(http://i45.tinypic.com/6pnmfp.png)

moja pierwsza praca :D

Bardzo ciekawy i dobry tutorial. Wszystko dobrze wytłumaczone.
Moja praca:

(http://i56.tinypic.com/2eq70nr.jpg)

(http://i56.tinypic.com/qo7myu.png)

Przydatne! Zrobiłem tak najważniejsze foldery na pulpicie :>

No tutorial jest łatwy, ale strasznie długi. Namęczyłem się i za 1 razem wyszło mi to:

(http://www.gimpuj.info/replacement.png)

Oczywiście w tym folderze będę trzymał prace z GIMPa. Dzięki. :)

EDIT: Dla niejasności, to jest mój folder po przeskalowaniu 100x100.

(http://img827.imageshack.us/img827/9005/c7ax.png)

nie wyszło chyba najgorzej :)