Sådan opretter du 3D -knapper ved hjælp af Adobe Photoshop

Sådan opretter du 3D -knapper ved hjælp af Adobe Photoshop

Der er mange fantastiske ting, du kan skabe i Adobe Photoshop der er nyttige online, lige fra enkle billedrammer til komplekse brugergrænseflader. En af de mest nyttige ting, du kan oprette i Photoshop, er 3D -knapper, som vil være nyttige, hvis du driver en blog eller et websted med en brugerdefineret grænseflade.





I denne artikel viser vi dig, hvordan du opretter 3D -knapper ved hjælp af Photoshop sammen med visuelle 'op' og 'ned' tilstande, så du kan animere dem. (Vi dækker ikke selve animationen i denne artikel.)



Trin 1: Forbered dit dokument

Selvom 3D-knapper oftest dukker op på websteder, er det vigtigt at bemærke, at der er andre applikationer til dem, såsom animerede GIF'er, mock-up produktdisplays og mobilspil. Afhængigt af hvad du opretter denne knap til, kan dit endelige filformat og dets dimensioner variere.





For at oprette en 3D -knap i Photoshop skal du oprette et brugerdefineret dokument til det. For at gøre dette skal du åbne Photoshop og klikke på Opret ny> Brugerdefineret . Begynd at indtaste dine værdier.

For at oprette en 3D -knap vil du have et vandret dokument. Til vores brugte vi:



  • 900 x 300 pixels høj
  • 300 pixel/tommer
  • RGB -farvetilstand

Selvom disse specifikationer bestemt ikke er en hård og hurtig regel, vil dette sikre, at du har mere end nok plads til at arbejde med, og muligheden for at skalere din knapstørrelse op og ned efter behov.

Trin 2: Konfigurer dit rektangel til din 3D -knap

Når du har konfigureret specifikationerne for din fil, bliver du bragt til dit arbejdsområde. Du får et vandret hvidt lærred i et enkelt lag, og det er her, du begynder at bygge din knap.



For at bygge din 3D -knap skal du klikke på Afrundet rektangelværktøj på venstre side af din skærm, set her med rødt. Du kan også bruge genvejen U for at få adgang til den.

Klik én gang på dit hvide lag: Dette vil automatisk vise dit Opret afrundet rektangel boks. Du vil bruge denne boks til at angive dimensionerne på dit rektangel.



Til vores knap gik vi med:

  • 300 pixel bred
  • 75 pixels høj

Vi sørgede også for, at hjørnerne blev afrundet med 10 pixels. Ikke for højt og heller ikke for lavt. Så pressede vi på Okay .

Bemærk: Knapperne varierer efter størrelse og form, så du føler ikke, at du skal bruge disse nøjagtige dimensioner. Derudover er der nogle af, hvis du leder efter mere information om genveje de mest nyttige Photoshop -tastaturkommandoer .

Når du trykker på Okay , Vil Photoshop oprette et afrundet rektangel med disse dimensioner inde i dit lag. Du kan ændre dens Fylde og Slag farver ved at bruge rullemenuerne i øverste venstre hjørne af din skærm.

Med henblik på denne vejledning --- og for at illustrere, hvordan en 'op' og 'ned' knap kan se ud --- vil vi gøre vores 'ned' knap rød.

Trin 3: Lav din knap 3D

Når du har oprettet din grundlæggende knap og valgt dens farve, vil du gerne justere den i Lagstil dialog boks. Dette er for at få det til at se mere 3D ud.

For at få adgang til din Lagstil dialogboks, kan du gå Lag> Lagstil fra topmenuen. Du kan også dobbeltklikke på det lag, der indeholder din knap, for at få det frem automatisk. Denne måde er meget hurtigere, og vi foretrækker det personligt.

Når din Layer Style -boks er oppe, skal du gå til indstillingen Affasning og prægning . Tænde den.

Dette er en hurtig og nem måde at give kanterne på din knap et mere hævet, '3D' look. Til denne vejledning er disse de indstillinger, vi brugte:

Struktur

  • Stil: Indre skråkant
  • Teknik: Mejsel blød
  • Dybde: 605
  • Retning: Op
  • Størrelse: 5
  • Blødgør: 1

Skygge

  • Vinkel: 90
  • Højde: 37
  • Fremhævningstilstand: Farve Dodge, 55% opacitet
  • Skygge -tilstand: Flere, 25% opacitet

Tricket er at gøre indstillingerne høje nok til, at du kan se en forskel, men ikke så stærk, at det er overvældende.

Efter at vi var færdige med Bevel & Emboss, gik vi til Kontur og tændte det også. Contour gør definitionen af ​​Bevel & Emboss en smule stærkere, og til denne vejledning valgte vi indstillingen Kegle - omvendt .

Tænd derefter Gradient overlay . Det er det, der giver en knap det afrundede, lidt 'blanke' look. Indstillingerne er som følger:

  • Blandingstilstand: Overlay
  • Gennemsigtighed: 90
  • Stil: Lineær
  • Vinkel: 90
  • Vægt: 100

Endelig tændte vi Drop Shadow , for at få knappen til at se lidt 'hævet' ud fra den hvide baggrund på et websted eller en blog. Igen er her indstillingerne:

en leder vil have dig til at installere en seriel ata

Struktur

  • Blandingstilstand: Mange
  • Gennemsigtighed: 35
  • Vinkel: 90
  • Afstand: 2
  • Spredning: 6
  • Størrelse: 8

Kvalitet

  • Kontur: Lineær
  • Støj: 0
  • Lag slipper dropskygge ud: På

Nu er det tid til at gemme disse specifikationer som en lagstil.

Trin 4: Gem som en lagstil

Når du er færdig med din knaps indstillinger, begynder den at se 3D ud. Fordi chancerne er store for, at du opretter mere end én 3D -knap, skal vi finde en hurtig og nem måde at gøre dette på.

Sådan gør du.

Inden du klikker Okay i Lagstil dialogboks, klik på Ny stil . Når du gør det, gemmer Photoshop denne lagstil, du har lavet til din knap.

Hvis du bruger Photoshop CC, gemmes denne nye stil i din Biblioteker sektion, som du kan se ovenfor. Det er meget hurtigt og let tilgængeligt.

Trin 5: Sådan bruges en gemt lagstil

Nu hvor du har designet din knap, og du har gemt den som en lagstil, lad os se den i aktion for din 'op' -tilstand. Ingen løgn, det vil reducere din arbejdstid til det halve.

Lad os først oprette en anden knap direkte over det røde knaplag, sådan. Lad os gøre det grønt, for fremhævelse.

Næste --- i stedet for at dobbeltklikke på selve laget for at få vist Lagstil dialogboks --- dobbeltklik på lagstilen i din Biblioteker panel.

Når du gør det, anvender Photoshop automatisk din gemte stil på dit nye knaplag, samtidig med at den bevarer sin nye farve og form. Du har nu to knapper --- en i en op-tilstand og en i en ned --- og det er så enkelt at gøre. Jeg elsker denne genvej.

Trin 6: Føj tekst til din knap

Dernæst tilføjer vi tekst til knappen.

For at tilføje tekst skal du oprette et nyt lag over dine to knaplag. Klik på Skriv værktøj at begynde at skrive.

I denne vejledning skriver vi ordet 'abonner', fordi det er noget, du ser ret ofte på websteder og sociale medieplatforme.

Vi kommer også til at bruge en web-sikker font til san serif. Det endelige valg af hvilken du bruger til din egen knap er op til dig. Montserrat, Proxima Nova, Arial og Verdana er alle meget udbredte alternativer og sikre for internettet.

Efter at dette er gjort, er der dog stadig et par mere subtile ændringer, du skal foretage for at få denne tekst til at 'poppe'.

Dobbeltklik først på det lag, der indeholder din tekst, så du kan få den vist i din Lagstil dialog boks.

Klik derefter på Indre skygge , for at tilføje lidt af en depression (eller nedsænket område) til din tekst. Dette får det til at ligne at bogstaverne er indgraveret i knappen. De nøjagtige indstillinger, som vi brugte til denne vejledning, er nedenfor.

Struktur

  • Blandingstilstand: Formere sig
  • Gennemsigtighed: 35
  • Vinkel: 90
  • Afstand: 2
  • Kvæle: 4
  • Størrelse: 1

Kvalitet

  • Kontur: Lineær
  • Støj: 0

Anvend derefter en Gradient Overlay til disse bogstaver for at få dem til lettere at blande sig ind i knappen uden at virke flade. Igen er indstillingerne for vores:

  • Blandingstilstand: Farve brænd
  • Gennemsigtighed: 90
  • Stil: Lineær
  • Vinkel: 90
  • Vægt: 100

Trin 7: Afslutning

Når du har oprettet denne tekststil --- især hvis du vil bruge den igen --- gå til Ny stil og gem det, før du klikker Okay .

Når det er pakket ind, kan du hurtigt skifte frem og tilbage på synligheden mellem dine to knaplag for at se, hvordan 'op' og 'ned' tilstande ser ud.

Ret cool, hva '? Gå til for at gemme din fil Fil> Gem som , og gem det som det korrekte filformat til det projekt, du måtte arbejde med.

Tilpas din blog med 3D -knapper og widgets

Nu hvor du ved, hvordan du opretter 3D -knapper i Photoshop, kan du blive kreativ med det og designe dine egne 3D -knapper, der passer til dine behov. Og med disse færdigheder i dit arsenal kan du lave et produkt, der ikke kun er professionelt, men også personligt.

Vil du vide mere om andre ting, du kan gøre med dette program? Her er hvordan man fjerner en baggrund i Photoshop .

Del Del Tweet E -mail Sådan får du adgang til Googles indbyggede bobleniveau på Android

Hvis du nogensinde har haft brug for at sikre, at noget er i niveau med en knivspids, kan du nu få et bobleniveau på din telefon på få sekunder.

Læs Næste Relaterede emner
  • Kreativ
  • Adobe Photoshop
  • Tips til billedredigering
  • Photoshop selvstudium
Om forfatteren Shianne Edelmayer(136 artikler udgivet)

Shianne har en bachelorgrad i design og en baggrund i podcasting. Nu arbejder hun som Senior Writer og 2D Illustrator. Hun dækker kreativ teknologi, underholdning og produktivitet til MakeUseOf.

Mere fra Shianne Edelmayer

Abonner på vores nyhedsbrev

Tilmeld dig vores nyhedsbrev for at få tekniske tips, anmeldelser, gratis e -bøger og eksklusive tilbud!

Klik her for at abonnere