Lśniące Buttony
czwartek, 17 września 2009 21:39 Poprawiony: sobota, 19 września 2009 14:44
W tym całkiem prostym tutorialu nauczysz się jak zrobić swój własny profesjonalny button. Podczas tworzenia grafiki na własna stronę internetową na pewno przyda się Tobie umiejętność tworzenia takich buttonów.
Otwórz nowy dokument o rozmiarach 400x340 pixeli i wypełnij go jasno szarym gradientem
Wybierz narzędzie zaznaczenie prostokątne, ustaw jego wielkość na 140x140pixeli i kliknij gdzieś na dokumencie
Z cały czas aktywnym zaznaczeniem stwórz nową warstwę i wypełnij zaznaczenie radialnym gradientem z dowolnie wybranymi przez Ciebie kolorami.
Ja użyłem kolorów #3e94d4 i #336fc1 Następnie dodałem biały obrys o szerokości 1 pixela. Aby dodać obrys kliknij na obrazku warstwy z wciśniętym klawiszem ctrl, następnie przejdź do zakładki edit>stroke i wprowadź wartość 1 oraz wybierz kolor obrysu.
// // 
Zaznacz jeszcze raz obrys wokół kwadratu trzymając klawisz ctrl i klikając obrazek warstwy
Użyj opcji contract z zakładki Select > Modify > Contract i wprowadź wartość 4 lub 5 pixeli.
Teraz wybierz narzędzie wypełnienie gradientem na nowej wastwie wypełnij zaznaczenie gradientem jak na obrazku
Wybierz teraz narzędzie pióro i narysuj taką krzywą:
Z cały czas aktywnym piórem kliknij prawym przyciskiem na kształcie I wybierz z rozwijanego menu opcję make selection z parametrem 0.
Stwórz nową warstwę i wypełnij zaznaczenie gradientem od białego do przezroczystego przeciągając go od góry do dołu buttona
Zmień tryb warstwy na Soft Light I zmniejsz jej krycie jeśli uważasz to za konieczne. Ja nie zmieniałem krycia bo button wygląda całkiem ładnie
Żeby dodać szczegóły dodałem ikonki ze strony i zmniejszyłem ich krycie tak żeby ładnie się prezentowały.
Teraz dodaj jakiś tekst do buttona, żeby wszyscy wiedzieli do jakiego działu prowadzi odnośnik. Ja użyłem białej czcionki Tahoma o wielkości 11pt z poniższym stylem
Po stworzeniu pierwszego buttona z drugim nie powinno być już żadnego problemu tym bardziej, że wystarczy skopiować wszystkie warstwy z pierwszego buttona, przesunąć je nieco w prawo i zmienić kolor gradientu. Ostateczny wygląd buttonów zależy tylko od Twojej wyobraźni!
Original Photoshop tutorial by PhotoshopStar
| « poprzednia | następna » |
|---|