Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Design & Illustration
  2. Icon Design
Design

Cum să creați un set de pictograme plate, cu animale, în Adobe Illustrator

by
Difficulty:IntermediateLength:LongLanguages:

Romanian (Română) translation by Mircea Lungu (you can also view the original English article)

Final product image
What You'll Be Creating

În acest tutorial, vom crea șase portrete diferite de animale, pornind de la unul și același cerc. Haideți să ne distrăm, făcând un set de elemente plate, la modă, utilizând forme de bază, instrumentul Shape Builder Tool, panoul Pathfinder și alte câteva funcții utile ale programului Adobe Illustrator!

1. Cum să creați o pisică siameză elegantă

Pasul 1

Începeți prin a crea fața pisicii, pornind de la un cerc perfect, având dimensiunile 60 x 60 px și făcut cu instrumentul Ellipse Tool (L). Umpleți cercul cu culoarea bej, ca a nisipului.

forming the cats face from an even circle

Pasul 2

Selectați ambele puncte-ancoră din lateral, cu instrumentul Direct Selection Tool (A), și trageți-le în jos, modificând forma feței.

change the shape of the face

Pasul 3

Acum, să creăm urechea pisicii. Luați instrumentul Polygon Tool și creați o formă cu trei laturi, de dimensiunea 17 x 15 px (aproximativ). Mergeți la Effect > Warp > Bulge și alegeți pentru Vertical Bend valoarea 40%.

Utilizați Object > Expand Appearance pentru formă, pentru a aplica efectul. Selectați punctul-ancoră superior, cu instrumentul Direct Select Tool (A) și faceți colțul mai rotunjit, executând clic pe butonul Convert corners to smooth, în panoul-context superior. Micșorați dimensiunile elementelor de manevrare ”handles” ale acestui punct-ancoră și trageți punctul-ancoră în sus, făcând urechea mai ascuțită.

form the cats ear with polygon tool

Pasul 4

Copiați această formă, în față, cu comenzile Copy și Paste in Front (Control-C > Control-F). Faceți copia mai mică și umpleți-o cu o culoare maronie, ca de ciocolată. Rotiți urechea și plasați-o în partea stângă a capului; trimiteți-o în spate: Send to Back (Control-Shift-[), dedesubtul formei capului. Utilizați instrumentul Reflect Tool (O), executând dublu-clic pe pictograma sa din panoul Tools, pentru a răsuci urechea în jurul axei verticale: Vertical Axis și a crea o copie, plasând această copie în partea opusă a capului.  

attach the ears to the head

Pasul 5

Haideți să facem plată, partea de sus a capului. Selectați forma capului, luați instrumentul Eraser Tool (Shift-E) și desenați o dungă îngustă, de-a lungul capului, ținând apăsată tasta Alt. Acum am tăiat forma în două părți. Selectați partea de care nu aveți nevoie și ștergeți-o.

make the top part of the head flat

Pasul 6

Faceți un mic nas roz, de formă triunghiulară, cu instrumentul Polygon Tool. Selectați nasul și trageți indicatoarele circulare pentru Live Corners, astfel încât să faceți forma rotunjită. Dacă această funcție nu este disponibilă în versiunea de Adobe Illustrator pe care o aveți dumneavoastră, utilizați succesiunea Effect > Stylize > Round Corners, care face exact același lucru.

Make a small pink triangle nose with the Polygon Tool

Pasul 7

Faceți o altă elipsă și plasați-o în interiorul feței, astfel încât să atingă punctul inferior al nasului. Aliniați elipsa, în funcție de nas, utilizând nasul ca obiect-cheie: Key Object. Pentru a face acest lucru, selectați ambele forme și executați clic pe nas, în timp ce țineți apăsată tasta Alt. Veți vedea o linie de contur groasă în jurul nasului, indicându-l a fi obiect-cheie: Key Object. Mergeți la panoul Align și executați clic pe Horizontal Align Center.

În continuare, luați instrumentul Anchor Point Tool (Shift-C) și mutați elementele de manevrare "handles" ale punctului-ancoră inferior, în jos, la aproximativ 45 de grade. Utilizați Guides pentru a deplasa elementele de manevrare "handles", la distanță egală (puteți adăuga linia Guide trăgând-o în jos pe planșa de lucru: Artboard, de la Rulers (Control-R)).

Umpleți "masca" feței cu aceeași culoare maro pe care o avem la urechi, extrăgând culoarea cu instrumentul pipetă: Eyedropper Tool (I). Adăugați o elipsă mai mică, de culoare maro mai deschis, sub mască, reprezentând falca inferioară.

make a face mask from the circle

Pasul 8

Acum, haideți să adăugăm ochii! Faceți o elipsă, selectați punctul-ancoră al ei, din partea dreaptă și convertiți-l într-un colț ascuțit, din meniul Convert al panoului de control de mai sus. Umpleți elipsa cu o culoare albastru-aprins și mai adăugați încă o elipsă deasupra ei, pentru iris.

Aici avem nevoie să ștergem partea irisului care se suprapune pe marginea ochiului. Selectați ambele elipse și utilizați instrumentul Shape Builder Tool (Shift-M), pentru a șterge partea superioară a irisului, ținând apăsată tasta Alt și executând clic pe bucata nedorită.

Rotiți ochiul puțin și creați o copie în oglindă, utilizând instrumentul Reflect Tool (O).

add the eyes

Pasul 9

Faceți două elipse de culoare maro-deschis, pentru sprâncenele pisicii, și adăugați două cercuri micuțe albe în ochi, pentru strălucire.

Creați o elipsă de culoare roz mai deschis, poziționați-o deasupra părții superioare a nasului și utilizați instrumentul Shape Builder Tool (Shift-M), în timp ce țineți apăsată tasta Alt, pentru a șterge partea nedorită, așadar făcând nasul mai detaliat.

add minor details

Pasul 10

Haideți să creăm o umbră plată, la modă, acoperind o jumătate din capul pisicii. Grupați cu comanda Group (Control-G) toate părțile componente ale pisicii, copiați grupul cu Copy și Paste in Front, în față: (Control-C > Control-F). Păstrând copia selectată, uniți, cu comanda Unite, părțile ei, în panoul Pathfinder, unindu-le într-o singură formă. Schimbați și alegeți pentru modul Blending Mode al siluetei: Multiply, făcând-o pe aceasta semitransparentă.

În final, selectați silueta, luați instrumentul Eraser Tool (Shift-E) și, ținând apăsată tasta Alt, trageți cu mouse-ul deasupra jumătății din stânga a capului pisicii, acoperindu-l cu chenarul de selecție dreptunghiular alb. Eliberați butonul mouse-ului, pentru a șterge bucata acoperită.

Și iată că am obținut-o! Pisica noastră plată este gata. Haideți să trecem la următorul element!

form a flat shadow in multiply mode

2. Cum să desenați un cățeluș vesel

Pasul 1

Așa cum am procedat anterior, vom începe realizând un portret dintr un cerc de 60 x 60 px. Mutați, puțin, în jos, punctele-ancoră din lateral, făcând forma umflată și ștergând partea de sus a ei, cu ajutorul instrumentului Eraser Tool (Shift-E).

Selectați punctul-ancoră din stânga, cu instrumentul Direct Selection Tool (A) și apăsați tasta Enter pentru a deschide fereastra de opțiuni Move. Alegeți pentru Horizontal Position valoarea -5 px și pentru Vertical valoarea 0 px și executați clic pe OK, așadar deplasând punctul-ancoră cu 5 pixeli, la stânga.

Faceți același lucru pentru punctul-ancoră din dreapta, alegând valoarea de deplasare pe orizontală: Horizontal de 5 px și mutând-ul spre dreapta, cu 5 px.

start forming a portrait from a 60x60 px circle

Pasul 2

Selectați ambele puncte-ancoră din lateral și convertiți-le cu comanda Convert, în colțuri ascuțite. Modificați poziția elementelor de manevrare "handles" ale punctelor-ancoră, cu ajutorul instrumentului Anchor Point Tool (Shift-C), și deplasați-le în sus, obținând o curbă lină a liniei feței.

Select both side anchor points and Convert them to sharp corners

Pasul 3

Haideți să creăm urechea, dintr-un triunghi de 40 x 35 px, utilizând instrumentul Polygon Tool. Luați instrumentul Curvature Tool (Control-`) și faceți laturile triunghiului mai rotunde și umflate. Dacă utilizați versiuni anterioare ale programului Adobe Illustrator, care nu conțin acest instrument, simțiți-vă liberi să utilizați Effect > Warp > Bulge, așa cum am procedat anterior.

Selectați punctul-ancoră superior, faceți-l mai rotunjit și trageți-l către stânga, făcând forma deformată. Mergeți la Object > Path > Offset Path și setați valoarea Offset la -3 px, realizând partea interioară a urechii. Umpleți-o cu o culoare gri-deschis.

form the ear from a 40x35 px triangle

Pasul 4

Rotiți urechea și plasați-o pe partea stângă a capului. Utilizați instrumentul Reflect Tool (O), pentru a crea o copie în oglindă, pe partea opusă.

attach the ears to the head

Pasul 5

Creați o elipsă strivită, reprezentând un nas de culoare gri-închis, trăgând puțin, în jos, punctul ei ancoră inferior. Faceți două elipse de culoare gri-deschis, care se suprapun mai jos de nas, grupați-le și aliniați-le cu comanda Align, cu fața, pe orizontală, utilizând forma feței pe post de Key Object.

Form a dark-grey nose from a squashed ellipse

Pasul 6

Acum haideți să facem o limbă amuzantă, ieșind din gură! Creați un dreptunghi de culoare roz-deschis, utilizând instrumentul Rectangle Tool (M), și plasați-l sub elipsele de culoare gri-deschis. Selectați ambele puncte-ancoră de jos și trageți de marcajele Live Corners, la maxim, făcând rotunjită partea inferioară a formei. Luați instrumentul Line Segment Tool (\) și trasati o linie verticală, în timp ce țineți apăsată tasta Shift. Puteți rotunji capetele liniei, din panoul Stroke.

make a tongue from rectangle

Pasul 7

Haideți să trecem la ochi! Faceți o elipsă de culoare albastru-închis și acoperiți partea inferioară a ei, cu o altă elipsă de orice culoare. Selectați ambele forme și utilizați instrumentul Shape Builder Tool (Shift-M), pentru a șterge elipsa inferioară, împreună cu partea de jos a ochiului, parte care era acoperită. În acest fel, obținem un aspect jucăuș. Adăugați un iris mai închis la culoare și o mică strălucire albă a ochiului.

Rotiți, un pic, ochiul și creați un al doilea ochi, poziționându-l pe cealaltă parte a feței.

create the eyes from ellipses

Pasul 8

Creați două cercuri egale, de culoare gri-deschis, acoperind ochii. Apoi adăugați două cercuri mai mari, care se suprapun și acoperă partea inferioară a feței, așa cum se observă în captura de ecran de mai jos. Selectați cercurile inferioare și utilizați instrumentul Shape Builder Tool (Shift-M) pentru a șterge acele părți aflate în afara feței.

Selectați toate cele patru elemente noi și uniți-le cu comanda Unite din Pathfinder, făcând o “mască” a feței. Puteți șterge spațiul din centrul măștii, executând clic pe conturul său, cu instrumentul Direct Selection Tool (A), și ștergându-l.

make a face mask from ellipses

Pasul 9

Faceți două dreptunghiuri mici cu colțurile rotunjite, pentru sprâncene, făcând câinele să arate blând și jucăuș, și terminați creând o umbră subtilă, pe jumătatea dreaptă a feței.

add details and shadow

3. Cum să faceți un raton extravagant

Pasul 1

Începem prin a da formă feței, utilizând un cerc de culoare albastru-pastel, de dimensiunea 60 x 60 px. Striviți-l puțin și faceți forma mai lată. Deplasați ambele puncte-ancoră din lateral, cu câțiva pixeli, în jos, și convertiți-le cu comanda Convert, în colțuri ascuțite, utilizată din meniul Convert al barei de instrumente de mai sus.

Copiați urechile de la pisica noastră, colorați-le din nou, de data aceasta corespunzător culorii capului ratonului, și plasați-le de ambele părți ale capului.

make the face from a 60x60 px pastel-blue circle

Pasul 2

Faceți un nas dintr-o elipsă de culoare gri-închis, de 18 x 10 px, trăgând puțin de punctul ei ancoră superior, în sus. Creați încă o elipsă cu culoarea liniei de contur: Stroke, gri-închis, alegând pentru culoarea ei de umplere (Fill): None, din panoul Color. Luați instrumentul Scissors Tool (C) și executați clic pe punctele-ancoră din stânga și din dreapta, tăind forma pe orizontală, în două jumătăți egale. Ștergeți (cu Delete) jumătatea inferioară, făcând ratonul să zâmbească.

make a nose and a smile

Pasul 3

Copiați forma feței și faceți copia mult mai mică, umplând-o cu culoarea albă și plasând-o dedesubtul zonei nasului. Adăugați doi ochi mici negri cu străluciri albe, grupați-i și aliniați-i pe orizontală, raportându-i la față, în panoul Align, făcând fața Key Object.

Copiați forma feței încă o dată, făcând copia puțin mai mică, umpleți-o cu culoarea albastru-închis și plasați-o în partea de jos a feței, formând o mască.

add facial details

Pasul 4

Haideți să împărțim masca în două jumătăți, creând două pete separate în jurul ochilor. Luați instrumentul Rectangle Tool (M) și desenați o dungă verticală în mijlocul feței. Selectați atât masca cât și dunga și utilizați funcția Divide din panoul Pathfinder, pentru a tăia toate formele. Ștergeți părțile de care nu aveți nevoie, dacă există astfel de părți. Plasați jumătățile pe care le-ați creat, dedesubtul ochilor, și faceți colțurile un pic rotunjite.

În final, adăugați o umbră plată în partea dreaptă a feței. Acum putem trece mai departe!

split the mask into two halves and add a shadow

4. Cum să faceți un urs panda blând

Pasul 1

Faceți o formă pentru o față pufoasă, pornind de la un cerc de culoarea bej-deschis, de 60 x 60 px, deplasând punctele lui ancoră din lateral, în jos.

Make a face shape from a 60x60 px light-beige circle

Pasul 2

Copiați suprafața nasului, de la câinele nostru, și alegeți culoarea liniei de contur: Stroke a “buzelor”, gri-închis, astfel încât conturul să fie vizibil. Selectați două ellipse conturate (fără nas) și utilizați comanda Unite din panoul Pathfinder.

Alegeți instrumentul Scissors Tool (C) și executați clic pe punctele-ancoră din lateral, ale formei conturate, despărțind-o. Ștergeți jumătatea superioară, obținând un zâmbet blând pentru ursul nostru panda.

form the mouth from two ellipses

Pasul 3

Copiați ochii de la raton și haideți să creăm niște pete mari, de culoare gri-închis, în jurul ochilor. Faceți o elipsă strivită și rotiți-o puțin spre stânga. Utilizați instrumentul Reflect Tool (O) pentru a face o copie și răsturnați-o pe orizontală, pe cealaltă parte a feței. Umpleți globurile oculare cu culoarea albă, astfel încât să  fie vizibile deasupra petelor închise la culoare.

Păstrând globurile oculare selectate, mergeți la Object > Path > Offset Path și creați niște pupile micuțe, înăuntrul ochilor, cu valoarea de Offset de -1 px.

create the eyes and the eye spots

Pasul 4

Adăugați niște urechi rotunde, de culoare gri-închis, capului ursului panda, și terminați creând o umbră semi-transparentă deasupra părții din dreapta a feței sale.

Ați făcut o treabă grozavă! Să trecem mai departe!

add ears and shadow

5. Cum să creați un urs înțelept

Pasul 1

Să începem prin a crea fața ursului, pornind de la un cerc de 60 x 60 px. Trageți ambele puncte-ancoră din lateral, în jos, și trageți punctul-ancoră superior, în sus, făcând capul să arate ca un ou.

Faceți partea de sus a capului, plată, cu ajutorul instrumentului Eraser Tool (Shift-E). Și faceți colțurile formei, puțin rotunjite.

make a bears face from a 60x60 px circle

Pasul 2

Adăugați două urechi create din cercuri, părții superioare a capului, grupați-le și aliniați-le cu Align pe orizontală, utilizând capul pe post de Key Object. Utilizați funcția Offset Path cu valoarea de Offset de -3 px, pentru a crea partea interioară mai închisă la culoare a urechilor.

Add two circle ears to the top of the head

Pasul 3

Faceți un nas lat, de culoare maro-închis, dintr-o elipsă strivită. Și haideți să creăm puntea nasului. Luați instrumentul Rectangle Tool (M) și faceți o formă bej-deschis, poziționând-o în spatele nasului. Deplasați punctul ei ancoră din stânga-sus, cu 5 px la dreapta, utilizând panoul de opțiuni Move. Faceți același lucru pentru punctul-ancoră din dreapta-sus, mutându-l în direcția opusă și deci realizând partea de sus a punții nasului, mai îngustă.

Faceți colțurile dreptunghiului rotunjite. Utilizând funcția Live Corners, puteți varia nivelul rotunjimii pentru fiecare colț separat al formei. De exemplu, puteți selecta doar punctele-ancoră superioare și deci puteți face colțurile superioare 100% rotunjite, trăgând elementele de marcare în jos, la maximul lor.

form the nose bridge from rectangle

Pasul 4

Adăugați o elipsă mică sub partea de jos a punții nasului, obținând falca inferioară. Adăugați ochii feței ursului și, în cazul în care considerați că fața ursului este prea închisă la culoare, faceți părțile maro puțin mai deschise la culoare.

În final, adăugați o umbră, feței ursului.

Extraordinar! Ne-a mai rămas ultimul personaj!

add minor details and shadow

6. Cum să faceți o vulpe vicleană

Pasul 1

Din nou, începem prin a crea fața vulpii, pornind de la cercul nostru familiar de 60 x 60 px, având o culoare portocalie. Trageți punctele-ancoră din lateral, puțin, în jos, apoi convertiți-le cu Convert, în colțuri ascuțite, făcând părțile din lateral ale feței, ascuțite. Convertiți cu Convert punctul-ancoră inferior, într-un colț, obținând un nas ascuțit.

form the face from a circle

Pasul 2

Luați urechile de la raton și poziționați-le de ambele părți ale capului vulpii, modificând culorile. Puneți o elipsă neagră, deasupra părții inferioare a feței, acoperind suprafața nasului. Utilizați instrumentul Shape Builder Tool (Shift-M), pentru a scăpa de porțiunea din exteriorul feței, obținând un nas negru ascuțit.

add the ears and nose

Pasul 3

Creați o elipsă care să se suprapună pe partea stângă a feței vulpii, așa cum se vede în captura de ecran de mai jos. Utilizați instrumentul Reflect Tool (O), pentru a face o copie răsucită, pe partea opusă. Selectați ambele elipse și ștergeți acele părți aflate în exteriorul feței, utilizând instrumentul Shape Builder Tool (Shift-M). Umpleți formele cu culoarea bej-deschis, obținând obrajii. Adăugați-i vulpii, doi ochi micuți, strălucitori.

add the cheeks and the eyes with ellipses

Pasul 4

Faceți vârful nasului un pic rotunjit, cu ajutorul funcției Live Corners. Și haideți să mai adăugăm câteva detalii, vulpii noastre!

Faceți o elipsă mică, strivită, având culoarea portocalie, mai deschisă, și plasați-o pe partea stângă a punții nasului. Selectați forma, țineți apăsate tastele Alt-Shift și trageți elipsa la dreapta, făcând o copie a ei. Apăsați Control-D, de două ori, pentru a obține încă două copii. Mai faceți încă două rânduri de elipse, poziționându-le încrucișat. În acest fel, reprezentăm o blană stilizată, pe nasul vulpii.

Nu uitați să adăugați o mică strălucire pe nas, creând o formă mai mică și mai deschisă la culoare, în vârful nasului.

add more details to the face

Pasul 5

Adăugați o umbră delicată, pe partea dreaptă a vulpiței noastre viclene.

add a shadow

7. Cum să creați pictogramele cu umbre lungi

Pasul 1

Acum, că avem șase portrete de animale în stilul plat, haideți să le plasăm pe un set de cercuri colorate, creând pictogramele.

Faceți un cerc turcoaz, de dimensiunea 106 x 106 px, pentru baza pictogramei, și puneți capul ratonului în centrul lui.

Creați un pătrat de 80 x 80 px, pentru baza umbrei, și rotiți-l cu 45 de grade, ținând apăsată tasta Shift.

create icon base

Pasul 2

Alegeți pentru Blending Mode al pătratului, opțiunea Multiply, făcându-l semitransparent și plasați umbra deasupra ratonului. Faceți umbra un pic mai îngustă, dacă este nevoie, și deplasați-o găsind două zone unde umbra se suprapune cu capul. În cazul nostru, este vârful urechii drepte și partea stângă a feței. Adăugați două puncte-ancoră în aceste zone, utilizând instrumentul Add Anchor Point Tool (+), și apoi schimbați-l cu instrumentul Delete Anchor Point Tool (-) și ștergeți acele puncte-ancoră de care nu este nevoie, puncte aflate în partea de sus a dreptunghiului, ascunzând partea superioară a formei, sub capul ratonului.

Plasați umbra dedesubtul capului, ștergând partea de care nu este nevoie, parte aflată în exteriorul pictogramei, utilizând instrumentul Shape Builder Tool (Shift-M) și - iată! - pictograma noastră extravagantă, cu o umbră plată aflată la modă, este gata! Creați pictogramele circulare pentru restul animalelor, utilizând aceleași tehnici simple.

create long shadow icon

Ați făcut o treabă grozavă! Setul nostru de pictograme plate, cu animale, este terminat!

A fost distractiv, nu-i așa? Sper că v-a făcut plăcere să creați aceste animale drăguțe, plate, pornind de la una și aceeași formă, și că ați învățat niște secrete și șmecherii, jucându-vă cu elipsele, cu panoul Pathfinder și cu instrumentul Shape Builder Tool! Fiți pregătiți pentru noi tutoriale și nu uitați să arătați rezultatul obținut, în secțiunea de comentarii de mai jos!

flat animal icons
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.