Share
Ultimamente sono diventato molto più tecnico e ho iniziato ad esplorare le soluzioni alle diverse sfide che potresti incontrare durante il tuo viaggio creativo. Una sfida particolare di cui discuteremo oggi è quella del ridimensionamento delle icone, che può rivelarsi un processo difficile per molte persone.
Prendi in considerazione il fatto che quando dico icone, in realtà sto parlando di quelli creati utilizzando un flusso di lavoro pixel-perfetto, poiché questi sono i più sensibili quando si tratta del processo di ridimensionamento.
Ora, prima di entrare nel processo attuale, prenderò un paio di momenti e parlerò di alcune nozioni relative alle icone che dovremmo considerare quando si tratta di ridimensionare le nostre preziose icone.
Sia che tu stia ridimensionando le tue icone o icone acquistate da Envato Market, il processo dovrebbe essere abbastanza facile da comprendere e utilizzare dopo aver letto questo breve tutorial.
Quando crei un pacchetto di icone, è molto importante iniziare prendendo la decisione giusta quando si tratta di scegliere la dimensione di base. La dimensione di base è la dimensione più piccola che creerai e quindi userai per produrre tutte le altre variazioni di dimensione nel tuo pacco.
Oltre a ciò, le dimensioni della base fungeranno anche da griglia personalizzata, che verrà utilizzata per creare un pacchetto di icone coesivo, poiché ti consentirà di creare i tuoi elementi all'interno di una superficie delimitata.
Detto questo, ci sono un paio di cose che dovresti fare per ottenere la dimensione base giusta.
Prima di iniziare a fare qualsiasi cosa, ti consiglio di prendere un paio di minuti e di pensare a quante dimensioni vuoi o devi consegnare il pacchetto di icone. Creerai due formati, tre, cinque? Cerca sempre di pensare al futuro e pianifica i tuoi passaggi in modo che il processo possa essere il più fluido e lungimirante possibile.
Credimi, è molto più facile stabilire le tue variazioni dall'inizio che finire il tuo progetto e poi rendersi conto che potrebbe essere necessario aggiungere una dimensione extra, che come vedrai in seguito, potrebbe porre qualche problema.
Una volta che hai una visione chiara riguardo al numero di dimensioni che il progetto richiederà, prendi la più piccola variazione di tutte e usale come dimensione base. Ad esempio, se vuoi creare tre variazioni di dimensioni per l'icona, ad esempio 32 x 32 px, 64 x 64 px e 128 x 128 px, ti consigliamo di impostare la griglia di base utilizzando la dimensione più piccola, che in questo caso è 32 x 32 px.
Potrebbe sembrare strano, ma se stai creando un flusso di lavoro perfetto per i pixel, vorrai sempre partire dalla dimensione più piccola possibile, poiché il processo di ridimensionamento è profondamente connesso ai valori di larghezza e altezza degli elementi di composizione dell'icona. Approfondirò su questo argomento nelle sezioni seguenti.
I valori di Larghezza e Altezza delle tue icone sono molto importanti in quanto sono direttamente collegati al modo in cui le icone si comportano quando si inizia a ridimensionarle. Ci sono un paio di cose che dovresti prendere in considerazione quando inizi il processo di costruzione reale.
Se non hai mai prestato attenzione ai valori di larghezza e altezza delle sezioni di composizione dell'icona prima, ora sarebbe il momento giusto per cambiarlo, dal momento che i numeri svolgono un ruolo essenziale quando si tratta di creare e ridimensionare le tue icone.
La ragione è piuttosto semplice: le icone sono forme digitali di opere d'arte che di solito finiscono per essere visualizzate su schermi digitali, che come sapete si basano su pixel per riprodurre qualsiasi tipo di immagine. Ciò significa che tutto ciò che crei deve occupare un numero specifico di pixel dalla griglia del monitor, in modo che l'opera d'arte sia il più nitida possibile.
Ora, non vado oltre il processo di creazione di opere d'arte pixel-perfect, dal momento che ho già un articolo che tocca quell'argomento, ma parlerò un po 'del modo in cui i numeri si comportano una volta ridimensionate le icone, e io fallo dando un esempio di base.
Quindi diciamo che abbiamo un 32 x 32 px griglia di base, sulla quale abbiamo creato a 29,49 x 29,45 px rettangolo (evidenziato in rosso) semplicemente trascinando usando il Strumento rettangolo, quale sarebbe la prima sezione di un'icona teorica. Come alcuni di voi probabilmente hanno già indovinato, la forma stessa non sta occupando completamente i pixel dalla griglia sottostante, il che significa che se dovessimo ridimensionarlo, le cose andrebbero in tilt.
Non mi credi? Bene, selezioniamo la forma e ridimensionala usando il Scala strumento raddoppiando la sua superficie usando a 200% incrementare il valore.
Come puoi vedere, la forma risultante ora ha a Larghezza di 58,98 x 58,9 px il che significa che Illustrator deve applicare un effetto antialiasing per aggiungere canali alfa ai pixel che non sono completamente occupati dalla superficie del rettangolo, che alla fine toglierà la nitidezza della forma.
Se non stai creando con la perfezione del pixel in mente che potrebbe non rappresentare un problema, ma per tutti noi drogati di pixel là fuori c'è qualcosa che deve essere risolto, dal momento che creerà solo nuovi problemi lungo la strada.
La soluzione è davvero semplice: devi solo selezionare la forma e quindi forzarla a scattare correttamente sulla griglia dei pixel abilitando il Allinea a Pixel Grid opzione trovata sotto Trasformare pannello.
Quindi devi solo assicurarti che ogni piccola sezione di icone che crei successivamente utilizzi valori numerici arrotondati. Per quello, potresti voler usare il Aggancia alla griglia opzione trovata sotto vista menu, in combinazione con il Anteprima pixel modalità, che dovrebbe darti il controllo totale sulla dimensione dei tuoi oggetti.
Questo principio è strettamente correlato alla griglia delle dimensioni di base dell'icona con cui hai scelto di lavorare. Se ricordi, un paio di minuti fa ti ho detto che dovresti sempre cercare di capire la dimensione più piccola che ti servirà per le tue icone, e costruire le variazioni più grandi usando quella come un blocco predefinito.
In tal modo, farai sempre in modo che le tue icone siano "anatomicamente corrette", dal momento che le tue illustrazioni si scaleranno correttamente senza subire alcuna deformazione.
Ora, come sapete, entrambi i numeri pari e dispari scalano correttamente poiché, quando raddoppiati, i numeri dispari diventano sempre pari. Il problema con l'utilizzo di valori di numero dispari si verifica quando si è di fronte a ridimensionare le risorse, poiché tagliandole a metà produrranno sempre valori decimali, che inevitabilmente interromperanno il vostro progetto.
Se hai fatto la tua ricerca e hai scelto la griglia di base giusta, questo non dovrebbe rappresentare un problema, ma se per qualche motivo hai bisogno di aggiungere una variazione di dimensioni più piccole, dovrai semplicemente ridimensionarla e quindi regolare la diverse sezioni secondo necessità.
Quindi, fino a questo punto abbiamo parlato di un paio di nozioni di pre-ridimensionamento che dovresti tenere a mente ogni volta che inizi a creare variazioni di dimensioni per le tue icone.
In questa sezione ti illustrerò il processo effettivo di ridimensionamento corretto delle icone mediante il comando Scala strumento, ma prima voglio parlare brevemente di un metodo particolare che è ampiamente usato ma a mio avviso dovrebbe essere evitato.
Ultimamente, ho notato che molte persone, alcuni dei miei colleghi inclusi, tendono a ridimensionare le loro icone usando il metodo di selezione e trascinamento.
Lascia che sia semplice e chiaro: mai, mai ridimensionare un'icona selezionando e trascinando uno dei lati o degli angoli. Questo sarà sempre rompere la tua icona se l'hai creata usando una base pixel-perfect, dal momento che le tue forme si staccano dalla griglia dei pixel, perché i loro valori numerici finiranno per essere decimali, che non saranno in grado di occupare correttamente la griglia sottostante.
Il motivo è piuttosto semplice: quando si trascina, Illustrator deve espandere la superficie del disegno, aggiungendo pixel al totale Larghezza e Altezza delle tue forme, percorsi e anche gli spazi vuoti. Ma non può sempre farlo correttamente, dal momento che alcuni oggetti potrebbero scalare perfettamente, mentre altri si rompono a causa del processo di allungamento e aggiunta di pixel.
Dato che mi piace insegnare con l'esempio, diciamo che abbiamo una piccola icona creata usando a 48 x 48 px griglia di base, con un tuttofare 2 px imbottitura. L'icona è stata creata utilizzando un flusso di lavoro pixel-perfetto, con ogni forma perfettamente sincronizzata alla griglia di pixel sottostante, ma utilizza valori di numeri pari e dispari in tutti gli elementi di composizione.
Ora, accendiamo il Anteprima pixel modalità (Visualizza> Anteprima pixel o Alt-Control-Y) e selezioniamo l'angolo in basso a destra del rettangolo di selezione dell'icona, e trascinalo diagonalmente verso l'esterno di 2 px.
Come puoi vedere, alcune delle forme (le linee di testo, la cornice interna della finestra, la linea di delimitazione della finestra inferiore, ecc.) Sono effettivamente riuscite a scalare senza cadere dalla griglia, mentre altre non hanno fatto altrettanto bene (la finestra circolare pulsanti, il contorno dell'icona, la barra di scorrimento, ecc.).
Questo perché durante il processo di trascinamento, Illustrator ha provato ad aggiungerlo 2 px valore per ciascuno degli oggetti selezionati, ma a causa della disposizione e dello spazio tra ogni forma, non è riuscito a tenere il passo. Ne sono risultate forme che hanno visto un aumento sia in larghezza che in altezza, altre solo nella larghezza (le linee di testo) mentre altre non sono state affatto aumentate (la linea verticale sotto il delimitatore orizzontale inferiore).
Ora la cosa da tenere a mente è che in realtà abbiamo passato il processo di ridimensionamento con Anteprima pixel modalità on, che ci ha permesso di vedere e applicare un incremento del valore numerico preciso. Se dovessimo ripetere lo stesso processo ma questa volta nella normale modalità di anteprima, come puoi vedere i risultati sarebbe piuttosto doloroso da guardare.
Visto che a questo punto spero di aver risolto il mio caso, passiamo oltre e diamo un'occhiata più da vicino al modo corretto di ridimensionare un'icona usando il potente Scala strumento.
Quindi ridimensiona le icone che vuoi, giovane Jedi. Bene, dopo aver finito di leggere questa piccola sezione, sarai un maestro in questo.
Devo essere sincero: quando ho iniziato a creare icone, fondamentalmente lo facevo con gli occhi bendati, poiché non conoscevo molto i diversi aspetti del processo, specialmente la parte di ridimensionamento. Ho sempre fatto un buon lavoro nel creare il primo lotto di dimensioni, ma quando si è trattato di ridimensionarli, diciamo che le cose hanno iniziato a diventare frustranti poiché la maggior parte di loro sarebbe caduta a pezzi.
Beh, come probabilmente avete indovinato, questo significava che dovevo sistemarli manualmente, il che alla fine ha portato a un processo piuttosto lungo che ha assorbito tutte le energie. Per fortuna mi piace imparare dai miei errori, così ho iniziato ad esplorare e non passò molto tempo fino a quando ho scoperto che la soluzione era proprio di fronte a me: l'onnipotente Scala strumento.
Se non hai mai usato lo strumento prima, non preoccuparti da quando si tratta di utilizzare il Scala strumento, le cose sono abbastanza semplici.
Per prima cosa dobbiamo selezionare l'oggetto o il gruppo di oggetti che vogliamo ridimensionare, e poi tasto destro e vai a Trasforma> Scala.
Illustrator aprirà una piccola finestra con un sacco di opzioni.
Come puoi vedere dall'esempio precedente, siamo accolti con due diversi metodi di ridimensionamento.
Il primo è Uniforme che, come suggerisce il nome, scalerà entrambe le forme Orizzontalmente e Verticalmente, il che significa che aggiungerà pixel a entrambi Larghezza e Altezza della tua selezione.
Il secondo è Non-Uniform, che ti permette di scalare individualmente il tuooggetto di Larghezza e Altezza utilizzando valori diversi, o addirittura scalare solo uno dei due. Ora, non userei questa particolare opzione quando ridimensiono un'icona, ma potrebbe rivelarsi utile in situazioni in cui si desidera regolare rapidamente Larghezza o Altezza di un oggetto usando percentuali semplici.
Quindi abbiamo parlato delle due diverse opzioni disponibili all'interno dello strumento, ma la vera magia accade solo quando sai quali percentuali applicare ai tuoi oggetti.
Come ho già detto, il Scala lo strumento è un alleato molto potente, ma solo quando sai esattamente come usarlo, dal momento che non tutti i valori percentuali si tradurranno in un'icona dall'aspetto nitido. Credimi, ho imparato questo nel modo più duro.
La ragione di ciò ha a che fare con il Larghezza e Altezza valori degli elementi di composizione dell'icona. Sì, siamo di nuovo a quello. Come ho già sottolineato, i numeri dispari si comportano in modo diverso rispetto a quelli pari quando raddoppiati. Lo stesso è vero quando li si moltiplica con valori decimali come 1.5.
Questo è importante perché quando si tratta di ridimensionare, dovremo scegliere le percentuali giuste a seconda dei valori che le nostre forme hanno, poiché le percentuali sono in realtà moltiplicatori. Non mi credi? Bene, pensiamo un po 'al modo in cui Illustrator le usa da un punto di vista matematico.
Quindi come tutti sapete, 100% è 100 diviso per 100 che ci dà 1. Illustrator usa questo valore e lo moltiplica con il Larghezza e Altezza valori di ciascuna forma selezionata. Ora, se moltiplichi 1 con qualsiasi cosa (ma 0) ottieni sempre lo stesso numero, questo non è l'esempio migliore.
Ma, se diamo un'occhiata a un valore come 200% che è 200 diviso per 100, otteniamo a 2x moltiplicatore, che raddoppierà il numero di pixel di qualsiasi oggetto selezionato.
D'altra parte, se dovessimo ridimensionare un'icona usando a 50% valore, che è 50 diviso per 100, quindi a Moltiplicatore 0.5x, che in realtà ridurrà le dimensioni dell'oggetto selezionato a metà.
Ora il trucco è sapere quali moltiplicatori usare quando si tratta di icone che hanno solo valori numerici pari e quelli che hanno sia pari che dispari.
Se abbiamo un'icona che è stata costruita utilizzando solo numeri pari, puoi applicare qualsiasi percentuale per tutto il tempo che sono 100% incrementa rispetto al valore predefinito 100% valore. Quindi moltiplicatori come 200%, 300%, 400%¸ 500%, 600%... hai capito il punto. Questo perché i numeri pari (2, 4, 6, 8) trasformano sempre questi passi moltiplicatori in valori pari (2 x 2 = 4, 2 x 3 = 6, 2 x 4 = 8, 2 x 5 = 10, 2 x 6 = 12, ecc.).
Puoi anche usare moltiplicatori come 150%, 250%¸ 350%, 450%, ecc., ma dovresti limitare il loro uso a una sola volta, poiché altrimenti questi valori trasformeranno un numero pari in uno dispari.
Per capire perché, diciamo che abbiamo un 20 x 20 px piazza.
Vogliamo scalarlo usando a 150% moltiplicatore.
Se lo usiamo una volta, otterremo una forma che è 30 x 30 px.
Usalo due volte e poi finirai con a 45 x 45 px uno.
Se dovessimo usare a 300% moltiplicatore invece, quindi la forma risultante sarebbe 60 x 60 px.
Se ti stai chiedendo perché, beh, è perché 20 x 1,5 = 30 che si è moltiplicato di nuovo con 150% (1,5) è 45. Mentre 150% + 150% = 300%Since I risultati dell'utilizzo dello stesso moltiplicatore due volte rispetto al suo valore aggiunto sono molto diversi, dal momento che 20 x 3 = 60.
Un'altra cosa da tenere a mente è che alcuni numeri pari si trasformano in strani, anche se si applicano i moltiplicatori solo una volta, ad es. 2 x 1,5 = 3; 6 x 1,5 = 9; 2 x 2,5 = 5; 6 x 2,5 = 15; ecc 4 x 1,5 = 6; 8 x 1,5 = 12; 4 x 2,5 = 10; 8 x 2,5 = 20; eccetera.
A seconda della complessità delle tue icone, potresti voler provare questo tipo di moltiplicatori, ma dovresti sempre ricontrollare se le cose sono ridimensionate come volevi.
Ora, quando si tratta di icone che hanno sia pari che dispari Larghezza e Altezza valori, dovresti sempre usare 200% incrementi del passo, quindi valori come 200%, 400%, 600%, 800%, ecc., poiché in questo modo le tue icone verranno ridimensionate esattamente come desideri.
Non usare mai il 50% moltiplicatore, poiché ciò interromperà qualsiasi icona pixel-perfetta, poiché il taglio di numeri dispari a metà produrrà valori decimali, che interromperanno la griglia dei pixel.
Ora che abbiamo visto quali moltiplicatori funzionano meglio a seconda del caso, facciamo un rapido esempio e vediamo il processo di ridimensionamento di un'icona dall'inizio alla fine.
Quindi abbiamo la stessa icona che abbiamo usato come esempio pochi minuti fa, che come sapete ha valori sia pari che dispari in tutte le sue forme di composizione. Ciò significa che possiamo solo usare 200% incrementi di passi al momento di decidere il valore del moltiplicatore, ma è assolutamente soddisfacente dal momento che per questo esempio vorremmo raddoppiare la dimensione del nostro asset da 48 x 48 px a 96 x 96 px.
Per farlo, selezionerò semplicemente la mia icona, e poi tasto destro e vai a Trasforma> Scala. In pochi secondi vengo accolto dal piccolo Scala finestra popup degli strumenti in cui scelgo di andare Uniforme ed entra 200 nel campo del valore, che per impostazione predefinita è impostato su 100%.
Non appena clicco il ok pulsante, Illustrator eseguirà i calcoli matematici e ridimensionerà la mia icona raddoppiando il numero di pixel, mantenendo tutto perfettamente sincronizzato Pixel Grid.
E 'così semplice.
Suggerimento rapido: anche se Illustrator di solito ha il Scala angoli rettangolari e Scala colpi ed effetti opzioni selezionate, dovresti sempre ricontrollarle per assicurarti che le cose vadano bene.
Quindi come probabilmente avrai già visto, il Scala strumento è un'opzione davvero degna quando si tratta di ridimensionare le icone. Se sai come e quando usare i tuoi moltiplicatori, dovresti essere in grado di creare variazioni di dimensioni per il tuo pacchetto di icone in pochissimo tempo.
Tuttavia, vi è una leggera limitazione quando si tratta di creare quelle variazioni di dimensioni di cui si dovrebbe essere a conoscenza, specialmente se si desidera creare icone con incrementi di piccole dimensioni (ad esempio 16 x 16 px, 24 x 24 px, 32 x 32 px; 48 x 48 px; 64 x 64 px; 72 x 72 px; 96 x 96 px; 128 x 128 px; ecc.).
Il fatto è che per ottenere quel piccolo bernoccolo nella variazione delle dimensioni (ad esempio 24 x 24 px, 48 x 48 px, 72 x 72 px, 96 x 96 px), dovrai usare il 150% moltiplicatore (da 16 x 1,5 = 24; 32 x 1,5 = 48; 48 x 1,5 = 72; 64 x 1,5 = 96; ecc.), che come sapete potrebbe causare problemi, specialmente quando si hanno valori di numeri dispari durante la composizione dell'icona forme.
Ciò significa che probabilmente dovrai aggiustare alcune forme qua e là per rendere coerenti le icone. Questo potrebbe non essere troppo difficile quando si ha a che fare con un piccolo pacchetto di icone, ma se si sta lavorando su qualcosa di più grande allora ci si aspetta per un lungo.
Un buon modo per farlo sarebbe creare il primo 150% icona di incremento della dimensione (ad esempio, 24 x 24 px), regolarla dove necessario e quindi utilizzarla 200% passi per ottenere il resto quando puoi (48 x 48 px; 96 x 96 px).
A seconda delle esigenze del tuo progetto, potresti dover armeggiare con le tue icone e cercare la soluzione giusta per te, ma non è quello che fa un designer in primo luogo, risolve i problemi?
Ecco qua: una presentazione approfondita di come dovresti procedere per ridimensionare un'icona utilizzando un metodo piuttosto semplice. Come sempre, prova a giocare con lo strumento dopo aver letto questo tutorial, e sono sicuro che ne prenderai il tempo in pochissimo tempo.
Accentsconagua