Hur man skapar 3D -knappar med Adobe Photoshop

Hur man skapar 3D -knappar med Adobe Photoshop

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 till nytta 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 'ned' 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, till exempel animerade GIF-filer, 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 det. För att göra detta, öppna Photoshop och klicka på Skapa nytt> Anpassat . Börja skriva in dina värden.

För att skapa en 3D -knapp kommer du att vilja ha ett horisontellt dokument. För våran 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 upp din knappstorlek upp och ner efter behov.

Steg 2: Konfigurera din rektangel för din 3D -knapp

När du har konfigurerat specifikationerna för din fil kommer du till din arbetsyta. 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 på vänster sida av 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 tar automatiskt upp ditt Skapa 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 pressade vi OK .

Notera: Knapparna varierar beroende på storlek och form, så det känns inte som 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 dess Fylla och Stroke färger genom att använda rullgardinsmenyerna i det övre vänstra hörnet på skärmen.

För denna handledning --- och för att illustrera hur en 'upp' och 'ned' -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å Layer> Layer Style från toppmenyn. Du kan också dubbelklicka på lagret som innehåller din knapp för att ta fram det automatiskt. Detta sätt är mycket snabbare och vi personligen föredrar det.

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

Detta är ett snabbt och enkelt sätt att ge kanterna på din knapp ett mer upphöjt '3D' -utseende. För den här självstudien ä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: Färg Dodge, 55% Opacitet
  • Skuggläge: Flera, 25% opacitet

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

Efter att vi slutat med Bevel & Emboss gick vi till Kontur och aktiverade det också. Contour gör definitionen av Bevel & Emboss lite starkare, och för denna handledning valde vi inställningen Kotte - omvänd .

Slå sedan på Övertäckning med lutning . Detta är vad som ger en knapp som har ett rundat, något 'glansigt' utseende. Inställningarna är följande:

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

Slutligen slog vi på Släpp skugga , för att få knappen att se lite 'upphöjd' ut från den vita bakgrunden på en webbplats eller blogg. Återigen, här är inställningarna:

stoppa netflix från att fråga tittar du fortfarande på

Strukturera

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

Kvalitet

  • Kontur: Linjär
  • Ljud: 0
  • Skikt släpper ut fallskugga: 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 det se ut som 3D. 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 dialogrutan, 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 sparas den här nya stilen 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 utformat din knapp och du har sparat den som en lagerstil, låt oss se den i funktion för ditt 'upp' -läge. Inget ord av lögn, detta kommer att minska din arbetstid till hälften.

Låt oss först skapa en annan knapp direkt ovanför det röda knapplagret, 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 ta 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 uppåt och en nedåt --- 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 lägger vi till text på knappen.

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

För den här självstudien 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 webbsäkert typsnitt san serif. Det slutliga 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.

Efter att detta är gjort finns det dock fortfarande några mer subtila ändringar som du behöver göra för att få denna text 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 sjunkit område) i din text. Detta får det att se ut som om bokstäverna har graverats i knappen. De exakta inställningarna som vi använde för denna handledning ä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

Applicera sedan a Gradient Overlay till dessa bokstäver, så att de lättare smälter in i knappen utan att de ser platta ut. Å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: Avsluta

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 inslagna kan du snabbt växla fram och tillbaka på synligheten mellan dina två knapplager för att se hur 'upp' och 'ned' tillstånd ser ut.

Ganska coolt, va? För att spara din fil, gå Arkiv> Spara som , och 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 mer om andra saker du kan göra med det här programmet? Här är hur man tar bort en bakgrund i Photoshop .

Dela med sig Dela med sig Tweet E-post Så här får du tillgång till Googles inbyggda bubblanivå på Android

Om du någonsin har behövt se till att något är i nivå med en nypa, kan du nu få en bubbelnivå på din telefon på några sekunder.

Läs Nästa Relaterade ämnen
  • Kreativ
  • Adobe Photoshop
  • Tips för bildredigering
  • Handledning för Photoshop
Om författaren Shianne Edelmayer(136 artiklar publicerade)

Shianne har en kandidatexamen i design och en bakgrund inom podcasting. Nu arbetar hon som Senior Writer och 2D Illustrator. 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, gratis e -böcker och exklusiva erbjudanden!

Klicka här för att prenumerera