|
W poprzednim numerze @t'a poruszy│em
temat tworzenia przycisk≤w na stronΩ WWW przy
pomocy Adobe Photoshopa 6. Teraz macie okazjΩ
zapoznaµ siΩ z drug▒ i jednocze╢nie ostatni▒ czΩ╢ci▒
tego arta.
PracΩ tradycyjnie zaczynamy od
utworzenia nowego dokumentu o bia│ym tle i
wymiarach... powiedzmy 200x100 pikseli. NastΩpnie
tworzymy now▒ warstwΩ (Shift+Ctrl+N), po czym u┐ywaj▒c
okr▒g│ego zaznaczenia rysujemy z lewej strony
niewielki okr▒g, wype│niaj▒c go czarnym kolorem.
Teraz narzΩdziem Rectangular Marquee Tool (M)
zaznaczamy praw▒ po│owΩ k≤│ka, kt≤r▒
przesuwamy na praw▒ stronΩ obrazka (naj│atwiej to
uczyniµ wybieraj▒c narzΩdzie Move (V) i trzymaj▒c
wci╢niΩty klawisz Shift przesun▒µ zaznaczony
obszar przy pomocy prawej strza│ki na klawiaturze).
Obszar pomiΩdzy dwoma (czy dwiema :) po│≤wkami ko│a
wype│niamy na czarno, wcze╢niej zaznaczaj▒c go
narzΩdziem Rectangular Marquee Tool. Na tym etapie
nasz rysunek powinien wygl▒daµ tak:
|
Zaznaczamy warstwΩ z przyciskiem
(trzymaj▒c Ctrl klikamy na niej w oknie Layers) i
wype│niamy j▒ przy pomocy Gradient Tool (p│ynne
przej╢cie od koloru pierwszoplanowego - #9DC7DF, do
koloru t│a - #4D8DB2) w kierunku g≤ra-d≤│.
Tworzymy now▒ warstwΩ, na kt≤rej bia│ym, miΩkkim
i nie za du┐ym pΩdzlem rysujemy poziom▒ liniΩ, bΩd▒c▒
odblaskiem, przy czym podczas malowania jej trzymamy
wci╢niΩty klawisz Shift. Widoczno╢µ dla tej
warstwy zmniejszamy na 50% (Layer/Layer Style/Blending
Options..., Opacity 50%). Przechodzimy do warstwy z
przyciskiem, do kt≤rej dodajemy wewnΩtrzny cie± (Layer/Layer
Style/Inner Shadow..., k▒t -60 (s│ownie - minus
sze╢µdziesi▒t stopni :), Opacity 50%, Distance 5,
Size 10). Zaznaczamy warstwΩ z przyciskiem (Ctrl+klik
na niej :), tworzymy now▒ warstwΩ, zmieniamy kolor
na #2983BC i wybieramy Edit/Stroke... (Width 2px,
Location Inside, reszta bez zmian). ú▒czymy
wszystkie warstwy z wyj▒tkiem Background. Na
koniec dodajemy odpowiedni napis (bia│a, gruba
czcionka Comic Sans MS), kt≤ry p≤╝niej musimy
zrenderowaµ na p│aszczyznΩ (Layer/Rasterize/Layer)
i obrysowaµ (kolor czarny, Edit/Stroke... Width
1px, Location Outside). Dla napisu wybieramy
Blending Options..., gdzie Blend Mode zmieniamy na
Overlay, a Opacity na 80%. Zmniejszamy obszar
roboczy do rozmiaru rysunku i zapisujemy plik jako
GIF. Ostateczny efekt wygl▒da tak:
Drugi przyk│ad ponownie
rozpoczynamy od stworzenia dokumentu o wymiarach
200x100 i bia│ym tle. Tworzymy now▒ warstwΩ (Layer
1) i przy pomocy Elliptical Marquee Tool (okr▒g│e
zaznaczenie) rysujemy elipsΩ, kt≤ra bΩdzie
podstaw▒ naszego przycisku. Zaznaczenie wype│niamy
Gradient Tool'em, gdzie styl wype│nienia to Radial
(przej╢cie od ╢rodka do brzegu). Kolory wype│nienia
to jasny ┐≤│ty (#E1FF54) i pomara±czowy
(#FFC600).
|
|
Powinno to wygl▒daµ tak:
Zaznaczamy nasz przycisk (Ctrl+Layer
1) i wybieramy Select/Modify/Contract..., gdzie
podajemy warto╢µ 4 pikseli. Tworzymy now▒ warstwΩ
(Layer 2) i obrysowujemy zaznaczenie (Edit/Stroke...)
2 pikselami i kolorem czarnym (Location Center).
Odznaczamy wszystko (Ctrl+D) i przechodzimy do okna
Blending Options... warstwy Layer 2 (z
obrysowaniem), gdzie Blend Mode zmieniamy na Overlay.
OK. Teraz w│▒czamy Blending Options dla Layer 1
(warstwy z przyciskiem) i dodajemy Bevel and Emboss
zmieniaj▒c Size na 4. Zamykamy okno i │▒czymy
warstwy Layer 1 i Layer 2. Wybieramy narzΩdzie Type
Tool (T) i czarn▒ czcionk▒ (najlepiej Impact)
wpisujemy nasz tekst. Zaznaczamy napis i
przechodzimy do warstwy z przyciskiem. Kopiujemy
zawarto╢µ zaznaczenia (Ctrl+C, Ctrl+V), a nastΩpnie
usuwamy warstwΩ z napisem (klikaj▒c na kosz w
prawym dolnym rogu). Przechodzimy do warstwy ze
skopiowanym fragmentem przycisku i wybieramy
Blending Options... Tutaj dodajemy dwa efekty: Drop
Shadow (Distence 2, Size 5) oraz Bevel and Emboss
(Style Emboss, Size i Soften 0). Oto efekt ko±cowy:
Rysowanie trzeciego przycisku
zaczynamy tak jak w pierwszym przyk│adzie. Gdy bΩdziemy
ju┐ mieli czarny prostok▒t z zaokr▒glonymi ko±cami
(patrz pierwszy rysunek), wype│niamy go przy pomocy
Gradient Tool (Linear Gradient, kolory siwy -
#828282 i czarny - #000000, kierunek g≤ra-d≤│).
Zaznaczamy przycisk i zmniejszamy zaznaczenie (Select/Modify/Contract...)
o 6 pikseli. Kopiujemy dany fragment do nowej
warstwy (Ctrl+C, Ctrl+V) i obracamy (Edit/Transform/
Flip Vertical). Zaznaczamy obszar jak na rysunku:
|
Jako aktywn▒ ustawiamy warstwΩ
Layer 2 (ze skopiowanym fragmentem) i kasujemy
zawarto╢µ zaznaczenia wciskaj▒c klawisz Delete.
Nie wy│▒czaj▒c zaznaczenia przechodzimy do
drugiej warstwy (z przyciskiem) i wciskamy kolejno
klawisze: Ctrl+C, Delete, Ctrl+V. Wklejony fragment
obracamy w pionie (Edit/Transform/ Flip Vertical),
po czym │▒czymy Layer 2 i Layer 3. Do z│▒czonej
warstwy dodajemy efekt Bevel and Emboss (Layer/Layer
Style/Bevel and Emboss...) zmieniaj▒c Direction na
Down oraz Size na 0. ú▒czymy obie warstwy i u┐ywaj▒c
narzΩdzia Type dodajemy napis koloru siwego. Efekt
ko±cowy:
Za miesi▒c kolejna czΩ╢µ serii
"... w Photoshopie", tym razem o t│ach na
stronΩ WWW.
TAZ
taz@hoga.pl |
|