Gumb za izradu weba u programu Photoshop

Gumbi Photoshop tutoriali su vjerojatno jedan od najtoplijeg kategorije u bilo kojem mjestu Photoshop tutoriali i budući Web 2.0 je tako vruće teme sada, idemo o radiš jednostavan gumb pogodan za bilo koju Web 2.0 aplikacija web stranica. Vodič nakon skoka.

Napravite prazno platno na oko 500px (širina) x 400px (visina) da biste započeli dizajn gumba. Izradite novi poziv sloja 'bg01”. Odaberite Okrugli pravokutni alat, držite SHIFT i nacrtajte okrugli trg u sredini. Bilo koja boja je u redu u trenutnoj fazi.

Pozovite Mogućnosti za miješanje odbg01'i prilagodite sljedeće stilove:

Baci sjenku

Prozirnost: 40%
Udaljenost: 0px
Spread: 0%
Veličina: 6px

Gradiant Overlay

Zaustavljanje boje: 0%, # d00031
Boja stop: 100%, # ff2b5d

Držite CTRL, kliknite lijevom tipkom miša 'bg01"Sličica sloja za odabir oblika. Ići Odaberi -> izmijeniti -> Ugovor i unesite vrijednost "2 piksela”. To će smanjiti odabrano područje za 2 piksela.

Izradite novi poziv sloja 'bg02'i napunili istaknuto (nakon psihijatra) područje bilo kojom bojom. Ovdje koristim # 000000 black. Dvaput kliknite na 'bg02' za pokretanje Mogućnost miješanja i podesite sljedeći stil.

Gradiant Overlay

Stop boja: 0%, # c6002f
Stop boja: 100%, # c6002f

Napravite novi sloj za tekst, nazovite ga "txt”. Umetnite tekst gumba. Koristit ću abecedu za prikaz. Stilovi fontova koje ovdje koristim su sljedeći:

Zaobljeni Arial Bold
150pt

Isto, nakon što ste odlučili tekst, dvaput kliknite na 'txt' za pokretanje Mogućnosti za miješanje i podešavanje sljedećih stilova.

Baci sjenku

Neprozirnost: 25%
Udaljenost: 0px
Raspon: 0px
Veličina: 5px

Unutarnja sjena

Neprozirnost: 10%
Udaljenost: 0px
Choke: 0
Veličina: 10px

Bevel emboss

Dubina: 1px
Smjer: Dolje
Veličina: 0px
Softten: 0px
Neprozirnost načina isticanja: 32%
Neprozirnost u načinu rada sjene: 32%

Gradiant Overlay

Boja Stop: 0% # d2d2d2
Boja Stop: 100% # f0efef

Gumb je gotovo gotov. Dajmo joj malo sjaj nad gornjim dijelom. držati CTRL, lijevi klik 'bg02'Layer Thumbnail da istakne vanjski oblik; izabrati Eclipse Marquee Tool. Sada držite ALT, s odabranim alatom Eclipse Marquee, povucite se za minus donju polovicu označenog područja. Pogledajte sliku iznad.

Sa istaknutim gornjim dijelom i odabranim alatom Eclipse Marquee, desnom tipkom miša kliknite i odaberite Pero; Unesi 15px za radijus.

Izradite novi sloj, nazovite ga "sjaj'i ispunite označeni dio bijelom [#ffffff]. To bi trebalo dodati efekt sjaja na gornji dio gumba. Konačni proizvod trebao bi izgledati poput slike ispod.

Preuzmite vodič

Nešto dodatno ...

Ugađanje miješanja opcija "bg01"i"bg02'dat će vam zanimljivije gumbe. Ovdje je još jedan Photoshop tutorial na gumb sam učinio ranije - Stvaranje Glossy gumb za Web 2.0

Preuzmite uzorak