Cum Să Desenați Butoane Pentru Un Site Web

Cuprins:

Cum Să Desenați Butoane Pentru Un Site Web
Cum Să Desenați Butoane Pentru Un Site Web

Video: Cum Să Desenați Butoane Pentru Un Site Web

Video: Cum Să Desenați Butoane Pentru Un Site Web
Video: Vă învăț să desenați! LIVE #46 2024, Noiembrie
Anonim

O interfață ușor de utilizat, grafică bine desenată, dispunerea corectă a elementelor pe pagină - jumătate din succesul site-ului cu vizitatorul. Desenarea butoanelor pentru un site web este o parte mică, dar importantă a lucrării la un proiect online.

Cum să desenați butoane pentru un site web
Cum să desenați butoane pentru un site web

Instrucțiuni

Pasul 1

Încercați să desenați un buton rotund. Metoda prezentată mai jos este, de asemenea, universală pentru crearea de logo-uri și avatare. Desenarea nu este dificilă, în ciuda numărului de acțiuni pe care trebuie să le efectuați.

Pasul 2

Deschideți Adobe Photoshop. Creați un document nou apăsând combinația „Ctrl + N”. Parametrii imaginii 300 * 300, rezoluție 72 ppi. Modul implicit de fundal și culoare sunt alb și, respectiv, RGB.

Pasul 3

Cel mai bine este să desenați cu vectori, astfel încât atunci când butonul este redus, calitatea acestuia să nu se deterioreze. Selectați instrumentul Oval, țineți apăsată tasta Shift și desenați un cerc din centru.

Pasul 4

Acum aplicați câteva efecte cercului rezultat. Accesați meniul „Straturi” - „Stil strat” - „Opțiuni de amestecare”. Aici va trebui să aplicați un gradient.

Pasul 5

Apoi, aici, bifați caseta de lângă „Relief” pentru a da butonului umflătura necesară și setați următorii parametri: stil - reliefare contur, metodă - tăiere moale, adâncime - 220%, dimensiune - 1 pixel, dedurizare - 5 pixeli, unghi - 135® fără iluminare globală, înălțime - 32, modul de evidențiere - normal cu 30% opacitate, modul umbră - se înmulțește cu 25% opacitate

Pasul 6

Pentru a oferi și mai mult volum, aici, în parametrii de amestecare, bifați caseta „Umbra” și setați următorii parametri: modul de amestecare - multiplicare, transparență - 40%, unghi - 125o folosind iluminare globală, offset - 5 pixeli, dimensiune - 20 pixeli.

Pasul 7

Rezultatul acțiunilor efectuate va fi o astfel de imagine așa cum se arată în figură.

Pasul 8

Acum creați un strat nou, selectați din nou „Oval” și desenați un cerc cu o rază mai mică decât prima formă. Deschideți „Opțiuni de amestecare”, bifați caseta de lângă „Inner Shadow” și setați parametrii: Blending Mode - Soft Light, Unghi - 125o, Offset - 0px, Shrink - 45%, Dimensiune - 21px.

Pasul 9

Apoi, aici, în opțiunile de amestecare, bifați „Suprapunere gradient” și creați un gradient cu parametrii ca în imagine. Faceți clic pe OK

Pasul 10

Apoi setați stilul de amestecare la Radial, Scala la 124%

Pasul 11

Acum bifați caseta „Stroke” și setați următorii parametri: dimensiune - 5 pixeli, poziție - exterior, modul de amestecare - normal, opacitate - 100%, tip de cursă - gradient.

Pasul 12

Ca urmare a acestor acțiuni, ar trebui să obțineți ceva care seamănă mai mult cu un buton. Puteți redeschide opțiunile de amestecare și experimenta cu ele.

Pasul 13

Acum trebuie să adăugăm butoanele de evidențiere, astfel încât butonul să capete o textură de sticlă. Pentru aceasta, creați din nou un strat nou, selectați instrumentul Selecție ovală, creați un oval deasupra butonului și umpleți-l cu alb folosind instrumentul Umplere. Țineți apăsat Ctrl, faceți clic pe stratul cu cercul colorat, inversați selecția („Selecție” - „Inversie”). Acum apăsați Ștergeți. Ovalul trebuie tăiat în jurul perimetrului cercului.

Pasul 14

În panoul Straturi, schimbați opțiunea Normal la Soft Light, apoi faceți clic pe pictograma mască vectorială și selectați Instrumentul de umplere - Gradient. Completați evidențierea de jos în sus. Butonul este aproape gata.

Pasul 15

Puteți adăuga o inscripție la buton. De asemenea, îi puteți aplica efecte de amestecare, cum ar fi strălucirea interioară, exterioară, gradientul și așa mai departe. Nu vă fie teamă să experimentați, cu cât folosiți mai multă imaginație în munca dvs., cu atât veți stăpâni mai repede atât editorul în sine, cât și designul web.

Recomandat: