Tytuł: Bateria w stylu iPoda Wiadomość wysłana przez: damian667 on 26.03.2008, 18: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, 01: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, 18: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, 13: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, 16: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, 20: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, 13: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, 12: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, 15: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, 10: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, 22: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, 20: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, 15: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, 15:18:19 Moje dzieło:
Tytuł: Odp: Bateria w stylu iPoda Wiadomość wysłana przez: Dragon Master on 01.01.2009, 17: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, 15: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, 21: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, 18:05:04 :D Moje dzieło:
Tytuł: Odp: Bateria w stylu iPoda Wiadomość wysłana przez: jpowie01 on 04.05.2009, 20: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, 18:01:25 Super !! A tu moje :-) :
Tytuł: Odp: Bateria w stylu iPoda Wiadomość wysłana przez: Terrqge on 16.08.2009, 18: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, 15: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, 11: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, 16: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, 17:51:37 dobry tut, oto moja pracka:
Tytuł: Odp: Bateria w stylu iPoda Wiadomość wysłana przez: OKTS'a on 14.02.2010, 16: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, 01: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, 14: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, 22: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, 16: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, 14:30:55 (http://www.gimpuj.info/replacement.png)
Tytuł: Odp: Bateria w stylu iPoda Wiadomość wysłana przez: Seba65439 on 11.11.2010, 17: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, 18: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, 14:36:07 Tylko naladowac...
Tytuł: Odp: Bateria w stylu iPoda Wiadomość wysłana przez: sasekochasek on 16.04.2011, 22: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, 18: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, 22: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, 22:47:27 błagam nie zapisujcie prac w formacie gif !!
Tytuł: Odp: Bateria w stylu iPoda Wiadomość wysłana przez: Sooly on 05.08.2011, 00: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, 13:07:58 (http://www.gimpuj.info/replacement.png)
Fajny tutek |