Hur man skapar 3D-knappar med Adobe Photoshop

Annons

Det finns många fantastiska saker du kan skapa i Adobe Photoshop som är användbara online, från enkla bildramar till komplexa gränssnitt. En av de mest användbara sakerna du kan skapa i Photoshop är 3D-knappar, som kommer att vara praktiska om du driver en blogg eller webbplats med ett anpassat gränssnitt.

I den här artikeln kommer vi att visa dig hur du skapar 3D-knappar med Photoshop, tillsammans med visuella "upp" och "ner" tillstånd, så att du kan animera dem. (Vi täcker inte själva animationen i den här artikeln.)

Steg 1: Förbered ditt dokument

Medan 3D-knappar dyker upp oftast på webbplatser, är det viktigt att notera att det finns andra applikationer för dem, till exempel animerade GIF, mock-up-produktdisplay och mobilspel. Beroende på vad du skapar den här knappen för kan det slutliga filformatet och dimensionerna på det variera.

Om du vill skapa en 3D-knapp i Photoshop måste du skapa ett anpassat dokument för det. För att göra detta, öppna Photoshop och klicka på Skapa nytt> Anpassat. Börja skriva in dina värden.

Om du vill skapa en 3D-knapp vill du ha ett horisontellt dokument. För våra använde vi:

• 900 x 300 pixlar hög
• 300 pixlar / tum
• RGB-färgläge

Även om dessa specifikationer definitivt inte är en hård och snabb regel, kommer detta att säkerställa att du har mer än tillräckligt med utrymme att arbeta med och möjligheten att skala din knappstorlek upp och ner efter behov.

Steg 2: Ställ in din rektangel för din 3D-knapp

När du har konfigurerat specifikationerna för din fil kommer du att föras in i ditt arbetsområde. Du kommer att ha en horisontell vit duk i ett enda lager, och det är här du börjar bygga din knapp.

För att bygga din 3D-knapp, klicka på Avrundat rektangelverktyg till vänster på skärmen, sett här i rött. Du kan också använda genvägen U för att komma åt den.

Klicka en gång på ditt vita lager: detta kommer automatiskt att få upp ditt Skapa avrundad rektangel låda. Du använder den här rutan för att ange dimensionerna på din rektangel.

För vår knapp gick vi med:

• 300 pixlar breda
• 75 pixlar hög

Vi såg också till att hörnen var rundade med 10 pixlar. Inte för högt och inte för lågt heller. Sedan pressade vi OK.

Notera: Knapparna varierar beroende på storlek och form, så du känner inte att du måste använda dessa exakta dimensioner. Dessutom, om du letar efter mer information om genvägar, här är några av de mest användbara Photoshop-tangentbordskommandona.

När du trycker på OK, Photoshop skapar en rundad rektangel med dessa dimensioner inuti ditt lager. Du kan ändra dess Fylla och Stroke färger med hjälp av rullgardinsmenyerna i det övre vänstra hörnet på skärmen.

I syftet med denna självstudie - och för att illustrera hur en "upp" - och "ner" -knapp kan se ut - kommer vi att göra vår "ner" -knapp röd.

Steg 3: Gör din knapp 3D

När du har skapat din grundläggande knapp och valt färg, kommer du att vilja justera den i Lagerstil dialog ruta. Detta för att det ska se mer 3D ut.

För att komma åt din Lagerstil dialogrutan, kan du gå Layer> Layer Style från toppmenyn. Du kan också dubbelklicka på det lager som innehåller din knapp för att få den upp automatiskt. Det här sättet är mycket snabbare och vi personligen föredrar det.

När din Layer Style-ruta är uppe går du till alternativet Bevel & prägling. Sätt på den.

Detta är ett snabbt och enkelt sätt att ge kanterna på din knapp en mer upphöjd, "3D" look. För denna handledning är det dessa inställningar som vi använde:

Strukturera

• Stil: Inre Bevel
• Metod: Mejsel Mjuk
• Djup: 605
• Riktning: Upp
• Storlek: 5
• Mjukna: 1

Skuggning

• Vinkel: 90
• Höjd över havet: 37
• Markera läge: Färg Dodge, 55% opacitet
• Skuggläge: Multipel, 25% opacitet

Tricket är att göra inställningarna tillräckligt höga för att du kan se någon skillnad, men inte så stark att det är överväldigande.

Efter att vi avslutat med Bevel & Emboss gick vi till Kontur och slog på det också. Contour gör definitionen av Bevel & Emboss lite starkare, och för denna tutorial valde vi inställningen Kotte - inverterad.

Nästa, slå på Övertäckning över lutning. Det här är en knapp som ger en rundad, lätt "glansig" look. Inställningarna är följande:

• Blandningsläge: Täcka över
• Opacitet: 90
• Stil: Linjär
• Vinkel: 90
• Skala: 100

Slutligen slog vi på Drop Shadow, för att få knappen att se lite "upp" från den vita bakgrunden på en webbplats eller blogg. Återigen, här är inställningarna:

Strukturera

• Blandningsläge: Flera olika
• Opacitet: 35
• Vinkel: 90
• Distans: 2
• Spridning: 6
• Storlek: 8

Kvalitet

• Kontur: Linjär
• Ljud: 0
• Lagret slår ut skugga: På

Nu är det dags att spara dessa specifikationer som en lagerstil.

Steg 4: Spara som en lagerstil

När du är klar med knappens inställningar börjar den se 3D ut. Eftersom chansen är stor att du skapar mer än en 3D-knapp måste vi hitta ett snabbt och enkelt sätt att göra detta.

Här är hur.

Innan du klickar OK i Lagerstil klicka på Ny stil. När du gör det sparar Photoshop den här lagerstilen som du har gjort för din knapp.

Om du använder Photoshop CC kommer den nya stilen att sparas i din bibliotek som du kan se ovan. Det är väldigt snabbt och enkelt att komma åt.

Steg 5: Hur man använder en sparad lagerstil

Nu när du har designat din knapp och du har sparat den som en lagerstil, låt oss se den i handling för ditt "upp" -läge. Inget lögn, detta kommer att minska din arbetstid i halva.

Låt oss först skapa en annan knapp direkt ovanför det röda knapplagret. Låt oss göra det grönt för betoning.

Nästa - istället för att dubbelklicka på själva lagret för att få fram Lagerstilar dialogruta - dubbelklicka på lagerstilen i din bibliotek panel.

När du gör det tillämpar Photoshop automatiskt din sparade stil på ditt nya knapplager, samtidigt som den behåller sin nya färg och form. Du har nu två knappar - en i uppläge och en i en ner - och det är så enkelt att göra. Jag älskar den här genvägen.

Steg 6: Lägg till text i din knapp

Därefter kommer vi att lägga till text till knappen.

För att lägga till text skapar du ett nytt lager ovanför dina två knapplager. Klicka på Skriv verktyg för att börja skriva.

För den här tutorialen kommer vi att skriva ordet "prenumerera" eftersom det är något du ofta ser på webbplatser och sociala medieplattformar.

Vi kommer också att använda ett san-serif webbsäkert teckensnitt. Det slutliga valet som du använder för din egen knapp är upp till dig. Montserrat, Proxima Nova, Arial och Verdana är alla allmänt använda alternativ och säkra för webben.

När detta är gjort, finns det fortfarande några mer subtila ändringar som du behöver göra för att få texten till "pop".

Först dubbelklickar du på det lager som innehåller din text så att du kan ta upp den i din Lagerstil dialog ruta.

Klicka sedan på Inre skugga, för att lägga till lite av en depression (eller nedsänkt område) i din text. Det gör att det ser ut som att bokstäverna har graverats in i knappen. De exakta inställningarna som vi använde för den här tutorialen är nedan.

Strukturera

• Blandningsläge: Multiplicera
• Opacitet: 35
• Vinkel: 90
• Distans: 2
• Sätta i halsen: 4
• Storlek: 1

Kvalitet

• Kontur: Linjär
• Ljud: 0

Använd sedan en Gradient Overlay till dessa bokstäver, så att de lättare kan smälta in i knappen utan att vara platt. Återigen är inställningarna för våra:

• Blandningsläge: Färg bränna
• Opacitet: 90
• Stil: Linjär
• Vinkel: 90
• Skala: 100

Steg 7: Slutför

När du har skapat denna textstil - särskilt om du vill använda den igen - gå till Ny stil och spara det innan du klickar OK.

Med det inslaget kan du snabbt växla fram och tillbaka på synligheten mellan dina två knapplager för att se hur "upp" och "ner" tillstånd ser ut.

Ganska cool, va? Gå till om du vill spara din fil Arkiv> Spara som, och spara det som rätt filformat för vilket projekt du kanske arbetar med.

Anpassa din blogg med 3D-knappar och widgets

Nu när du vet hur du skapar 3D-knappar i Photoshop kan du bli kreativ med det och designa dina egna 3D-knappar som passar dina behov. Och med dessa färdigheter i ditt arsenal kan du göra en produkt som inte bara är professionell, utan också personlig.

Vill du veta om andra saker du kan göra med det här programmet? här är hur man tar bort en bakgrund i Photoshop Hur man tar bort en bakgrund i PhotoshopSå här tar du bort en bakgrund i Adobe Photoshop i tydliga steg-för-steg-instruktioner som alla kan följa. Läs mer .