Hvordan Man Tegner Knapper Til Et Websted

Indholdsfortegnelse:

Hvordan Man Tegner Knapper Til Et Websted
Hvordan Man Tegner Knapper Til Et Websted

Video: Hvordan Man Tegner Knapper Til Et Websted

Video: Hvordan Man Tegner Knapper Til Et Websted
Video: How To Make Animated Button For Website Using HTML CSS JS | Button Design In HTML CSS 2024, Kan
Anonim

En brugervenlig grænseflade, godt tegnet grafik, det rigtige arrangement af elementer på siden - halvdelen af websteds succes med den besøgende. Tegningsknapper til et websted er en lille, men vigtig del af arbejdet med et online-projekt.

Hvordan man tegner knapper til et websted
Hvordan man tegner knapper til et websted

Instruktioner

Trin 1

Prøv at tegne en rund knap. Metoden nedenfor er også universel til oprettelse af logoer og avatarer. Det er ikke svært at tegne, på trods af antallet af handlinger, du skal udføre.

Trin 2

Åbn Adobe Photoshop. Opret et nyt dokument ved at trykke på kombinationen "Ctrl + N". Billedparametre 300 * 300, opløsning 72 ppi. Standard baggrunds- og farvetilstand er henholdsvis hvid og RGB.

Trin 3

Det er bedst at tegne med vektorer, så når knappen reduceres, forringes dens kvalitet ikke. Vælg det ovale værktøj, hold Skift nede, og tegn en cirkel fra midten.

Trin 4

Anvend nu nogle effekter på den resulterende cirkel. Gå til menuen "Lag" - "Lagstil" - "Blandingsindstillinger". Her skal du anvende en gradient.

Trin 5

Derefter skal du markere afkrydsningsfeltet ved siden af "Prægning" for at give knappen den nødvendige udbulning, og indstil følgende parametre: stil - konturprægning, metode - blødt snit, dybde - 220%, størrelse - 1 pixel, blødgøring - 5 pixels, vinkel - 135 ° uden global belysning, højde - 32, fremhævningstilstand - normal med 30% opacitet, skyggetilstand - gang med 25% opacitet

Trin 6

For at give endnu mere volumen skal du her i blandingsparametrene markere afkrydsningsfeltet "Shadow" og indstille følgende parametre: blandingstilstand - multiplikation, gennemsigtighed - 40%, vinkel - 125o ved hjælp af global belysning, forskydning - 5 pixels, størrelse - 20 pixels.

Trin 7

Resultatet af de udførte handlinger vil være et sådant billede som vist på figuren.

Trin 8

Opret nu et nyt lag, vælg "Oval" igen og tegn en cirkel med en mindre radius end den første form. Åbn "Blandingsindstillinger", markér afkrydsningsfeltet ud for "Indvendig skygge", og indstil parametrene: Blandingstilstand - Blødt lys, Vinkel - 125o, Offset - 0px, Shrink - 45%, Størrelse - 21px.

Trin 9

Herefter, her i blandingsindstillingerne, skal du markere "Gradientoverlay" og oprette en gradient med parametrene som på billedet. Klik på OK

Trin 10

Indstil derefter blandestilen til radial, skaler til 124%

Trin 11

Marker nu afkrydsningsfeltet "Streg" og indstil følgende parametre: størrelse - 5 pixels, position - uden for, blandingstilstand - normal, opacitet - 100%, stregtype - gradient.

Trin 12

Som et resultat af disse handlinger, skal du få noget, der ligner mere en knap. Du kan åbne blandingsindstillingerne igen og eksperimentere med dem.

Trin 13

Nu skal vi tilføje knapperne til højdepunkter, så knappen får en glasstruktur. For at gøre dette skal du oprette et nyt lag igen, vælge værktøjet Oval markering, oprette en oval over knappen og udfylde det med hvidt ved hjælp af Fill-værktøjet. Hold Ctrl nede, klik på laget med den farvede cirkel, vend markeringen ("Selection" - "Inversion"). Tryk nu på Slet. Den ovale skal trimmes rundt om cirkelens omkreds.

Trin 14

I panelet Lag skal du ændre indstillingen Normal til Blødt lys, derefter klikke på vektormaskeikonet og vælge Udfyldningsværktøj - Gradient. Fyld højdepunktet fra bund til top. Knappen er næsten klar.

Trin 15

Du kan tilføje en indskrift på knappen. Du kan også anvende blandingseffekter på det, såsom indre, ydre glød, gradient osv. Vær ikke bange for at eksperimentere, jo mere fantasi du bruger i dit arbejde, jo hurtigere vil du mestre både redaktøren selv og webdesign.

Anbefalede: