|
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
|
|