Sfat rapid Exportarea de pictograme utilizând felii în Adobe Illustrator

Ce veți crea

Astăzi vom examina diferitele modalități de a exporta icoane utilizând un instrument care este adesea temut, dar va duce productivitatea la un alt nivel odată ce îl stăpâniți. Acest instrument nu este altul decât Slice Tool, și crede-mă, dacă nu l-ați folosit niciodată înainte, veți dori să citiți acest articol, deoarece voi explica tot ce trebuie să știți despre asta atunci când vine vorba de exportul icoanelor.

Indiferent dacă alegeți să utilizați un pachet de pictograme premade sau să începeți de la zero, astăzi vă vom învăța câteva considerente-cheie pe care să vă gândiți când vă exportați activele prețioase.

Înainte de a obține tot tehnic, vreau să iau câteva secunde și să explice motivul pentru care a scris această piesă particulară.

Deci, într-un tutorial anterior, am vorbit despre folosire planșele de lucru și straturi ca metode pentru exportul icoanelor noastre prețioase, dar pentru a fi sincer, aceste metode vă pot încetini atunci când aveți un pachet mai mare. Ideea a fost că am vrut / a trebuit să prezint un proces potrivit pentru începători, care ar fi ușor de înțeles, presupunând că știa cum să folosească cele mai de bază instrumente Illustrator.

Acum, în timp ce aceste metode s-ar putea să nu fi fost cele mai bune dintre cele mai bune din punct de vedere al productivității, au fost destul de ușor de urmărit și aplicat, oferindu-vă exact același rezultat.

Deoarece unii dintre voi ați crezut că procesul a fost prea lent și dureros, am decis să vă joc și să vă arăt cel mai rapid mod de a exporta un pachet de pictograme, utilizând o metodă ușor mai avansată.

Ei bine, s-ar fi putut spune că am avansat, dar pentru a fi sincer, nu este atât de greu când joci cu ea de câteva ori.

Acestea fiind spuse, să ne întoarcem la subiectul nostru principal și să vorbim puțin despre felii și modul în care Illustrator le folosește.

1. Ce sunt "felii"?

Vă puteți gândi la o "felie" ca fiind o secțiune definită a unei lucrări de artă pe care o puteți crea pentru a exporta în mod individual, mai degrabă decât pentru a exporta toată piesa.

Inițial au fost create felii pentru designerii de web, dar, ca și în cazul majorității instrumentelor Illustrator, aceasta a găsit rapid o nouă utilizare: exportul icoanelor.

2. Cum functioneaza "felii"??

Este destul de simplu de fapt. Mai întâi, să ne gândim la Artboard ca fiind o bucată de hârtie pe care vă stabiliți opera de artă. Acum, când creați o "felie" de fapt, delimitați un segment de hârtie, creând o decupare pe care o puteți apoi să o eliminați liber din compoziția mai mare.

Îmi place să-mi imaginez că procesul este similar cu cel al preluării unui tăietor și al tăierii marginilor trasate ale acelui segment, separându-l de bucata de hârtie.

Cu fiecare felie creată, Illustrator atribuie un număr, începând de la colțul din stânga sus până la cel din dreapta jos. La inceput, nu s-ar pasa prea mult de aceasta actiune, dar in timp vei ajunge sa o apreciezi, din moment ce vei avea o mai buna intelegere a ceea ce se intampla cu opera ta de arta.

3. Cum creati "felii"?

Dacă nu ați creat niciodată o felie înainte, nu vă faceți griji pentru că este destul de ușor de făcut. Există trei moduri de a crea felii pe care ar trebui să le cunoașteți:

  • folosind obiectele selectate
  • folosind ghiduri
  • folosind Slice Tool

3.1. Crearea de secțiuni utilizând obiectele selectate

Această primă opțiune este foarte ușor de înțeles, deoarece vă permite să creați felii în jurul limitelor unuia sau mai multor obiecte.

Deci, să spunem că avem câteva icoane și vrem să scoatem prima.

Pentru a face acest lucru, vom selecta pictograma și apoi mergeți la Obiect> Slice> Make.

Aceasta va separa imediat acea pictogramă de restul prin crearea unei linii de delimitare în jurul acesteia.

Chiar dacă am creat o felie pentru o singură icoană, Illustrator a împărțit restul secțiunilor Artboard în felii mai mari, câte una pentru fiecare parte a feliei pictogramei. Avem una mare pentru partea superioară, una mai îngustă pentru partea stângă, una destul de largă pentru partea dreaptă și una mai îngustă pentru partea de jos.

Dacă vă uitați mai devreme la Artboard-ul dvs., s-ar putea să vedeți că aceste felii sunt numerotate, într-un mod destul de simplu, de la colțul din stânga sus până la cel din dreapta-jos. Illustratorul alocă numere în felii pentru a vă permite să selectați care dintre felii doriți să le exportați și care nu. Voi vorbi mai multe despre acest lucru în procesul de export.

Sfat rapid: După cum puteți vedea, limita fragmentului creat are o formă dreptunghiulară, deoarece Illustrator creează delimitarea privindu-l la lățimea și înălțimea totală a iconului, și nu la forma sa. Acest lucru este destul de ușor de înțeles, deoarece dacă ați fi proiectat o pagină web, ar fi destul de greu să vă descompuneți compoziția folosind mai multe linii organice și apoi puneți-o înapoi perfect.

Există câteva lucruri pe care ar trebui să le cunoașteți atunci când utilizați această metodă. Dacă deschideți Obiect> Slice meniu, veți vedea că aveți Face opțiunea pe care am utilizat-o anterior și a Creați din selecție unul cu câteva rânduri mai jos. În timp ce cei doi fac același lucru atunci când aveți un singur obiect selectat, se comportă cu totul diferit atunci când aveți mai multe obiecte selectate.

Diferența cheie dintre cele două este cea cu Face puteți crea secțiuni în jurul fiecăruia dintre obiectele selectate, în timp ce cu Creați din selecție , veți instrui Illustrator să creeze felii în jurul suprafeței totale a tuturor obiectelor selectate.

Acum, dacă ați crea un proiect Web (pagina web), Creați din selecție opțiunea ar fi total folositoare, dar dacă creați un pachet de pictograme, veți dori întotdeauna să mergeți Face deoarece veți dori să exportați individual fiecare dintre pictogramele dvs..

3.2. Crearea de secțiuni folosind ghiduri

În comparație cu metoda anterioară, Ghiduri unul este mai meticulos, deoarece procesul vă cere să adăugați manual ghidaje verticale și orizontale pe fiecare parte a secțiunii operei de artă pe care vreți să o delimitați.

Mai întâi trebuie să activați riglele apăsând Control-R (clic dreapta> Afișare rigle) și trageți apoi ghidajele și poziționați-le acolo unde doriți ca liniile de felie să cadă. Odată ce ați delimitat secțiunea utilizând ghidurile, puteți accesa Obiect> Slice> Creați din ghiduri pentru a crea felii reale.

Dacă vă uitați atent la modul în care Illustrator a adăugat numere la felii, veți vedea că, odată ce o secțiune este delimitată și atribuită, va forța celelalte să obțină următoarea valoare numerică, indiferent de mărimea pe care o au. De asemenea, este destul de interesant să vedem că feliile sunt create în jurul suprafeței delimitate a obiectelor și nu în intersecția ghizilor.

3.3. Crearea de secțiuni folosind Slice Tool

Această a treia metodă este probabil "câine de top" când vine vorba de precizie, deoarece vă permite să faceți clic și să trageți pentru a crea o selecție manuală de felie manuală de 100%. Pentru a fi sincer, vor exista situații când veți dori să aveți mai mult control asupra felii dvs., dar nu găsesc totul util atunci când vine vorba de a tăia un pachet mare de pictograme, deoarece ar dura mult timp să o faceți.

Dar, doar în cazul în care vreți să o utilizați, ar trebui să știți cum să faceți acest lucru. Mai întâi trebuie să o luați Slice Tool, care se află în mod implicit pe bara laterală stângă către secțiunea de jos, chiar deasupra Unealta de mana. Odată ce ați selectat instrumentul, puteți să vă poziționați asupra secțiunii operei dvs. de artă pe care doriți să o delimitați și apoi să faceți clic și să glisați ușor pentru a crea o selecție care va deveni automat o felie odată ce eliberați butonul mouse-ului.

În comparație cu o selecție obișnuită, Slice Tool vă permite să țineți apăsată tasta Spaţiu pentru a vă muta / repoziționa selecția, ceea ce este destul de util, deoarece uneori ați putea găsi că ați început pe un picior greșit.

Acum, lucrurile interesante cu privire la această metodă sunt faptul că felii sunt instantaneu create, fără a fi nevoie să treci la Obiect> Slice submeniul pentru a Face sau Crea o felie din A Selecţie.

Singurul său dezavantaj pe care mă pot gândi este că este posibil să nu aveți acuratețe de 100% până când nu porniți Previzualizarea pixelilor mod (Vizualizați> Previzualizarea pixelilor sau Alt-Control-Y), permițându-vă să creați selecții pixel-perfecte, care pentru designerii de astăzi este o necesitate.

4. Procesul de export

Deci până acum am vorbit despre cele trei metode diferite pe care le puteți utiliza pentru a crea felii. Acum este momentul să vedem ce metodă este cea mai bună atunci când vine vorba de a exporta pictogramele noastre prețioase.

4.1. Exportarea utilizând metoda obiectului (ele) selectat (e)

Să începem cu prima metodă. După cum vă amintiți, aceasta se bazează pe utilizarea unuia sau a mai multor obiecte pentru a crea felii.

Acum, să spunem că avem același pachet de pictograme ca și până acum, dar de data aceasta vrem să împărțim și să exportăm toate pictogramele compuse, nu doar una.

În mod normal, ați selecta toate activele apăsând Control-A și apoi du-te la Obiect> Slice> Make.

Atunci te-ai duce Fișier> Salvați pentru Web, alege PNG ca formatul dorit,setați-vă Export opțiunea pentru Secțiuni selectate și în cele din urmă lovit Salvați.

Lucrul este că, la început, ați putea crede că totul a mers bine, dar de îndată ce vă aruncați o privire la icoanele dvs. (mai exact dimensiunea lor), s-ar putea să găsiți că sa întâmplat ceva.

Asta pentru că chiar dacă ai folosit un obicei Grilă pentru a vă mări pictogramele, activele în sine ar putea să nu meargă la maximum în ceea ce privește lățimea și înălțimea și din moment ce ați folosit pictogramele ca obiecte selectate și nu grilele reale, aceasta nu ar trebui să fie o surpriză.

Trucul este de a folosi grilele reale în locul icoanelor și de a crea felii în jurul lor. În acest fel, icoanele dvs. exportate vor fi exact așa cum le doriți.

Acum, în cazul meu, de exemplu, folosesc a 48 x 48 px grilă, dar am o întindere 2 px padding adăugat. Să nu mai vorbim că icoanele mele sunt puțin mai scurte, având o înălțime de doar 40 px. Asta înseamnă că, dacă aș crea felii folosind icoanele și le-aș exporta, icoanele mele vor fi puțin mai mici (44 x 40 px), deoarece Illustrator a folosit Lăţime și Înălţime din activele mele în loc de grilele mele (48 x 48 px).

Acestea fiind spuse, ar trebui să aveți întotdeauna un al doilea strat cu doar grilele dvs. și să le utilizați pentru a crea felii pentru a vă exporta corect activele.

Acum, lucrurile interesante sunt că odată ce creați felii și mergeți la Fișier> Salvați pentru Web, Illustratorul vă oferă opțiunea de a selecta manual sau de a elimina pictogramele pe care le exportați. De exemplu, dacă decid că nu vreau să selectez ultima pictogramă, pot pur și simplu să trec peste ea și să fac un clic stânga o singură dată, Schimb, și, prin urmare, să o eliminăm din exportul meu final.

În mod implicit, dacă selectați toate pictogramele dvs. și apoi salvați-le, Illustrator va păstra toate feliile selectate. Puteți vedea dacă o felie este selectată prin examinarea delimitării acesteia. Dacă linia din jurul activului dvs. este roșu (cu excepția primei pictograme), atunci obiectul dvs. este adăugat la selecția finală; dacă este albastru și ușor decolorat atunci nu este (prima pictogramă).

Puteți deselecta părți din pachetul de icoane ținând apăsată tasta Schimb cheie și clic pe stânga pe ele. S-ar putea să te întrebi de ce folosim Schimb cheie. Aceasta deoarece, deoarece Illustrator are deja toate elementele selectate, trebuie să țineți apăsată tasta pentru a păstra restul elementelor selectate, altfel veți ajunge la o singură pictogramă activă.

Acum, pentru a fi sincer, nu văd de ce ați fi, de când ați terminat pachetul, sunt sigur că veți dori să exportați toate activele, nu doar câteva, dar am crezut că ar fi frumos să spun că afară.

De îndată ce ați lovit Salvați butonul Illustrator vă va cere o locație pentru stocarea fișierelor, oferindu-vă opțiunea de a vă numi activele. Această parte este puțin complicată, deoarece numele pe care îl alocați va fi transferat la toate icoanele, ceea ce ne-am dorit, dar activele în sine vor purta numărul de felii.

Puteți exporta fișierele și le puteți redenumi, sau o puteți face direct în interiorul Salvați pentru Web apăsați dublu clic pe fiecare selecție de pictograme și dându-i numele dorit.

Indiferent de metoda pe care o alegeți, va trebui totuși să vă faceți timp și să treceți prin toate pentru a le numi în mod corespunzător.

Acum, pentru a fi sincer, găsesc această opțiune a fi cea mai bună din cele trei, deoarece este super-rapidă și exportă numai icoanele dvs., astfel încât nu există felii goale Artboard care trebuie șterse ulterior.

4.2. Exportarea utilizând metoda ghidurilor

Ca și în cazul metodei anterioare, lucrurile sunt destul de simple. Mai întâi creați felii folosind ghidajele (Obiect> Slice> Creați din ghiduri), și apoi te duci la Fișier> Salvați pentru Web

Aici există câteva lucruri pe care ar trebui să le cunoașteți. Dacă părăsiți Export opțiunea setată la Secțiuni selectate așa cum am făcut pentru prima metodă, Illustrator va exporta icoanele dvs., dar va exporta și feliile goale între ele. Acum, dacă nu aveți un set mare, atunci puteți deselecta acele felii, dar dacă aveți ceva mai mare, atunci se poate dovedi a fi un proces foarte dureros.

Pe de altă parte, puteți să exportați pictogramele și apoi să ștergeți secțiunile nedorite, dar din nou ar putea să vă ducă ceva timp.

Acum, dacă luați în considerare faptul că trebuie să adăugați manual ghidajele pe fiecare parte a icoanelor dvs., este destul de evident că prima metodă este mai potrivită, deoarece este fără probleme și mult mai rapidă.

4.3. Exportarea utilizând metoda instrumentului Slice

Dacă credeți că metoda Guides a fost lentă și dureroasă, atunci aceasta va pune unghia finală în sicriu, deoarece vă va dura vârstele până la sfârșit.

Până acum probabil știți că trebuie să creați manual felii pentru fiecare din icoanele dvs. și apoi să mergeți direct la Fișier> Salvați pentru Web

Aici veți fi tentați să utilizați Exporturile de secțiuni selectate opțiune, dar în comparație cu celelalte două metode, aceasta va exporta doar ultima felie din placa dvs. Artboard. Asta înseamnă că trebuie să folosești Toate feliile care, desigur, va exporta toate feliile, indiferent dacă acestea sunt pline cu icoane sau doar spațiu gol.

În cele din urmă, trebuie să treceți prin întregul dosar și să ștergeți toate pictogramele inutile și să le redenumiți după cum doriți.

Așadar, recomand această metodă? Atunci de ce l-am menționat chiar? Ei bine, îmi place să fiu cât mai explicit posibil atunci când vorbesc despre astfel de instrumente și metode.

Concluzie

Deci, în acest moment, sper într-adevăr că știți ce feluri de felii sunt, și mai important cum sunt făcute, astfel încât să puteți profita de acest instrument și să faceți procesul de a vă exporta icoanele rapid și fără durere.

Acum, de obicei, am tendința să las decizia până la tine, dar de data aceasta, va trebui să fiu dur și să-ți spun să mergi cu prima metodă, obiectul (obiectele) unul, deoarece e destul de evident că este singurul mod de a merge.

Acestea fiind spuse, aș dori să vă mulțumesc pentru timpul și atenția acordată și, ca întotdeauna, vă voi vorbi data viitoare.