Share
În acest sfat rapid, veți învăța cum să creați un buton web scalabil, cu panoul Aspect și cu Scaling 9 Slice al Adobe Illustrator. Această tehnică este utilă în mod special pentru web designerii care trebuie să utilizeze același buton de stil cu diferite lungimi de text. Să începem!
Acest tutorial vă va arăta cum să creați un buton vectorial scalabil folosind scalarea 9-Slice în Adobe Illustrator CS5. În exemplul de mai jos veți vedea cum scade butonul cu și fără scalare 9-Slice, veți observa că scalarea obișnuită deplasează totul în cadrul imaginii butonului. Cu 9-Slice puteți specifica modul în care imaginile se mulează pentru a crea elemente de web reutilizabile.
Creați un nou document RGB de orice dimensiune. Opțiune + Faceți clic pe artboard cu instrumentul Rectangle (M) și introduceți dimensiunile butonului. Deoarece butonul va fi scalabil pe orizontală, lățimea nu este importantă. Mi-am stabilit dreptunghiul la 200px la 60px.
Deschideți panoul Aspect și selectați Fx> Stylize> Round Corners, setați raza de colț la 8px, faceți clic pe OK.
Adăugați un gradient de umplere la butonul cu următoarele culori. Dacă doriți să alegeți propria dvs., urmați ghidul de mai jos pentru a indica poziția și umbra culorilor. Veți observa că culorile 2 și 3 sunt foarte apropiate, aceasta este cheia aspectului super-lucios al gradientului.
Dacă butonul dvs. are o linie, ștergeți-l. Adăugați o altă umplere în panoul Aspect și poziționați-o sub stratul de gradient. Cu setările Aspect, accesați Fx> Cale> Cale de decalare și setați decalajul la 1px.
Umpleți al doilea strat de umplere cu un gradient în următoarele culori. Din nou, puteți face culorile aleasă de dvs., pur și simplu să vă amintiți să păstrați nuanțele luminii aproape de partea de sus și cea întunecată în partea de jos.
Adăugați o Umbre de Drop sub cele două umpleri din panoul Aspect făcând clic pe Fx> Stylize> Drop Shadow și setați opacitatea la 60%, decalajul X la 0px și decalajul Y la 2px. Faceți Blur 3px
Măriți în buton pentru a vedea liniile de linie pe care trebuie să le faceți în acest pas. Parte din drum în partea dreaptă a butonului, trageți două linii de 1px unul lângă celălalt. Asigurați-o prima aceeași culoare ca în partea de sus a conturului gradient și a doua linie aceeași culoare ca și fundul gradientului contur. Am scris numerele de culoare din următoarea imagine pentru referință.
Această parte este pentru Adobe Illustrator CS5 - Selectați butonul și liniile și trageți-l în Paleta de simboluri. Faceți clic pe Enable Scalable 9-Slice (Aceasta va permite scalarea orizontală) și Aliniere la Pixel Grid (Acest lucru va opri butonul de la rendering neclare pe site-uri web). Aceste două setări vor face butonul perfect pentru utilizarea pe web.
Când creați simbolul, veți vedea un ecran ca imaginea de mai jos. Deplasați liniile întrerupte pentru a marca zonele care nu ar trebui să fie scalate. Am poziționat liniile punctate în zona zonei pe care vreau să le pun un simbol, ceea ce va asigura că nu se va schimba dacă modific modificarea lungimii butonului. Dublu Faceți clic pe zona de tablă pentru a reveni la imaginea principală.
Scalați butoanele pentru a testa zonele pe care le-ați marcat. Dacă trebuie să efectuați modificări, faceți dublu clic pe simbolul pentru a reveni la setări.
Adăugați câteva texte și simboluri la butoane și alegeți unul pentru a aplica aspectul. După ce ați terminat setările, puteți aplica aspectul pentru restul elementelor. Începeți cu o umplere cu gradient. Acesta este un gradient simplu de la întuneric la lumină. Am scris culorile pe care le-am folosit în imaginea de mai jos.
Adăugați o umplutură albă sub stratul de gradient din panoul Aspect și setați-l să se miște 2px Vertical. Faceți clic pe OK.
Adăugați o strălucire exterioară prin accesarea Fx> Stylize> Outer Glow. Setați-l la un ton luminos al culorilor de pe buton și estompare la 1px. Acest lucru va adăuga o nuanță subtilă la efectul stratului și va face ca butonul să arate ca este ușor strălucitor.
Adăugați un curs în partea de sus a setărilor Aspect într-un ton întunecat de culoare a butonului. Setați cursa la 0,5 px.
Testați stilul pe o varietate de simboluri și butoane, salvați cele două stiluri în Paleta de stiluri grafice. selectând obiectul cu stilul și făcând clic pe butonul Adăugare stil din partea de jos a stilurilor grafice.
Acolo îl aveți. Un buton web scalabil ușor de utilizat și reutilizat. Dacă doriți să modificați colțurile rotunjite, puteți să reveniți la simbol și să modificați aspectul, schimbând colțurile rotunjite la invizibile. Dacă doriți să faceți un nou buton, glisați un simbol al butonului din Paleta simbolurilor. pe tabloul de bord și control Click pentru a naviga la opțiunile pentru a rupe legătura cu simbolul. De acolo, butonul nu va schimba celelalte simboluri și îl puteți modifica pentru a fi un stil nou. Sper că ți-a plăcut acest tut.
Accentsconagua