Ustvarjanje gumba Web 2.0 za Photoshop

Gumbi Photoshop tutorials so verjetno ena od najbolj vročih kategorij v vsakem Photoshop tutorials mestu in od Web 2.0 je tako vroče teme zdaj, greš o tem preprosto gumb primerna za vsako spletno aplikacijo 2.0 spletnih strani. Vadnica po skoku.

Za začetek oblikovanja gumba ustvarite prazno platno na približno 500 px (širina) x 400 px (višina). Ustvari nov klic sloja "bg01. Izberite Zaokroženo pravokotno orodje, držite SHIFT in narišite kvadratni kvadrat v sredini. Na trenutni stopnji je vse barve v redu.

Pokličite Možnosti mešanja odbg01in prilagodite naslednje sloge:

Drop Shadow

• Neprosojnost: 40%
• Razdalja: 0px
• Spread: 0%
• Velikost: 6px

Gradiantno prekrivanje

• Stop barve: 0%, # d00031
• Stop barve: 100%, # ff2b5d

Držite tipko CTRL, kliknite levi gumbbg01"Pametna sličica za izbiro oblike. Pojdi Izberite -> Spremeni -> Pogodba in vnesite vrednost "2px. To bo zmanjšalo izbrano območje za 2 slikovnih pik.

Ustvari nov klic sloja "bg02'in označeno (po krčenju) območje polni z vsako barvo. Tukaj uporabljam # 000000 black. Dvakrat kliknite na 'bg02' za zagon Možnost mešanja in prilagodite naslednji slog.

Gradiantno prekrivanje

• Stop barve: 0%, # c6002f
• Stop barve: 100%, # c6002f

Ustvarite nov sloj za besedilo, pokličite ga »txt. Vstavite besedilo gumba. Za predstavitev bom uporabil abecedo. Slogi pisav, ki jih uporabljam tukaj, so naslednji:

• Zaobljen Arial krepko
• 150pt

Enako, ko izberete besedilo, dvakrat kliknite na 'txt' za zagon Možnosti mešanja in prilagodite naslednje sloge.

Drop Shadow

• Motnost: 25%
• Razdalja: 0px
• Spread: 0px
• Velikost: 5px

Notranja senca

• Motnost: 10%
• Razdalja: 0px
• Choke: 0
• Velikost: 10px

Bevel emboss

• Globina: 1px
• Smer: Dol
• Velikost: 0px
• Mehka: 0px
• Motnost v načinu osvetlitve: 32%
• Neprepustnost v senčnem načinu: 32%

Gradiantno prekrivanje

• Barvna stop: 0% # d2d2d2
• Stop barve: 100% # f0efef

Gumb je skoraj zaključen. Dajmo mu malo sijaj nad zgornjim delom. Zadrži CTRL, levi klikbg02'Layer Thumbnail, da označite zunanjo obliko; izberite Orodje Eclipse Marquee. Sedaj držite ALT, z izbranim orodjem Eclipse Marquee, povlecite navzdol, da izničite spodnjo polovico označenega območja. Glejte sliko zgoraj.

Z označenim zgornjim delom in še vedno izbranim orodjem Eclipse Marquee Tool kliknite z desno miškino tipko in izberite Perje; vnesite 15px za polmer.

Ustvarite novo plast, pokličite jo »Sijaj'in označite označen del z belo [#ffffff]. To bi moralo dodati učinek sijanja na zgornji del gumba. Končni izdelek naj bo videti podoben sliki spodaj.

Navodila za prenos

Nekaj ​​dodatnega…

Prilagodite možnosti mešanja za "bg01"in"bg02vam bo dala bolj zanimive gumbe. Tukaj je še ena Photoshop tutorial na gumb sem naredil prej - Ustvari Glossy gumb za Web 2.0

Prenesite vzorec