Share
În următorul tutorial veți învăța cum să creați un filtru de preț care ar arăta grozav într-o aplicație pentru telefonul mobil sau într-o interfață de site web. Vom lucra în Adobe Illustrator cu câteva instrumente de bază pentru a crea un element esențial pentru orice portofoliu de designeri.
Deschideți Illustrator și apăsați Command + N pentru a crea un document nou. Introduceți 600 în caseta de lățime și 300 în caseta de înălțime, apoi faceți clic pe butonul Avansat. Selectați RGB, Screen (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ă). Veți avea nevoie de o rețea la fiecare 1px. Pur și simplu mergeți la Edit> Preferences> Guides> Grid, introduceți 1 î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.
Folosind instrumentul Rectangle (M), creați o formă de 301 pe 3px și umpleți-o cu R = 50 G = 50 B = 50. Selectați acest dreptunghi subțire, focalizați pe panoul Aspect (Fereastră> Aspect) și adăugați un al doilea umplere utilizând butonul Adăugare umplere nouă (indicat de săgeata din imaginea următoare). Selectați această umplere nouă, setați culoarea la R = 25 G = 25 B = 25 și mergeți la Efect> Cale> Cale de decalare. Introduceți un decalaj -1px și faceți clic pe OK. Reveniți la panoul Aspect, asigurați-vă că nu este selectat niciun umplutură sau curse și mergeți la Efect> Stylă> Colțuri rotunjite. Introduceți o rază de 1.5px și faceți clic pe OK.
Concentrați-vă pe partea stângă a formei făcute în etapa anterioară. Folosind instrumentul Rectangle (M), creați două, dreptunghiuri de 1 până la 3px. Umpleți ambele forme cu R = 50 G = 50 B = 50, plasați-le după cum se arată în prima imagine apoi transformați-le într-o cale compusă (Object> Compound Path> Make). Selectați această cale nouă și mergeți la Efect> Stylă> Colțuri rotunjite. Introduceți o rază de 0.5 pixeli, faceți clic pe OK și treceți la Efect> Distort & Transform> Transform. Introduceți datele afișate în a treia imagine și faceți clic pe OK.
Folosind instrumentul Rectangle (M), creați două, dreptunghiuri de 1 până la 4px. Umpleți ambele forme cu R = 50 G = 50 B = 50, plasați-le după cum se arată în prima imagine apoi transformați-le într-o cale compusă (Object> Compound Path> Make). Selectați această cale nouă și mergeți la Efect> Stylă> Colțuri rotunjite. Introduceți o rază de 0.5 pixeli, faceți clic pe OK și treceți la Efect> Distort & Transform> Transform. Introduceți datele afișate în a treia imagine și faceți clic pe OK.
Cu instrumentul Rectangle (M), creați o formă de 359 pe 96px, umpleți-o cu gradientul liniar prezentat mai jos, trimiteți-l înapoi (Shift + Control + [) și plasați-l așa cum se arată în imaginea următoare.
Resetați dreptunghiul făcut în etapa anterioară, focalizați pe panoul Aspect, adăugați un al doilea umplere, setați culoarea la R = 210 G = 210 B = 210 și trageți-l în partea inferioară a panoului. Reveniți la prima umplere, selectați-o și mergeți la Efect> Distort & Transformare> Transformare. Introduceți datele afișate în imaginea de mai jos și faceți clic pe OK.
Resetați dreptunghiul făcut în al cincilea pas, focalizați pe panoul Aspect, adăugați un al treilea umplut și trageți-l în partea inferioară a panoului. Selectați acest umplere nouă, adăugați gradientul liniar prezentat în imaginea următoare și accesați Efect> Cale> Cale de decalare. Introduceți un Offset de 1px și faceți clic pe OK.
Resetați dreptunghiul făcut în cel de-al cincilea pas, focalizați pe panoul Aspect, asigurați-vă că nu este selectat niciun umplutură sau curse și mergeți la Efect> Stylă> Colțuri rotunjite. Introduceți o rază de 3px, faceți clic pe OK și mergeți la Efect> Stylize> Drop Shadow. Introduceți datele afișate în fereastra de sus, faceți clic pe OK și reveniți la Efect> Stylize> Drop Shadow. Introduceți datele afișate în fereastra mediană, faceți clic pe OK și treceți din nou la Efect> Stylize> Drop Shadow. Introduceți datele afișate în fereastra de jos și faceți clic pe OK. În final, forma ta ar trebui să arate ca în imaginea următoare.
Folosind instrumentul Ellipse (L), creați un cerc de 9 pixeli, umpleți-l cu R = 88 G = 88 B = 88 și plasați-l așa cum se arată în imaginea următoare.
Reluați forma efectuată în etapa anterioară, focalizați pe panoul Aspect și adăugați oa doua umplere. Selectați-l, setați culoarea la R = 190 G = 190 B = 190 și mergeți la Efect> Cale> Cale de decalare. Introduceți un decalaj -1px și faceți clic pe OK.
Reluați cercul făcut în al nouălea pas, focalizați pe panoul Aspect și adăugați un al treilea umplut. Selectați-l, adăugați gradientul liniar prezentat în imaginea următoare și accesați Efect> Cale> Cale de decalare. Introduceți un decalaj de -1px, faceți clic pe OK și mergeți la Efect> Distort & Transformare> Transformare. Introduceți datele afișate în imaginea de mai jos și faceți clic pe OK.
Resetați cercul făcut în etapa nouă, focalizați pe panoul Aspect și adăugați o cursă de 1 pt. Selectați-l, setați culoarea în negru, aliniați-o în exterior și micșorați opacitatea la 20%. Continuați să focalizați pe panoul Aspect și adăugați un al doilea curs pentru această formă utilizând butonul Adăugați un nou curs (indicat de săgeata din imaginea următoare). Selectați această curbă nouă, lățimea 1pt, setați culoarea la R = 50 G = 50 B = 50 și aliniați-o la interior.
Resetați cercul de 9 pixeli și faceți o copie în față (Control + C> Control + F). Selectați-l și mutați 84px spre dreapta, după cum se arată în imaginea următoare.
Resetați dreptunghiul subțire rotund făcut în al doilea pas și faceți o copie în față (Control + C> Control + F). Selectați această copie și redimensionați-o după cum se arată în imaginea următoare. Mențineți înălțimea setată la 2px, dar micșorați lățimea la 85px. Mutați-vă în panoul Aspect și modificați proprietățile de culoare pentru această nouă formă. Mai întâi, selectați umplerea și setați culoarea la R = 0 G = 69 B = 33 apoi selectați cursa și setați culoarea la R = 57 G = 181 B = 74. În cele din urmă, lucrurile ar trebui să arate ca în a treia imagine.
Resetați căile compuse făcute în pașii 3 și 4 și treceți la Efect> Stylize> Drop Shadow. Introduceți datele afișate în imaginea de mai jos și faceți clic pe OK.
Cu ajutorul instrumentului Tip (T), adăugați un text simplu, după cum se arată mai jos. Utilizați proprietățile textului și codurile de culoare afișate în imaginea următoare.
Resetați piesele de text adăugate în etapa anterioară și adăugați efectele Shadow Shadow afișate în imaginea următoare.
În cele din urmă, puteți schimba cu ușurință culoarea generală a formei principale. Resetați dreptunghiul gri făcut în al cincilea pas, focalizați pe panoul Aspect, adăugați o umplere nouă și asigurați-vă că acesta se află în partea superioară a panoului. Selectați-l, setați culoarea la R = 196 G = 154 B = 108, micșorați opacitatea la 70%, schimbați modul de amestecare în Culoare și mergeți la Efect> Cale> Cale de decalare. Introduceți un Offset de 1px și faceți clic pe OK. În mod evident, puteți alege o culoare diferită pentru această umplere nouă, puteți încerca alte moduri de amestecare sau puteți mări / micșora procentajul de opacitate. Există nenumărate posibilități.
Acum munca ta sa terminat. Iată cum ar trebui să arate.
Accentsconagua