Share
În acest sfat rapid vom crea un set de butoane web cu ajutorul Efecte 3D în Adobe Illustrator. De ce? Pentru ca astfel putem uita folosirea diferitelor perii si efecte pentru a adauga accente si umbre si putem realiza acest lucru intr-un singur pas, profitand de setarile de lumina si de formele Bevel disponibile. Sa incepem!
Să începem cu forma de bază pentru acest buton de web, deci luați Instrumentul Rounded Rectangle și faceți clic oriunde pe tabloul de bord pentru a deschide fereastra Rounded Rectangle. Acolo, introduceți numerele afișate și veți obține forma de care avem nevoie. Selectați gri deschis ca culoare de umplere.
Având acest dreptunghi selectat, mergeți la meniul Effect> 3D> Extrude & Bevel. În partea dreaptă a imaginii de mai jos puteți vedea setările implicite, doar coordonatele de rotație sunt modificate. Mi-ar plăcea să folosesc mai des forme de Bevel, dar uneori ele nu generează rezultatele pe care le doresc. În acest caz, dacă alegeți Tall-Round ca forma Bevel, schimbarea este mai mult decât evidentă. Veți obține marginea rotunjită și, de asemenea, nu veți mai fi trebuit să vă faceți griji cu privire la momentele și umbrele ulterioare.
Dacă măriți valoarea înălțime, marginea rotunjită devine mai groasă.
În fereastra Extrude & Bevel Options apăsați butonul Mai multe opțiuni pentru a deschide întregul dialog și a vă concentra pe partea de jos. Dacă doriți să evidențiați colțul din stânga sus, deplasați lumina spre stânga, așa cum este indicat mai jos sau spre partea de jos, dacă doriți să evidențiați colțul din dreapta jos.
În cele din urmă, aici sunt setările pe care le-am folosit. Schimbați coordonatele, alegeți Tall-Round ca formă Bevel, măriți înălțimea de la 4 pt la 6 pt și deplasați ușor lumina spre stânga.
În timp ce este selectat butonul 3D, mergeți la meniul Obiect și alegeți Expandare aspect. Acum, folosiți Instrumentul de selecție directă (A) pentru a selecta dreptunghiul rotund interior și pentru al umple cu gradientul liniar prezentat. Setați unghiul la 90 de grade. Cu acest dreptunghi selectat, faceți dublu clic pe Conținut (deoarece această formă se află într-un grup) în panoul Aspect și astfel veți vedea atributele existente. Apoi, accesați meniul Effect> Stylize și aplicați efectul Inner Glow utilizând setările afișate.
Având umplutura existentă selectată în panoul Aspect, faceți clic pe pictograma Duplicat selectat de element din partea de jos și veți obține oa doua umplere. Schimbați gradientul cu cel prezentat cu alb și negru și setați unghiul la 50 de grade. Schimbați modul de amestecare pe ecran (negrul devine transparent) și reduceți opacitatea la 75%.
Duplicați acest al doilea umplere ca și înainte și păstrați același gradient. Setați unghiul la 140 de grade și creșteți valoarea opacității de la 75% la 90%.
Acum, selectați utilizând Instrumentul de selecție directă (A) dreptunghiul interior și din meniul Obiect alegeți Copiere și Lipire în față. În panoul Straturi, trageți noul dreptunghi în afara grupului de butoane, deoarece nu îl dorim acolo. Eliminați atributele existente și dați-le un accident de culoare neagră. În timp ce acest dreptunghi este selectat, mergeți la Object> Path> Add Points Anchor de două ori pentru a adăuga câteva puncte suplimentare. Apoi, luați Instrumentul pentru foarfece (C) și faceți clic pe cele două puncte indicate pentru a tăia forma, apoi ștergeți calea din partea de jos.
Acum, aveți nevoie de o perie Art. I-am explicat cum să o fac în acest sfat rapid la Pasul 9. Singura diferență este că, de data aceasta am pornit de la o elipsă de 100 x 3 px în loc de 200 x 5 px. După ce îl trageți în panoul de perforere pentru al salva ca pe o nouă perie de artă, utilizați-l pentru a cursa calea din partea de sus. Setați greutatea la 2 pt.
Copiați și lipiți din nou în față dreptunghiul interior și trageți-l în fața grupului de butoane, în fața acestuia. Îndepărtați aparițiile existente și dați-i o umplere neagră (1). Acum, copiați și lipiți în fața dreptunghiului negru și schimbați culoarea de umplere pentru a le diferenția. Mutați dreptunghiul roșu puțin apăsând tasta de săgeată sus de pe tastatură de două ori (2). Creșterea tastaturii ar trebui setată la 1 px (meniul Editare> Preferințe> General).
Selectați ambele forme și selectați Scădere din zona de formă> Extindeți din panoul Pathfinder. Forma subțire rezultată ar trebui să aibă o umplutură neagră (3). Schimbați modul de amestecare la Multiplicare și reduceți opacitatea la 20% (4).
Apoi, folosind Instrumentul Pen (P) trageți o cale peste buton ca în imaginea de mai jos. Copiați și lipiți din nou în față dreptunghiul interior, îndepărtați aparițiile existente și dați-i o lovitură neagră. Selectați acest dreptunghi și, de asemenea, calea albastră și faceți clic pe Divide în panoul Pathfinder. Din meniul Obiect selectați Ungroup, apoi ștergeți forma din partea de jos.
Umpleți forma obținută cu un gradient liniar de la alb la negru și setați unghiul la minus 90 de grade. Schimbați modul de amestecare în ecran (negru devine transparent) și reduceți opacitatea la 30%.
Să continuăm cu textul. Cu instrumentul Type (T) tip "TRY NOW" folosind un font numit Anja Eliane, dimensiunea de 35 pt. Puteți găsi aici fontul. Din meniul Obiect alegeți Extindere, apoi umpleți textul cu gradientul liniar afișat. Setați unghiul la minus 45 de grade. Apoi, accesați meniul Effect> Stylize și aplicați efectul Drop Shadow utilizând setările de mai jos.
Acum, tastați "30 DAY TRIAL" folosind Arial Bold, dimensiune de 15 pt apoi selectați Expand din meniul Obiect. Completați textul cu alb, apoi aplicați din nou efectul Drop Shadow utilizând setările afișate.
Din panoul Simboluri (meniul ferestrei> Simboluri) deschideți meniul Simbol Libraries and din categoria Arrows găsiți Arrow 24. Trageți-l în zona de lucru și apăsați pe pictograma Break Link to Symbol din partea inferioară a panoului. Ungroupați-l de două ori apoi mergeți la meniul Efect> Stylize> Round Corners și aplicați un rază de 3 px (1). Umpleți săgeata cu gradientul liniar prezentat apoi dați-i un curs de 0,5 pt folosind culoarea indicată (2).
Deplasați săgeata pe buton apoi mergeți la meniul Effect> Stylize și aplicați efectul Drop Shadow.
Având această săgeată selectată, alegeți Extinderea Aspectului din meniul Obiect pentru a extinde cele două efecte aplicate apoi mergeți la meniul Obiect> Transformați> Scală, alegeți 80% și apăsați Copiere. Veți obține săgeata mai mică. Asigurați-le ca în imagine și asigurați-vă că sunt aliniate orizontal. Selectați-le pe ambele apoi mergeți la meniul Obiect> Transformare> Reflectați. Alegeți Vertical, apoi apăsați Copiere. Aranjați cele două săgeți noi în partea dreaptă și butonul este gata.
Tot ce lipsește este o umbră sub buton. Luați instrumentul Ellipse (L) și trageți o elipsă plană în partea inferioară, apoi selectați culoarea neagră (1). Trimiteți această elipsă în spatele butonului, apoi mergeți la meniul Obiecte> Cale> Cale de decalare și aplicați o deplasare minus 7 px. Veți obține o elipsă mai mică în mijloc (2). Setați Opacitatea pentru elipse mai mari la 0% apoi selectați-le pe ambele și accesați meniul Obiect> Blend> Blend Options. Acolo, selectați 25 de pași specificați și reveniți la meniul Obiect> Blend> Marcă (3). Reduceți Opacitatea pentru grupul de amestecuri rezultat la 75% și dacă puneți butonul pe un anumit fundal, schimbați, de asemenea, modul de amestecare pentru a multiplica.
Aici este butonul Web final:
Pornind de la acest buton puteți obține multe alte variații de culoare. Tot ce trebuie să faceți este să faceți o copie a butonului și să schimbați câteva lucruri. În imaginile de mai jos puteți vedea trei exemple: albastru, verde și violet. Toate formele care sunt vizibile în imaginea de mai jos nu au fost modificate. Păstrați-le așa cum sunt. Ceea ce este ascuns înseamnă că ele vor fi modificate și vom lua fiecare în mod individual.
Să începem cu dreptunghiul rotunjit. Selectați-l cu Instrumentul de selecție directă (A) și aruncați o privire la panoul Aspect. Modificați umplerea primului gradient cu noul gradient prezentat și păstrați toate celelalte atribute așa cum sunt ele. Faceți același lucru pentru butoanele de pe verde și purpuriu.
Pentru text, schimbați pur și simplu opritorul de mijloc al gradientului de la portocaliu deschis la albastru deschis, respectiv verde deschis și purpuriu deschis. "30 DAY TRIAL" rămâne același.
Acum, selectați săgeata și schimbați gradientul de umplere, apoi culoarea cursei indicată. Efectele rămân aceleași.
În cele din urmă, așa cum ați făcut la pasul 10, selectați Expandare aspect, apoi scalați săgeata pentru a obține cea mai mică. Reflectați cele două și ați terminat.
Aceasta este imaginea finală și aici sunt cele patru butoane web gata de utilizare. Dacă doriți să le salvați pentru web, consultați un alt tutorial al meu, unde vă explic cum să faceți acest lucru în detaliu.
Accentsconagua