Share
În următorul tutorial veți afla cum să creați un buton detaliat și o ilustrare a acului. Acest tutorial utilizează mai multe tehnici vectoriale diferite, inclusiv panoul Aspect, setările pentru transparență, modelele și multe altele. Sa incepem!
Apăsați Command + N pentru a crea un document nou. Introduceți 600 în caseta de lățime și 700 în caseta de înălțime, apoi faceți clic pe butonul Avansat. Selectați RGB, Ecran (72ppi) și asigurați-vă că caseta "Align New Objects to Pixel Grid" nu este bifată înainte de a da clic pe OK. Activați Grilă (Vizualizare> Afișare Grilă) și Glisați la Grilă (Vizualizare> Glisați la Grilă). Apoi, veți avea nevoie de o rețea la fiecare 5px.
Accesați Edit> Preferences> Guides> Grid, introduceți 5 în caseta Gridline în fiecare casetă și 1 în caseta Subdiviziuni. De asemenea, puteți deschide panoul Informații (fereastră> Info) pentru o previzualizare live cu dimensiunea și poziția formelor. Nu uitați să înlocuiți unitatea de măsură pixelilor din Editare> Preferințe> Unitate> Generalități. Toate aceste opțiuni vă vor mări semnificativ viteza de lucru.
Alegeți instrumentul Ellipse (L), creați un cerc de 190 de pixeli și completați-l cu R = 57 G = 181 B = 74. Selectați-l și mergeți la Object> Cale> Cale de decalare. Introduceți un decalaj de -25px și faceți clic pe OK. Selectați cercul rezultat, completați-l cu R = 0 G = 148 B = 68 și mergeți din nou la Object> Path> Path offset. Introduceți un decalaj -5px și faceți clic pe OK. Umpleți forma rezultată cu R = 57 G = 181 B = 74.
Resetați cele trei cercuri concentrice create în etapa anterioară, deschideți panoul Pathfinder și faceți clic pe butonul Divide. Deplasați-vă la panoul Straturi și veți găsi un nou grup cu două căi compuse și un cerc. Selectați-l și deselectați-l (Shift + Command + G).
Dezactivați Snap to Grid (Vizualizare> Snap to Grid), apoi mergeți la Edit> Preferences> General și asigurați-vă că Incrementarea tastaturii este setată la 1px. Selectați calea complexă mai mare și faceți două copii în față (Command + C> Command + F> Command + F). Selectați copia de sus și apăsați de două ori pe săgeata sus (pentru a muta 2px în sus). Resetați ambele copii și faceți clic pe butonul Minus Front din panoul Pathfinder. Umpleți formele rezultate cu gradientul liniar prezentat în imaginea finală.
Resetați calea compusă mai mare și faceți două copii noi în față (Command + C> Command + F> Command + F). Selectați copia de început și mutați-o cu 1px în jos. Resetați ambele copii și faceți clic pe butonul Minus Front din panoul Pathfinder. Selectați grupul de forme care rezultă, transformați-l într-o cale compusă (Object> Compound Path> Make) și completați-l cu R = 105 G = 199 B = 118.
Resetați calea compusă mai mare și faceți două copii noi în față (Command + C> Command + F> Command + F). Selectați copia de început și mutați-o cu 2px în jos. Resetați ambele copii și faceți clic pe butonul Minus Front din panoul Pathfinder. Umpleți formele rezultate cu gradientul liniar prezentat în imaginea finală.
Resetați calea compusă mai mare și accesați Obiect> Cale> Cale de decalare. Introduceți un decalaj de -2px și faceți clic pe OK. Umpleți forma rezultată cu gradientul liniar prezentat în următoarea imagine și mergeți la Efect> Blur> Gaussian Blur. Introduceți o rază de 3 pixeli și faceți clic pe OK.
Deplasați-vă la calea compusului mai mic. Selectați-l, umpleți-l cu gradientul liniar prezentat în următoarea imagine, apoi adăugați un curs de 1 pt. Setați culoarea la R = 0 G = 148 B = 68 și aliniați-o spre interior.
Mergeți în cerc. Selectați-l și înlocuiți culoarea plană folosită pentru umplere cu gradientul liniar prezentat în imaginea următoare.
Resetați cercul și mergeți la Obiect> Cale> Cale de decalare. Introduceți un decalaj -1px și faceți clic pe OK. Duplicați forma rezultată (Command + C> Command + F). Selectați această copie și mutați-o cu 1px în sus. Resetați ambele forme create în acest pas și faceți clic pe butonul Minus Front din panoul Pathfinder. Umpleți forma rezultată cu gradientul liniar prezentat în imaginea următoare.
Reluați cercul și reveniți din nou la Obiect> Cale> Cale de decalare. Introduceți o decalaj -1px, faceți clic pe OK și duplicați forma rezultată (Command + C> Command + F). Selectați copia și mutați-o cu 1px în jos. Resetați ambele forme create în acest pas și faceți clic pe butonul Minus Front din panoul Pathfinder. Umpleți forma rezultată cu gradientul liniar prezentat în imaginea următoare.
Activați Snap to Grid (Vizualizați> Snap to Grid) și apucați instrumentul Ellipse (L). Creați patru cercuri de 20 de pixeli și completați-le cu alb. Așezați-le ca în imaginea următoare și transformați-le într-o cale compusă (Object> Compound Path> Make). Selectați această cale nouă compusă și faceți o copie în față (Command + C> Command + F). Veți avea nevoie de el pentru pasul următor.
Selectați copia trasei combinate creată în finalul etapei anterioare împreună cu cercul și faceți clic pe butonul Minus Front din panoul Pathfinder. Selectați calea compusă rezultată, trimiteți-o înapoi (Shift + Command + [) și focalizați pe panoul Aspect. Mai întâi, selectați umplerea și treceți la Efect> Stylize> Glow Inner. Introduceți datele afișate în imaginea de mai jos și faceți clic pe OK. Apoi, adăugați o cursă de 1 pt, setați culoarea la R = 0 G = 148 B = 68 și aliniați-o spre interior.
Dezactivați funcția Snap to Grid (Vizualizare> Snap to Grid). Resetați calea compusului alb creat în pasul douăsprezecea și mergeți la Obiect> Cale> Cale de decalare. Introduceți un Offset de 1px și faceți clic pe OK. Selectați calea compusă rezultată și faceți o copie înapoi (Command + C> Command + B). Selectați-l și mutați-l cu 1px în jos. Resetați calea originală, compusă alb (cea creată în pasul douăsprezecea) și ștergeți-o, apoi reselectați cele două căi combinate create în acest pas și faceți clic pe butonul Minus Front din panoul Pathfinder. Umpleți formele rezultate cu gradientul liniar prezentat în imaginea următoare.
Activați Snap to Grid (Vizualizare> Snap to Grid). Alegeți instrumentul Rectangle (M), creați o formă de 130 x 65px, umpleți-o cu gradientul liniar prezentat în imaginea următoare și plasați-o după cum este arătat în prima imagine. Zero galben din imaginea gradientului reprezintă procentul de opacitate. Resetați calea compusă creată în pasul # 13 și faceți o copie în față (Command + C> Command + F). Selectați această copie împreună cu dreptunghiul proaspăt și faceți clic pe butonul Intersect din panoul Pathfinder. Selectați forma rezultată și reduceți opacitatea la 30%.
Alegeți instrumentul Rectangle (M), creați o formă de 190 x 95px, umpleți-o cu gradientul liniar prezentat în imaginea următoare și plasați-o așa cum se arată în prima imagine. Resetați calea mare și verde combinată și faceți o copie în față (Command + C> Command + F). Selectați-l împreună cu dreptunghiul proaspăt și faceți clic pe butonul Intersect din panoul Pathfinder. Selectați forma rezultată și reduceți opacitatea la 50%.
Selectați toate formele create până acum și duplicați-le (Command + C> Command + F). Selectați toate aceste copii și faceți clic pe butonul Unite din panoul Pathfinder. Umpleți forma rezultată cu albul, trimiteți-o înapoi (Shift + Command + Bracket pătrate stânga) și mergeți la Efect> Stylize> Drop Shadow. Introduceți datele afișate în prima fereastră, faceți clic pe OK, apoi mergeți din nou la Efect> Stylize> Drop Shadow. Introduceți proprietățile afișate în fereastra de mijloc, faceți clic pe OK, apoi mergeți încă o dată la Efect> Stylize> Drop Shadow. Introduceți proprietățile afișate în fereastra din dreapta și faceți clic pe OK. Selectați toate formele create până acum și grupați-le (Command + G). Acesta va fi butonul dvs..
Să continuăm cu acul. Asigurați-vă că funcția Snap to Grid este activată. Alegeți instrumentul Rectangle (M), creați o formă de 10 x 475px și completați-o cu o culoare aleatoare. Asigurați-vă că această nouă formă este selectată, prindeți instrumentul Add Anchor Point (+) și focalizați pe partea superioară. Mai întâi, adăugați două puncte de ancorare noi în punctele evidențiate cu verde. Apoi, alegeți instrumentul Ștergeți punctul de ancorare (-) și scoateți punctul de ancorare din partea de sus, stânga. În cele din urmă, selectați punctul de ancorare de sus și dreapta și mutați-l 5px spre stânga. În final, forma ta ar trebui să arate ca în a doua imagine.
Alegeți instrumentul Rectangle (M) și creați o formă de 10 x 120 pixeli. Plasați-o așa cum se arată în imaginea următoare și accesați Efect> Warp> Ardere. Introduceți datele afișate mai jos, faceți clic pe OK și accesați Object> Expand Appearance.
Resetați cele două forme create în ultimii doi pași și faceți clic pe butonul Unite din panoul Pathfinder. Apoi, veți avea nevoie de o rețea la fiecare 1px. Deci, mergeți la Edit> Preferences> Guides & Grid și introduceți 1 în caseta Gridline în fiecare casetă. Alegeți instrumentul Rectangle (M), creați o formă de 6 x 71px și plasați-o după cum se arată în a doua imagine. Selectați-l și mergeți la Efect Stylize> Rounded Corners. Introduceți o rază de 3 pixeli, faceți clic pe OK și treceți la Efect> Warp> Aproape. Introduceți datele afișate mai jos, faceți clic pe OK și accesați Object> Expand Appearance.
Resetați cele două forme create în pasul anterior și faceți clic pe butonul Minus Front din panoul Pathfinder. Duplicați forma rezultată (Command + C> Command + F). Veți avea nevoie de această copie pentru pasul următor. Alegeți instrumentul Ellipse (L), creați o formă de 6 x 80px și plasați-o așa cum se arată în imaginea următoare.
Alegeți din nou cercul stins și copia traseului mare compus creat în pasul anterior și faceți clic pe butonul Intersect din panoul Pathfinder. Umpleți forma rezultată cu gradientul liniar prezentat în imaginea următoare.
Dezactivați funcția Snap to Grid (Vizualizare> Snap to Grid). Resetați forma creată în etapa anterioară și faceți două copii în față (Command + C> Command + F> Command + F). Selectați copia de început și mutați-o 1px spre stânga. Resetați ambele copii și faceți clic pe butonul Minus Front din panoul Pathfinder. Selectați grupul de forme care rezultă, transformați-l într-o cale compusă și umpleți-l cu R = 225 G = 225 B = 225.
Pentru pasul următor veți avea nevoie de scriptul Round Any Corner. Îl puteți găsi în articolul Vectortuts + 20 de scripturi gratuite și utile Adobe Illustrator. Salvați-l pe hard disk, reveniți la Illustrator și apucați Instrumentul de selecție directă (A). Selectați cele patru puncte de ancorare evidențiate cu albastru și accesați File> Scripts> Other Script. Deschideți Scriptul Round Any Corner, introduceți un Radius de 5px și faceți clic pe OK. Apoi, selectați punctul de ancorare evidențiat cu verde și accesați File> Scripts> Other Script. Din nou, deschideți Scriptul Round Any Corner, introduceți un Radius 2px și faceți clic pe OK. În final, forma ta ar trebui să arate ca în a doua imagine.
Selectați calea compusă editată în pasul anterior și faceți două copii în față (Command + C> Command + F> Command + F). Selectați copia de sus și mutați-o 1px spre dreapta. Resetați ambele copii și faceți clic pe butonul Minus Front din panoul Pathfinder. Selectați grupul de forme care rezultă, transformați-l într-o cale complexă și completați-l cu gradientul liniar prezentat în imaginea următoare.
Resetați calea compusă editată în pasul # 24 și faceți două copii noi în față (Command + C> Command + F> Command + F). Selectați copia de început și mutați 2px spre dreapta. Resetați ambele copii și faceți clic pe butonul Minus Front din panoul Pathfinder. Rotiți grupul de forme care rezultă într-o cale compusă și completați-l cu gradientul liniar prezentat în imaginea următoare.
Resetați forma principală a acului și înlocuiți culoarea plană folosită pentru umplere cu gradientul liniar prezentat în imaginea următoare. Selectați toate formele care alcătuiesc acul și grupați-le (Command + G).
Selectați grupul de ac, rotiți-l și plasați-l așa cum se arată în imaginea de mai jos. Resetați forma principală a acului și adăugați cele trei efecte Drop Shadow prezentate în imaginea următoare.
În cele din urmă, să adăugăm o bucată de șir. Deschideți panoul dvs. Perii și faceți dublu clic pe peria "7pt Round". Micșorați rotunjimea la 80% și faceți clic pe OK. Acum, alegeți instrumentul Brush (B) și trageți o cale pe cavitate așa cum este prezentat în imaginea următoare. Selectați-l, îndepărtați culoarea din umplutură și adăugați peria "7pt Round" pentru cursa. Setați culoarea la R = 70 G = 70 B = 70.
Resetați calea creată în pasul anterior și faceți o copie în față (Command + C> Command + F). Selectați această copie, scoateți peria de la cursă și înlocuiți-o cu o cursă simplă (R = 255 G = 242 B = 0). Selectați-l din panoul Aspect și deschideți panoul Stroke. Verificați căsuța cu linii punctate, apoi introduceți 2 în cutia de bord și 5 în caseta de spațiu. În final, calea întreruptă ar trebui să arate ca în următoarea imagine.
Resetați calea cu peria și treceți la Object> Path> Stroke Outline. Selectați calea rezultantă și faceți o copie în față (Command + C> Command + F). Resetați calea cu cursa punctată și accesați Object> Path> Stroke Outline. Selectați grupul de forme care rezultă și transformați-l într-o cale compusă (Object> Compound Path> Make). Selectați-l împreună cu copia periei expandate și faceți clic pe butonul Intersect din panoul Pathfinder. Din nou, transformați grupul de forme rezultate într-o cale complexă (Object> Compound Path> Make). Umpleți-l cu R = 235 G = 235 B = 235, micșorați opacitatea la 75% și schimbați modul de amestecare la Overlay.
Resetați peria extinsă și faceți două copii în față (Command + C> Command + F> Command + F). Selectați copia de început și mutați-o cu 1px în jos și spre dreapta. Resetați ambele copii și faceți clic pe butonul Minus Front din panoul Pathfinder. Rotiți grupul de forme care rezultă într-o cale compusă și completați-l cu negru.
Resetați peria extinsă și faceți două copii noi în față (Command + C> Command + F> Command + F). Selectați copia de început și mutați-o 2px în jos și spre dreapta. Resetați ambele copii și faceți clic pe butonul Minus Front din panoul Pathfinder. Rotiți grupul de forme care rezultă într-o cale compusă și umpleți-l cu R = 120 G = 120 B = 120.
Resetați peria extinsă și adăugați cele trei efecte de umbră afișate în imaginea următoare. De asemenea, adăugați un curs de 2 pct, aliniați-l spre interior și setați culoarea la R = 30 G = 30 B = 30. Selectați toate formele care alcătuiesc șirul și grupați-le (Command + G).
Apoi, să facem șirul să treacă prin ochiul acului. Alegeți instrumentul dreptunghiular (M) și creați o formă simplă care acoperă aria șirului care s-ar afla în spatele acului. Selectați forma principală a acului și faceți o copie în față (Command + C> Command + F). Selectați-l împreună cu dreptunghiul și faceți clic pe butonul Intersect din panoul Pathfinder. Umpleți forma rezultată cu negru.
Deschideți panoul Transparență și selectați forma neagră creată în pasul anterior împreună cu grupul dvs. de șir. Deschideți meniul derulant al panoului Transparență, faceți clic pe Faceți opacitatea mască apoi debifați caseta Clip. În cele din urmă, grupul dvs. mascat ar trebui să arate ca în a doua imagine.
În sfârșit, să adăugăm un fundal simplu. Alegeți instrumentul Rectangle (M), creați o formă a mărimii tabloului dvs. de arhitectură și trimiteți-o înapoi (Shift + Command + Bracket Square Stânga). Completați-l cu R = 2444 G = 251 B = 245 apoi adăugați un al doilea umplere utilizând butonul Adăugare umplere nouă din partea de jos a panoului Aspect. Utilizați gradientul radial prezentat în imaginea următoare pentru acest umplere nouă.
Acum munca ta sa terminat. Iată cum ar trebui să arate.
Accentsconagua