Polskie Forum Użytkowników GIMP-a

Tutoriale => Ikony => Wątek zaczęty przez: damian667 on 26.03.2008, 17:45:59



Tytuł: Bateria w stylu iPoda
Wiadomość wysłana przez: damian667 on 26.03.2008, 17:45:59
Bateria w stylu iPoda
Tutorial

Opracowanie: damian667
Poziom trudności: trudny

(http://www.gimpuj.info/gallery/4489_26_03_08_4_28_04.png)




Kiedyś potrzebowałem takiej ikonki, a ostatnio ktoś mnie męczył o coś podobnego, więc pomyślałem, że może się przyda tutorial. Poradnik wymaga pewnej wiedzy o obsłudze GIMPa, a w szczególności o ścieżkach.

Tutorial napisany w wersji GIMP-a 2.4. W innych wersjach nazwy narzędzi i pojęć mogą się różnić.



[lp] Zaczynamy

[lp] 1. Otwieramy nowy obraz o wymiarach 500x250px, tło najlepiej koloru białego/czarnego albo bez koloru.

[lp] 2. Tworzymy prowadnice Obraz -> Prowadnice -> Nowa prowadnica (w procentach) o wartościach: Poziomo : 20%, 25%,  30%, 40%, 50%, 60%, 70%, 75%, 80%. Pionowo:10%, 15%, 17%, 18%, 20%, 40%, 45%, 50%, 55%, 60%, 80%, 82%, 83%, 85%, 88%, 90%.

(http://www.gimpuj.info/gallery/4489_26_03_08_4_30_09_0.png)


[lp] 3. Tworzymy nową, przezroczystą warstwę Warstwa -> Nowa warstwa [Shift+Ctrl+N], nazywamy ją środek.

[lp] 4. Narzędziem Zaznaczenie prostokątne <zaznaczenie-prostokatne> [R] zaznaczamy obszar, który ograniczają nam prowadnice: Poziomo:  10% i 90%, Pionowo: 17% i 83%, następnie wypełniamy go Wypełnianie kubełkiem <wypelnienie> [Shift+B] kolorem zielonym #00CC00.

(http://www.gimpuj.info/gallery/4489_26_03_08_4_30_09_1.png)


[lp] 5. Tworzymy nowa warstwę i nazywamy ją środek_biel.

[lp] 6. Na warstwie środek_biel zaznaczamy Zaznaczenie prostokątne obszar ograniczany przez prowadnice: Poziomo: 25% i 40%, a Pionowo: 18% i 82%.

[lp] 7. Wypełniamy go kolorem białym #FFFFFF. Usuwamy zaznaczenie [Shift+Ctrl+A].

[lp] 8. Na tej samej warstwie zaznaczamy obszar ograniczany przez prowadnice: Poziomo: 85% i 80%, a Pionowo: 18% i 82%.

[lp] 9. Wypełniamy go kolorem białym #FFFFFF.Usuwamy zaznaczenie [Shift+Ctrl+A].

(http://www.gimpuj.info/gallery/4489_26_03_08_4_30_09_2.png)


[lp] 10. Na warstwie środek_biel stosujemy rozmycie Gaussa Filtry -> Rozmycie -> Rozmycie Gaussa o promieniu poziomo: 30px i pionowo: 30px.

[lp] 11. Zmniejszamy krycie warstwy środek_biel na 50%.


(http://www.gimpuj.info/gallery/4489_26_03_08_4_30_09_3.png)


[lp] 12. Tworzymy nową, przezroczystą warstwę i nazywamy ją środek_czerń.

[lp] 13. Narzędziem Zaznaczenie Prostokątne zaznaczamy obszar ograniczany przez prowadnice: Poziomo: 20% i 25%, a Pionowo: 18% i 82%.

[lp] 14.  Wybieramy narzędzie Gradient <gradient> [L], Kolor pierwszoplanowy na przezroczystość, kształt Liniowy. Jako kolor pierwszoplanowy wybieramy czerń #000000.

[lp] 15. Wypełniamy zaznaczenie gradientem od góry do dołu. Usuwamy zaznaczenie [Shift+Ctrl+A].

(http://www.gimpuj.info/gallery/4489_26_03_08_4_30_09_4.png)


[lp] 16.  Na tej samej warstwie środek_czerń zaznaczamy obszar ograniczany przez prowadnice: Poziomo: 70% i 75%, a Pionowo: 18% i 82%.

[lp] 17. Wypełniamy go tym samym gradientem co wcześniej.


(http://www.gimpuj.info/gallery/4489_26_03_08_4_30_54_0.png)


[lp] 18.  Zmieniamy krycie warstwy środek_czerń na 50%.

[lp] 19. Tworzymy nowa, przezroczystą warstwę i nazywamy ją środek_czerń2.

[lp] 20. Zaznaczamy na niej  obszar ograniczany przez prowadnice: Poziomo: 50% i 70%, a Pionowo: 18% i 82%.

[lp] 21. Wypełniamy go kolorem czarnym #000000. Usuwamy zaznaczenie [Shift+Ctrl+A].

(http://www.gimpuj.info/gallery/4489_26_03_08_4_30_54_1.png)


[lp] 22. Stosujemy rozmycie Gaussa o promieniu: poziomo: 30px i pionowo: 30px.

[lp] 23. Zmniejszamy krycie warstwy środek_czerń2 na 50%.

(http://www.gimpuj.info/gallery/4489_26_03_08_4_30_54_2.png)


[lp] 24.  Tworzymy nową przezroczystą warstwę i nazywamy ją znak.

[lp] 25. Na powiększeniu 200% narzędziem ścieżki <sciezki> {B} na środku rysujemy znaczek:


(http://www.gimpuj.info/gallery/4489_26_03_08_4_30_54_3.png)


[lp] 26. 26. Klikamy Zaznaczenie -> Ze ścieżki [Shift+V] i wypełniamy je kolorem czarnym #000000. Usuwamy zaznaczenie [Shift+Ctrl+A].

[lp] 27. Zmieniamy krycie warstwy znak na 80%.

(http://www.gimpuj.info/gallery/4489_26_03_08_4_30_54_4.png)


[lp] 28. Tworzymy nową, przezroczysta warstwę i nazywamy ją koniec.

[lp] 29. Na powiększeniu 200%, między prowadnicami: Poziomo: 40% i 60%, Pionowo: 83% i 90%, ścieżkami obrysowujemy kształt zakończenia baterii. Potem klikamy Zaznaczenie -> Ze ścieżki. Powinien to być taki kształt:

(http://www.gimpuj.info/gallery/4489_26_03_08_4_31_32_0.png)


[lp] 30. Wypełniamy zaznaczenie kolorem szarym #383838. Usuwamy zaznaczenie [Shift+Ctrl+A].

[lp] 31. W oknie Warstwy wyłączmy widoczność wszystkich warstw oprócz warstwy koniec.

(http://www.gimpuj.info/gallery/4489_26_03_08_4_31_32_1.png)


[lp] 32. Nad warstwą koniec tworzymy nową przezroczystą warstwę, nazywamy ją koniec_biel i zmieniamy jej tryb krycia na Tylko jaśniejsze.

[lp] 33. Teraz nas szarym końcem naszej baterii narzędziem Zaznaczenie prostokątne zaznaczmy obszar około połowy miedzy prowadnicami poziomymi: 50% i 60% i wypełniamy gradientem biały na przezroczystość.

(http://www.gimpuj.info/gallery/4489_26_03_08_4_31_32_2.png)


[lp] 34. Podobnie postępujemy między prowadnicami poziomymi:40% i 50%. I już możemy wlączyc widoczność reszty warstw aby sprawdzić jak wygląda całość.

(http://www.gimpuj.info/gallery/4489_26_03_08_4_31_33_3.png)

(http://www.gimpuj.info/gallery/4489_26_03_08_4_31_33_4.png)


[lp] 35. Tworzymy nową, przezroczysta warstwę koniec_cień.

[lp] 36.  Ścieżkami obrysowujemy obszar między prowadnicami: Poziomo:  40% i 60%, Pionowo: 85% i 90%, tak aby wyszło nam coś takiego:

(http://www.gimpuj.info/gallery/4489_26_03_08_4_32_12_0.png)


[lp] 37. Wybieramy Zaznaczenie -> Ze ścieżki i wypełniamy je kolorem czarnym #000000. Usuwamy zaznaczenie [Shift+Ctrl+A]. Zmniejszamy krycie warstwy koniec_cień na 30%.

(http://www.gimpuj.info/gallery/4489_26_03_08_4_32_12_1.png)


[lp] 38. Tworzymy nową, przezroczystą warstwę boki.

[lp] 39. Na powiekszeniu 200%, miedzy prowadnicami: Z LEWEJ STRONY: Poziomo: 20% i 80%, Pionowo: 15% i 20%,  Z PRAWEJ STRONY: Poziomo: 20% i 80%, Pionowo: 80% i 85%, ścieżkami rysujemy kształt boków naszej
baterii, wybieramy Zaznaczenie -> Ze ścieżki i wypełniamy kolorem szarym #555555, aby wyglądały tak:

(http://www.gimpuj.info/gallery/4489_26_03_08_4_32_12_2.png)


(http://www.gimpuj.info/gallery/4489_26_03_08_4_32_12_3.png)


[lp] 40. Tworzymy nową, przezroczystą warstwę boki_biel i zmieniamy jej tryb krycia na Tylko jaśniejsze.

[lp] 41. Ponownie wyłączamy widoczność wszystkich warstw z wyjątkiem warstw boki oraz boki_biel.

[lp] 42. Narzędziem Zaznaczenie prostokątne zaznaczamy obszar miedzy prowadnicami: Poziomo: 25% i 50%, Pionowo: 15% i 85%.

(http://www.gimpuj.info/gallery/4489_26_03_08_4_32_12_4.png)


[lp] 43. Od góry do dołu wypełniamy gradientem biel na przezroczystość. Usuwamy zaznaczenie [Shift+Ctrl+A].

(http://www.gimpuj.info/gallery/4489_26_03_08_4_32_59_0.png)


[lp] 44. Teraz zaznaczamy obszar między prowadnicami: Poziomo: 50% i 75%, Pionowo: 15% i 85% i wypełniamy tym samym gradientem, ale od dołu go góry. Usuwamy zaznaczenie [Shift+Ctrl+A].

(http://www.gimpuj.info/gallery/4489_26_03_08_4_32_59_1.png)


[lp] 45. Teraz wybieramy Obraz -> Połącz widoczne warstwy [Ctrl+M].

[lp] 46. Tworzymy następną, przezroczystą warstwę, nazywamy ją boki_czerń i zmieniamy jej tryb krycia na Tylko ciemniejsze.

[lp] 47. Zaznaczeniem prostokątnym zaznaczamy obszar między prowadnicami: Poziomo: 75% i 80%, Pionowo: 15% i 85%. Zaznaczenie wypełniamy od dołu go góry gradientem czerń na przezroczystość.

(http://www.gimpuj.info/gallery/4489_26_03_08_5_22_49.png)


[lp] 48. Ponownie wybieramy Obraz -> Polącz widoczne warstwy. Możemy włączyć widocznosc pozostałych warstw.

(http://www.gimpuj.info/gallery/4489_26_03_08_4_32_59_3.png)


[lp] 49. Tworzymy nową, przezroczystą warstwę i nazywamy ją boki_cień.

[lp] 50. Rysujemy ścieżkę po wewnętrznej, "metalowej" krawędzi boku baterii:

(http://www.gimpuj.info/gallery/4489_26_03_08_4_32_59_3.png)


[lp] 51. Wybieramy Edycja -> Rysuj wzdłuż ścieżki,  szerokość linii ustawiamy na 4. Należy pamiętać o tym, abyśmy mieli wybrany kolor czarny jako pierwszoplanowy.

[lp] 52. Operacje powtarzamy na drugim boku. Teraz widzimy, że czarne linie wychodzą poza obszar baterii. Skracamy je zaznaczając zbędną cześć i klikając Edycja -> Wyczyść [Delete].

(http://www.gimpuj.info/gallery/4489_26_03_08_4_33_22_0.png)


[lp] 53. Zmniejszamy krycie warstwy boki_cień na 50%.

(http://www.gimpuj.info/gallery/4489_26_03_08_4_33_22_1.png)


I oto co nam wyszło:

(http://www.gimpuj.info/gallery/4489_26_03_08_4_28_04.png)


[lp] Koniec



Mam nadzieję, że wszysto jest dosyć jasne.

Miłej pracy.




Tytuł: Odp: Bateria w stylu Ipoda
Wiadomość wysłana przez: Sebastian on 27.03.2008, 00:05:37
Bateria naładowana (http://www.gimpuj.info/index.php?action=gallery;sa=view;id=12535) i rozładowana (http://www.gimpuj.info/index.php?action=gallery;sa=view;id=12535)
(http://www.gimpuj.info/gallery/1197_27_03_08_12_00_30.png)
Niestety nie wedle twojego tutoriala :(, wzorowałem się na obrazku jaki zapodałeś (strasznie małym przy okazji i musiałem wzrok bardziej wytężać by zobaczyć szczegóły ;))   


Tytuł: Odp: Bateria w stylu Ipoda
Wiadomość wysłana przez: Plastuś on 29.03.2008, 17:17:54
Bardzo dobrze opisany tutorial

Moja praca
(http://www.gimpuj.info/replacement.png) (http://img329.imageshack.us/my.php?image=bateriaow3.png)


Tytuł: Odp: Bateria w stylu Ipoda
Wiadomość wysłana przez: Gorn on 13.04.2008, 12:09:53
Wszystko dobrze opisane.
Oto moja praca z tutoriala.

(http://www.gimpuj.info/gallery/8243_26_03_08_9_24_41.png)


Tytuł: Odp: Bateria w stylu Ipoda
Wiadomość wysłana przez: kirka12 on 01.05.2008, 15:55:57
Bardzo fajny tutorial ! Dość łatwy do zrobienia, chociaż w punktach gdzie jest np. rysujemy ścieżkę można by było narysować strzałki pokazujące gdzie tą ścieżkę narysować.

A to mój wynik :
(http://www.gimpuj.info/replacement.png)


Tytuł: Odp: Bateria w stylu Ipoda
Wiadomość wysłana przez: Incognito44 on 07.05.2008, 19:58:53
Super tut. Mój efekt :
(http://img413.imageshack.us/img413/1791/bateriazipodahu1.png)


Tytuł: Odp: Bateria w stylu Ipoda
Wiadomość wysłana przez: Vietnamek on 23.06.2008, 12:00:18
super tutek , i super efekcik koncowy ;] a oto moja praca :
(http://images33.fotosik.pl/296/629198d0752677fd.jpeg) (http://www.fotosik.pl)


Tytuł: Odp: Bateria w stylu Ipoda
Wiadomość wysłana przez: BoczeX on 29.06.2008, 11:23:20
 Moje wypociny :P :
(http://www.gimpuj.info/replacement.png)


Tytuł: Odp: Bateria w stylu Ipoda
Wiadomość wysłana przez: Starczes12 on 09.07.2008, 14:31:39
To moja praca:
(http://www.gimpuj.info/gallery/13254_09_07_08_3_29_27.png)
 :D Tut super


Tytuł: Odp: Bateria w stylu Ipoda
Wiadomość wysłana przez: DAB on 06.08.2008, 09:57:00
Świetny tutek. 0 problemów. Ta bateria po drobnych modyfikacjach zostanie użyta jako logo strony. Miała ona światła, blaski... ale je usunąłem gdyż by to gorzej wyglądało.
1. "Czysta" bateria
(http://dab-portfolio.yoyo.pl/logo.png)
2. Bateria po modyfikacjach
(http://dab-portfolio.yoyo.pl/strona_glowna_logo.png)
(w miejsce Strona Główna będzie oczywiście nazwa działu ;P )


Tytuł: Odp: Bateria w stylu Ipoda
Wiadomość wysłana przez: Doniu on 09.08.2008, 21:50:31
Wzorowałem sie na tum tutku ale nie zrobilem baterii :P . Oto moja praca:


Tytuł: Odp: Bateria w stylu iPoda
Wiadomość wysłana przez: janski on 29.08.2008, 19:08:02
Dobry, dobry tut.
Na jego bazie zrobiłem to:

(http://www.gimpuj.info/gallery/14836_29_08_08_8_00_21.gif)

GIMP rządzi!


Tytuł: Odp: Bateria w stylu iPoda
Wiadomość wysłana przez: Vietnamek on 27.09.2008, 14:27:01
Moja pracka w eXtra tutku :D :
(http://images44.fotosik.pl/14/e82546e00b3f3b53.png) (http://www.fotosik.pl)


Tytuł: Odp: Bateria w stylu iPoda
Wiadomość wysłana przez: EmotiCon on 14.12.2008, 14:18:19
Moje dzieło:


Tytuł: Odp: Bateria w stylu iPoda
Wiadomość wysłana przez: Dragon Master on 01.01.2009, 16:20:19
Świetny tutek. Zaczynam dopiero ze ścieżkami,a dzięki tutkowi będę trochę do przodu.

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


Tytuł: Odp: Bateria w stylu iPoda
Wiadomość wysłana przez: Qba_ on 10.02.2009, 14:50:41
Super tutek i wcale nie jest trudny. Ja zaczynam się bawić w GIMP-ie od jakiegoś miesiąca i zrobiłem. Tutorial jest bardzo dobrze wytłumaczony i nie pozostaje nic innego, jak tylko go wykonać. Moje prace:
Rozładowana bateria:
(http://www.gimpuj.info/gallery/21370_27_02_09_8_15_56_2.png)
Średnio naładowana bateria:
(http://www.gimpuj.info/gallery/21370_27_02_09_8_15_56_1.png)
Naładowana bateria:
(http://www.gimpuj.info/gallery/21370_27_02_09_8_15_56_0.png)


Tytuł: Odp: Bateria w stylu iPoda
Wiadomość wysłana przez: BlackHunter on 09.03.2009, 20:18:01
Troche mnie niwyszło ale co tam xD Ważne że fainy efekt  <lol>

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


Tytuł: Odp: Bateria w stylu iPoda
Wiadomość wysłana przez: grrast on 27.03.2009, 17:05:04
 :D Moje dzieło:


Tytuł: Odp: Bateria w stylu iPoda
Wiadomość wysłana przez: jpowie01 on 04.05.2009, 19:50:46
fajny tutek ;) mimo że jestem początkującym wyszło mi :D
praca w załączniku


Tytuł: Odp: Bateria w stylu iPoda
Wiadomość wysłana przez: tomek1996 on 06.05.2009, 17:01:25
Super !! A tu moje :-) :


Tytuł: Odp: Bateria w stylu iPoda
Wiadomość wysłana przez: Terrqge on 16.08.2009, 17:51:21
Hmmm... ciekawe :)

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



Tytuł: Odp: Bateria w stylu iPoda
Wiadomość wysłana przez: OldShaterhan on 18.08.2009, 14:25:13
Fajny tutorial.
Oto moja praca:
(http://www.gimpuj.info/gallery/30317_18_08_09_2_12_49.png)
W galerii (http://www.gimpuj.info/index.php?action=gallery;sa=view;id=46636)


Tytuł: Odp: Bateria w stylu iPoda
Wiadomość wysłana przez: kumalg on 04.10.2009, 10:42:09
Ja w Inkscape zrobiłem takie ;)
(http://www.gimpuj.info/gallery/thumb_24805_12_07_09_10_30_00.png) (http://www.gimpuj.info/index.php?action=gallery;sa=view;id=43884)


Tytuł: Odp: Bateria w stylu iPoda
Wiadomość wysłana przez: KTV on 05.11.2009, 15:41:11
mi nie chciało się eksperymentować, tylko takie drobne rzeczy naprawiłem:
(http://www.gimpuj.info/gallery/27049_05_11_09_3_46_09.png)


Tytuł: Odp: Bateria w stylu iPoda
Wiadomość wysłana przez: xxbartekxx on 30.01.2010, 16:51:37
dobry tut, oto moja pracka:


Tytuł: Odp: Bateria w stylu iPoda
Wiadomość wysłana przez: OKTS'a on 14.02.2010, 15:48:03
Super napisany tutorial, GIMP-a dopiero poznaje.
(http://img693.imageshack.us/img693/5483/bateriamoja.png)


Tytuł: Odp: Bateria w stylu iPoda
Wiadomość wysłana przez: radzio0090 on 08.05.2010, 00:32:14
odswizam ...

moja bateria
nawet ramke te sama zrobilem
(http://www.gimpuj.info/replacement.png)


Tytuł: Odp: Bateria w stylu iPoda
Wiadomość wysłana przez: Adeo on 26.07.2010, 13:49:45
Moja:
(http://i25.tinypic.com/10546sz.png) :P


Tytuł: Odp: Bateria w stylu iPoda
Wiadomość wysłana przez: droida on 20.09.2010, 21:27:23
świetny tutek ;)

moja praca:
(http://droida.w.interii.pl/Kopia%20bateria.png)


Tytuł: Odp: Bateria w stylu iPoda
Wiadomość wysłana przez: Gimpowski on 30.10.2010, 15:49:06
Świetny tutek i opracowanie :) Oby więcej takich :)

Moja (rezultat, wynik, obraz, praca, rysunek, itp.) :

(http://ifotos.pl/img/bateria_ahahsw.png)

Pozdrawiam.


Tytuł: Odp: Bateria w stylu iPoda
Wiadomość wysłana przez: Szymon_93 on 07.11.2010, 13:30:55
(http://www.gimpuj.info/replacement.png)


Tytuł: Odp: Bateria w stylu iPoda
Wiadomość wysłana przez: Seba65439 on 11.11.2010, 16:20:22
a oto moja praca (http://s1184.chomikuj.pl/ChomikImage.aspx?k=1352978&t=634252482875727466&id=384911346&vid=384911346)


Tytuł: Odp: Bateria w stylu iPoda
Wiadomość wysłana przez: Irokezkez on 11.11.2010, 17:05:27
(http://images35.fotosik.pl/209/6a56bbea553c7078.png)
Zadowolony, ze w ogole cos mi wyszlo :D   


Tytuł: Odp: Bateria w stylu iPoda
Wiadomość wysłana przez: kon on 26.01.2011, 13:36:07
Tylko naladowac...


Tytuł: Odp: Bateria w stylu iPoda
Wiadomość wysłana przez: sasekochasek on 16.04.2011, 21:15:08
a oto moje dzieło :
(http://www.gimpuj.info/replacement.png)


i tutaj jeszcze z dziś
(http://www.gimpuj.info/replacement.png)


Tytuł: Odp: Bateria w stylu iPoda
Wiadomość wysłana przez: tyrran on 20.04.2011, 17:09:07
Mi tylko takie coś wszystko niestety :)

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


Tytuł: Odp: Bateria w stylu iPoda
Wiadomość wysłana przez: Orisagi-chan ^^ on 20.04.2011, 21:26:37
Naprawdę świetny tut, oby więcej takich ;D

Moje dzieło:
(http://www.gimpuj.info/replacement.png) (http://img197.imageshack.us/i/batterybyorisagi.png/)

Uploaded with ImageShack.us (http://imageshack.us)


Tytuł: Odp: Bateria w stylu iPoda
Wiadomość wysłana przez: BuldingArt on 04.08.2011, 21:47:27
błagam nie zapisujcie prac w formacie gif !!


Tytuł: Odp: Bateria w stylu iPoda
Wiadomość wysłana przez: Sooly on 04.08.2011, 23:27:57
A kto niby tak robi? (poza jedną osoba na pierwszej stronie w wiadomości sprzed 2,5 roku...)
Ty lepiej naucz się zasad polskiej interpunkcji.


Tytuł: Odp: Bateria w stylu iPoda
Wiadomość wysłana przez: Lanar on 14.08.2011, 12:07:58
(http://www.gimpuj.info/replacement.png)
Fajny tutek