Photoshop Skapa Web 2.0-knapp

Knappar Photoshop-handledning är förmodligen en av de hetaste kategorierna på någon Photoshop-tutorials-webbplats och eftersom Web 2.0 är så heta ämnen nu kan vi göra en enkel knapp som passar alla Web 2.0-applikationer av webbplatser. Handledning efter hopp.

Skapa en blank duk på ca 500px (bredd) x 400px (höjd) för att starta knappdesignen. Skapa ett nytt lagersamtal "BG01'. Välj Rundad rektangulär verktyg, håll SHIFT och rita en rundsidig kvadrat i mitten. Vilken färg som helst är bra vid nuvarande skede.

Ring upp Blandningsalternativ av "BG01'och justera följande stilar:

Drop Shadow

Opacitet: 40%
Avstånd: 0px
Spridning: 0%
Storlek: 6px

Gradiantöverlagring

Färgstopp: 0%, # d00031
Färgstopp: 100%, # ff2b5d

Håll CTRL, vänsterklicka på 'BG01'Layer Miniatyrbild för att välja dess form. Gå Välj -> Ändra -> Kontrakt och ange värdet "2px'. Detta kommer att krympa det valda området med 2 pixlar.

Skapa ett nytt lagersamtal "bg02'och fyll i det markerade området (efter krympning) med vilken färg som helst. Jag använder # 000000 svart här. Dubbelklicka på 'bg02' för att starta upp Blandningsalternativ och tweak följande stil.

Gradiantöverlagring

Färgstopp: 0%, # c6002f
Färgstopp: 100%, # c6002f

Skapa ett annat nytt lager för text, kalla det "Text'. Sätt in din knapps text. Jag använder ett alfabet för att representera. De typsnittstyp jag använder här är som följer:

Avrundad Arial Bold
150pt

Samma, efter att ha bestämt din text dubbelklickar du på 'txt' för att starta Blandningsalternativ och tweak följande stilar.

Drop Shadow

Opacitet: 25%
Avstånd: 0px
Spridning: 0px
Storlek: 5px

Inre skugga

Opacitet: 10%
Avstånd: 0px
Choke: 0
Storlek: 10px

Bevel Emboss

Djup: 1px
Riktning: Ned
Storlek: 0px
Softten: 0px
Highlight Mode Opacity: 32%
Skuggläge Opacitet: 32%

Gradiantöverlagring

Färgstopp: 0% # d2d2d2
Färgstopp: 100% # f0efef

Knappen är nästan klar. Låt oss ge det en liten glöd över den övre delen. Håll CTRL, vänster klick 'bg02'Layer Miniatyrbild för att markera den yttre formen; välja Eclipse Markeringsverktyg. Håll nu kvar ALT, med Eclipse Marquee Tool vald, dra är över till minus ut under hälften av det markerade området. Se bilden ovan.

Med den högsta delen markerade och Eclipse Markeringsverktyget fortfarande valt, högerklicka och välj Fjäder; stiga på 15px för radien.

Skapa ett nytt lager, kalla det "glöd'och fyll i den markerade delen med vit [#ffffff]. Detta bör lägga till glödseffekt till den övre delen av din knapp. Slutprodukten ska se ut som bilden nedan.

Hämta handledning

Något extra ...

Tweak blandningsalternativen för "BG01"och"bg02"kommer att ge dig fler intressanta knappar. Här är en annan Photoshop-handledning på knappen jag har gjort tidigare - Skapa Glossy Button for Web 2.0

Hämta prov