Photoshop Creați butonul Web 2.0
Butoane Tutorialele Photoshop sunt probabil una dintre cele mai fierbinți categorii din orice site de tutoriale Photoshop și din moment ce Web 2.0 este un subiect atât de fierbinte acum, permiteți să faceți un simplu buton adecvat pentru orice aplicație Web 2.0 a site-urilor Web. Tutorial după salt.
Creați o pânză neagră la aproximativ 500px (lățime) x 400px (înălțime) pentru a începe proiectarea butonului. Creați un apel nou pe strat "bg01“. Selectează Instrument rectangular rotunjit, țineți SHIFT și desenați un centru rotund în centru. Orice culoare este bună în stadiul actual.
Apelați Opțiuni amestecate de 'bg01"și ajustați următoarele stiluri:
Umbra
- Opacitate: 40%
- Distanța: 0px
- Răspândire: 0%
- Dimensiune: 6px
Gradient Overlay
- Stop color: 0%, # d00031
- Oprirea culorilor: 100%, # ff2b5d
Țineți apăsată tasta CTRL, faceți clic stânga pe "bg01'Thumbnail Layer pentru a selecta forma sa. Merge Selectați -> Modifica -> Contracta și introduceți valoarea "2px“. Aceasta va micșora zona selectată cu 2 pixeli.
Creați un apel nou pe strat "bg02"și a umplut zona evidențiată (după contracție) cu orice culoare. Eu folosesc # 000000 negru aici. Faceți dublu clic pe 'bg02' pentru a lansa Amestecarea opțiunii și tweak următorul stil.
Gradient Overlay
- Stop color: 0%, # c6002f
- Stop color: 100%, # c6002f
Creați un alt strat nou pentru text,txt“. Introduceți textul butonului. Voi folosi un alfabet pentru a reprezenta. Stilurile de fonturi pe care le folosesc aici sunt după cum urmează:
- Arial Bold rotunjit
- 150pt
Același lucru, după ce ați decis textul, faceți dublu clic pe 'txt' pentru a lansa Opțiuni amestecate și tweak următoarele stiluri.
Umbra
- Opacitate: 25%
- Distanța: 0px
- Spread: 0px
- Dimensiune: 5px
Umbra interioara
- Opacitate: 10%
- Distanța: 0px
- Choke: 0
- Dimensiune: 10px
Bevel Emboss
- Adâncime: 1px
- Direcție: Jos
- Dimensiune: 0px
- Softten: 0px
- Modul de iluminare Opacitate: 32%
- Mod de opacitate: 32%
Gradient Overlay
- Stop de culoare: 0% # d2d2d2
- Stop culoare: 100% # fOefef
Butonul este aproape terminat. Să-i dăm o mică strălucire peste partea de sus. ține CTRL, faceți clic pe stânga "bg02'Thumbnail Layer pentru a evidenția forma exterioară; alege Eclipse Marquee Tool. Acum țineți ALT, cu instrumentul Eclipse Marquee Tool selectat, trageți peste jumătatea inferioară a zonei evidențiate. Consultați imaginea de mai sus.
Cu partea de sus evidențiată și instrumentul Eclipse Marquee încă selectat, faceți clic dreapta și alegeți Pană; introduce 15px pentru raza.
Creați un strat nou,strălucire"și completați partea evidențiată cu albul [#ffffff]. Acest lucru ar trebui să adauge efectul strălucirii în partea de sus a butonului. Produsul final ar trebui să arate ceva asemănător imaginii de mai jos.
Ceva în plus ...
Optimizați opțiunile de amestecare ale "bg01' și 'bg02"vă va oferi butoane mai interesante. Iată un tutorial Photoshop pe butonul pe care l-am făcut anterior - Creați butonul Glossy pentru Web 2.0
Descărcați exemplul
