tumme

Futuristisk webb-knapp

Vi visar dig hur du gör en futuristisk och stilren knapp som du kan använda till dina hemsidor etc. Du lär dig använda lagereffekter, vilka används flitigt inom photoshopvärlden.

Steg 1

Börja med att skapa ett nytt dokument, 400 x 400 pixlar. Sedan väljer du Gradientverktyget (G) och ställer in gradienten enligt följande:

Första markören: #5e5e5e, position 0%,

Andra markören: #939393, position 50%,

Tredje markören #5e5e5e, position 100%.

Sedan ställer du in verktyget på Linear Gradient och drar uppifrån och ner (håll inne shift för att få den rak).

Steg 2

Välj Rounded Rectangle-verktyget, ställ in hörnradien på 20 pixlar och gör en rektangel likt den på bilden. Storleken väljer du själv, men tänk på att om du ska använda denna knappen på en hemsida ska du förstås använda mått som passar där.

Steg 3

Dubbleklicka på lagret med rektangeln i lagermenyn. Du får nu upp en ruta där du kan lägga till lite effekter på lagret. Vi ska nu lägga till en Drop Shadow-, en Bevel and Emboss- och en Gradient Overlay-effekt.

Börja med Drop Shadow. Använd dessa inställningarna:

Sedan Bevel and Emboss:

Och sist en Gradient Overlay. Här ska du först ställa in inställningarna som på bilden. Sedan dubbelklickar du på själva gradienten. Den ska du sedan ställa in enligt följande:

Första markören: Välj färgen #bababa och positionen 0%.

Andra markören: Färgen #d9d9d9 och positionen 50%.

Tredje markören: Färgen #f9f9f9 och positionen 51%.

Fjärde markören: Färgen #bababa och positionen 100%.

Nu ska det alltså se ut ungefär såhär!

Steg 4

Gör nu ett nytt lager. Detta lager ska innehålla den text du vill har på knappen, exempelvis Hem. Det är bra om du väljer en lite “tyngre” font, alltså en font som är lite fetare. Om du inte har någon bra font finns det massvis som är gratis att ladda ner. En sida som jag brukar använda är dafont.com.

Steg 5

Nu ska vi göra likadant som i steg 3, vi ska alltså lägga till lite effekter på textlagret. Börja med Inner Shadow:

efter det Outer Glow. Den blåa färgen är #246e95.

Även en inre glöd behövs. Den här blåa färgen är #5da6cc.

Bevel and Emboss:

Sist men inte minst, en gradient. Använd inställningarna på bilden här nedanför och dubbelklicka sedan på gradienten. Ställ in enligt följande:

Första markören : Färg #053b49 och position 0%.

Andra markören: Färg #2e889b och position 100%.

Resultat

Nu har du gjort en snygg, futuristisk webbknapp som du kan använda i program, hemsidor mm. Om du inte kunde det innan, så försök att komma ihåg och lära dig lagereffekterna, de är mycket användbara!