Przyciski w Photoshopie

rys. 1 rys. 2 rys. 3

Do stworzenia efektownego przycisku na stronę www trzeba użyć dobrego programu graficznego. Może to być sharewareowy Paint Shop Pro, darmowy Gimp lub profesjonalny Adobe Photoshop. Jako że z tym ostatnim pracuję już od paru lat, to właśnie jego postanowiłem wykorzystać w tym kursie. Aha, jeszcze jedno. Przy tworzeniu kursu korzystałem z angielskiego Photoshopa w wersji 6.0, w którym zaszło kilka zmian w porównaniu z wcześniejszymi wersjami, ale myślę, że jakoś sobie poradzicie jeśli nie macie 6.0.

Zacznijmy od stworzenia pierwszego przycisku (rys. 1). Na początku tworzymy nowy dokument o wymiarach 200x70 pikseli (oczywiście jak na mały przycisk to za dużo, ale na takim obszarze łatwiej się pracuje, a wielkość można dopasować później). Tło wypełniamy kolorem czarnym i wybieramy narzędzie Type (można użyć skrótu - przycisk T na klawiaturze). Tworzymy nową warstwę (Layer/New/Layer lub wciskając Shift+Ctrl+N), po czym wyłączamy widoczność warstwy Background (klikając na oku w prawym dolnym rogu, w okienku Layers). Teraz powinna być widoczna szachownica, oznaczająca przezroczystość. Mając wybrane narzędzie Type klikamy na szachownicy i wpisujemy jakiś wyraz (np. news). Po zaznaczeniu całego wyrazu (lub przed jego wpisaniem :) możemy zmienić czcionkę (kolor zostawiamy czarny), np. Arial Black, Italic, 18 pt. Włączamy widoczność warstwy Background (ponownie pojawi się oko) i klikając prawym przyciskiem myszy na warstwie news (w oknie Layers, obok oka) wybieramy Blending Options... Z lewej strony nowo otwartego okna mamy możliwość wyboru kilku efektów. Klikamy na Outer Glow (na napisie, nie kwadraciku :), suwakiem zmieniamy Opacity na 100%, wybieramy kolor (np. żółty). Jeśli ktoś chce, to może pobawić się innymi suwakami i opcjami i poobserwować efekty. Kiedy będziemy zadowoleni, dajemy OK. Teraz trzeba jeszcze zmniejszyć wielkość rysunku. Używając narzędzia Move (skrót V) ustawiamy napis w lewym górnym rogu rysunku (dokładne ustawienie można uzyskać przy użyciu strzałek na klawiaturze). Wybieramy Image/Canvas Size... i wpisujemy odpowiednią szerokość i wysokość rysunku. Należy jeszcze pamiętać o kliknięciu na lewą górną strzałkę w opcji Anchor, po czym potwierdzamy ustawienia (OK., Proceed). Na koniec zapisujemy wszystko w formacie JPG lub GIF (w starszych wersjach Photoshopa należy użyć opcji Save Copy).

Przejdźmy teraz do drugiego przycisku (rys. 2). Nowy dokument powinien mieć jednakową szerokość i wysokość (np. 200x200) i biały kolor tła. Na pierwszy plan (foreground) wybieramy kolor biały, natomiast jako kolor tła (background) ciemny szary. Tworzymy nową warstwę i wybieramy okrągły styl zaznaczenia (klikając na pierwszym narzędziu z lewej strony i trzymając wciśnięty klawisz przez ok. 1 sek., z rozwiniętego menu wybieramy okrąg i puszczamy klawisz). Z wciśniętym klawiszem Shift rysujemy okrąg. Wybieramy narzędzie Gradient (skrót G) i jako styl wypełnienia wybieramy Radial (w górnym menu, druga z pięciu opcji). Wypełniamy koło zaczynając od lewego górnego rogu zaznaczenia (ale nie całkiem od brzegu) w kierunku prawego dolnego rogu (do końca zaznaczenia). Następnie używając opcji Select/Modify/Contract... zmniejszamy zaznaczenie o ok. 3-4 piksele. Teraz obracamy zaznaczony obszar o 180 stopni (Edit/Transform/Rotate 180) i ponownie zmniejszamy zaznaczenie o 3-4 piksele. Jako kolor tła wybieramy np. pomarańczowy i wypełniamy nasz zaznaczony okrąg podobnie jak na początku. Odznaczamy wszystko (Ctrl+D) i tworzymy nową warstwę, na której będzie można rysować symbole (np. przy użyciu narzędzia Custom Shape Tool). Zapisujemy rysunek i przechodzimy do następnego akapitu :).

Trzeci przycisk (rys. 3) jest chyba jednym z najpopularniejszych (oczywiście nasz będzie wyjątkowy po kilku zmianach :). Kolor tła biały, tworzymy nową warstwę, wybieramy styl zaznaczenia prostokątny i rysujemy nasz przycisk. Następnie używając opcji Select/Modify/Smooth... zaokrąglamy rogi (wartość np. 10 pikseli). Wybieramy narzędzie Gradient i ustawiamy styl wypełnienia Reflected (czwarty z pięciu). Jako kolor pierwszego planu wybieramy np. jasny niebieski, a tła ciemny niebieski. Wypełniamy zaznaczenie zaczynając od środka (w pionie) i przeciągając do górnej krawędzi zaznaczenia. Odznaczamy wszystko i klikając prawym przyciskiem na warstwie w okienku Layers wybieramy opcję Blending Options. Przechodzimy do okna Bevel and Emboss, po czym ustawiamy Depth na jakieś 300-400%. Jako Gloss Contour wybieramy Ring (drugi w dolnym rzędzie) i dajemy OK. Przycisk gotowy! Teraz wystarczy dodać odpowiedni napis i zapisać rysunek.

TAZ
taz@hoga.pl 


Copyright 2001 by magazyn @t.Wszelkie prawa zastrzeżone.