Share
Ce veți creaÎn tutorialul de astăzi, vom primi pălăriile nutritioniste și vom explora procesul de creare a primelor cinci grupuri de alimente care dictează cât de sănătoasă este organismul. Ca întotdeauna, vom avea cea mai ușoară abordare posibilă, creându-le folosind cele mai elementare forme și instrumente geometrice pe care Illustrator le poate oferi.
Oh, și nu uitați că puteți întotdeauna să vă extindeți pachetul, îndreptându-vă spre GraphicRiver unde veți găsi o mare selecție de pictograme cu tematică alimentară.
Acestea fiind spuse, luați doza zilnică de cofeină și să începem!
Presupunând că aveți deja Illustrator activat în fundal, aduceți-l în sus și să lăsăm un a Document nou (Fișier> Nou sau Control-N) folosind următoarele setări:
Și de la Avansat fila:
De vreme ce vom crea pictogramele utilizând un flux de lucru pixel-perfect, vom dori să înființăm un pic frumos Grilă astfel încât să putem avea controlul total asupra formelor noastre.
Mergeți la Editați> Preferințe> Ghiduri și Grilă submeniu și ajustați următoarele setări:
Sfat rapid: puteți afla mai multe despre grile prin citirea acestei lucrări detaliate despre modul în care funcționează sistemul Grid al Illustratorului.
Odată ce am creat grila noastră personalizată, tot ceea ce trebuie să facem pentru a ne asigura că formele noastre arată clar sunt permise Fixat la retea și Faceți clic pe Pixel opțiuni găsite în cadrul Vedere meniu, care se va transforma în Faceți clic pe Pixel de fiecare dată când intrați în Previzualizarea pixelilor (dacă utilizați o versiune mai veche a software-ului).
Acum, dacă sunteți nou în întregul "flux de lucru pixel-perfect", vă recomand să vă adresați tutorialului Cum de a crea Pixel-Perfect Artwork, care vă va ajuta să vă lărgi abilitățile tehnice în cel mai scurt timp.
Cu noul document creat, ar fi o idee bună să ne structurăm proiectul folosind câteva straturi, deoarece astfel putem menține un flux constant de lucru concentrându-ne pe o singură pictogramă la un moment dat.
Acestea fiind spuse, ridicați straturi și creați un total de șase straturi, pe care le vom redenumi după cum urmează:
grilele de referință (sau grilele de bază) reprezintă un set de suprafețe de referință precis delimitate, care ne permit să construim icoanele noastre, concentrându-ne pe mărimea și consistența.
De obicei, mărimea grilelor determină dimensiunea pictogramelor actuale și ele ar trebui să fie întotdeauna prima decizie pe care o luați odată ce începeți un nou proiect, deoarece veți dori întotdeauna să începeți de la cea mai mică dimensiune posibilă și să vă construiți pe aceasta.
Acum, în cazul nostru, vom crea un pachet de pictograme folosind doar o mărime, mai exact 128 x 128 px, care este destul de mare.
Începeți prin blocarea tuturor straturilor decât "grila de referință", apoi apucați Instrumentul dreptunghiular (M) și de a crea un 128 x 128 px portocale (# F15A24), care va ajuta la definirea dimensiunii generale a icoanelor noastre.
Adăugați un număr mai mic 120 x 120 px unu (#FFFFFF) pe care o vom poziționa în partea superioară a formei anterioare, deoarece aceasta va acționa ca suprafața noastră activă de desenare, oferindu-ne astfel o imagine de ansamblu 4 px padding pentru a lucra cu.
Selectați și grupați cele două pătrate împreună folosind Control-G comanda rapidă de la tastatură, aliniați-le apoi la Artboard ulterior. Creați grilele rămase utilizând patru copii (Control-C> Control-F) distanțate orizontal cu a 40 px decalajul dintre fiecare, blocând stratul curent înainte de a trece la următoarea secțiune.
Presupunând că ați reușit să creați grilele de referință mici, treceți la următorul strat (care ar fi cel de-al doilea) și lăsați-l să demareze proiectul prin crearea primului grup de produse alimentare.
Începeți să lucrați la secțiunea laterală a pepenelui, creând o 120 x 112 px elipsă, pe care o vom folosi folosind culoarea # 8CB75E și apoi ajustați prin selectarea punctului de ancorare din stânga folosind Instrumentul de selecție directă (A) apoi ștergând-o apăsând Șterge. Centrarea aliniați forma rezultată la zona de desen activă, așezată la o distanță de 12 px de la marginea dreaptă.
Adăugați perechea interioară de dungi orizontale, folosind a 120 x 22 px elipsă cu a 4 px gros Accident vascular cerebral (# 332E2E), pe care le vom alinia la marginea dreaptă a formei create anterior.
Creați dungile de mijloc utilizând un pic mai înalt 120 x 54 px elipsă cu a 4 px gros Accident vascular cerebral (# 332E2E), pe care o vom alinia la secțiunea laterală a pepenilor, așa cum am făcut-o cu cea precedentă.
Adăugați dungile exterioare cu fața a 120 x 82 px elipsă cu a 4 px gros Accident vascular cerebral (# 332E2E), asigurându-vă că selectați și grupați toate dungile pepenei utilizând Control-G Comanda rapidă de la tastatură.
Din moment ce dorim ca dungile să rămână conținute în suprafața secțiunii laterale a pepenei, va trebui să le mască folosind o copie (Control-C) de forma verde, pe care o vom pastra (Control-F) în fața lor, apoi cu copiile și elipsele selectate, faceți clic dreapta> Faceți o mască de tăiere.
Dați secțiunii laterale o contur folosind Accident vascular cerebral metodă, prin crearea unei copii a acesteia (Control-C), pe care o vom lipi în față (Control-F) și apoi reglați mai întâi schimbând culoarea # 332E2E și apoi răsturnând-o Completati cu al ei; cu al lui Accident vascular cerebral (Shift-X). Setați schițele rezultate Greutate la 8 px si este Colţ la Intră în runda, selectând și grupând toate formele de compunere ale secțiunii curente împreună, folosind apoi Control-G Comanda rapidă de la tastatură.
Începeți să lucrați la secțiunea frontală a fructului, creând corpul său exterior folosind o 72 x 112 px elipsă (# C6DBAD) cu un 8 px grosime (# 332E2E), pe care o vom grupa (Control-G) și apoi poziționați-o pe zona de desen activă astfel încât centrul să se suprapună cu marginea stângă a secțiunii laterale.
Adăugați corpul interior al pepene, folosind a 48 x 88 px elipsă (# EA7A5C) cu un 8 px grosime (# 332E2E), pe care o vom grupa (Control-G) și apoi aliniați centrul la formele create anterior.
Luați câteva momente și adăugați semințele de fructe folosind unele 4 x 6 px elipse (# 332E2E), pe care o vom poziționa după cum puteți vedea în imaginea de referință. Odată ce aveți toate semințele în loc, selectați și grupați (Control-G) împreună, făcând același lucru pentru secțiunea din față a pepenelui.
Finalizați pepene galben prin adăugarea tulpinii folosind a 10 x 10 px cerc cu a 4 px gros Accident vascular cerebral (# 332E2E) cu Round Cap, pe care o vom regla prin eliminarea jumătății superioare. Poziționați forma rezultată pe marginea dreaptă a zonei de desen activ, la o distanță de 58 px din partea de jos, asigurându-vă că selectați și grupați (Control-G) toate formele compoziției fructului după aceea.
Începeți să lucrați la micul portocaliu, creând corpul principal folosind a 32 x 32 px cerc (# EDAD66) cu un 8 px grosime (# 332E2E), pe care o vom grupa (Control-G) și apoi poziționați în colțul din stânga-jos al zonei de desen activă.
Finalizați portocala și cu ea icoana, adăugând frunza mică pe care o vom crea folosind a 20 x 20 px pătrate (# 8CB75E) pe care o vom regla prin setarea Rază dintre colțurile de sus-stânga și de jos-dreapta spre 20 px din interiorul Transforma panoul Dreptunghi Proprietăți. Dați forma rezultată 8 px grosime (# 332E2E) cu Intră în runda, grupare (Control-G) și poziționarea celor două forme peste portocaliu, la o distanță de 16 px din marginea din stânga a zonei active de desen. După ce ați terminat, selectați și grupați (Control-G) toate secțiunile de compunere ale pictogramei împreună, înainte de a trece la următorul.
Presupunând că ați terminat lucrul la prima pictogramă, închideți stratul și apoi treceți până la cel următor (care ar fi cel de-al treilea), unde vom începe să lucrăm la al doilea grup de alimente.
Începeți să lucrați cu cartușul de lapte creând o secțiune frontală a corpului inferior folosind un a 44 x 80 px dreptunghi, pe care o vom folosi folosind culoarea # E8E1DF și apoi poziția la o distanță de 40 px de la marginea din stânga a zonei de desen activ și doar 4 px din partea inferioară.
Adăugați secțiunea laterală a cutiei utilizând a 24 x 80 px dreptunghi (# A08380), pe care o vom poziționa pe partea dreaptă a formei create anterior.
Luați câteva momente și trageți vârtejul cutiei folosind Instrument Pen (P) cu Completati culoarea setată la # 6BC2D6, treceți la pasul următor odată ce ați terminat.
Dă-i vârtejului 8 px grosime (# 332E2E) folosind Accident vascular cerebral , selectând și grupând cele două împreună (Control-G). Asigurați-vă că ați creat o copie (Control-C) dintre ele, pe care le vom lipi în față (Control-F).
Selectați și mascați fiecare dintre cele două șuruburi folosind o copie a secțiunilor subiacente ca Mașini de tăiere (faceți clic dreapta> Faceți o mască de tăiere), asigurându-vă că modificați culoarea formei de umplere a secțiunii laterale la # 2E9CAF.
Dați cele două secțiuni 8 px grosime (# 332E2E) cu Intră în runda, selecționând individual și grupând fiecare dintre formele lor de compunere folosind Control-G Comanda rapidă de la tastatură.
Creați o picătură a secțiunii frontale folosind a 16 x 16 px cerc (# 332E2E), pe care le vom centra aliniați la dreptunghiul mai mare, poziționându-l la o distanță de 26 px de la marginea de jos.
Reglați forma cercului selectând mai întâi și prinzând punctul de ancorare de sus cu ajutorul butonului Ancora Punct Tool (Shift-C) și apoi împingând-o spre vârf 8 px folosind Mișcare instrument (dați clic dreapta> Transformați> mutați> vertical> 8 px). După ce ați terminat, selectați și grupați (Control-G) toate formele de compunere ale secțiunii frontale înainte de a trece la pasul următor.
Începeți să adăugați barele de informații nutriționale pe partea cartonului, creând două 12 x 2 px dreptunghiuri (# 332E2E), stivuite vertical 2 px unul de celălalt, pe care îl vom poziționa de la distanță 8 px din marginea inferioară a vârtejului.
Adăugați o formă mai mare folosind a 12 x 12 px pătrate (# 332E2E), pe care o vom poziționa 2 px sub bara inferioară. Selectați și grupați (Control-G) toate cele trei dreptunghiuri împreună, făcând același lucru pentru forma compoziției secțiunii laterale după aceea.
Începeți să lucrați pe corpul superior al cartonului, creând forma principală a secțiunii sale laterale folosind a 24 x 20 px dreptunghi (# A08380), pe care o vom poziționa pe lângă formele pe care tocmai le-am grupat.
Ajustați forma pe care tocmai am creat-o adăugând un nou punct de ancorare în centrul marginii superioare folosind butonul Adăugați un instrument de ancorare (+), și apoi scoateți cele laterale folosind Ștergeți instrumentul pentru punctul de ancorare (-).
Dați forma rezultată 8 px grosime (# 332E2E) cu Intră în runda, selectând și grupându - le împreună, folosind Control-G Comanda rapidă de la tastatură.
Adăugați secțiunea frontală a corpului superior folosind a 44 x 20 px dreptunghi (# BFA9A5), pe care o vom poziționa așa cum se vede în imaginea de referință.
Reglați forma pe care tocmai am creat-o selectând punctele de ancorare de sus folosind butonul Instrumentul de selecție directă (A) și apoi împingându-le spre dreapta prin 12 px folosind Mișcare instrument (dați clic dreapta> Transformați> mutați> orizontal> 12 px).
Dați forma rezultată 8 px grosime (# 332E2E), selectarea și gruparea (Control-G) cele două împreună înainte de a trece la pasul următor.
Creați secțiunea pliată a cutiei de lapte utilizând a 44 x 12 px dreptunghi (# E8E1DF) cu un 8 px grosime (# 332E2E), pe care o vom grupa (Control-G) și apoi poziția așa cum se vede în imaginea de referință.
Finalizați cutia de lapte adăugând o 16 x 6 px (# 332E2E) inserție dreptunghiulară în centrul marginii superioare a secțiunii create anterior, selectarea și gruparea (Control-G) împreună, și după aceea să faceți același lucru pentru întreaga cutie.
Începeți să lucrați la triunghiul mic de brânză, creând secțiunea laterală folosind a 20 x 34 px dreptunghi (# EA7A5C) cu un 8 px dreapta Raza de colț si un 8 px grosime (# 332E2E), pe care o vom grupa (Control-G) și apoi aliniați la colțul din stânga-jos al cutiei de lapte.
Adăugați secțiunea frontală folosind a 36 x 34 px dreptunghi (# EDAD66) cu un 8 px dreapta Raza de colț, pe care o vom poziționa la o distanță de 12 px din marginea din stânga a zonei active de desen.
Reglați forma creând o 12 x 12 px cerc (evidențiat cu roșu), pe care o vom poziționa pe marginea din stânga a secțiunii frontale, la o distanță de 10 px din partea inferioară. După ce ai forma în poziție, selectează pur și simplu și secțiunea și utilizarea mai mare deschizător de drumuri„s Minus Mode Shape Mode pentru a crea decupajul.
Finalizați triunghiul brânzei, și cu ea icoana în sine, dând forma rezultată 8 px grosime (# 332E2E), urmată de două inserții circulare (8 x 8 px; 4 x 4 px - # 332E2E). După ce ați terminat, selectați și grupați (Control-G) toate secțiunile de compoziție ale brânzei împreună, făcând același lucru pentru întreaga pictogramă ulterior.
Presupunând că ați terminat lucrul la cea de-a doua pictogramă, blocați stratul și apoi treceți la următorul (care ar fi cel de-al patrulea), unde vom începe să lucrăm la al treilea grup de alimente.
Deoarece ceapa este aproape identică în formă și dimensiune cu pepene galben, vom debloca rapid stratul pictogramei fructelor și vom crea o copie (Control-C) pepene, pe care o vom pastra (Control-F) pe stratul curent, aliniați-l la marginea dreaptă a zonei de desen.
Ungroupați copia pe care tocmai am creat-o (clic dreapta> Ungroup) și apoi luați câteva momente pentru a elimina semințele și tulpina, așa cum se vede în imaginea de referință.
Reglați restul de forme schimbând culoarea formei de umplere a secțiunii laterale la # BF7D47, corpul exterior al secțiunii frontale a acestuia # E8E1DF, și cea interioară # BFA9A5.
Adăugați un alt strat pe secțiunea frontală a cepei folosind a 24 x 64 px elipsă (# E8E1DF) cu un 8 px grosime (# 332E2E), pe care o vom grupa (Control-G) și apoi aliniați centrul la secțiunea mai mare care se află în partea de jos.
Creați un altul mai mic 8 x 24 px elipsă, pe care o vom folosi folosind culoarea # 332E2E și apoi aliniați centrul la secțiunea creată anterior. Odată ce forma are loc, selectați și grupați (Control-G), toate compozițiile secțiunii frontale formează împreună înainte de a trece la pasul următor.
Finisați ceapa prin tragerea rădăcinilor folosind trei 8 px gros Accident vascular cerebral linii (# 332E2E) cu Round Cap, pe care o vom poziționa pe partea dreaptă a secțiunii laterale așa cum se vede în imaginea de referință. Luați-vă timpul și, după ce ați terminat, selectați și grupați (Control-G) toate secțiunile de compoziție ale legumelor înainte de a trece la pasul următor.
Începeți să lucrați la morcovul mic, creând corpul său principal folosind a 32 x 32 px cerc (# EA7A5C), pe care o vom poziționa de la distanță 4 px de la marginea stângă și de jos a zonei de desen activ.
Ajustați forma cercului pe care tocmai l-am creat selectând punctul de ancorare de sus cu ajutorul Instrumentul de selecție directă (A) și apoi împingând-o spre vârf 24 px folosind Mișcare instrument (faceți clic dreapta> Transformați> Mutare> Vertical> -24 px).
Dați forma rezultată 8 px grosime folosind Accident vascular cerebral , asigurându-vă că setați culoarea # 332E2E.
Finalizați morcovul și, împreună cu acesta, pictograma în sine, adăugând câteva linii orizontale detaliate orizontale folosind câteva 4 px înalt dreptunghiuri rotunjite (# 332E2E) cu 2 px Radius colț. Odată ce ați liniile în loc, selectați și grupați (Control-G) împreună, făcând același lucru pentru morcov și întreaga pictogramă după aceea.
Asigurați-vă că ați blocat stratul anterior și apoi treceți la cel de-al doilea (care ar fi al cincilea) în care vom crea al patrulea grup de alimente.
Începeți să lucrați la cutia de cereale creând secțiunea frontală folosind a 56 x 92 px dreptunghi (# EDAD66) cu un 8 px grosime (# 332E2E) cu Intră în runda, pe care o vom grupa (Control-G) și apoi aliniați la marginea inferioară a zonei de desen activă, poziționându-l la o distanță de 28 px din partea stângă.
Adăugați semințele de boabe ale simbolului de cereale folosind patru 12 x 12 px pătrate (# 332E2E), pe care o vom poziționa așa cum se vede în imaginea de referință.
Reglați forma dreptunghiurilor din stânga, prin setarea Rază dintre colțurile din stânga și din dreapta sus 12 px din interiorul Transforma panoul Dreptunghi Proprietăți.
Repetați același proces pentru pătratele din dreapta, doar reglați acest timp Rază din colțurile lor de sus și din dreapta-jos, utilizând aceleași 12 px valoare.
Adăugați semințele de vârf utilizând a 6 x 12 px elipsă (# 332E2E), pe care o vom poziționa între primele două forme pe care tocmai le-am ajustat, la o distanță de 8 px de la marginea lor inferioară.
Reglați forma elipsei pe care tocmai am creat-o prin prinderea punctelor de ancorare de la partea superioară și inferioară folosind Ancora Punct Tool (Shift-C) pentru a le face pointi. După ce ați terminat, selectați și grupați (Control-G) toate semințele împreună, făcând același lucru pentru secțiunea frontală a cutiei.
Creați corpul inferior al secțiunii laterale a cutiei utilizând a 24 x 52 px dreptunghi (# A08380) cu un 8 px grosime (# 332E2E), pe care o vom grupa (Control-G) și apoi poziționați-o pe partea dreaptă a frontului mai mare.
Adăugați corpul superior al secțiunii laterale folosind a 24 x 40 px dreptunghi (# BF7D47) cu un 8 px grosime (# 332E2E), pe care o vom grupa (Control-G) și apoi poziția deasupra formelor create anterior.
Așa cum am făcut și cu cutia de lapte, luați câteva momente și adăugați în barele cu valoare nutritivă mică folosind două 12 x 2 px dreptunghiuri (# 332E2E) stivuite vertical 2 px deasupra a 12 x 12 px pătrate (# 332E2E). Grup (Control-G) și apoi centrați aliniați toate cele trei forme la secțiunea mai mare, așezându-le la o distanță de 8 px de la marginea de jos. După ce ați terminat, selectați și grupați (Control-G) toate formele de compunere ale secțiunii laterale înainte de a trece la următoarea etapă.
Creați secțiunea pliată din față a cutiei utilizând a 56 x 20 px dreptunghi (# E8E1DF), pe care le vom regla selectând și împingând punctele de ancorare de la partea stângă până la 12 px (faceți clic dreapta> Transformați> Orizontal> -12 px). Dați forma rezultată 8 px grosime (# 332E2E) cu Intră în runda, grupare (Control-G) și poziționarea celor două pe partea superioară a secțiunii frontale mai mari.
Creați secțiunea pliată de sus utilizând o copie (Control-C > Control-F) a celui din etapa anterioară, pe care o vom reflecta mai întâi orizontal (clic dreapta> Transformare> Reflect> Orizontal) și apoi poziția deasupra cutiei, asigurându-vă că schimbați culoarea de umplere a acesteia # BFA9A5. Luați-vă timpul și, după ce ați terminat, selectați și grupați (Control-G) toate secțiunile de compilare ale casetei înainte de a trece la pasul următor.
Începeți să lucrați pe castronul mic, creând corpul inferior cu ajutorul acestuia 56 x 20 px dreptunghi (# EA7A5C) cu 20 px fund Raza de colț si un 8 px grosime (# 332E2E), pe care o vom grupa (Control-G) și apoi aliniați la marginea inferioară a zonei de desen activă, poziționându-le la o distanță de 8 px din partea stângă.
Adăugați corpul superior al bolului cu ajutorul a 64 x 12 px dreptunghi (# E8E1DF) cu un 8 px grosime (# 332E2E), pe care o vom grupa (Control-G) și apoi poziția deasupra formelor create anterior.
Terminați de pe castron, și cu ea icoana în sine, tragând mânerul lingurii folosind o diagonală 8 px gros Accident vascular cerebral linie (# 332E2E), pe care o vom poziționa în partea stângă a obiectului, așa cum se vede în imaginea de referință. După ce ați terminat, nu uitați să selectați și să grupați (Control-G) toate formele compoziției castronului împreună, făcând același lucru pentru întreaga pictogramă ulterior.
Suntem acum la al cincilea și ultimul grup de alimente, care este probabil cel mai ușor de creat, deci asigurați-vă că sunteți pe stratul potrivit (care ar fi cel de-al șaselea) și să terminăm acest lucru!
Creați șunca utilizând o copie (Control-C) pepenei primei pictograme pe care o vom lipi (Control-F) pe stratul curent, asigurându-vă că îl aliniați la marginea dreaptă a zonei desenului gol activ.
Așa cum am făcut cu ceapa, dezgropați copia pe care tocmai am creat-o (clic dreapta> Ungroup) și apoi luați câteva momente pentru a elimina semințele și tulpina, așa cum se vede în imaginea de referință.
Reglați restul de forme schimbând culoarea părții exterioare a corpului frontal în # EDAD66 și corpul său interior # EA7A5C.
Izolați inelele orizontale ale secțiunii laterale făcând dublu clic pe grupul lor și apoi adăugați un inel vertical folosind a 92 x 132 px elipsă cu a 4 px gros Accident vascular cerebral (# 332E2E), pe care le vom alinia la marginea stângă a zonei de desen activă. Odată ce ați terminat, pur și simplu apăsați Evadare a iesi Modul de izolare.
Mergeți înapoi în secțiunea frontală și adăugați o bucată de os mic cu ajutorul a 12 x 20 px elipsă (# E8E1DF) cu un 8 px grosime (# 332E2E), pe care o vom grupa (Control-G) și apoi aliniați centrul la corpul său interior.
Finalizați șunca prin adăugarea secțiunii mici a coada cu ajutorul unui șurub 16 x 10 px elipsă (# 332E2E), pe care le vom alinia la marginea dreaptă a zonei de desen act
Accentsconagua