Share
Ce veți creaÎn tutorialul de astăzi vom face câteva schimbări minore în programul nostru regulat și vom aborda un subiect pe care am vrut să îl fac de mult timp. Dacă nu v-ați dat seama de titlu, vom crea cinci simboluri simple pe care le-ați putea transforma în iconițe lansatoare Android pentru orice aplicații viitoare pe care le-ați putea crea sau care ar putea fi implicate în crearea.
În ceea ce privește procesul, vom folosi selecția de bază a formelor geometrice combinate cu panoul Align și alte instrumente pe care probabil că deja le lucrezi în fiecare zi.
Acestea fiind spuse, luați un lot de cafea proaspătă și să începem.
Oh, și nu uitați că puteți întotdeauna să vă extindeți proiectul, îndreptându-vă spre GraphicRiver, unde veți găsi numeroase pachete minunate de pictograme proiectate de Android, așteptând să faceți clic pe.
Doriți să învățați prin format video? Consultați tutorialul video de pe canalul YouTube Envato Tuts +:
De vreme ce bănuiesc că deja aveți Illustrator în fundal, aduceți-o în sus și Document nou (Fișier> Nou sau Control-N) folosind următoarele setări:
Și de la Avansat fila:
Sfat rapid: unii dintre voi ar fi putut observa că Aliniați obiectele noi la grila Pixel opțiunea lipsește, ceea ce se datorează faptului că rulez noua versiune CC 2017 a software-ului, unde au fost făcute schimbări importante în modul în care Illustratorse ocupă de modul în care formele se fixează la baza Pixel Grid.
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 control complet asupra formelor noastre - adică dacă executăm versiunea mai veche a software-ului.
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, citiți această lucrare detaliată 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 opțiune găsită în cadrul Vedere meniu, care se va transforma în Faceți clic pe Pixel de fiecare dată când intri Previzualizarea pixelilor mod.
Acum, dacă sunteți nou în întregul "flux de lucru pixel-perfect", vă recomand să vă prezentați modul de creare a tutorialului de artă perfectă pixel, care vă va ajuta să vă lărgi abilitățile tehnice în cel mai scurt timp.
Odată cu crearea noului document, ar fi o idee bună să ne structurăm proiectul folosind câteva straturi, deoarece astfel putem menține un flux de lucru constant concentrându-ne pe o 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ă:
Grile de referință (sau Grile de bază) reprezintă un set de suprafețe de referință precis delimitate, care ne permit să construim icoanele noastre concentrându-ne pe mărime și consistență.
De obicei, dimensiunea grilelor determină mărimea icoanelor reale și ele ar trebui să fie întotdeauna prima decizie pe care o luați în momentul în care începeți un nou proiect, deoarece veți dori întotdeauna să începeți de la cea mai mică dimensiune posibilă și să vă dezvoltați.
Acum, din moment ce vom crea pictogramele cu intenția de a le utiliza în cadrul actualului sistem de operare Android, va trebui să respectăm recomandările de dimensiune și Format recomandate și să creăm o rețea personalizată de 96 x 96 px cu totul în jur 4 px umplutură.
Începeți prin a bloca tot stratul de referință, dar apoi apucați-l Instrumentul dreptunghiular (M) și de a crea un 96 x 96 px portocale (# F15A24), care va ajuta la definirea dimensiunii generale a icoanelor noastre.
Adăugați un număr mai mic 88 x 88 px unu (#FFFFFF), care va acționa ca zonă de desen activă, oferindu-ne astfel totul 4 px umplutură.
Grupați cele două pătrate care compun grila de referință folosind Control-G comanda rapidă de la tastatură și apoi creați trei copii la o distanță de 24 px unul de celălalt, asigurându-vă că le aliniați la centrul artboard.
După ce ați terminat, blocați stratul curent și treceți la următorul, unde vom începe să lucrăm la prima noastră pictogramă.
Vom lansa proiectul creând pictograma bateriei, care ar putea fi utilizată pentru o aplicație de economisire a energiei sau chiar un indicator de stare, deoarece este destul de simplu.
Acestea fiind spuse, asigurați-vă că sunteți pe stratul drept (care ar fi cel de-al doilea) și apoi măriți-vă pe prima rețea de referință, astfel încât să putem începe.
Începeți prin crearea fundalului pictogramei folosind un 88 x 88 px cerc, pe care o vom folosi # 00C853, centru aliniindu-l ulterior la zona de desenare activă.
Sfat rapid: din moment ce Google a fost destul de drăguț pentru a scoate o orientare Material Design pentru culori, am ajuns să amestec și să potrivesc câteva din valorile pe care le-am folosit pentru fundaluri.
Creați corpul principal al bateriei cu ajutorul unui a 24 x 40 px dreptunghi, pe care o vom colora folosind alb (#FFFFFF) și apoi aliniați centrul la cercul mai mare, la o distanță de 20 px de la marginea de jos.
Întoarceți forma pe care tocmai am creat-o într-o schiță, trăgând-o Completati cu al ei; cu al lui Accident vascular cerebral (Shift-X), apoi setarea lui Greutate la 4 px si este Colţ la Intră în runda, toate din interiorul Accident vascular cerebral panou.
Creați prima bară indicator de stare, utilizând fie a 12 x 4 px dreptunghi (#FFFFFF) sau a 12 px larga (#FFFFFF) cu 4 px Greutate, pe care le vom centra aliniați la corpul bateriei, lăsând un a 4 px spațiu în jurul acestuia.
Adăugați încă două bare de indicatoare, pe care le vom stivui vertical la o distanță de 4 px una de alta, grupându-le împreună (Control-G) după aceea.
Terminați pictograma prin adăugarea capacului superior, pe care îl vom crea utilizând o dimensiune mai mică 8 x 4 px dreptunghi (#FFFFFF) că vom centraliza alinierea la corpul bateriei, la o distanță de 6 px (4 px pentru padding + 2 px pentru jumătatea superioară a cursei).
După ce ați terminat, nu uitați să selectați și să grupați (Control-G) toate formele de compunere ale bateriei, facând același lucru pentru toate secțiunile de compunere ale pictogramei.
Presupunând că ați reușit să terminați prima pictogramă, închideți stratul acesteia și apoi treceți la cea de-a doua (care ar fi cea de-a treia) și să începem să lucrăm la una dintre setări.
Așa cum am făcut și cu pictograma anterioară, începeți prin crearea fundalului folosind o 88 x 88 px cerc, pe care o vom folosi # 2196F3, centru aliniindu-l ulterior la zona de desen activă.
Începeți să lucrați pe glisorul central, creând o 4 x 32 px dreptunghi sau a 32 px un accident vascular cerebral înalt 4 px gros Greutate, pe care o vom colora folosind alb (#FFFFFF) și apoi aliniați centrul la cercul mai mare, la o distanță de 18 px de la marginea superioară.
Creați indicatorul de stare al culisorului utilizând a 12 x 4 px dreptunghi (#FFFFFF) pe care le vom centra aliniați la forma creată anterior, la o distanță de 4 px de la marginea de jos.
Adăugați secțiunea inferioară a cursorului folosind 4 x 12 px dreptunghi (#FFFFFF) pe care o vom poziționa chiar sub bara de indicatori de stare, selectând și grupând (Control-G) toate cele trei forme împreună după aceea.
Creați secțiunea de sus pentru cursorul din stânga cu ajutorul unui mic 4 x 12 px dreptunghi (#FFFFFF), pe care o vom alinia la marginea de sus a glisorului central, poziționându-l la o distanță de 12 px din ea.
Adăugați indicatorul de stare al cursorului creând o 12 x 4 px dreptunghi (#FFFFFF) pe care o vom plasa vertical la forma creată anterior, la o distanță de 4 px de la marginea de jos.
Finalizați glisorul din stânga adăugând secțiunea de fund pe care o vom crea folosind a 4 x 32 px dreptunghi (#FFFFFF) pe care o vom poziționa sub indicatorul.
După ce ați terminat, selectați toate cele trei forme și grupați-le împreună (Control-G) așa cum am făcut-o cu cursorul central.
Terminați pictograma prin crearea unei copii (Control-C> Control-F) a cursorului său stâng, pe care îl vom poziționa în partea dreaptă a cercului, la o distanță de 4 px de la cursorul central.
După ce ați terminat, nu uitați să selectați și să grupați (Control-G) toate secțiunile sale de compoziție, astfel încât să nu se poată separa accidental.
Presupunând că ați trecut deja până la următorul strat (care ar fi cel de-al patrulea strat), măriți-vă pe cea de-a treia rețea de referință și începeți.
Creați fundalul pictogramei utilizând un 88 x 88 px cerc, pe care o vom folosi # 7C4DFF și apoi aliniați centrul la zona de desen activă care stă la baza.
Creați forma principală pentru caseta de mesaje din stânga utilizând a 32 x 24 px dreptunghi, pe care o vom colora folosind alb (#FFFFFF) și apoi poziția la o distanță de 20 px din zona de desen activă, atât la marginea stângă, cât și la cea superioară.
Începeți să ajustați forma pe care tocmai am creat-o, pornind mai întâi Previzualizarea pixelilor mod (Alt-Control-Y) și apoi adăugarea unui nou punct de ancorarela marginea de jos, la o distanță de 10 px din stânga, făcând clic stânga cu ajutorul funcției Adăugați un instrument de puncte de ancorare.
Odată ce ați terminat, nu uitați să ieșiți Previzualizarea pixelilor mod cu ajutorul funcției Alt-Control-Y Comanda rapidă de la tastatură.
Continuați să reglați dreptunghiul selectând punctul de ancorare stânga-joscu Instrumentul de selecție directă (A), și apoi împingând-o în jos prin 8 px cu ajutorul Mișcare instrument(dați clic dreapta> Transformați> mutați> vertical> 8 px).
Răsuciți forma rezultată într-o schiță, prin rotirea acesteia Completati cu al ei; cu al lui Accident vascular cerebral (Shift-X) și apoi setarea lui Greutate la 4 px si este Colţ la Intră în runda.
Adăugați linia de text mai mică prin crearea unui 10 x 4 px dreptunghi, pe care o vom colora folosind alb (#FFFFFF) și apoi poziționați-o în interiorul cutiei de mesaje mici, aliniați-o spre colțul din stânga sus, asigurându-vă că părăsiți a 4 px spațiu în jurul acestuia.
Adăugați linia de text mai largă utilizând a 20 x 4 px dreptunghi (#FFFFFF) pe care le vom alinia la cea creată anterior, la o distanță de 4 px de la marginea de jos.
Odată ce ați terminat, nu uitați să selectați și să grupezi toate formele casetei de text împreună folosind Control-G Comanda rapidă de la tastatură.
Creați o copie (Control-C> Control-F) a schiței cutiei de text și apoi reflectați (faceți clic dreapta> Transformați> Reflect> Vertical) și poziționați-o pe partea dreaptă a cercului, la o distanță de 18 px din zona de desen activă, atât la marginea dreaptă cât și la cea inferioară.
Terminați pictograma, eliminând secțiunea suprapusă a casetei de text (evidențiată cu roșu), astfel încât să ajungeți la o 4 px spațiul dintre el și conturul stângii. Pentru a face acest lucru, pur și simplu adăugați un nou punct de ancorarela marginea superioară și stângă, apoi îndepărtați toate celelalte.
Odată ce ați terminat, selectați toate secțiunile de compunere ale pictogramei și grupați-le împreună folosind Control-G Comanda rapidă de la tastatură.
Deoarece probabil că deja știți deja burghiul, blocați stratul și mutați-l pe următorul strat (care ar fi al cincilea) și să începem să lucrăm la pictograma noastră de alarmă.
Creaza un 88 x 88 px cerc, pe care apoi vom folosi culoarea # FFC107, centru aliniindu-l la zona de desen activ activă.
Creați corpul principal al ceasului alarmei utilizând a 40 x 40 px cerc, pe care o vom colora folosind culoarea albă (#FFFFFF) și apoi aliniați centrul la zona de desen activă, la o distanță de 20 px de la marginea de jos.
Întoarceți forma pe care tocmai am creat-o într-o schiță, trăgând-o Completati cu al ei; cu al lui Accident vascular cerebral, și apoi setarea lui Greutate la 4 px din interiorul Accident vascular cerebral panou.
Selectează Instrument Pen (P) și trageți în mâinile ceasului folosind a 4 px gros Accident vascular cerebral cu culoarea setată pe alb (#FFFFFF) si Colţ la Intră în runda, asigurați-vă că ați lăsat o 4 px spațiul dintre punctele de ancorare finaleși cercul mai mare.
Mutați câțiva pixeli în partea de sus și creați un 8 x 6 px dreptunghi (#FFFFFF) pe care le vom centraliza aliniați la secțiunea superioară a cercului mai mare, poziționându-l astfel încât să se termine prin suprapunerea acestuia Accident vascular cerebral's jumătate de sus.
Adauga o 16 x 4 px dreptunghi (#FFFFFF) pe lângă cel pe care tocmai l-am creat, selectând și grupând (Control-G) apoi împreună.
Terminați pictograma prin desenarea celor două segmente mici de linie diagonală utilizând a 4 px Accident vascular cerebral cu culoarea setată pe alb (#FFFFFF). După ce ați terminat selectați și grupați (Control-G), toate ceasurile de alarma compun forme, facand acelasi lucru pentru intreaga pictograma dupa aceea.
Faceți-vă drumul spre cel de al șaselea și ultimul strat și încheiem proiectul creând pictograma pentru fotografii.
Folosind un 88 x 88 px cerc (# FF6F00) creează fundalul pictogramei pe care îl vom alinia la zona de desen activă.
Creați corpul principal al fotografiei folosind a 36 x 36 px dreptunghi, pe care o vom colora folosind alb (#FFFFFF) și apoi aliniați centrul la zona de desen activ activă, la o distanță de 20 px de la marginea superioară.
Întoarceți forma pe care tocmai am creat-o într-o schiță, trăgând-o Completati cu al ei; cu al lui Accident vascular cerebral (Shift-X), apoi setarea lui Greutate la 4 px si este Colţ la Intră în runda din interiorul Accident vascular cerebral panou.
Utilizarea Instrument Pen (P) trageți linia orizontală a divizorului utilizând a 4 px gros Accident vascular cerebral (#FFFFFF) pe care o vom poziționa în interiorul formei create anterior, la o distanță de 4 px de la marginea de jos.
Folosind același lucru 4 px gros Accident vascular cerebral (#FFFFFF) cu Intră în runda, începeți desenarea primului munte prin poziționarea primului punct de ancorarepe marginea din stânga a fotografiei, la o distanță de 10 px de la linia de separare orizontală pe care tocmai am creat-o.
Adăugați a doua ancorăla o distanță de 10 px atât pe orizontală cât și pe verticală față de prima. Finalizați-vă de pe munte adăugând a treia și ultima ancorăpe linia de separare orizontală, ținând apăsată tasta Schimb cheie pentru a atrage o linie diagonală perfectă.
Trageți în cel de-al doilea munte mai mic, folosind același lucru 4 px gros Accident vascular cerebral (#FFFFFF) și apoi, după ce ați terminat, selectați și grupați împreună toate formele de compunere a fotografiei utilizând Control-G Comanda rapidă de la tastatură.
Creați secțiunea de jos a pictogramei utilizând a 28 x 6 px dreptunghi, pe care o vom colora folosind alb (#FFFFFF) și apoi aliniați centrul la secțiunea inferioară a conturului fotografiei, la o distanță de 4 px.
Terminați pictograma, transformând forma pe care tocmai am creat-o într-o 4 px grosime (#FFFFFF) cu Intră în runda, apoi ajustând-o adăugând un nou punct de ancorarela centrul marginii superioare, pe care o vom îndepărta apoi pentru a deschide calea (evidențiată cu roșu).
Selectați forma rezultată și restul elementelor de compunere ale fotografiei și grupați-le (Control-G) făcând același lucru pentru secțiunile de compunere ale pictogramei după aceea.
Sper că ați reușit să țineți pasul cu fiecare pas și, cel mai important, ați învățat ceva nou și util în timpul procesului. Acestea fiind spuse, vă voi vedea în următoarea!
Accentsconagua