Ontwerp de glossy web 2.0-knop in Photoshop
Op zoek naar een glanzende web 2.0-knop? Hier is een eenvoudige tutorial over Photoshop die je stap voor stap leert hoe je een mooie rode glanzende knop kunt krijgen.
Stap 1 - De basis creëren
Start een nieuw canvas op en pas de volgende instellingen aan (geel gemarkeerd) volgens de onderstaande afbeelding. De rest zou als standaard moeten komen. U wilt misschien ook controleren met de standaardwaarden.
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop.gif)
Maak een nieuwe laagoproep 'Knop'
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_2.gif)
Selecteer op de 'Knop' van lagen het gereedschap Afgeronde rechthoek
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_3.gif)
Geef het een straal van 7px
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_4.gif)
Teken een rechthoek die lijkt op de afbeelding hieronder.
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_5.gif)
Stap 2 - Rode knop
Klik met de rechtermuisknop op de overvloeiopties voor de laag 'Knop'
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_6.gif)
Tweak de volgende instellingen voor
Slagschaduw
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_7.gif)
Innerlijke schaduw
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_8.gif)
Schuine kant en reliëf
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_9.gif)
Gradiant Overlay
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_10.gif)
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_11.gif)
Uw knop zou er ongeveer zo uit moeten zien
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_12.gif)
Stap 3 - Creëer een glossy effect
Maak een nieuwe lagenaanroep 'Glas'
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_13.gif)
Selecteer Retangular marquee tool, zorg ervoor dat je de 'Button'-laag selecteert. Houd je Ctrl-toets ingedrukt en klik op 'Knoppen'”s laagminiatuur. Uw knop moet nu worden gemarkeerd.
Selecteer nu de knop 'Glas', houd de Alt-toets ingedrukt met het selectievak Retangular Marquee geselecteerd. Teken (snij) over de onderste helft van de knop, zoals de afbeelding hieronder.
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_14.gif)
Vul het geselecteerde gebied met witte kleur #ffffff met Paint Bucket Tool
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_15.gif)
Pas de dekking aan tot 18%
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_16.gif)
U zou een glanzende knop moeten hebben die er zo uitziet.
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_17.gif)
Stap 4 - Patroon-overlay
Laten we de knop een lichte overlay geven. Ik gebruik de eerder gecreëerde aangepaste stripe5px. Maak een nieuw laagje 'Patroon' tussen 'Knop' en 'Glas' en ga verder met Mengopties.
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_18.gif)
Selecteer Patroonoverlay, kies Stripe5px (of een patroon dat u hebt gemaakt) en klik op OK en sluit vervolgens de dialoog.
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_19.gif)
Zorg dat je nog steeds op het gereedschap Rechthoekig selectiekader staat, houd vast
Stap 5 - Tekst invoegen
Voer willekeurige tekst in witte #ffffff-kleur in met de volgende instellingen
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_20.gif)
Gebruik de volgende overvloei-effecten op de laag van mijn tekst.
Slagschaduw
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_21.gif)
Stap 6 - Definitieve uitvoer
Je zou een afbeelding zoals deze moeten krijgen.
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_22.gif)