Design Glossy Web 2.0-knapp i Photoshop
Letar du efter att designa lite glatt webb 2.0-knapp? Här är en enkel Photoshop-handledning som ger dig steg för steg hur du får en snygg röd glansig knapp.
Steg 1 - Skapa basen
Avfyra en ny duk och justera följande inställningar (markerade i gul) enligt bilden nedan. Resten ska komma som standard. Du kanske vill dubbelkolla med standardinställningarna också.
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop.gif)
Skapa ett nytt lagersamtal "Knapp"
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_2.gif)
På lager "Knapp", välj verktyget Rundad rektangel
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_3.gif)
Ge den en radie av 7px
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_4.gif)
Rita en rektangel som liknar bilden nedan.
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_5.gif)
Steg 2 - Röd knapp
Högerklicka på blandningsalternativen för knappen "Knapp"
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_6.gif)
Tweak följande inställningar för
Drop Shadow
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_7.gif)
Inre skugga
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_8.gif)
Bevel och Emboss
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_9.gif)
Gradiantöverlagring
![](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)
Din knapp ska se ut så här
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_12.gif)
Steg 3 - Skapa en blank effekt
Skapa ett nytt lager-samtal "Glas"
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_13.gif)
Välj Retangular markeringsverktyg, se till att du väljer "Button" -lagret. Håll din ctrl-nyckel och klicka på lager 'Knappar”s lager miniatyrbild. Din knapp ska nu markeras.
Välj "Glass" -knappen nu, håll Alt-tangenten med Retangulär markeringsverktyg markerad. Rita (klipp) över den nedre halvan av knappen som bilden nedan.
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_14.gif)
Fyll det markerade området med vit färg #ffffff med Paint Bucket Tool
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_15.gif)
Justera opacitet till 18%
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_16.gif)
Du ska ha en blank knapp som ser ut så här.
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_17.gif)
Steg 4 - Mönsteröverläggning
Låt oss ge knappen lite litet mönsteröverlagring. Jag använder den anpassade stripe5px som skapats tidigare. Skapa ett nytt lagersamtal "Mönster" mellan "Knapp" och "Glas" och fortsätt med blandningsalternativ.
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_18.gif)
Välj Mönsteröverlägg, välj Stripe5px (eller vilket mönster du har skapat) och klicka på OK och stäng sedan dialogen.
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_19.gif)
Se till att du fortfarande är på Rektangulär markeringsverktyg, håll kvar
Steg 5 - Infoga text
Kasta lite slumpmässig text i vit #ffffff-färg med följande inställningar
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_20.gif)
Använd följande blandningseffekter på min texts lager.
Drop Shadow
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_21.gif)
Steg 6 - Slutlig utgång
Du borde få en bild så här.
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_22.gif)