Pixel Perfect – Cum poți realiza icoane în AI

Pixel Perfect – De ce este important?

Pixel Perfect – Icoanele sunt despre claritate și comunicare.

Pictogramele neclare nu pot comunica la fel de bine ca cele clare.

Simplu.

Imaginați-vă dacă indicatoarele rutiere ar fi neclare, ce mizerie ar fi!

Când lucrați cu pictograme mai mari (> 64 px), marginile neclare par de obicei inestetice și, dacă trebuie să le folosiți la o scară mai mică (16 px – 32 px), acestea ar putea fi chiar de nerecunoscut.

Și nu veți ști niciodată cum va folosi clientul dvs. aceste icoane în viitor.

Deci pixelul perfect este calea de urmat!

Fiecare designer de pictograme ar trebui să știe cum să creeze pictograme perfecte pentru pixeli.

La un moment dat în viitor, aceste abilități ar putea deveni mai puțin importante pe măsură ce rezoluțiile de pe dispozitivele noastre devin din ce în ce mai mari.

Cu toate acestea, deocamdată este o necesitate absolută sau o super putere pentru fiecare designer de icoane de acolo!

La începutul carierei mele de iconograf, mă luptam să-mi fac icoanele pixel perfecte.

Uneori a fost un eșec după un eșec, dar acum, cu toată experiența la spate, pot spune cu mândrie că icoanele mele sunt ascuțite!

Am învățat importanța designului perfect al pixelilor într-un mod greu, dar a meritat în totalitate.

Acum simt nevoia să împărtășesc această experiență.

Permiteți-mi să vă arăt modul meu de a crea pictograme perfecte pentru pixeli.

Partea 1: Configurarea documentului – Pixel Perfect

Deci, doriți să creați pictograme perfecte pentru pixeli.

Grozav.

Primul pas pe care trebuie să-l faceți este să creați un fișier Illustrator corect.

Există 3 elemente cheie în crearea unui document Illustrator perfect pentru pixel: dimensiuni, unități și alinierea tuturor obiectelor noi la grila de pixeli.

Dimensiuni – Pixel Perfect

Lățimea și înălțimea ar trebui să fie numere pare.

Asigurați-vă că nu lăsați niciuna dintre aceste funcții cu virgulă (de ex. 64,23 px).

Dimensiunea planșei aparține pictogramelor pe care le creați.

Ar putea fi de orice dimensiune standard: 16 × 16; 28 × 28; 30 × 30; 40 × 40; 48 × 48; 64 × 64; 96 × 96; 128 × 128 etc.

Vă rog să rețineți că toate numerele sunt pare! Este modul în care ar trebui să fie.

Unități – Pixel Perfect

Pixeli. De aceea se numește pixel perfect, nu milimetri perfecți 😉

Aliniați obiecte noi la Pixel Grid – Pixel Perfect

Ok, acesta este foarte important.

Du-te și verifică această caracteristică.

După ce este bifat, toate obiectele nou create se vor fixa automat la cel mai apropiat pixel.

Preferințe Illustrator

Minunat, acum, când aveți un document adecvat, este timpul să ajustați unele dintre preferințele Illustratorului.

În primul rând, accesați Illustrator> Preferințe> General (sau apăsați Cmd + K dacă sunteți utilizator Macbook)

General

Schimbați Incrementarea tastaturii la 1 px.

În acest fel, când vă deplasați pictogramele, acestea vor rămâne în grila de pixeli.

Unități

După cum ați înțeles probabil, setez toate valorile la pixeli.

Accesați meniul, Unități și schimbați valorile generale și ale cursei în pixeli.

Tipul poate rămâne în puncte, deoarece rar folosiți fonturi în pictograme.

Asta e!

Ați actualizat Adobe Illustrator, făcându-l o adevărată fabrică de pictograme.

Totuși, trebuie să știți mult mai multe despre pictogramele perfecte pentru pixeli, dacă doriți să le fixați.

Să trecem la partea următoare!

Partea 2: Sfaturi și trucuri despre cum să proiectați pictograme perfecte pentru pixeli.

Deci, acum, când fișierul dvs. ilustrator pixel perfect este bine uns și funcționează fără probleme, putem trece la crearea primului lot de pictograme pixel perfect.

A avea un fișier pregătit nu este suficient pentru a crea icoane grozave.

Există o mulțime de diverse sfaturi și tehnici pentru a vă ajuta să creați pictograme clare.

Astăzi voi trece prin câteva dintre cele mai importante.

Aceste trucuri vă vor aduce mai aproape de a deveni stăpânul icoanelor perfecte pentru pixeli.

Fără alte întrebări, să începem!

Utilizați măsurători de obiecte întregi.

Aceasta este cheia pentru crearea pictogramelor perfecte pentru pixeli.

Asigurați-vă că toate dimensiunile, dimensiunile obiectelor, coordonatele de poziționare, lățimea cursei etc. sunt numere întregi.

Fiecare măsurătoare.

Evitați orice desen cu mâna liberă.

În schimb, alegeți un instrument de obiecte (elipsă, dreptunghi etc.) și faceți clic pe ecran.

Introduceți manual dimensiunile obiectului. Și încă o dată – fără virgule!

Toate numerele ar trebui să fie pare.

Când lucrați la pictogramele dvs., încercați să păstrați măsurătorile înălțimii și lățimii obiectului în numere pare (2, 4, 6, 8, 10, 12 etc.).

Pictogramele sunt menite să fie redimensionate, deci imaginați-vă că le creați pe o grilă de 64 × 64 și faceți un singur obiect 15px x 21px.

Când veți redimensiona pictograma la 32 × 32 (jumătate), acel obiect va deveni 7,5 px x 10,5 px, ceea ce va duce la o pictogramă neclară.

Și nu uitați să utilizați măsurători corecte ale obiectelor.

Încă o dată: principiul principal al designului perfect al pixelilor – nu folosiți virgule!

Realizați din cutia de transformare cel mai bun prieten al dvs.

Cutia de transformare este instrumentul dvs. principal atunci când creați pictograme perfecte pentru pixeli.

Ar trebui să fie întotdeauna deschis și ar trebui să fii cu ochii pe el tot timpul.

(Puteți deschide caseta de transformare bifând fereastră> Transformare, dacă nu ați făcut-o deja.)

Asigurați-vă că nu există fracțiuni în această casetă.

X și Y arată poziția obiectului în document.

W și H reprezintă lățimea și înălțimea obiectului dvs.

Nu este necesar să menționăm că toate aceste patru numere ar trebui să fie uniforme, nu-i așa?

Bifați caseta de transformare după crearea fiecărui obiect pentru a vedea dacă totul de pe grilă este locul unde ar trebui să fie.

Adesea, atunci când, creați un cerc nou, acesta nu este plasat pe grilă.

(Cercurile sunt cel mai probabil să iasă din grilă.)

Deci, dacă vedeți fracțiuni în caseta de transformare, remediați-le tastând cea mai apropiată valoare întreagă.

(Puteți utiliza, de asemenea, tastele săgeți atunci când intrarea este activă pentru a crește sau micșora valorile.)

Așa ar trebui să arate:

Și așa NU ar trebui să arate cu siguranță:

Utilizați Previzualizare Pixel.

Faceți clic pe Vizualizare> Previzualizare pixel.

Utilizați această opțiune atunci când doriți să verificați dacă totul este pixel perfect și nu ați făcut nicio greșeală pe parcurs.

(Unora le place să-l păstreze tot timpul.

Îl folosesc doar când vreau să mă asigur că totul este în regulă.

După aceea, mă întorc la vizualizarea obișnuită.)

Illustrator este un software vectorial și, dacă nu verificați această caracteristică, acesta vă va arăta întotdeauna linii perfect netede.

Când a fost verificat, acesta afișează o imagine raster, cea pe care o veți obține după salvarea fișierului ca .png sau orice alt format raster.

Ar trebui să măriți și să vedeți dacă nu ați lăsat niciun jumătate de pixeli.

(Pentru a vedea dimensiunea reală a unei pictograme, accesați Vizualizare> Dimensiune reală.

Pictograma dvs. pixel este perfectă?

Este? Dacă ai făcut totul bine, icoanele tale ar trebui să arate foarte clar.

Există câteva alte nuanțe în menținerea pixelilor icoanelor perfecte atunci când le exportați.

Uneori, Illustrator le încurcă.

De ce se întâmplă?

Partea 3: Exportarea pictogramelor din Illustrator. – Pixel Perfect

Acum, după ce ați creat un fișier Illustrator și ați creat câteva pictograme perfecte pixel folosind sfaturile pe care vi le-am dat, este timpul pentru partea finală și ușoară

– să vă exportați icoanele și să arătați tuturor acolo ce treabă minunată ați făcut!

Există multe modalități de a exporta pictograme din Illustrator.

Din păcate, de cele mai multe ori tind să se încețoșeze, așa că trebuie să fii atent.

Aceste sfaturi și trucuri vă vor economisi timp și energie și vă vor ajuta să evitați neclaritatea.

După cum se spune, este bine să înveți din greșelile altor persoane.

Când vine vorba de exportul icoanelor perfecte pentru pixeli, vă sugerez să mă ascultați și să nu le repetați niciodată!

Îmi copiam icoanele din Illustrator direct în Photoshop.

Greșit!

Indiferent cât de precis ați fi în timp ce creați icoanele din Illustrator, acestea vor deveni neclare în Photoshop. Mereu.

Deci, după ce ați terminat de lucrat la pictograme, ecranul dvs. ar trebui să arate oarecum așa (vedeți, fiecare pictogramă se află pe propria tablă de artă):

Este timpul de numire!

Aceasta este partea în care vă numiți pictogramele.

Faceți clic pe elementul de meniu – Art Boards (Shift + O).

Așa câștigi controlul asupra tablourilor de artă.

Selectați oricare dintre ele și puteți modifica preferințele sale în partea de sus.

Singurul lucru pe care îl schimbăm aici este numele.

Accesați fiecare tablă de artă individual și redenumiți-le în conformitate cu pictograma din interior.

Salvarea icoanelor – Pixel Perfect

Poftim! Acum accesați Fișier > Salvare ca.

Introduceți un nume simplu și scurt, cum ar fi „1.svg”.

Continuați să vă citiți pentru a afla de ce.

Următorul pas este schimbarea tipului de fișier în SVG și verificarea opțiunilor Utilizare plăci de artă.

Este necesar să salvați toate tablele de artă separate.

Deoarece vă păstrați toate icoanele în diferite panouri de artă (nu-i așa?),

Le va exporta pe toate simultan.

Dacă doriți să exportați doar câteva, puteți verifica Range și introduceți numerele de tablă de artă pe care doriți să le exportați.

Alegeți unde doriți să fie salvate pictogramele dvs. și apăsați butonul Salvare.

Da, toate icoanele tale sunt exportate!

A mai rămas un lucru.

Fiecare pictogramă are acel „1-” în numele fișierului.

Dacă sunteți utilizator Mac, puteți selecta pictogramele, faceți clic dreapta, apoi alegeți „redenumiți toate” și înlocuiți „1-” cu un câmp gol.

Pentru cei care lucrează cu Windows, cred că ar trebui să existe un fel de redenumire a lotului.

Dacă nu, puteți repara pictogramele manual.

Cum se generează PNG-uri de toate dimensiunile? – Pixel Perfect

Doar glisați și fixați SVG-urile, iar aplicația le va converti la aproape fiecare rezoluție PNG posibilă.

Vă economisește cu adevărat o grămadă de timp.

Adevărat, site-ul are cu siguranță unele probleme, dar este cel mai bun pe care l-am putut găsi.

Deci, dacă totul a mers bine, acum ar trebui să aveți o grămadă de pictograme perfecte pe pixeli pe computer.

S-ar putea să doriți să utilizați aceste PNG-uri pentru a vă face fotografiile Dribbble! Dimensiunea mea personală a pictogramei pentru Dribbble este de 96x96px.

Și asta este tot cu pictogramele perfecte pentru pixeli!

Sper să vă fi plăcut și să vă stăpâniți abilitățile pe parcurs.

Perfecțiunea pixelilor necesită timp, dar merită în totalitate, nu crezi?