Share
Ce veți creaAstăzi este una specială, din moment ce sărbătorim zece ani de minunate și cât de bine ar trebui să faceți acest lucru decât prin a vă oferi un tutorial special în care veți învăța cum să creați un set de zece pictograme de interfață UI, forme de bază și instrumente pe care Illustrator trebuie să le ofere.
Dacă căutați mai multe icoane, în diferite stiluri, mergeți la GraphicRiver.
Acestea fiind spuse, luați o scurgere rapidă de cafea proaspătă de copt și să mergem la lucru.
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 o rețea mică, pentru a 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ț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 (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 pentru a separa grilele de referință de pictogramele reale. Dacă sunteți familiarizat cu tutorialele mele anterioare, veți observa că, cu aceasta, luăm o abordare ușor diferită, deoarece noi bazăm proiectul pe Artboards în loc de Layers, datorită numărului ridicat de pictograme.
Acestea fiind spuse, ridicați straturi și creați un total de două 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 64 x 64 px, care este pe partea medie a scalei.
Asigurați-vă că sunteți pe stratul potrivit (care ar fi primul) și apoi apucați-l Instrumentul dreptunghiular (M) și de a crea un 64 x 64 px portocale (# F15A24) pătrat pe care îl vom alinia la prima placă Artboard și vom folosi pentru a defini dimensiunea generală a icoanelor noastre.
Adăugați un număr mai mic 56 x 56 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ă și apoi creați grilele rămase utilizând 19 copii (Control-C> Control-F) pe care le vom poziționa pe fiecare dintre artboard-urile goale. Luați-vă timpul și, după ce ați terminat, asigurați-vă că blocați stratul curent înainte de a trece la secțiunea următoare.
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 creând primul grup de pictograme, care ne va ajuta să navigăm mai bine.
Începeți să lucrați pe pictograma din spate, creând corpul principal folosind a 48 x 48 px cerc, pe care o vom folosi #DCEEFF și apoi aliniați centrul la prima placă Artboard.
Dați forma pe care tocmai am creat-o 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 # 629CF9 ș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, 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 pe o mică săgeată orientată spre stânga, creând corpul principal folosind a 24 px larg 8 px gros Accident vascular cerebral linie (# 629CF9) cu Round Cap, pe care le vom alinia în centru spre Artboard.
Finalizați pictograma prin desenați capul săgeții folosind o 8 px gros Accident vascular cerebral (# 629CF9) cu Round Cap și A adera. Luați-vă timpul și, după ce ați terminat, selectați și grupați cei doi împreună (Control-G), făcând același lucru pentru toate formele de compoziție ale pictogramei înainte de a trece la următoarea.
Creați pictograma transmite utilizând o copie (Control-C) pe care tocmai am terminat să o lucrăm, pe care o vom lipi (Control-F) pe a doua placă Artboard și apoi ajustați-o prin reflectarea verticală (faceți clic dreapta> Transformați> Reflect> Vertical).
Creați pictograma de derulare în sus utilizând o copie (Control-C) din pictograma anterioară, pe care o vom lipi (Control-F) pe următoarea placă Artboard și apoi reglați-o prin rotirea acesteia -90º folosind Roti instrument (Click dreapta > Transformare> Rotire> -90º).
Adăugați pictograma derulantă în jos utilizând o copie (Control-C) din cel pe care tocmai l-am creat, pe care îl vom lipi (Control-F) pe a patra placă Artboard și apoi se ajustează prin reflectarea orizontală a acesteia (clic dreapta> Transformare> Reflect> Orizontal).
Începeți să lucrați la pictograma de reîmprospătare creând corpul principal utilizând a 36 x 36 px cerc cu un 8 px gros Accident vascular cerebral (# 629CF9), pe care le vom alinia la marginea inferioară a zonei de desen activă.
Deschideți cercul prin eliminarea secțiunii trimestrului superior-stânga, asigurându-vă că setați calea rezultată Capac la Rundă din interiorul Accident vascular cerebral panou.
Creați capul săgeții folosind un 18 x 24 px dreptunghi, pe care o vom folosi folosind culoarea #DCEEFF, și apoi poziția așa cum se vede în imaginea de referință.
Răsuciți dreptunghiul într-o săgeată orientată spre stânga, adăugând un nou punct de ancorare în centrul marginii stângi, utilizând Adăugați un instrument de ancorare (+), și apoi scoateți cele din stânga-stânga, făcând clic pe ele folosind butonul Ștergeți instrumentul pentru punctul de ancorare (-).
Terminați de pe săgeată, și cu ea pictograma în sine, dându-i forma rezultată 8 px grosime (# 629CF9) cu Intră în runda, selectarea și gruparea (Control-G) cele două împreună, și de a face același lucru pentru întreaga pictogramă ulterior.
Presupunând că ați terminat lucrul la primul grup de pictograme, treceți la următoarea placă Artboard și începeți să lucrați la următorul grup.
Creați secțiunea obiectivului pictogramei de căutare utilizând a 40 x 40 px cerc (#DCEEFF) cu un 8 px grosime (# 629CF9), pe care o vom grupa (Control-G) și apoi aliniați la colțul din stânga sus al zonei de desen activ.
Luați câteva momente și trageți secțiunea mânerului folosind o 8 px gros Accident vascular cerebral (# 629CF9) cu Round Cap, utilizând imaginea de referință ca ghid principal.
Finalizați pictograma prin scurtarea lungimii mânerului selectând punctul de ancorare de sus cu ajutorul Instrumentul de selecție directă (A) și apoi glisați-l în diagonală în timp ce țineți apăsată tasta Schimb cheie pentru a păstra o linie dreaptă. Luați-vă timpul și, după ce ați terminat, selectați și grupați (Control-G) înainte de a trece la următoarea pictogramă.
Creați pictograma zoom în copiere (Control-C) pe care tocmai am terminat să o lucrăm, pe care o vom lipi (Control-F) pe următoarea placă Artboard, adăugând semnul plus în centrul secțiunii obiectivului utilizând două 16 px lung 8 px gros Accident vascular cerebral linii (# 629CF9) cu Round Cap. Luați-vă timpul și, după ce ați terminat, selectați și grupați (Control-G) toate formele sale de compunere înainte de a trece la următorul.
Adăugați pictograma zoom out folosind o copie (Control-C) din cel pe care tocmai l-am creat, pe care îl vom lipi (Control-F) pe următoarea placă de desen și apoi ajustați prin dublu clic pe semnul plus pentru al izola. Apoi un grup (clic dreapta> Ungroup) și scoateți-o verticală Accident vascular cerebral linia.
Suntem acum la cel de-al treilea grup de pictograme, așa că asigurați-vă că v-ați poziționat pe următoarea placă Artboard (care ar fi cea nouă) și să începem.
Creați comutarea pe corpul principal al pictogramei de vizibilitate utilizând a 48 x 32 px elipsă, pe care o vom folosi folosind culoarea #DCEEFF și apoi centru aliniați la Artboard subiacent.
Ajustați forma pe care tocmai am creat-o prin prinderea punctelor de ancorare din stânga și din dreapta utilizând Ancora Punct Tool (Shift-C) în scopul de a întoarce elipsa într-o formă mai asemănătoare ochiului.
Dați forma rezultată 8 px grosime (# 629CF9) cu Intră în runda, selectând și grupând cele două împreună după aceea folosind Control-G Comanda rapidă de la tastatură.
Adăugați secțiunea elevului utilizând a 16 x 16 px cerc, pe care o vom folosi # 629CF9 și apoi centrați alinierea la cele două forme pe care tocmai le-am grupat.
Finalizați-vă pictograma prin adăugarea unei mici reflecții utilizând o imagine 8 x 8 px cerc, pe care o vom folosi #DCEEFF și apoi aliniați la colțul din dreapta sus al elevului, grupând (Control-G) cele două împreună după aceea. Luați-vă timpul și, după ce ați terminat, selectați și grupați (Control-G) toate formele sale de compunere înainte de a trece la următorul.
Creați pictograma pentru oprirea vizibilității utilizând o copie (Control-C) pe care tocmai am terminat să lucrăm, pe care o vom lipi pe a zecea placă Artboard și apoi vom ajusta prin trasarea liniei diagonale folosind o 8 px gros Accident vascular cerebral (# 629CF9), selectarea și gruparea (Control-G), toate împreună după aceea.
Să fim cinstiți, nici un pachet de pictograme UI nu este complet fără un set de pictograme de partajare de fișiere, așa că hai să ne asigurăm că adăugăm un set propriu.
Începeți să lucrați la pictograma de încărcare, creând principalele forme pentru secțiunea cutie utilizând a 48 x 12 px dreptunghi (#DCEEFF) cu un 8 px grosime (# 629CF9), pe care o vom grupa (Control-G) și apoi aliniați centrul la marginea inferioară a zonei de desen activă.
Adăugați segmentele mici care se extind folosind două 8 px înalt 8 px gros Accident vascular cerebral linii (# 629CF9) cu Round Cap, pe care le vom poziționa pe laturile formelor create anterior, selectându-le și apoi creând un grup mai mare (Control-G).
Adăugați săgeata în sus cu o copie (Control-C) din cel pe care l-am creat deja pentru icoanele de navigare pe care le vom lipi (Control-F) pe artboard-ul curent și apoi aliniați centrul la marginea superioară a zonei de desen activă. Odată ce ați apăsat săgeata, selectați și grupați împreună toate formele de compoziție ale pictogramei folosind Control-G Comanda rapidă de la tastatură.
Creați pictograma de descărcare utilizând o copie (Control-C) pe care tocmai am terminat-o să lucrăm, pe care o vom lipi pe următoarea placă Artboard și apoi vom regla prin reflectarea orizontală a săgeții sale mici (clic dreapta> Transformare> Reflect> Orizontal).
Dacă ești ca mine, probabil că ești unul dintre acei oameni care nu prea îți plac următorul articol, deoarece interfețele ar trebui să fie ușor de folosit, dar adânc întemei că uneori este un rău necesar.
Creați corpul principal al pictogramei folosind a 48 x 48 px cerc (#DCEEFF) cu un 8 px grosime (# 629CF9), pe care o vom grupa (Control-G) și apoi aliniați centrul la cea de-a 13-a Artboard.
Creați semnul mic al semnului de exclamare folosind un 8 x 8 px cerc, pe care o vom folosi # 629CF9 și apoi aliniați centrul la formele mai mari, poziționându-l la o distanță de 4 px din marginea inferioară a conturului său.
Terminați marcajul și, împreună cu acesta, pictograma în sine, adăugând segmentul de linie folosind a 12 px înalt 8 px gros Accident vascular cerebral (# 629CF9), pe care o vom poziționa deasupra punctului, la o distanță de doar 4 px. Selectați și grupați (Control-G) cele două forme împreună, făcând același lucru pentru întreaga pictogramă, înainte de a trece la următoarea.
Partajarea este una dintre acele lucruri care fac Internetul un loc minunat pentru a trăi existența dvs. digitală, așa că am să vă împărtășesc o abordare simplă cu privire la modul de a crea propria pictogramă.
Creați secțiunile principale ale pictogramei utilizând trei 16 x 16 px cercuri (#DCEEFF) cu un 8 px grosime (# 629CF9), pe care o vom grupa în mod individual (Control-G) și apoi poziția așa cum se vede în imaginea de referință.
Desenați segmentul de linie care leagă toate cele trei secțiuni folosind o secțiune 8 px grosime (# 629CF9) cu Round Cap și A adera. Luați-vă timpul și, după ce ați terminat, trimiteți calea rezultată dedesubt faceți clic dreapta> Aranjare> Trimitere înapoi, selectând și grupând toate formele de compunere ale pictogramei împreună cu ajutorul Control-G Comanda rapidă de la tastatură.
Ne place să ne întoarcem lucrurile, de ce să nu petrecem câteva momente și să vedem cum putem crea propriul indicator de stare proprie.
Începeți să lucrați la pictograma de dezactivare prin crearea corpului principal utilizând a 48 x 32 px dreptunghi rotunjit (#DCEEFF) cu 16 px Radius colț si un 8 px grosime (# 629CF9), pe care o vom grupa (Control-G) și apoi aliniați centrul la următoarea placă Artboard.
Adăugați indicatorul de stare utilizând a 16 x 16 px cerc, pe care o vom folosi # 629CF9, și apoi aliniați centrul la formele mai mari, poziționându-l la o distanță de 4 px din marginea stângă a conturului. După ce ați terminat, selectați și grupați (Control-G) toate cele trei forme împreună, înainte de a trece la următoarea pictogramă.
Creați comutarea pe stare utilizând o copie (Control-C) de pe care tocmai am terminat de lucrat, pe care o vom lipi pe următoarea placă Artboard (Control-F), apoi ajustați-o prin reflectarea verticală (faceți clic dreapta> Transformați> Reflect> Vertical).
Următorul articol de pe lista noastră este una din acele pictograme care au devenit instantaneu un schimbător de jocuri odată ce a fost folosit și pe deplin înțeles, deoarece a fost imediat adoptat ca un simbol universal.
Începeți să lucrați la secțiunea centrală a meniului, creând un 8 x 8 px cerc, pe care o vom folosi # 629CF9 și apoi centrați alinierea la marginea stângă a zonei de desen activă.
Adăugați segmentul de bare folosind a 36 px larg 8 px gros Accident vascular cerebral linie (# 629CF9) cu Round Cap, pe care o vom centra în alinierea cu partea dreaptă a zonei de desen activ. Ia-ți timp, și odată ce ai calea în loc, selectează atât cercul cât și cercul și le grupezi împreună folosind Control-G Comanda rapidă de la tastatură.
Terminați pictograma adăugând secțiunile de sus și de jos utilizând două exemplare (Control-C> Control-F de două ori) din formele pe care tocmai le-am grupat, pe care le vom poziționa de la distanță 8 px din original. După ce ați terminat, selectați și grupați (Control-G) înainte de a trece la următoarea pictogramă.
Fie că este vorba de sprockets sau sliders, putem fi de acord că pictograma de setări este un element care trebuie să aibă în orice pachet UI, deoarece ajustările sunt unul dintre acele lucruri pe care mereu ne place să le facem, dacă știi ce vreau să spun.
Începeți prin crearea segmentelor glisante ale pictogramei utilizând trei 48 px larg 8 px gros Accident vascular cerebral linii (# 629CF9) cu Round Cap, pe care o vom strânge vertical la o distanță de 16 px unul de celălalt, aliniați-le ulterior la artboard-ul gol aflat sub el.
Finalizați pictograma prin adăugarea butoanelor de reglare folosind trei 12 x 12 px cercuri (#DCEEFF) cu un 8 px grosime (# 629CF9), pe care o vom grupa în mod individual (Control-G) și apoi poziționați pe glisoare 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 de compoziție ale pictogramei înainte de a trece la următoarea.
Suntem acum la ultimul grup de pictograme și cât de bine să terminăm pachetul decât prin adăugarea stărilor de inimă mici.
Începeți să lucrați la secțiunea superioară a butonului similar, creând o 28 x 28 px cerc, pe care o vom folosi #DCEEFF, și apoi poziția 8 px din marginea superioară a zonei de desen activă și 4 px din partea stângă.
Creați un altul 28 x 28 px cerc (#DCEEFF), pe care o vom poziționa pe partea opusă a zonei de desen activ, asigurându-vă că mențineți aceleași lacune. Odată ce aveți ambele forme în loc, selectați-le și le uniți într-un singur obiect mai mare folosind deschizător de drumuri„s Activați modul Shape.
Aprinde Previzualizarea pixelilor mod (Alt-Shift-Y) și ajustați forma rezultată selectând și îndepărtându-i jumătatea inferioară și apoi prinzând punctul de ancorare din partea superioară înapoi la Pixel Grid.
Prindeți Instrument Pen (P) și trageți corpul inferior al inimii, asigurându-vă că eliminați puncte de ancorare laterale folosind Conversia punctelor de ancorare selectate pentru a netezi. Luați-vă timp și ajustați forma selectând și repoziționând unele dintre punctele de capăt ale mânerelor sale, așa cum se vede în imaginea de referință, oprind Previzualizarea pixelilor mod (Alt-Control-Y) înainte de a trece la pasul următor odată ce ați terminat.
Terminați pictograma, dând formatul rezultat 8 px grosime (# 629CF9) cu Intră în runda, asigurați-vă că selectați și grupați (Control-G) cele două înainte de a trece la următorul.
Creați pictograma finală utilizând o copie a celei pe care tocmai am terminat de lucrat, pe care o vom poziționa pe ultima tablă Artboard și apoi vom transforma într-un buton de dispreț adăugând bara diagonală cu ajutorul unei 8 px gros Accident vascular cerebral (# 629CF9) cu Round Cap. După ce ați terminat, selectați și grupați (Control-G) toate formele sale de compunere înainte de a salva proiectul.
Ca întotdeauna, sper că v-ați bucurat de acest tutorial pas cu pas și, cel mai important, ați învățat ceva proaspăt și util pe parcurs!
Accentsconagua