Ładny button na stronę www

Ładny button na stronę WWW
Tutorial

Opracowanie: Lenoxxi
Poziom trudności: łatwy

Natknąłem się na tutorial do PSa, postanowiłem go przepisać na GIMPie i mam nadzieję, źe uda wam się go zrobić. ;)

Tutorial napisany w wersji GIMPa 2.4.4 W innych wersjach nazwy narzędzi i pojęć mogą się róźnić.

Zaczynamy

1. Otwieramy Nowy dokument o wymiarach100x100px.

2. Warto pracować na przybliźeniu 400% (Widok -> Powiększenie).

3. Rysujemy prowadnice (Obraz -> Prowadnice -> Nowa prowadnica):
- dwie pionowe:
13px
88px
- dwie poziome:
13px
88px

4. Otwieramy nową, przeżroczystą warstwę [Ctrl+Shift+N], nazwijmy ją body.

5. Rysujemy koło za pomocą narzędzia Zaznaczenie eliptyczne [E] wewnątrz prowadnic.

6. Teraz czas na kolorowanie kółeczka - kolor pierwszoplanowy: #68ac00, kolor drugoplanowy: #036800.

7. Przejeźdźamy gradientem [L] od prawej górnej strony do lewej dolnej.

A oto efekt:

8. Duplikujemy [Shift+Ctrl+D] warstwę body, duplikat niech nazywa się obramowanie. Włóźmy ją pomiędzy warstwy body a tło.

9. Powiększamy zaznaczenie (Zaznaczenie -> Powiększ...) o 2px. Usuwamy [Delete] zawartość zaznaczenia.

10. Wylewamy kubkiem (Wypełnienie kubełkiem [Shift+B]) o kolorze białym.

11. Duplikujemy [Shift+Ctrl+D] warstwę obramowanie, duplikat nazywamy cień. Włóźmy pod warstwę obramowanie i pokolorujmy warstwę cień na czarno.

12. Zaznacz wszystko [Ctrl+A].

13. I "gaussujemy" (Filtry -> Rozmycie -> Rozmycie Gaussa...) o wartości 5px. Efekt:

14. Tworzymy nową warstwę [Ctrl+Shift+N], nazwijmy ją odbicie. Niech znajduje się na samej górze.

15. Tworzymy Zaznaczenie eliptyczne [E] wewnątrz prowadnic.

16. Zmniejszamy zaznaczenie o 2px (Zaznaczenie -> Zmniejsz...).

17. Zaznaczeniem eliptycznym [E] (z przytrzymaniem klawisza Ctrl rysujemy elipsę w ten sposób:

18. Wybieramy kolor pierwszoplanowy: #a8da77.

19. Wybieramy gradient Kolor pierwszoplanowy na przezroczystość.

I efekt:

20. Tworzymy nową warstwę [Ctrl+Shift+N].

21. Rysujemy strzałkę (ja sobie wyciąłem strzałkę, bo nie widziałem prostszego sposobu, jak chcecie moźecie sobie z mojego rysunku wyciąć tą strzałkę).
No i dobrnęliśmy do końca, oto gotowy efekt:

Koniec


Moźecie oczywiście się pobawić z kolorystyką i elementem w wewnątrz buttonu.
Tutaj np. wersja koloru czerwonego:




Nikt nie broni takźe zmieniania kształtu:



Tutorial pochodzi z Forum Gimpuj.info
Autor: Lenoxxi

Zaloguj się, aby móc dodawać komentarze.