Share
În ultimul timp, am fost mult mai tehnic și am început să explorez soluții la diferite provocări pe care le-ați putea întâlni de-a lungul călătoriei tale creative. O provocare deosebită pe care o vom discuta astăzi este cea a scalării icoanelor, care se pot dovedi a fi un proces dificil pentru o mulțime de oameni.
Luați în considerare faptul că atunci când spun icoane, vorbesc de fapt despre cele create utilizând un flux de lucru pixel-perfect, deoarece acestea sunt cele mai sensibile când vine vorba de procesul de redimensionare.
Acum, înainte de a intra în procesul actual, voi lua câteva momente și voi vorbi despre niște noțiuni legate de icoane pe care ar trebui să le luăm în considerare atunci când este vorba de redimensionarea icoanelor noastre prețioase.
Indiferent dacă vă scalați propriile icoane sau icoane achiziționate de la Envato Market, procesul ar trebui să fie destul de ușor de înțeles și de utilizat după citirea acestui tutorial rapid.
Atunci când creați un pachet de pictograme, este foarte important să începeți prin a lua decizia corectă în ceea ce privește alegerea dimensiunii de bază. Dimensiunea de bază este cea mai mică dimensiune pe care o veți crea și apoi o veți utiliza pentru a produce toate celelalte variante de mărime din pachetul dvs..
Dincolo de aceasta, mărimea de bază va acționa și ca grilă personalizată, pe care o veți folosi pentru a crea un pachet de icoane coeziv, deoarece vă va permite să vă creați elementele într-o suprafață delimitată.
Acestea fiind spuse, există câteva lucruri pe care ar trebui să le faceți pentru a obține dimensiunea de bază corectă.
Vă recomandăm ca înainte de a începe să faceți ceva, mai întâi trebuie să luați câteva minute și să vă gândiți la câte dimensiuni doriți sau trebuie să livrați pachetul de pictograme. Voi creați două dimensiuni, trei, cinci? Încercați întotdeauna să gândiți înainte și să vă planificați pașii, astfel încât procesul să poată fi cât se poate de lămurit și de viitor.
Credeți-mă, este mult mai ușor să vă stabiliți variațiile de la început decât să vă terminați proiectul și apoi să vă dați seama că este posibil să aveți nevoie să adăugați o dimensiune suplimentară, ceea ce, după cum veți vedea mai târziu, ar putea pune probleme.
Odată ce aveți o viziune clară în ceea ce privește numărul de mărimi pe care proiectul va avea nevoie, luați cea mai mică variantă dintre acestea și folosiți-le ca dimensiune de bază. De exemplu, dacă doriți să creați trei variante de mărime pentru pictograma dvs., spuneți 32 x 32 px, 64 x 64 px și 128 x 128 px, veți dori să setați grila de bază utilizând cea mai mică dimensiune, care este în acest caz 32 x 32 px.
Ar putea părea ciudat, dar dacă creați utilizând un flux de lucru pixel-perfect, veți dori întotdeauna să începeți cu cea mai mică dimensiune posibilă, deoarece procesul de redimensionare este conectat profund la valorile de lățime și înălțime ale elementelor de compoziție ale pictogramei. Voi elabora mai multe despre aceasta în următoarele secțiuni.
Valorile de lățime și înălțime ale icoanelor dvs. sunt foarte importante, deoarece acestea sunt direct legate de modul în care icoanele se comportă odată ce începeți să le redimensionați. Există câteva lucruri pe care trebuie să le țineți cont atunci când începeți procesul de construcție reală.
Dacă nu ați acordat niciodată o atenție la Valorile înălțime și înălțime ale secțiunilor de compunere ale pictogramelor dvs., acum ar fi momentul potrivit pentru a schimba acest lucru, deoarece numerele joacă un rol esențial atunci când vine vorba de crearea și redimensionarea icoanelor.
Motivul pentru aceasta este destul de simplu: icoanele sunt forme digitale de artă care, de obicei, ajung să fie afișate pe ecrane digitale, care, după cum știți, se bazează pe pixeli pentru a reproduce orice tip de imagini. Aceasta înseamnă că tot ceea ce creați trebuie să ocupe un anumit număr de pixeli de pe grila monitorului, pentru ca opera de artă să fie cât mai clară posibil.
Acum, nu voi trece procesul de creare a operei de desen pixel, deoarece am deja un articol care atinge acest subiect, dar voi vorbi puțin despre felul în care se comportă numerele odată ce vă redimensionați icoanele și voi faceți asta, oferindu-vă un exemplu de bază.
Deci, să spunem că avem a 32 x 32 px grilă de bază, pe care am creat-o 29,49 x 29,45 px dreptunghi (evidențiat cu roșu) prin tragerea pur și simplu folosind Instrumentul dreptunghiului, care ar fi prima secțiune a unei pictograme teoretice. Așa cum probabil ați ghicit deja unii dintre voi, forma însăși nu ocupă în totalitate pixelii de pe grila de bază, ceea ce înseamnă că, dacă l-am redimensiona, lucrurile s-ar schimba.
Nu mă credeți? Ei bine, să selectăm forma și să o redimensionăm folosind Scară instrument prin dublarea suprafeței sale folosind o 200% valoare incrementală.
După cum puteți vedea, forma rezultată are acum o Lăţime de 58,98 x 58,9 px ceea ce înseamnă că aplicația Illustrator trebuie să aplice un efect antialiasing pentru a adăuga canale alfa pixelilor care nu sunt pe deplin ocupați de suprafața dreptunghiului, ceea ce va duce în final la claritatea formei.
Dacă nu creați în minte cu perfecțiunea pixelilor, care ar putea să nu reprezinte o problemă, dar pentru toți noi, pixelii de acolo sunt ceva care trebuie fixat, deoarece va crea doar noi probleme de-a lungul drumului.
Soluția este foarte simplă: trebuie doar să selectați forma și apoi să o forțați să se fixeze corect în grila pixelilor, permițând Aliniați la Gridul Pixel opțiune găsită în cadrul Transforma panou.
Apoi, trebuie să vă asigurați că fiecare mică secțiune de pictograme pe care o creați în continuare folosește valori numerice rotunde. Pentru aceasta, poate doriți să utilizați Fixat la retea opțiune găsită în cadrul Vedere meniu, în combinație cu Previzualizarea pixelilor mod, care ar trebui să vă dea un control total asupra dimensiunii obiectelor dvs..
Acest principiu este profund legat de grila de dimensiuni de bază a pictogramei cu care alegeți să lucrați. Dacă vă amintiți, câteva momente în urmă v-am spus că trebuie să încercați întotdeauna să găsiți cea mai mică dimensiune pe care o veți avea nevoie pentru icoanele voastre și să construiți variațiile mai mari folosind ca bloc constructiv.
În acest fel, vă veți asigura întotdeauna că icoanele dvs. sunt "anatomice corecte", deoarece opera dvs. de artă va fi scalată corect fără a fi supusă unor deformări.
Acum, după cum știți, numerele par și impare cresc corect, deoarece, atunci când se dublează, numerele impare devin mereu chiar și altele. Problema cu utilizarea unor valori impare de numere apare atunci când vă confruntați cu diminuarea activelor, deoarece tăierea lor în jumătate va duce întotdeauna la valori zecimale, ceea ce va rupe inevitabil designul.
Dacă ați făcut cercetarea și ați ales grila de bază corectă, aceasta nu ar trebui să reprezinte o problemă, dar dacă dintr-un motiv oarecare trebuie să adăugați o variație de dimensiune mai mică, atunci va trebui să o scalați și apoi să ajustați diferite secțiuni după cum este necesar.
Deci, până acum am vorbit despre câteva noțiuni de pre-scalare pe care trebuie să le țineți minte de fiecare dată când începeți să creați variații de mărime pentru pictogramele dvs..
În această secțiune o să vă conduc prin procesul real de redimensionare corectă a icoanelor folosind Scară dar mai întâi vreau să vorbesc despre o metodă particulară folosită pe scară largă, dar în opinia mea ar trebui evitată.
În ultima vreme, am observat că o mulțime de oameni, unii dintre colegii mei inclusi, tind să-și redimensioneze pictogramele folosind metoda de selectare și tragere.
Permiteți-mi să fiu simplu și clar: să nu redimensionați niciodată o pictogramă prin selectarea și tragerea unei laturi sau colțuri. Asta va mereu rupeți pictograma dacă ați creat-o folosind o fundație pixel-perfectă, deoarece formele dvs. se vor desprinde de grila pixelilor, datorită faptului că valorile lor vor ajunge la cele zecimale, care nu vor putea ocupa corect grila de bază.
Motivul este foarte simplu: atunci când trageți, Illustrator trebuie să extinde suprafața operelor dvs. de artă, adăugând pixeli la total Lăţime și Înălţime de forme, căi și chiar spațiile goale. Dar nu poate face întotdeauna acest lucru întotdeauna, deoarece unele obiecte ar putea să scadă perfect, în timp ce altele se sparg datorită procesului de întindere și adăugare de pixeli.
Deoarece îmi place să predau prin exemplu, să spunem că avem o mică pictogramă care a fost creată utilizând a 48 x 48 px bază de rețea, cu un all-around 2 px umplutură. Pictograma a fost construită utilizând un flux de lucru pixel-perfect, având fiecare formă perfect conectată la grila pixelilor subiacente, dar folosește atât valori impare, cât și valori numerice parțiale pe elementele sale de compunere.
Acum, hai să pornim Previzualizarea pixelilor mod (Vizualizați> Previzualizarea pixelilor sau Alt-Control-Y) și să selectăm colțul din dreapta jos al casetei de delimitare a pictogramei și să o tragem în diagonală spre exterior prin 2 px.
După cum puteți vedea, unele forme (liniile de text, rama ferestrei interioare, linia de delimitare a ferestrei inferioare etc.) au reușit să scadă fără să cadă din rețea, în timp ce altele nu au făcut totul bine (fereastra circulară butoanele, conturul pictogramei, bara de derulare etc.).
Asta pentru că în timpul procesului de tragere, Illustrator a încercat să adauge acest lucru 2 px valoare pentru fiecare dintre obiectele selectate, dar datorită dispunerii și spațiului dintre fiecare formă, nu a reușit să țină pasul. Acest lucru a dus la forme care au înregistrat o creștere atât a lățimii cât și a înălțimii, altele doar în lățime (liniile de text), în timp ce altele nu au crescut deloc (linia verticală de sub delimitatorul orizontal inferior).
Acum, trebuie să ținem cont de faptul că am trecut prin procesul de redimensionare Previzualizarea pixelilor modul de activare, care ne-a permis să vedem și să aplicăm o creștere precisă a valorii numărului. Dacă am fi repetat același proces, dar de data aceasta în modul normal de previzualizare, după cum puteți vedea rezultatele ar fi destul de dureros de urmărit.
Deoarece în acest moment sper că mi-am clarificat cazul, hai să mergem mai departe și să examinăm mai atent modul corect de redimensionare a unei pictograme utilizând puternicul Scară instrument.
Deci, redimensionați icoanele pe care le doriți, tinerii Jedi. După ce ați terminat de citit această secțiune mică, veți fi un maestru al acesteia.
Trebuie să fiu sincer: când am început să fac icoane, practic făceam ochelari cu ochi, pentru că nu știam prea multe despre diferitele aspecte ale procesului, în special despre partea de redimensionare. Întotdeauna am făcut o treabă bună în crearea lotului de primă mărime, dar când a venit la redimensionarea lor, să spunem că lucrurile încep să devină frustrant, deoarece majoritatea s-ar destrăma.
Ei bine, după cum probabil ați ghicit, asta însemna că trebuia să le rezolv manual, ceea ce a dus în cele din urmă la un proces destul de consumator de timp, care a sufocat toată energia din mine. Din fericire îmi place să învăț din greșelile mele, așa că am început să explorez și nu a trecut mult până am aflat că soluția se afla chiar în fața mea: atotputernicul Scară instrument.
Dacă nu ați folosit niciodată instrumentul înainte, nu vă faceți griji din moment ce este vorba de utilizarea acestuia Scară instrument, lucrurile sunt destul de simple.
Mai întâi trebuie să selectăm obiectul sau grupul de obiecte pe care vrem să redimensionăm și apoi Click dreapta și du-te la Transformați> Scala.
Illustratorul va aduce o mică fereastră cu o grămadă de opțiuni.
După cum puteți vedea din exemplul de mai sus, suntem întâmpinați cu două metode diferite de scalare.
Primul este Uniformă care, așa cum sugerează și numele, vă va schimba atât forma Orizontal și Vertical, ceea ce înseamnă că va adăuga pixeli la ambele Lăţime și Înălţime de selecție.
Al doilea este Non-Uniform, care vă permite să vă scară individualobiecte Lăţime și Înălţime folosind valori diferite sau chiar scala doar unul din cele două. Nu aș folosi această opțiune când redimensionez o pictogramă, dar s-ar putea dovedi a fi utilă în situațiile în care doriți să ajustați rapid Lăţime sau Înălţime a unui obiect folosind procente simple.
Așa că am vorbit despre cele două opțiuni diferite disponibile în cadrul instrumentului, dar magia reală se întâmplă numai atunci când știi care sunt procentele care se aplică obiectelor tale.
Așa cum am menționat deja, Scară instrumentul este un aliat cu adevărat puternic, dar numai atunci când știi exact cum să-l folosești, deoarece nu toate valorile procentuale vor avea ca rezultat o imagine ireproșabilă. Crede-mă, am învățat pe unul așa de greu.
Motivul pentru aceasta are de a face cu Lăţime și Înălţime valorile elementelor compoziției pictogramei. Da, am revenit la asta din nou. Așa cum am subliniat deja, numerele impare se comportă diferit decât chiar și când s-au dublat. Același lucru este valabil când le multiplicați cu valori zecimale, cum ar fi 1,5.
Acest lucru este important deoarece, atunci când avem de-a face cu redimensionarea, va trebui să alegem procentele corecte în funcție de valorile pe care le au formele noastre, deoarece procentele sunt de fapt multiplicatori. Nu mă credeți? Să ne gândim puțin la modul în care Illustrator le folosește din punct de vedere matematic.
Așa cum știi cu toții, 100% este 100 împărțit la 100 care ne dă 1. Illustrator folosește această valoare și o multiplică cu Lăţime și Înălţime valorile fiecărei forme selectate. Acum, deoarece dacă multiplicați 1 cu nimic (dar 0) obțineți în continuare același număr, acesta nu este cel mai bun exemplu.
Dar, dacă ne uităm la o valoare cum ar fi 200% care este de 200 împărțit la 100, obținem a 2x coeficient, care va dubla numãrul pixelilor oricãrui obiect selectat.
Pe de altă parte, dacă ar trebui să redimensionăm o icoană folosind a 50% valoare, care este de 50 împărțit la 100, deci a 0.5x multiplicator, care vor reduce dimensiunile obiectului selectat la jumătate.
Acum trucul este să știi ce multiplicatori să folosești atunci când se ocupă cu icoane care au doar valori numerice chiar și cele care au atât cele paralele, cât și cele ciudate.
Dacă avem o pictogramă care a fost construită doar cu numere uniforme, atunci puteți aplica orice procentaj atâta timp cât este 100% incrementează de la valoarea implicită 100% valoare. Deci, multiplicatori, cum ar fi 200%, 300%, 400%¸ 500%, 600%... obțineți punctul. Acest lucru se datorează faptului că chiar și numerele (2, 4, 6, 8) transformă întotdeauna acești pași multiplicatori în valori egale (2 x 2 = 4, 2 x 3 = 6, 2 x 4 = 8, 2 x 5 = 12, etc.).
De asemenea, puteți utiliza multiplicatori, cum ar fi 150%, 250%¸ 350%, 450%, etc, dar trebuie să le limitați utilizarea doar o singură dată, deoarece altfel aceste valori vor transforma un număr par într-unul ciudat.
Pentru a înțelege de ce, să spunem că avem a 20 x 20 px pătrat.
Vrem să-l extindem cu ajutorul a 150% coeficient.
Dacă o vom folosi o dată, vom obține o formă care este 30 x 30 px.
Utilizați-l de două ori și apoi veți termina cu a 45 x 45 px unu.
Dacă ar fi să folosim a 300% în loc de multiplicator, atunci forma rezultată ar fi 60 x 60 px.
Dacă vă întrebați de ce, bine, asta pentru că 20 x 1,5 = 30 care sa multiplicat din nou cu 150% (1,5) este 45. In timp ce 150% + 150% = 300%Rezultatele utilizării aceluiași multiplicator de două ori comparativ cu valoarea adăugată a acestuia sunt destul de diferite, deoarece 20 x 3 = 60.
Un alt lucru care trebuie păstrat în minte este acela că unele numere pare să devină ciudate, chiar dacă aplicați multiplicatorii o singură dată, de ex. 2 x 1,5 = 3; 6 x 1,5 = 9; 2 x 2,5 = 5; 6 x 2,5 = 15; în timp ce 4 x 1,5 = 6; 8 x 1,5 = 12; 4 x 2,5 = 10; 8 x 2,5 = 20; etc.
În funcție de complexitatea icoanelor, poate doriți să încercați acest tip de multiplicatori, dar trebuie să verificați întotdeauna dacă lucrurile au fost redimensionate așa cum ați vrut să le.
Acum, când vine vorba de icoane care au atît par și ciudat Lăţime și Înălţime valori, ar trebui să utilizați întotdeauna 200% pas increments, deci valori cum ar fi 200%, 400%, 600%, 800%, etc, deoarece în acest fel icoanele dvs. vor fi redimensionate exact așa cum doriți.
Nu folosiți niciodată 50% multiplicator, deoarece aceasta va sparge orice pixel-pictograma perfectă, deoarece tăierea numerelor impare în jumătate va duce la valori zecimale, care vor rupe de pe grilă pixel.
Acum, când am văzut care multiplicatori funcționează cel mai bine în funcție de scenariul de caz, să luăm un exemplu rapid și să vedem procesul de redimensionare a unei pictograme de la început până la sfârșit.
Așadar, avem aceeași icoană pe care am folosit-o ca exemplu acum câteva minute, ceea ce, după cum știți, are atât valori ciudate, cât și valide, în toate formele compuse. Asta înseamnă că putem folosi doar 200% incrementări incrementale atunci când decideți cu privire la valoarea multiplicatorului, dar asta este absolut bine, deoarece pentru acest exemplu vom dori să dublem dimensiunea activului nostru de la 48 x 48 px la 96 x 96 px.
Pentru a face acest lucru, voi alege pur și simplu pictograma mea și apoi Click dreapta și du-te la Transformați> Scala. Într-o chestiune de secunde, sunt întâmpinat cu micuțul Scară instrument fereastra pop-up în cazul în care am alege să meargă cu Uniformă și intră 200 în câmpul de valoare, care în mod prestabilit este setat la 100%.
De îndată ce fac clic pe O.K , Illustrator va face matematica și va redimensiona pictograma prin dublarea numărului de pixeli, păstrând totul perfect Pixel Grid.
Este la fel de simplu ca asta.
Sfat rapid: chiar dacă Illustrator are de obicei Scări dreptunghiulare colțuri și Scale Strokes & Efecte opțiunile verificate, trebuie să le verificați întotdeauna pentru a vă asigura că lucrurile merg bine.
Așa cum probabil ați văzut până acum Scară instrumentul este o opțiune foarte valoroasă când vine vorba de redimensionarea icoanelor. Dacă știți cum și când să utilizați multiplicatorii, ar trebui să puteți crea rapid variații de mărime pentru pachetul dvs. de pictograme.
Dar, există o mică limitare atunci când vine vorba de crearea acelor variante de dimensiuni pe care ar trebui să le cunoașteți, mai ales dacă doriți să creați pictograme cu creșteri de mărime mică (de ex. 16 x 16 px, 24 x 24 px, 32 x 32 px; 48 x 48 px, 64 x 64 px, 72 x 72 pixeli, 96 x 96 pixeli, 128 x 128 pixeli etc.).
Lucrul este că, pentru a obține acea variație de dimensiuni mici (de ex. 24 x 24 px, 48 x 48 px, 72 x 72 px, 96 x 96 px), va trebui să utilizați 150% multiplicator (de la 16 x 1,5 = 24; 32 x 1,5 = 48; 48 x 1,5 = 72; 64 x 1,5 = 96; etc.), care, după cum știți, ar putea cauza probleme, mai ales când aveți valori impare în compunerea pictogramei forme.
Asta înseamnă că va trebui probabil să reglați niște forme aici și acolo pentru a obține coerența icoanelor. Acest lucru nu ar putea fi prea greu atunci când se ocupă de un mic pachet de icoane, dar dacă lucrați la ceva mai mare decât atunci când sunteți într-o perioadă lungă.
O modalitate bună de a face acest lucru ar fi crearea primului 150% (de exemplu, 24 x 24 px), ajustați-o acolo unde este necesar și apoi utilizați-o 200% pași pentru a obține restul atunci când puteți (48 x 48 px, 96 x 96 px).
În funcție de nevoile dvs. de proiect, este posibil să aveți nevoie să faceți o pictură cu icoanele dvs. și să căutați soluția potrivită pentru dvs., dar nu este ceea ce face în primul rând un designer, rezolva probleme?
Deci, aveți o prezentare în profunzime a modului în care ar trebui să faceți o redimensionare a unei pictograme utilizând o metodă destul de simplă. Ca întotdeauna, încercați să jucați cu instrumentul după ce ați citit acest tutorial și sunt sigur că veți fi încurcați în cel mai scurt timp.
Accentsconagua