Szklana tuba jako przycisk
Tutorial
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ć.
Zaczynamy 1. Otwieramy nowy obraz (
Plik -> Nowy... [Ctrl+N]) o wymiarach
450x
100 px i przezroczystym tle.
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
3. Utwórz nową warstwę (
Warstwa -> Nowa warstwa... [Shift+Ctrl+N]) i nazwij ją
tuba. Następnie na środku
zaznacz prostokąt [R] o wymiarach
350x
60 px. Dla łatwiejszego zaznaczania możesz włączyć widok i przyciąganie do siatki (
Widok -> Wyświetl siatkę i
Widok -> Przyciągaj do siatki).
4. Następnie zaokrągl zaznaczenie (
Zaznaczenie -> Zaokrąglenie...) ustawiając promień na
90%. Następnie
wypełnij [Shift+B] zaznaczenie kolorem
#2fde2f. Ustaw tryb warstwy
tuba na
Pokrywanie.
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ół.
6. Utwórz nową warstwę (
Warstwa -> Nowa warstwa... [Ctrl+N]) i nazwij ją
dolna poświata. Wejdź w zakładkę
Kanały , wybierz kanał
kopia: Maska zaznaczenia i
kliknij na nim PPM -> Kanał na zaznaczenie. Przejdź do zakładki
Warstwy [Ctrl+L], wybierz warstwę
dolna poświata i zmniejsz zaznaczenie (
Zaznaczenie -> Zmniejsz...) o
6 px.
7. Zmień kolor pierwszoplanowy na
biały i przeciągnij
gradientem liniowym [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
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 ,
kliknij na kanale kopia: Maska zaznaczenia PPM -> Kanał na zaznaczenie i powróć do zakładki
Warstwy [Ctrl+L]. Jako aktywną wybierz warstwę
górna poświata, zmniejsz zaznaczenie (
Zaznaczenie -> Zmniejsz...) o
6 px. Następnie przeciągnij
gradientem liniowym [L] z odznaczoną opcją odwróć od góry do połowy zaznaczenia.
9. Teraz
przesuń [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
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 , aktywuj zapisane zaznaczenie i wróć do zakładki
Warstwy [Ctrl+L]. Zmniejsz zaznaczenie (
Zaznaczenie -> Zmniejsz...) o
16 px i
wypełnij [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
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...).
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.
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.
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 , aktywuj zapisane wcześniej zaznaczenie i wróć do zakładki
Warstwy [Ctrl+L]. Ustaw kolor pierwszoplanowy na
#e32727, a kolor tła na
#f19696.
15. Wypełnij zaznaczenie
gradientem liniowym [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).
16. Następnie wybierz narzędzie
Zaznaczenie eliptyczne [E], zaznacz
Stały, z menu wybierz
Rozmiar i wpisz
150x
100. 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.
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
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
19. Następnie powtórz filtr rzucanie cienia (
Filtry -> Światło i cień -> Rzucanie cienia...) z ustawieniami:
20. Teraz zastosuj skrypt:
Script-Fu -> Layer Effects -> Inner Shadow... z ustawieniami jak na obrazku poniżej.
21. Wyłącz widoczność (
) 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ł.
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.
Koniec
Miłego GIMP-owania
.