Share
În acest tutorial veți învăța cum să creați un buton de sticlă folosind forme simple, căsuță pentru căi de atac, măști de tăiere și opacitate și moduri de amestecare. Veți învăța, de asemenea, cum să optimizați munca dvs. de vector ca un grafic web și cum să înlocuiți rapid culorile elementelor necesare.
Luați instrumentul dreptunghiului (M) și creați un pătrat cu umplutură albastră (C = 25, M = 2, Y = 0 și K = 0)
Luați instrumentul Ellipse (L) și creați un cerc. Selectați pătratul și cercul, aliniați-le spre linii centrale și orizontale, utilizând paleta Aliniere.
Acum aranjați cercul în formă pătrată. Copiați pătratul și lipiți-l în față, selectați cercul și pătratul superior și apăsați butonul Intersect din paleta Pathfinder.
Umpleți forma rezultată cu un gradient liniar din albastru (C = 100, M = 65, Y = 0 și K = 0) până la albastru deschis (C = 53, M = 0, Y = 0 și K = setați Modul de amestecare la Multiplicare în paleta Transparență.
Creați încă două cercuri. Raza acestor cercuri este egală cu valoarea laturii pătratului, iar centrele lor se află în colțul din stânga jos și colțul din dreapta sus al pătratului.
Aplicând tehnica descrisă la pasul 2, aceste cercuri se împodobesc cu forma pătrată.
Selectați cele două forme rezultate și apăsați butonul Divide din paleta Pathfinder. Ungroupați obiectele rezultate. Ca rezultat, ar trebui să aveți trei forme.
Umpleți-le cu gradienți diferite și setați Modul de amestecare - Multiplicați pentru fiecare dintre ele. Umpleți prima formă cu un gradient radial format din trei culori: 1 (C = 17, M = 0, Y = 0 și K = 0); 2 (C = 25, M = 2, Y = 0 și K = 0); 3 (C = 62, M = 9, Y = 0 și K = 0).
Umpleți a doua formă cu un gradient liniar format din două culori 1 (C = 100, M = 33, Y = 0 și K = 0); 2 (C = 17, M = 0, Y = 0 și K = 0).
Umpleți a treia formă cu un gradient liniar format din trei culori: 1 (C = 38, M = 4, Y = 0 și K = 0); 2 (C = 100, M = 65, Y = 0 și K = 0) și 3 (C = 34, M = 0, Y =.
Copiați forma în mijloc și inserați-o în față, înlocuiți culorile gradientului cu: 1 (C = 100, M = 72, Y = 0 și K = 0) și 2 (C = 33, M = 0, Y = 0 și K = 0).
Creați alte două forme utilizând cercul și paleta Pathfinder, aplicând tehnicile menționate mai sus.
Umpleți prima formă cu un gradient liniar de la alb la alb cu opacitate 0% și setați Modul de amestecare pe ecran în paleta Transparență.
Umpleți a doua formă cu gradient liniar de la alb la alb cu opacitate 0% și setați Modul de amestecare - Suprapunere în paleta Transparență.
Copiați prima formă și inserați-o deasupra tuturor obiectelor, deplasându-o în paleta Straturi. Schimbați gradientul acestei forme, deplasând cursorul din stânga spre dreapta.
Puneți butonul într-o formă pătrată cu colțuri rotunjite. Copiați pătratul de jos și lipiți-l în față, peste toate obiectele. Păstrați pătratul selectat, mergeți la Efect> Conversie în Formă> Dreptunghi rotunjit și setați valorile indicate în figura de mai jos. Raza de curbură depinde de dimensiunea butonului, așa că vă voi lăsa să faceți alegerea proprie.
Copiați această formă și lipiți-o în față, vom avea nevoie de aceasta pentru o construcție ulterioară. Blocați substratul cu această formă în paleta Straturi și faceți-l invizibil. Selectați toate obiectele (comanda + A) și accesați Object> Mask Clipping> Make.
Deblocați substratul cu forma unui pătrat rotunjit și faceți-l vizibil. Copiați această formă și inserați-o în față. Acum micșorați dimensiunea acestei forme - doar puțin - prin utilizarea Instrumentului de selectare (V) și ținând apăsată tasta Alt și Shift.
Selectați cele două pătrate rotunjite și apăsați pe butonul Minus Front din paleta Pathfinder.
Umpleți forma obținută cu gradient liniar din albastru (C = 100, M = 0, Y = 0 și K = 0) cu opacitate 50% până la culoare albă cu Opacitate 0%.
Creați un alt dreptunghi rotunjit utilizând Instrumentul rotunjit dreptunghi cu o dimensiune puțin mai mare decât cea a butonului. Plasați figura creată sub toate straturile subțiri și umpleți-o cu un gradient liniar format din trei culori: 1 (C = 100, M = 100, Y = 0 și K = 77); 2 (C = 100, M = 16, Y = 0 și K = 0); 3 (C = 100, M = 66, Y = 0 și K = 0).
Acum creați partea metalică a butonului. Acesta va consta din două pătrate rotunjite. Primul este umplut cu un gradient liniar compus din trei nuante de culoare gri: 1 (K = 71), 2 (K = 14) si 3 (K = 26).
Al doilea este ușor mai mic decât primul și este umplut cu un gradient liniar compus din trei nuanțe de culoare gri: 1 (K = 45), 2 (K = 0) și 3 (K = 14). Odată ce butonul este gata, grupați-i toate elementele.
Creați o reflectare a butonului. Copiați butonul și lipiți-l în față. Deplasați butonul vertical în jos, ținând apăsată tasta Shift. Aceasta va deveni reflexia butonului.
Selectați reflexia și treceți la Object> Transform> Reflect și setați parametrii în caseta de dialog din figura de mai jos.
Acum, luați instrumentul Rectangle (M) și creați un dreptunghi cu umplutură de gradient alb-negru. Dimensiunea dreptunghiului ar trebui să fie astfel încât să poată ascunde complet reflexia butonului.
Selectați reflexia butonului și a dreptunghiului superior, alegeți Make Opacity Mask din meniul paletei Transparency.
Butonul cu reflecție este gata.
Adesea trebuie să aveți mai multe elemente identice în culori diferite. Să vedem cum să repede înlocuim culoarea unui buton.
Selectați toate elementele pe care doriți să le înlocuiți și mergeți la Edit> Edit Colors> Recolor Artwork, apoi faceți clic pe fila Edit în caseta de dialog open. În cele din urmă, dați clic pe butonul Culori armonie legătură.
Acum poți face toate rotațiile de culori disponibile în secțiunea de culori cerută în timp ce urmăriți schimbările de culoare ale operelor noastre de artă.
Când faceți imagini pentru web și dispozitive, imaginea vectorială nu este produsul final, trebuie să utilizați imagini raster. Prin urmare, va trebui să vedeți vectorul ca un raster. Pentru a face acest lucru, mergeți la Vizualizare> Vizualizare pixeli. După cum puteți vedea, există o mulțime de zone problematice atunci când măriți imaginea. Ele apar deoarece imaginea nu este redată în cadrul Gridului Pixel și de aceea liniile arată neclară când este un raster.
Adobe Illustrator CS5 ne permite să facem imaginea mai accentuată. Selectați butonul grafic și deschideți paleta Transformare (Fereastră> Transformare), faceți clic acum pe Aliniere la Grilă pixel în această paletă.
Acum, imaginea dvs. este gata să fie salvată ca un tip de raster, cum ar fi PNG sau JPG (File> Save for Web and Devices).
Odată ce posedați aceste cunoștințe și software-ul necesar, veți putea crea cu ușurință elemente de interfață web care nu numai că arată bine, ci fac perfect.
Accentsconagua