W dzisiejszych dniach w internecie powstaje coraz więcej witryn web 2.0. Jednak web 2.0 to nie tylko współtworzenie treści przez użytkowników ale także estetyczny oraz lekki wizualnie design. Jedną z cech web 2.0 są przyciski. Dzisiaj zaprezentuję wam jak stworzyć ładny przycisk w stylu web 2.0 dla kanału RSS waszej strony przy pomocy Photoshopa CS3 którego darmowa wersja trial znajduje się na stronie producenta.

Po ukończeniu tego tutoriala powinniście osiągnąć taki oto button:

1.Włączmy zatem photoshopa i stwórzmy nowy dokument z przezroczystym tłem o rozmiarze 250 x 100 px.

2.Tworzymy teraz prostokąt z zaokrąglonymi rogami przy pomocy /Rounded Recentagle Tool/ . Przeciagamy kursor z lewego górnego do przeciwległego rogu, pozostawiając kilka pikseli odstępu.

3.Następnym krokiem jest kliknięcie prawym przyciskiem na warstwę oraz wybranie elementu /Blending options/

4.Ustawiamy nałożenie gradientu na warstwę. Pierwszym kolorem jest #484848 natomiast drugim #000000. Odwracamy gradient do góry nogami zaznaczając praszka przy /Reverse/

5. Teraz dodajemy obrys kształtu. Wybieramy modyfikator /stroke/ oraz dodajemy obrys o grubości 1px i kolorze #363636

6. Ustawiamy /Inner glow/ na kolor biały oraz na opacity 30%. Rozmiar zmieniamy na 10px a range na 60%

Po zastosowaniu tych efektów powinniśmy osiągnąć taki oto prostokąt:

7. Tworzymy teraz nową warstwę i nazywamy ją “połysk”

8. Rysujemy jeszcze jeden prostokąt z zaokrąglonymi rogami, tym razem jednak trochę mniejszy niż wcześniejszy.

9. Rastetyzujemy warstwę

10. Przy pomocy szybkiej maski i czarno- białego gradientu zaznaczamy górną część przycisku.

Wyłączamy tryb szybkiej maski i naciskamy przycisk /delete/ na klawiaturze.
Uzyskujemy-

Pozostaje już tylko wstawić ikonę RSS oraz dodać odrobinę tekstu, który konieczny tu nie jest. W moim przykładzie nie użyłem tekstu. Jednak ten button był tworzony aby wstawić ikonę oraz tekst.