Till Startsidan Läs Photoshoptips Se vanliga frågor (FAQ) Ladda ner nyttiga saker Läs om Devello

Coola knappar

Photoshopversion: CS  |  Område: Effekter




Så här gör du för att skapa den här knappen. Jag tycker att den kanske passar bäst i menyer av olika slag. Typ i en egen ram.

Steg 1
Skapa en ny bild och fyll den med den bakgrundsfärg du kommer att ha på din webbsida.

Steg 2
Tänk sedan efter hur stor knappen skall vara. Om du ska använda knappen i en meny som ovan så börjar du med det längsta ordet, så att alla knappar blir lika breda.

Steg 3
Rita en markering med Marquee-tool som är så stor som knappen skall vara. I exemplet gör jag den 120 x 20 pixlar. Du ser detta i Info-paletten.

Steg 4
Skapa ett nytt lager genom att klicka på knappen "Create New Layer" i Layers-paletten. Välj sedan den färg du vill ha på knappen. I exemplet använder jag en grå nyans (RGB: 204,204,204). Välj EDIT > FILL och "Foreground Color". Skapa sedan den svarta ramen genom att först välja svart som förgrundsfärg och sedan EDIT > STROKE. I dialogen som kommer upp väljer du 1 pixels bredd och "inside".

Steg 5
Sen är det dags att skapa den lilla 3D-effekten. Skapa ytterligare ett lager. Nu ska du rita ytterligare en ram, den ska vara hälften svart och hälften vit. Låter det krångligt? Titta på exemplet nedan så tror jag du förstår. Enklast är nog att använda Pencil Tool.

Steg 6
I Layers-palette väljer du sedan "Soft Light" i den lilla dropdown-listan uppe till vänster. Detta gör att du får lite mjukare färger som passar med bakgrunden.

Steg 7
Okej, dags för de tre strecken till vänster i knappen. Skapa ännu en gång ett nytt lager. Rita nu tre streck enligt exemplet nedan. När detta är gjort väljer du "Soft Light" även för det här lagret.

Steg 8
Om du vill kan du även gå in och runda av hörnen lite. Detta gör du genom att först aktivera lagret där din svarta ram finns. Zomma sedan in på ett hörn och använd Eraser Tool och radera en pixel.

Klart eller?
Nu är grunden färdig. Bäst är om du beskär bilden och sedan sparar den i PSD-formatet. Detta gör ju att du har kvar bilden uppdelad i lager och enkelt kan lägga dit texter, vilket är nästa steg.

Texten
För att stoppa dit texten på din knapp väljer du Text Tool och klickar där du vill att texten ska börja. I exemplet använde jag Verdana, 10 pt och fetstil. Och för att texten inte skall bli grötig valde jag att inte ha någon Anti-aliasing. När du gjort detta väljer du FILE > SAVE FOR WEB. Vill du sedan ha fler knappar dubbelklickar du på ditt textlager i Layers-palette och ändrar texten och väljer sedan FILE > SAVE FOR WEB igen.