Hvordan Man Laver 3D-knapper

Indholdsfortegnelse:

Hvordan Man Laver 3D-knapper
Hvordan Man Laver 3D-knapper

Video: Hvordan Man Laver 3D-knapper

Video: Hvordan Man Laver 3D-knapper
Video: Hvordan man laver en Custom Command FiveM Script 2024, Kan
Anonim

Ved design af websteder bruges ofte tredimensionelle navigationselementer. Sådanne knapper kan laves i grafikeditoren Photoshop, der simulerer lydstyrken ved hjælp af skygger og gradientfyldning.

Hvordan man laver 3D-knapper
Hvordan man laver 3D-knapper

Nødvendig

Photoshop-program

Instruktioner

Trin 1

Opret et nyt dokument i en grafisk editor ved hjælp af indstillingen Ny i menuen Filer. Vælg størrelsen på det nye dokument, så det passer til knappen, og gør baggrunden gennemsigtig.

Trin 2

Aktivér det afrundede rektangelværktøj. Hvis du vil have en let afrundet knap, skal du i værktøjsindstillingslinjen indstille radius til en millimeter. Tegn et afrundet rektangel ved hjælp af det valgte værktøj. Den resulterende form vil være grundlaget for knappen.

Trin 3

Højreklik på laget, og vælg indstillingen Rasterize Layer. Indlæs markeringen med indstillingen Load Selection fra menuen Select.

Trin 4

Brug gradientværktøjet til at udfylde knappen med en tofarvet gradient, og vælg en passende kombination af farver fra forudindstillingerne i gradientpaletten. Gradientstil skal være lineær, vælg den ved at klikke på knappen Lineær gradient under hovedmenuen. Den øverste del af knappen efter påfyldning skal være lettere end den nederste.

Trin 5

Anvend en stil på laget. For at gøre dette skal du bruge indstillingen Blanding i genvejsmenuen. Vælg fanen Drop Shadow, og indtast en værdi på hundrede og tyve grader for parameteren Vinkel. Indstil parameteren Størrelse til tre pixels.

Trin 6

I fanen Indvendig skygge skal du angive den samme værdi for parameteren Vinkel, og for størrelsen indstille værdien til fem pixels. Anvend stilen ved at trykke på Enter-tasten.

Trin 7

Lav en skygge for knappen. For at gøre dette skal du klikke på knappen Opret et nyt lag og udfylde det valgte område af det nye lag med sort. Vælg Paint Bucket Tool til dette. Fravælg med Ctrl + D.

Trin 8

Anvend et Gaussian Blur-filter fra Blur-gruppen i menuen Filter på det sorte rektangel. Indstil radius til fire pixels. Træk skyggelaget under knaplaget, og hæv skyggen tre til fire pixels op. For at gøre dette skal du aktivere Move Tool og flytte skyggen med markørknapperne. Reducer opaciteten for dette lag til tres procent.

Trin 9

Lav det aktive lag med knappen og indlæs et valg fra det. Reducer markeringen med to pixels ved hjælp af indstillingen Contract fra gruppen Rediger i menuen Valg.

Trin 10

Opret et nyt lag, og udfyld det resulterende valg med en lineær gradient fra hvid til gennemsigtig, så den hvide del er nederst på knappen. Fravælg markeringen. Brug indstillingen Gratis transformering fra menuen Rediger, og reducer det område, der er omfattet af gradienten lodret. Anvend transformationen med Enter-tasten.

Trin 11

Skift blandingstilstand for gradientlaget til Overlay. Dette kan gøres ved at vælge en tilstand fra rullelisten på venstre side af stilpaletten. Reducer lagets opacitet til tres procent.

Trin 12

Brug det vandrette type værktøj til at skrive den tekst, der skal være på knappen.

Trin 13

Saml alle lagene i en mappe ved hjælp af indstillingen Gruppelag fra menuen Lag, og vælg dem, mens du holder Ctrl-tasten nede. Gem knappen i en psd-fil ved hjælp af indstillingen Gem i menuen Filer.

Anbefalede: