Photoshop Opret Web 2.0-knap

Knapper Photoshop tutorials er nok en af de hotteste kategorier på et Photoshop-tutorials-websted, og da Web 2.0 er så varme emner nu, lad os gå om at lave en simpel knap, der passer til enhver web 2.0-applikation af hjemmesider. Tutorial efter hoppe.

Lav et blankt lærred på omkring 500px (bredde) x 400px (højde) for at starte knapdesignet. Opret et nyt lag opkald 'bg01'. Vælg Afrundet rektangulært værktøj, hold SHIFT og tegne et runde sidet firkant i midten. Enhver farve er fint i det nuværende trin.

Ring op på Blandings muligheder af 'bg01'og juster følgende stilarter:

Drop Shadow

Opacitet: 40%
Afstand: 0px
Spredt: 0%
Størrelse: 6px

Gradiant Overlay

Farve stop: 0%, # d00031
Farve stop: 100%, # ff2b5d

Hold CTRL, venstre klik på 'bg01'Lag miniaturen for at vælge dens form. Gå Vælg -> Modificere -> Kontrakt og indtast værdien '2px'. Dette vil krympe det valgte område med 2 pixel.

Opret et nyt lag opkald 'BG02'og fyldt det fremhævede område (efter krympe) med en hvilken som helst farve. Jeg bruger # 000000 sort her. Dobbeltklik på 'bg02' for at starte Blending Option og tweak følgende stil.

Gradiant Overlay

Farve stop: 0%, # c6002f
Farve stop: 100%, # c6002f

Opret et nyt lag til tekst, kald det 'txt'. Indsæt din knappes tekst. Jeg vil bruge et alfabet til at repræsentere. De skrifttypestilarter, jeg bruger her, er som følger:

Afrundet Arial Bold
150pt

Samme, efter at du har besluttet din tekst, skal du dobbeltklikke på 'txt' for at starte Blandings muligheder og juster følgende stilarter.

Drop Shadow

Opacitet: 25%
Afstand: 0px
Spredt: 0px
Størrelse: 5px

Indre skygge

Opacitet: 10%
Afstand: 0px
Choke: 0
Størrelse: 10px

Bevel Emboss

Dybde: 1px
Retning: Ned
Størrelse: 0px
Softten: 0px
Fremhævningsmodus Opacitet: 32%
Skyggemodus Opacitet: 32%

Gradiant Overlay

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

Knappen er næsten færdig. Lad os give det lidt lys over den øverste del. Holde CTRL, venstre klik 'BG02'Lag Miniature for at fremhæve den ydre form; vælge Eclipse Marquee Tool. Hold nu ALT, Med Eclipse Marquee Tool valgt, er træk overfor minus ud nederste halvdel af det fremhævede område. Se ovenstående billede.

Med den øverste del fremhævet og Eclipse Marquee Tool stadig valgt, højreklik og vælg Fjer; gå ind 15px for radius.

Opret et nyt lag, kalder det 'glød'og udfyld den fremhævede del med hvid [#ffffff]. Dette bør tilføre glød effekt til den øverste del af din knap. Slutproduktet skal se lidt ud som billedet nedenfor.

Download vejledning

Noget ekstra ...

Tweak blandings muligheder for 'bg01'og'BG02'vil give dig flere interessante knapper. Her er en anden Photoshop-tutorial på knappen jeg har lavet tidligere - Opret Glossy-knap til Web 2.0

Download prøve