Prosty przycisk w stylu web 2.0

16 maja, 2012 w kategoriach: Grafika 2D, Web design, Adobe Photoshop

2,954 2
Dane:
  • Czas pracy: 10 min.
  • Poziom: Podstawowy
Opis:

Efekt bazuje na stylach warstw i kilku prostych operacjach, które nie powinny w żaden sposób przeszkodzić w wykonaniu samouczka nawet początkującym użytkownikom Photoshopa. Tutorial ma na celu pokazanie Wam, jak prosty sposób możemy stworzyć ładny przycisk, korzystając z darmowych gradientów i kombinacji w stylach warstw.

Pokaż/Ukryj wszystko

Materiały:
Gradienty web 2.0 – http://www.dezinerfolio.com/2007/03/14/ultimate-web-20-gradients-free-download- Rozpakowujemy do folderu Presets/Gradients w katalogu Photoshopa.
Tworzymy nowy plik, ja ustaliłem rozmiar powierzchni roboczej na 500x500px oraz czarne tło z małym gradientem, ale tylko i wyłącznie w celu lepszej prezentacji. Następnie wybieramy narzedzie „Rounded Rectangle Tool”.

„Radius” zmieniamy na 5px, co pozwoli nam uzyskać efekt zaokrąglonych rogów o promieniu 5 pikseli.

Alt prostybutton1-266x300

Alt prostybutton2


Wydawnictwo Strefa Kursów

Rysujemy teraz kształt naszego przycisku, wymiary raczej dowolne…oczywiście powinniśmy wziąć pod uwagę, że przycisk powinien być szerszy niż wyższy.

Przechodzimy teraz do stylów warstw (Layer->Layer Styles) naszej warstwy z nakreślonym kształtem przycisku i w tym miejscu dokonamy kilku prostych modyfikacji…kierujemy się wytycznymi zawartymi na screenach. Następnie dodajemy efekt cienia pod naszym przyciskiem.

Alt prostybutton4-300x254

Następnie nałożymy na nasz przycisk gradient i nadamy trochę barw naszemu przyciskowi…najpierw jednak musimy wczytać nasze świeżo pobrane gradienty(patrz: materiały, powyżej). Po wypakowaniu ich do wspomnianego katalogu Photoshop musimy je jeszcze załadować do programu, w sposób taki, jak pokazałem na poniższym obrazku:

Alt prostybutton5-252x300

Klikamy prawym przyciskiem myszy na warstwie z naszym przyciskiem i wybieramy „Rasterize Layer”.

Wybieramy narzędzie „Magic Wand” i zaznaczamy cały obszar naszego przycisku. Następnie przechodzimy w Menu do Select->Modify->Contract i ustalamy wartość na 2px.Wtopiliśmy nieco nasze zaznaczenie.

Alt prostybutton8-300x285

Kolejnym krokiem będzie nadanie naszemu małemu przyciskowi blasku Tworzymy nową warstwę i na wybranym z poprzedniego kroku zaznaczeniu stosujemy biało-przezroczysty gradient(linear). Opcje mieszania ustalamy na Overlay.

Następnie tworzymy nową warstwę.Pracując cały czas na zaznaczeniu z poprzedniego kroku, wybieramy narzędzie zaznaczenia eliptycznego i zmieniamy typ zaznaczenia na pokazaną na obrazku ikonkę.

Alt prostybutton11

Kreślimy teraz zaznaczenie eliptyczne, aby osiągnąć zaznaczenie podobne do mojego i wykonujemy na nim podobną operację z gradientem w kroku poprzednim. W tym miejscu powinniśmy otrzymać mniej więcej takie zaznaczenie:

Alt prostybutton12-300x175

Ostatnim brakującym elementem naszego przycisku jest z całą pewnością tekst…więc tworzymy nową warstwę tekstową, wybieramy jakąś prostą i małą czcionkę( w moim przypadku Kartika, rozmiar 30pt) i wpisujemy przykładowy tekst. Na koniec warto poeksperymentować z efektami stylów warstw dla warstwy z tekstem. Ja osiągnąłem taki efekt końcowy:

Alt prostybutton16-300x268

Pokaż/Ukryj wszystko

Tutorial się podobał? Podziel się z innymi:

Dyskusja (2 wypowiedzi)

Dodaj odpowiedź

Dodaj komentarz