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