Hvordan lage 3D -knapper ved hjelp av Adobe Photoshop

Hvordan lage 3D -knapper ved hjelp av Adobe Photoshop

Det er mange fantastiske ting du kan lage i Adobe Photoshop som er nyttige online, alt fra enkle bilderammer til komplekse brukergrensesnitt. En av de mest nyttige tingene du kan lage i Photoshop er 3D -knapper, som vil komme godt med hvis du driver en blogg eller et nettsted med et tilpasset grensesnitt.





I denne artikkelen viser vi deg hvordan du lager 3D -knapper ved hjelp av Photoshop, sammen med visuelle 'opp' og 'ned' tilstander, slik at du kan animere dem. (Vi kommer ikke til å dekke selve animasjonen i denne artikkelen.)



Trinn 1: Forbered dokumentet

Selv om 3D-knapper dukker opp oftest på nettsteder, er det viktig å merke seg at det finnes andre applikasjoner for dem, for eksempel animerte GIF-er, mock-up produktvisninger og mobilspill. Avhengig av hva du lager denne knappen til, kan det endelige filformatet og dimensjonene til det variere.





For å opprette en 3D -knapp i Photoshop må du lage et tilpasset dokument for det. For å gjøre dette, åpne Photoshop og klikk på Opprett nytt> tilpasset . Begynn å skrive inn verdiene dine.

For å lage en 3D -knapp, vil du ha et horisontalt dokument. For vår brukte vi:



  • 900 x 300 piksler høyt
  • 300 piksler/tommer
  • RGB -fargemodus

Selv om disse spesifikasjonene definitivt ikke er en hard og rask regel, vil dette sikre at du har mer enn nok plass å jobbe med, og muligheten til å skalere knappestørrelsen opp og ned etter behov.

Trinn 2: Sett opp rektangelet for 3D -knappen

Etter at du har konfigurert spesifikasjonene for filen, blir du ført inn i arbeidsområdet. Du kommer til å ha et horisontalt hvitt lerret i et enkelt lag, og det er her du begynner å bygge knappen.



Klikk 3D -knappen for å bygge Avrundet rektangelverktøy på venstre side av skjermen, sett her i rødt. Du kan også bruke snarveien U for å få tilgang til den.

Klikk en gang på det hvite laget ditt: Dette vil automatisk vise ditt Lag avrundet rektangel eske. Du vil bruke denne boksen til å angi dimensjonene til rektangelet.



For vår knapp, gikk vi med:

  • 300 piksler bredt
  • 75 piksler høyt

Vi sørget også for at hjørnene ble avrundet med 10 piksler. Ikke for høyt, og ikke for lavt, heller. Så presset vi OK .

Merk: Knappene varierer etter størrelse og form, så du føler ikke at du trenger å bruke disse eksakte dimensjonene. I tillegg, hvis du leter etter mer informasjon om snarveier, her er noen av de mest nyttige Photoshop -tastaturkommandoene .

Når du trykker OK , Vil Photoshop lage et avrundet rektangel med disse dimensjonene inne i laget ditt. Du kan endre den Fylle og Slag farger ved å bruke rullegardinmenyene øverst til venstre på skjermen.

For formålet med denne opplæringen --- og for å illustrere hvordan en 'opp' og 'ned' knapp kan se ut --- skal vi gjøre vår 'ned' knapp rød.

Trinn 3: Lag din knapp 3D

Etter at du har opprettet din grunnleggende knapp og valgt fargen, kommer du til å ønske å justere den i Lag stil dialogboks. Dette er for å få det til å se mer 3D ut.

For å få tilgang til din Lag stil dialogboksen, kan du gå Lag> Lagstil fra toppmenyen. Du kan også dobbeltklikke på laget som inneholder knappen, for å få det opp automatisk. Denne måten er mye raskere, og vi foretrekker det personlig.

Når Layer Style -boksen er oppe, går du til alternativet Bevel & Emboss . Slå den på.

Dette er en rask og enkel måte å gi kantene på knappen et mer hevet, '3D' utseende. For denne opplæringen er dette innstillingene vi brukte:

Struktur

  • Stil: Indre skråkant
  • Teknikk: Meisel myk
  • Dybde: 605
  • Retning: Opp
  • Størrelse: 5
  • Myke opp: 1

Skyggelegging

  • Vinkel: 90
  • Høyde: 37
  • Uthevningsmodus: Farge Dodge, 55% opacitet
  • Skygge -modus: Flere, 25% ugjennomsiktighet

Trikset er å gjøre innstillingene høye nok til at du kan se noen forskjell, men ikke så sterk at det er overveldende.

Etter at vi var ferdige med Bevel & Emboss, dro vi til Kontur og slått på det også. Contour gjør definisjonen av Bevel & Emboss litt sterkere, og for denne opplæringen valgte vi innstillingen Kjegle - invertert .

Slå deretter på Gradientoverlegg . Dette er det som gir en knapp som har et avrundet, litt 'glanset' utseende. Innstillingene er som følger:

  • Blandemodus: Overlegg
  • Ugjennomsiktighet: 90
  • Stil: Lineær
  • Vinkel: 90
  • Skala: 100

Til slutt slo vi på Drop Shadow , for å få knappen til å se litt 'hevet' ut fra den hvite bakgrunnen til et nettsted eller en blogg. Igjen, her er innstillingene:

Windows 7 du trenger tillatelse for å utføre denne handlingen

Struktur

  • Blandemodus: Flere
  • Ugjennomsiktighet: 35
  • Vinkel: 90
  • Avstand: 2
  • Spre: 6
  • Størrelse: 8

Kvalitet

  • Kontur: Lineær
  • Bråk: 0
  • Lag slår ut fallskygge: På

Nå er det på tide å lagre disse spesifikasjonene som en lagstil.

Trinn 4: Lagre som en lagstil

Når du er ferdig med knappens innstillinger, begynner den å se 3D ut. Fordi sjansen er stor for at du oppretter mer enn én 3D -knapp, må vi finne en rask og enkel måte å gjøre dette på.

Dette er hvordan.

Før du klikker OK i Lag stil dialogboksen, klikk på Ny stil . Når du gjør det, lagrer Photoshop denne lagstilen du har laget for knappen din.

Hvis du bruker Photoshop CC, blir denne nye stilen lagret i din Biblioteker som du kan se ovenfor. Det er veldig raskt og enkelt å få tilgang til.

Trinn 5: Slik bruker du en lagret lagstil

Nå som du har designet knappen og har lagret den som en lagstil, la oss se den i aksjon for din 'opp' -tilstand. Ingen løgn, dette vil kutte arbeidstiden din til det halve.

La oss først lage en annen knapp rett over det røde knappelaget, slik. La oss gjøre det grønt, for vektlegging.

Neste --- i stedet for å dobbeltklikke på selve laget for å få frem Lagstiler dialogboks --- dobbeltklikk på lagstilen i din Biblioteker panel.

Når du gjør det, bruker Photoshop automatisk den lagrede stilen på det nye knappelaget, samtidig som den beholder sin nye farge og form. Du har nå to knapper --- en i en opp-tilstand, og en i en ned --- og det er så enkelt å gjøre. Jeg elsker denne snarveien.

Trinn 6: Legg til tekst på knappen

Deretter skal vi legge til tekst på knappen.

For å legge til tekst, lag et nytt lag over de to knappelagene. Klikk på Skriv verktøy å begynne å skrive.

For denne opplæringen kommer vi til å skrive ordet 'abonnere' fordi det er noe du ser ganske ofte på nettsteder og sosiale medier.

Vi kommer også til å bruke en web-safe font for san serif. Det endelige valget av hvilken du bruker til din egen knapp er opp til deg. Montserrat, Proxima Nova, Arial og Verdana er alle mye brukte alternativer og trygge for nettet.

Etter at dette er gjort, er det imidlertid noen flere subtile endringer du må gjøre for å få denne teksten til å 'pop'.

Dobbeltklikk først på laget som inneholder teksten din, slik at du kan få den opp i din Lag stil dialogboks.

Klikk deretter på Indre skygge , for å legge til litt depresjon (eller nedsunket område) i teksten din. Dette får det til å se ut som om bokstavene er gravert inn i knappen. De nøyaktige innstillingene vi brukte for denne opplæringen er nedenfor.

Struktur

  • Blandemodus: Multiplisere
  • Ugjennomsiktighet: 35
  • Vinkel: 90
  • Avstand: 2
  • Kvele: 4
  • Størrelse: 1

Kvalitet

  • Kontur: Lineær
  • Bråk: 0

Påfør deretter en Gradient Overlay til disse bokstavene, for å få dem til å smelte lettere inn i knappen uten å virke flate. Igjen, innstillingene for vår er:

  • Blandemodus: Farge Burn
  • Ugjennomsiktighet: 90
  • Stil: Lineær
  • Vinkel: 90
  • Skala: 100

Trinn 7: Fullfør

Etter at du har opprettet denne tekststilen --- spesielt hvis du vil bruke den igjen --- gå til Ny stil og lagre det før du klikker OK .

Når det er pakket inn, kan du raskt bytte frem og tilbake på synligheten mellom de to knappelagene for å se hvordan 'opp' og 'ned' tilstandene ser ut.

Ganske kult, hva? For å lagre filen, gå Fil> Lagre som , og lagre det som riktig filformat for prosjektet du måtte jobbe med.

Tilpass bloggen din med 3D -knapper og widgets

Nå som du vet hvordan du lager 3D -knapper i Photoshop, kan du bli kreativ med det og designe dine egne 3D -knapper som passer dine behov. Og med disse ferdighetene i arsenalet ditt kan du lage et produkt som ikke bare er profesjonelt, men også personlig utseende.

Vil du vite om andre ting du kan gjøre med dette programmet? Her er hvordan fjerne bakgrunn i Photoshop .

Dele Dele kvitring E -post Slik får du tilgang til Googles innebygde boblenivå på Android

Hvis du noen gang har trengt å sørge for at noe er i vater, kan du nå få et boblenivå på telefonen din på få sekunder.

Les neste Relaterte temaer
  • Kreativ
  • Adobe Photoshop
  • Tips for bilderedigering
  • Opplæring i Photoshop
Om forfatteren Shianne Edelmayer(136 artikler publisert)

Shianne har en bachelorgrad i design og bakgrunn i podcasting. Nå jobber hun som Senior Writer og 2D Illustrator. Hun dekker kreativ teknologi, underholdning og produktivitet for MakeUseOf.

Mer fra Shianne Edelmayer

Abonner på vårt nyhetsbrev

Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis ebøker og eksklusive tilbud!

Klikk her for å abonnere