Det finns många fantastiska saker du kan skapa i Adobe Photoshop som är användbara online, allt från enkla bildramar till komplexa användargränssnitt. En av de mest användbara sakerna du kan skapa i Photoshop är 3D-knappar, som kommer väl till pass 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 kommer inte att täcka 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, som animerade GIF-bilder, mock-up produktskärmar och mobilspel. Beroende på vad du skapar den här knappen för kan ditt slutliga filformat och dess dimensioner variera.
För att skapa en 3D-knapp i Photoshop måste du skapa ett anpassat dokument för den. För att göra detta, öppna Photoshop och klicka på Skapa ny > Anpassad. Börja skriva in dina värderingar.
För att skapa en 3D-knapp, kommer du att ha ett horisontellt dokument. För vår 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 ställt in specifikationerna för din fil kommer du att hamna i din arbetsyta. Du kommer att ha en horisontell vit duk i ett enda lager, och det är här du kommer att börja bygga din knapp.
För att bygga din 3D-knapp, klicka på Rundade rektangelverktyg på vänster sida av skärmen, 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 visa ditt Skapa en rundad rektangel låda. Du kommer att använda den här rutan för att ange måtten på din rektangel.
För vår knapp gick vi med:
300 pixlar bred 75 pixlar hög
Vi såg också till att hörnen rundades med 10 pixlar. Inte för högt och inte för lågt heller. Sedan tryckte vi på OK.
Notera: Knappar varierar beroende på storlek och form, så känn inte att du behöver använda dessa exakta mått. 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, kommer Photoshop att skapa en rundad rektangel med dessa dimensioner inuti ditt lager. Du kan ändra den Fylla och Stroke färger genom att använda rullgardinsmenyerna i det övre vänstra hörnet på skärmen.
För syftet med denna handledning — och för att illustrera hur en “upp” och “ner”-knapp kan se ut — kommer vi att göra vår “ned”-knapp röd.
Steg 3: Gör din knapp 3D
När du har skapat din grundläggande knapp och valt dess färg, kommer du att vilja justera den i Lagerstil dialog ruta. Detta för att få det att se mer 3D ut.
För att komma åt din Lagerstil dialogrutan kan du gå Lager > Lagerstil från toppmenyn. Du kan också dubbelklicka på lagret som innehåller din knapp för att få upp den automatiskt. Detta sätt är mycket snabbare och vi personligen föredrar det.
När din Layer Style-låda är uppe, gå till alternativet Fasning & relief. 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 den här handledningen är de här inställningarna vi använde:
Strukturera
Stil: Inre avfasning Metod: Mejsel mjuk Djup: 605 Riktning: Upp Storlek: 5 Mjukna: 1
Skuggning
Vinkel: 90 Höjd över havet: 37 Markeringsläge: Color Dodge, 55 % opacitet Skuggläge: Multipel, 25 % opacitet
Tricket är att göra inställningarna så höga att du kan se en viss skillnad, men inte så stark att det är överväldigande.
Efter att vi var klara 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 handledning valde vi inställningen Kon – Inverterad.
Slå sedan på Gradientöverlägg. Det är detta som ger en knapp ett rundat, lite “glansigt” utseende. Inställningarna är följande:
Blandningsläge: Täcka över Opacitet: 90 Stil: Linjär Vinkel: 90 Skala: 100
Till slut slog vi på Drop Shadow, för att få knappen att se lite “upphöjd” 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 Sprida: 6 Storlek: 8
Kvalitet
Kontur: Linjär Ljud: 0 Layer Knocks Out Drop Shadow: På
Nu är det dags att spara dessa specifikationer som en lagerstil.
Steg 4: Spara som en lagerstil
När du är klar med din knapps inställningar börjar den se 3D ut. Eftersom chansen är stor att du kommer att skapa 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 dialogrutan, klicka på Ny stil. När du gör det kommer Photoshop att spara den här lagerstilen som du har skapat för din knapp.
Om du använder Photoshop CC kommer denna nya stil att sparas till din Bibliotek avsnitt, 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 aktion för ditt “upp”-läge. Ingen lögn, detta kommer att halvera din arbetstid.
Låt oss först skapa en annan knapp direkt ovanför det röda knapplagret, som så. 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å upp Lagerstilar dialogrutan — dubbelklicka på lagerstilen i din Bibliotek panel.
När du gör det kommer Photoshop automatiskt att tillämpa 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 ett uppläge och en i ett ner — och det är så enkelt att göra. Jag älskar den här genvägen.
Steg 6: Lägg till text till din knapp
Därefter ska vi lägga till text till knappen.
För att lägga till text, skapa ett nytt lager ovanför dina två knapplager. Klicka på Skriv verktyg för att börja skriva.
För den här handledningen kommer vi att skriva ordet “prenumerera” eftersom det är något du ser ganska ofta på webbplatser och sociala medieplattformar.
Vi kommer också att använda ett san serif webbsäkert typsnitt. Det slutgiltiga valet av vilken 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, men det finns fortfarande några mer subtila ändringar som du behöver göra för att få den här texten att “pop”.
Dubbelklicka först på lagret 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) till din text. Detta gör att det ser ut som om bokstäverna har graverats in i knappen. De exakta inställningarna som vi använde för denna handledning finns nedan.
Strukturera
Blandningsläge: Multiplicera Opacitet: 35 Vinkel: 90 Distans: 2 Sätta i halsen: 4 Storlek: 1
Kvalitet
Applicera sedan a Gradient Overlay till de bokstäverna, för att få dem att smälta in lättare i knappen utan att verka platt. Återigen, inställningarna för våra är:
Blandningsläge: Färg bränna Opacitet: 90 Stil: Linjär Vinkel: 90 Skala: 100
Steg 7: Avsluta
När du har skapat den här textstilen — speciellt om du vill använda den igen — gå till Ny stil och spara den 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” ser ut.
Ganska coolt va? För att spara din fil, gå Arkiv > Spara somoch spara det som rätt filformat för vilket projekt du än 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 för att passa dina behov. Och med dessa färdigheter i din arsenal kan du göra en produkt som inte bara är professionell utan också personlig.
Vill du veta om andra saker som du kan göra med det här programmet? Så här tar du bort en bakgrund i Photoshop.
Om författaren
Shianne Edelmayer (134 artiklar publicerade)
Shianne har en kandidatexamen i design och en bakgrund inom podcasting. Nu arbetar hon som senior skribent och 2D-illustratör. Hon täcker kreativ teknik, underhållning och produktivitet för MakeUseOf.
Mer från Shianne Edelmayer
Prenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, free e-böcker och exklusiva erbjudanden!
Klicka här för att prenumerera
