Share
În acest tutorial rapid veți învăța cum să utilizați Illustrator pentru a crea un simplu formular web. Urmând câteva tehnici ușoare, veți avea o formă de înregistrare curată și modernă în cel mai scurt timp!
Creați un document de 570 x 370px. Mai întâi, activați Grid (Vizualizare> Grilă) și Glisați în Grilă (Vizualizare> Glisați la Grilă). Apoi, veți avea nevoie de o rețea la fiecare 10 pixeli. Accesați Edit> Preferences> Guides & Grid, introduceți 10 î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 vor crește semnificativ viteza de lucru.
Cu instrumentul Rectangle (M), creați o formă de 450 x 370px și umpleți-o cu gradientul liniar prezentat mai jos.
Concentrați-vă pe partea superioară a formei. Alegeți instrumentul Add Anchor Point (Plus) și adăugați două puncte de ancorare în punctele evidențiate cu galben în prima imagine. Apoi, alegeți Instrumentul de selecție directă (A), selectați punctele de ancorare evidențiate cu roșu și trageți-le cu 70 de grade în jos. În final, forma ta ar trebui să arate ca imaginea finală.
Re-selectați instrumentul Rectangle (M) și creați o formă de 330 x 90px și plasați-o după cum se arată în prima imagine. Umpleți-l cu R = 77 G = 195 B = 255 apoi trimiteți-l spre spate (Shift + Control + Stânga).
Reveniți la forma gri. Selectați-l, accesați panoul Aspect, deschideți meniul derulant și faceți clic pe Adăugare completare nouă. Acest lucru va adăuga un al doilea umplere pentru forma. Acum, aveți nevoie de un model pentru această umplere nouă. Accesați panoul Swathes, deschideți meniul derulant și accesați Open Swatch Library> Patterns> Graphics Basic> Basic Graphics_Textures. Resetați noul umplere, faceți clic pe modelul "USGS 7 Vineyars", apoi schimbați modul de amestecare pentru a multiplica și micșora opacitatea la 5%.
Continuați prin adăugarea unei curse albe. Asigurați-o lățime de 3px, aliniați-o spre interior și micșorați opacitatea la 50%. Cu forma încă selectată, deschideți meniul derulant al Aspectului. De data aceasta, faceți clic pe Adăugați un accident vascular cerebral nou. Selectați această cursă proaspătă, înlocuiți culoarea cu R = 120 G = 120 B = 120 și faceți 1px lățime.
Resetați întreaga cale. Mai întâi, du-te la Efect> Stylize> Drop Shadow. Introduceți datele afișate mai jos și faceți clic pe OK. Cu forma încă selectată, mergeți la Efect> Stylă> Colțuri rotunjite. Introduceți o rază de 7px și faceți clic pe OK. Asigurați-vă că acest efect este situat deasupra curselor în panoul Aspect. Puteți să faceți clic pur și simplu și să-l trageți.
Să trecem la forma albastră. Mai întâi, adăugați o umplere nouă. Selectați-l și utilizați gradientul liniar prezentat mai jos. Modificați modul de amestecare la Overlay și reduceți opacitatea la 50%. Adăugați un al treilea umplere. Faceți-l negru, schimbați modul de amestecare la Multiply, micșorați opacitatea la 12%, apoi mergeți la Efect> Artistic> Film Grain. Introduceți datele afișate mai jos, apoi faceți clic pe OK.
Continuați cu forma albastră. Adăugați un curs 3px, aliniat la cursa interioară (R = 225 G = 244 B = 253) și micșorați opacitatea la 50%. Adăugați un al doilea curs, redimensionați-l la 1px și modificați culoarea lui la R = 0 G = 112 B = 185. Resetați întreaga cale și mergeți la Efect> Stylă> Colțuri rotunjite. Introduceți o rază de 7px și faceți clic pe OK.
Alegeți instrumentul Rectangle (M) și creați o formă de 270 x 40px. Umpleți-l cu gradientul liniar și plasați-l așa cum se arată mai jos.
Concentrați-vă pe forma făcută în pasul anterior. Selectați umplutura din panoul Aspect și mergeți la Efect> Stylize> Glow Inner. Introduceți datele afișate mai jos și faceți clic pe OK. Adăugați o lovitură albă. Efectuați-l cu lățimea de 3px, aliniați-l spre exterior și micșorați opacitatea la 50%. Adăugați un al doilea curs, redimensionați-l la 1px și modificați culoarea lui la R = 167 G = 169 B = 172. Resetați întreaga cale și mergeți la Efect> Stylă> Colțuri rotunjite. Introduceți o rază de 3 pixeli și faceți clic pe OK.
Selectați forma realizată în etapa anterioară și faceți două copii (Control + C> Control + V> Control + V). Plasați-le după cum se arată în imaginea următoare.
Resetați instrumentul dreptunghi (M) și creați o formă de 120 x 30 pixeli. Umpleți-l cu R = 77 G = 195 B = 255 și plasați-l așa cum se arată în imaginea de mai jos. Adăugați o a doua umplere pentru această formă și utilizați gradientul liniar prezentat în imaginea următoare. Selectați această umplere nouă, schimbați modul de amestecare la Overlay și micșorați opacitatea la 50%.
Adăugați un al treilea umplere pentru forma realizată în pasul anterior. Faceți-l negru, schimbați modul de amestecare în Multiply, micșorați opacitatea la 10%, apoi mergeți la Efect> Artistic> Film Grain. Introduceți datele afișate mai jos, apoi faceți clic pe OK. Adăugați un curs 1,5px, aliniat la cursa interioară (R = 225 G = 244 B = 253) și micșorați opacitatea la 50%. Adăugați un al doilea curs, redimensionați-l la 1px și modificați culoarea lui la R = 0 G = 112 B = 185. Resetați întreaga cale și mergeți la Efect> Stylă> Colțuri rotunjite. Introduceți un rază de 15 pixeli și faceți clic pe OK.
În sfârșit, să adăugăm textul. Am folosit fontul Copper Std cu dimensiunea de 30pt pentru "Formularul de înscriere" și 20pt pentru restul textului. Urmați culorile prezentate mai jos, apoi adăugați efectul discret Drop Shadow pentru fiecare text.
Acolo îl aveți, o formă de înregistrare simplă și subțire. Puteți folosi tehnicile pe care le-ați învățat în acest tutorial pentru a face elemente și modele de web suplimentare.
Accentsconagua