Polskie Forum Użytkowników GIMP-a

Tutoriale => WWW => Wątek zaczęty przez: Kifer71 on 20.09.2006, 20:50:59



Tytuł: Szklana(?) tuba jako przycisk
Wiadomość wysłana przez: Kifer71 on 20.09.2006, 20:50:59
Szklana tuba jako przycisk
Tutorial

Oryginał: Oryginalny tutorial (http://www.gimptalk.com/forum/topic.php?t=3673&start=1)
Opracowanie: Kifer71
Poziom trudności: średni

(http://www.gimpuj.info/gallery/21370_05_09_09_1_44_19.png)

(http://www.gimpuj.info/gallery/21370_05_09_09_1_46_52.png)




W tym tutorialu nauczysz się robić przycisk podobny do szklanej tuby, który można wykorzystać na swojej stronie WWW.
Do wykonania tego tutoriala potrzebna Ci jest paczka skryptów Layer Effects, którą możesz znaleźć w załączniku.

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



[lp] Zaczynamy

[lp] 1. Otwieramy nowy obraz (Plik -> Nowy... [Ctrl+N]) o wymiarach 450x100 px i przezroczystym tle.

[lp] 2. Następnie stosujemy filtr jednolitych chmur (Filtry -> Renderowanie -> Chmury -> Jednolite chmury...) z ustawieniami:
  • Ziarno losowości: wylosuj
  • Szczegóły: 1
  • Rozmiar X: 2,0
  • Rozmiar Y: 2,0

(http://www.gimpuj.info/gallery/21370_04_09_09_8_13_07.png)


[lp] 3. Utwórz nową warstwę (Warstwa -> Nowa warstwa... [Shift+Ctrl+N]) i nazwij ją tuba. Następnie na środku zaznacz prostokąt <zaznaczenie-prostokatne> [R] o wymiarach 350x60 px. Dla łatwiejszego zaznaczania możesz włączyć widok  i przyciąganie do siatki (Widok -> Wyświetl siatkę i Widok -> Przyciągaj do siatki).

[lp] 4. Następnie zaokrągl zaznaczenie (Zaznaczenie -> Zaokrąglenie...) ustawiając promień na 90%. Następnie wypełnij <wypelnienie> [Shift+B] zaznaczenie kolorem #2fde2f. Ustaw tryb warstwy tuba na Pokrywanie.

(http://www.gimpuj.info/gallery/21370_04_09_09_8_14_00.png)


[lp] 5. Zapisz zaznaczenie do późniejszego użycia (Zaznaczenie -> Zapisz do kanału). Przejdź na warstwę Tło i odwróć zaznaczenie (Zaznaczenie -> Odwróć [Ctrl+I]), a następnie wyczyść je (Edycja -> Wyczyść [Delete]). Usuń zaznaczenie (Zaznaczenie -> Nic [Shift+Ctrl+A]) i połącz warstwę tuba z warstwą Tło (PPM na warstwie -> Połącz w dół.

[lp] 6. Utwórz nową warstwę (Warstwa -> Nowa warstwa... [Ctrl+N]) i nazwij ją dolna poświata. Wejdź w zakładkę Kanały <kanaly>, wybierz kanał kopia: Maska zaznaczenia i kliknij na nim PPM -> Kanał na zaznaczenie. Przejdź do zakładki Warstwy <warstwy> [Ctrl+L], wybierz warstwę dolna poświata i zmniejsz zaznaczenie (Zaznaczenie -> Zmniejsz...) o 6 px.

[lp] 7. Zmień kolor pierwszoplanowy na biały i przeciągnij gradientem liniowym <gradient> [L] z ustawionym gradientem na Kolor pierwszoplanowy na przezroczystość i zaznaczoną opcją Odwróć. Wypełnij gradientem ok. 1/3 zaznaczenia, następnie usuń zaznaczenie (Zaznaczenie -> Nic [Shift+Ctrl+A]). Na warstwie dolna poświata zastosuj rozmycie Gaussa (Filtry -> Rozmycie -> Rozmycie Gaussa...) z parametrami:
  • Poziomo: 10,0
  • Pionowo: 10,0
  • Typ rozmycia: RLE

(http://www.gimpuj.info/gallery/21370_04_09_09_8_14_37.png)


[lp] 8. Zmień krycie warstwy dolna poświata na 80%. Utwórz nową warstwę (Warstwa -> Nowa warstwa... [Shift+Ctrl+N]) i nazwij ją górna poświata. Przejdź do zakładki Kanały <kanaly>, kliknij na kanale kopia: Maska zaznaczenia PPM -> Kanał na zaznaczenie i powróć do zakładki Warstwy <warstwy> [Ctrl+L]. Jako aktywną wybierz warstwę górna poświata, zmniejsz zaznaczenie (Zaznaczenie -> Zmniejsz...) o 6 px. Następnie przeciągnij gradientem liniowym <gradient> [L] z odznaczoną opcją odwróć od góry do połowy zaznaczenia.

(http://www.gimpuj.info/gallery/21370_04_09_09_8_23_24.png)


[lp] 9. Teraz przesuń <przesuwanie> [M] zaznaczenie z wciśniętym klawiszem Alt o 30 px w prawo i 10 px do dołu. Następnie wyczyść zaznaczenie (Edycja -> Wyczyść [Delete]), usuń je (Zaznaczenie -> Nic [Shift+Ctrl+A]) i użyj rozmycia Gaussa (Filtry -> Rozmycie -> Rozmycie Gaussa...) z ustawieniami:
  • Poziomo: 10,0
  • Pionowo: 10,0
  • Typ rozmycia: RLE

(http://www.gimpuj.info/gallery/21370_04_09_09_8_30_43.png)


[lp] 10. Utwórz nową warstwę (Warstwa -> Nowa warstwa... [Shift+Ctrl+N]), nazwij ją środkowa poświata i przesuń nad warstwę dolna poświata. Ponownie przejdź do zakładki Kanały <kanaly>, aktywuj zapisane zaznaczenie i wróć do zakładki Warstwy <warstwy> [Ctrl+L].  Zmniejsz zaznaczenie (Zaznaczenie -> Zmniejsz...) o 16 px i wypełnij <wypelnienie> [Shift+B] zaznaczenie kolorem czarnym i usuń zaznaczenie (Zaznaczenie -> Nic [Shift+Ctrl+A]). Następnie użyj rozmycia Gaussa (Filtry -> Rozmycie -> Rozmycie Gaussa...) z ustawieniami:
  • Poziomo: 25,0
  • Pionowo: 25,0
  • Tryb rozmycia: RLE

(http://www.gimpuj.info/gallery/21370_04_09_09_8_37_43.png)


[lp] 11. Zmień krycie warstwy środkowa poświata na 25%, a następnie połącz wszystkie warstwy w jedną (PPM na warstwie -> Połącz widoczne warstwy...).

(http://www.gimpuj.info/gallery/21370_04_09_09_8_40_01.png)


[lp] 12. Teraz zastosuj jeden ze skryptów, które ściągnąłeś na początku tutoriala. Wejdź więc w Script-Fu -> Layer Effects -> Bevel and Emboss... i ustaw opcje tak, jak na poniższym obrazku.

(http://www.gimpuj.info/gallery/21370_04_09_09_8_44_46.png)


(http://www.gimpuj.info/gallery/21370_04_09_09_8_46_20.png)


[lp] 13. Następnie zastosuj drugi ze ściągniętej paczki skrypt. Wejdź w Script-Fu -> Layer Effects -> Satin... i ustaw opcje tak jak na obrazku poniżej.

(http://www.gimpuj.info/gallery/21370_04_09_09_8_49_50.png)


(http://www.gimpuj.info/gallery/21370_04_09_09_8_50_29.png)


[lp] 14. Następnie połącz wszystkie warstwy w jedną (PPM na warstwie -> Połącz widoczne warstwy...). Szklana rurka jest już gotowa. Teraz utwórz nową warstwę (Warstwa -> Nowa warstwa... (shift+Ctrl+N]) i nazij ją nakładka. Przejdź do zakładki Kanały <kanaly>, aktywuj zapisane wcześniej zaznaczenie i wróć do zakładki Warstwy <warstwy> [Ctrl+L]. Ustaw kolor pierwszoplanowy na #e32727, a kolor tła na #f19696.

[lp] 15. Wypełnij zaznaczenie gradientem liniowym <gradient> [L] z zaznaczoną opcją odwróć i gradientem ustawionym na Kolor pierwszoplanowy na kolor tła (RGB) od góry do dołu i następnie usuń zaznaczenie (Zaznaczenie -> Nic [Shift+Ctrl+A]). Wejdź w Obraz -> Konfiguruj siatkę kliknij Resetuj i następnie OK. Wyświetl widok i przyciąganie do siatki (Widok -> Wyświetl siatkę i Widok -> Przyciągaj do siatki).

(http://www.gimpuj.info/gallery/21370_04_09_09_9_02_40.png)


[lp] 16. Następnie wybierz narzędzie Zaznaczenie eliptyczne <zaznaczenie-eliptyczne> [E], zaznacz Stały, z menu wybierz Rozmiar i wpisz 150x100. Przeciągnij zaznaczenie ze współrzędnych 10, 20, a następnie przytrzymując klawisz Shift wykonaj drugie zaznaczenie równolegle do poprzedniego. Powinieneś otrzymać poniższy efekt.

(http://www.gimpuj.info/gallery/21370_04_09_09_9_09_47.png)


[lp] 17. Wyczyść zaznaczenie (Edycja -> Wyczyść [Delete]) i usuń zaznaczenie (Zaznaczenie -> Nic [Shift+Ctrl+A]). Odznacz widok i przyciąganie do siatki (Widok -> Wyświetlaj siatkę i Widok -> Przyciągaj do siatki). Na warstwie nakładka zastosuj filtr dodaj fazę (Filtry -> Dekoracja -> Dodaj fazę...) z ustawieniami:
  • Grubość: 5
  • Pracuj na kopii: odznaczone

(http://www.gimpuj.info/gallery/21370_04_09_09_9_15_43.png)


[lp] 18. Teraz zastosuj filtr rzucania cienia (Filtry -> Światło i cień -> Rzucanie cienia...) z ustawieniami:
  • Przesunięcie X: 1
  • Przesunięcie Y: 1
  • Promień rozmycia: 0

(http://www.gimpuj.info/gallery/21370_04_09_09_9_18_48.png)


[lp] 19. Następnie powtórz filtr rzucanie cienia (Filtry -> Światło i cień -> Rzucanie cienia...) z ustawieniami:
  • Przesunięcie Y: -1

(http://www.gimpuj.info/gallery/21370_04_09_09_9_21_39.png)


[lp] 20. Teraz zastosuj skrypt: Script-Fu -> Layer Effects -> Inner Shadow... z ustawieniami jak na obrazku poniżej.

(http://www.gimpuj.info/gallery/21370_04_09_09_9_24_24.png)


(http://www.gimpuj.info/gallery/21370_04_09_09_9_25_57.png)


[lp] 21. Wyłącz widoczność (<widocznosc>) warstwy Bevel Shadow i kliknij PPM na warstwie -> Połącz widoczne warstwy.... Po wykonaniu tej operacji możesz już włączyć widoczność warstwy Bevel Shadow[/i. Powinieneś mieć 2 warstwy, górną nazwij nakładka, a dolną rurka. Zduplikuj warstwę nakładka (PPM na warstwie -> Duplikuj warstwę), odbij ją w pionie (Warstwa -> Przekształcenie -> Odbij pionowo) i przesuń kopię warstwy pod oryginał.

(http://www.gimpuj.info/gallery/21370_04_09_09_9_31_40.png)


[lp] 22. Chcąc uzyskać inny kolor niższej nakładki powtórz czynności tworzące nakładkę lub eksperymentuj z barwieniem (Kolory -> Barwienie), Kanałami RGB, czy innymi narzędziami kolorów. Dodaj jakiś napis, zmień rozmiar i masz gotowy przycisk na stronę WWW.

(http://www.gimpuj.info/gallery/21370_05_09_09_1_44_19.png)


[lp] Koniec



Miłego GIMP-owania :).




Tytuł: Odp: Szklana(?) tuba jako przycisk
Wiadomość wysłana przez: AroGancjA Records on 16.07.2007, 20:24:49
Oto co mi wyszło 8) xD (http://www.gimpuj.info/replacement.png) (http://)


Tytuł: Odp: Szklana(?) tuba jako przycisk
Wiadomość wysłana przez: Zenfur on 05.03.2008, 21:55:26
No dobra... wszystko fajnie, rurki piękne, ale tych efektów w script-fu (badz gdziekolwiek indziej) to ja nie umiem znaleźć... :< zwłaszcza, kiedy mam polską wersję TUTAJ (http://translator.telewizor.eu) ... mógłby mi ktoś napisać jak to będzie w polskiej wersjii 2.4? Proszę ! :D


Tytuł: Odp: Szklana(?) tuba jako przycisk
Wiadomość wysłana przez: Yanke$ on 22.11.2008, 18:08:12
Te skrypty trzeba ściągnąć, najlepiej z tej strony (http://users.telenet.be/ev1/gimplayereffects_en.html) bo linki Kifera nie działają.

Edit:\\\
Moja tuba.
(http://www.gimpuj.info/gallery/17706_22_11_08_9_00_07.png)
Fajny tutorial. Myślałem, że nie podołam ale się udało  ;)

A i jeszcze coś. W wersji 2.6 nie ma "Script-Fu -> Ozdobienia -> Dodaj fazę" tylko "Filtry -> Dekoracja -> Dodaj fazę" i nie ma "Script-Fu ->  Cień -> Rzucanie cienia: tylko "Filtry -> Światło i cień -> Rzucanie cienia".

I jeszcze napisałeś.
Cytuj
z menu Widok wybierz Połącz widoczne warstwy
A powinno być z menu Obraz. A poza tym wszystko spoko.
Pozdrawiam.  <aniolek>




Tytuł: Odp: Szklana(?) tuba jako przycisk
Wiadomość wysłana przez: Cobra on 26.02.2010, 16:44:40
Sorry za odkop ale chcę pokazać co mi wyszło :)