1. Design & Illustration
  2. Icon Design

Quick Tip: Esportare Icone usando le Sezioni in Adobe Illustrator

by
Read Time:13 minsLanguages:

Italian (Italiano) translation by Manuela Langella (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Oggi daremo un'occhiata ai diversi modi di esportare le icone utilizzando uno strumento che è spesso temuto, ma che porterà la tua produttività ad un altro livello una volta che lo padroneggerai. Tale strumento non è altro che lo Strumento Sezione e, credimi, se non l'hai mai usato prima, ti consiglio di leggere questo articolo, dal momento che ti spiego tutto quello che c'è da sapere quando si tratta di esportare di icone.

Sia che tu scelga di utilizzare un pacchetto di icone preconfezionato, o iniziare da zero, oggi ti insegnerò alcune considerazioni chiave a cui pensare quando esporti le tue preziose risorse.

Prima di andare nel tecnico, voglio prendere un paio di secondi per spiegarti il motivo di questo particolare articolo.

In un precedente tutorial, ho parlato delle Tavole da Disegno e dei Livelli come metodi per esportare le nostre preziose icone, ma ad essere onesti, questi metodi potrebbero rallentarti quando hai un pacchetto più grande. L'idea era che volevo / era necessario presentare un processo adatto per i principianti che potesse essere facile da capire, supponendo che sapessero come utilizzare i più elementari strumenti di Illustrator.

Ora, anche se tali metodi non sarebbero stati il meglio del meglio in termini di produttività, erano abbastanza semplici da seguire e da applicare, dando esattamente lo stesso risultato.

Poiché alcuni di voi hanno pensato probabilmente che il processo fosse troppo lento e doloroso, ho deciso di mostrarvi il modo più veloce di esportare un pacchetto di icone, utilizzando un metodo leggermente più avanzato.

Beh, posso aver detto avanzato, ma ad per essere onesti, non è così difficile una volta che ci giochi un paio di volte.

Detto questo, torniamo al nostro argomento principale e parliamo un po' di sezioni e come Illustrator le utilizza.

1. Cosa sono le "Sezioni"?

Puoi pensare ad una "sezione" come una sezione definita di un pezzo di opera d'arte che puoi creare per poterla esportare individualmente, anziché esportare l'intero pezzo.

Inizialmente le sezioni sono state create per i web designer, ma come con la maggior parte degli strumenti di Illustrator, questo ha trovato rapidamente un nuovo impiego: l'esportazione di icone.

example of a sliceexample of a sliceexample of a slice

2. Come Funzionano Le "Sezioni"?

In realtà è abbastanza semplice. Prima pensiamo alla Tavola da Disegno come un pezzo di carta sul quale posizioni la tua opera d'arte. Ora, quando crei una "sezione" in realtà stai delimitando un segmento di tale carta, creando un ritaglio che puoi liberamente rimuovere dalla composizione più grande.

Mi piace immaginare che il processo è simile a quello di prendere una fresa e affettare i margini tracciati di quel segmento, separandolo dal pezzo di carta.

Ad ogni sezione creata Illustrator assegna un numero, a partire dall'angolo superiore sinistro fino a quello inferiore destro. In un primo momento potresti non curarti troppo di questa azione, ma col tempo la apprezzerai, dato che avrai una migliore comprensione di cosa succede alla tua opera d'arte.

3. Come Crei le "Sezioni"?

Se non hai mai creato una sezione prima, non ti preoccupare perché è abbastanza facile da fare. Ci sono tre modi per creare una sezione che dovresti conoscere:

  • utilizzando gli oggetti selezionati
  • utilizzando le guide
  • utilizzando lo Strumento Sezione

3.1. Crea le sezioni Usando Gli Oggetti Selezionati

La prima opzione è davvero facile da comprendere, poiché consente di creare sezioni intorno ai confini di uno o più oggetti.

Così, diciamo che abbiamo un paio di icone, e vogliamo tagliarne la prima.

icons-that-we-are-going-to-use-to-exporticons-that-we-are-going-to-use-to-exporticons-that-we-are-going-to-use-to-export

A tale scopo, seleziona l'icona e poi vai su Oggetto > Sezioni > Crea

slicing-the-first-icon-using-the-objects-methodslicing-the-first-icon-using-the-objects-methodslicing-the-first-icon-using-the-objects-method

Questo separerà immediatamente quell'icona dal resto creando una linea di delimitazione intorno ad essa.

example-of-created-slices-around-the-first-iconexample-of-created-slices-around-the-first-iconexample-of-created-slices-around-the-first-icon

Anche se abbiamo creato una sezione per una sola icona, Illustrator ha diviso le restanti sezioni della Tavola da Disegno in sezioni più grandi, una per ogni lato della sezione dell'icona. Ne abbiamo una grande per il lato superiore, una più stretta per il lato sinistro, una piuttosto ampia per il lato destro e una più stretta anche per il lato inferiore.

exaxmple-of-the-created-slices-around-the-first-sliced-iconexaxmple-of-the-created-slices-around-the-first-sliced-iconexaxmple-of-the-created-slices-around-the-first-sliced-icon

Ora, se dai uno sguardo più attento alla tavola da disegno, potrai vedere che queste sezioni sono numerate, in un modo piuttosto semplice, dall'angolo in alto a sinistra a quello in basso a destra. Illustrator assegna numeri alle sue sezioni per permetterti di selezionare quale delle sezioni vuoi esportare e quali no. Parlerò di più su questo nel processo di esportazione.

Suggerimento rapido: come puoi vedere, il confine della sezione ha creato una forma rettangolare, poiché Illustrator crea la delimitazione guardando la larghezza e altezza totale dell'icona e non la sua forma. Questo è abbastanza comprensibile, poiché se se stavi progettando una pagina web, sarebbe piuttosto difficile dividere la composizione utilizzando linee più organiche e poi rimetterle insieme perfettamente.

Ci sono un paio di cose che devi conoscere quando utilizzi questo metodo. Se apri Oggetto > Sezione, troverai l'opzione Crea che abbiamo usato in precedenza e Crea da Selezione poche righe più in basso. Mentre le due opzioni fanno la stessa cosa quando hai un solo oggetto selezionato, si comportano in modo completamente diverso quando invece disponi di più oggetti selezionati.

La differenza fondamentale tra i due è che con Crea è possibile creare sezioni intorno a ciascuno degli oggetti selezionati, mentre con Crea da Selezione istruirete Illustrator a creare sezioni intorno alla superficie totale di tutti gli oggetti selezionati.

example-of-using-the-slice-from-selectionexample-of-using-the-slice-from-selectionexample-of-using-the-slice-from-selection

Ora, se dovessi creare un progetto web (pagina web), l'opzione Crea da Selezione sarebbe assolutamente soddisfacente da usare, ma se stai creando un pacchetto di icone, usa sempre Crea poiché vuoi esportare singolarmente ognuna delle tue icone.

3.2. Creare Sezioni Usando le Guide

Rispetto al metodo precedente, quello delle Guide è più meticoloso, poiché il processo richiede che tu aggiunga manualmente le guide verticali e orizzontali per ogni lato della sezione del disegno che desideri delimitare.

Prima devi attivare i righelli premendo Control-R (tasto destro del mouse > Mostra righelli) e quindi trascina le tue guide e posizionale dove desideri che le linee di sezione cadano. Una volta che hai delimitato la tua sezione utilizzando le guide, puoi andare su Oggetto > Sezione > Crea da Guide per creare le sezioni effettive.

creating-the-slices-using-the-guides-methodcreating-the-slices-using-the-guides-methodcreating-the-slices-using-the-guides-method

Se dai uno sguardo da vicino al modo in cui Illustrator aggiunge numeri alle sezioni, vedrai che una volta che una sezione è delimitata e assegnata, costringerà le altre ad avere il numero seguente, non importa la dimensione che hanno. Inoltre, è piuttosto interessante vedere che le sezioni sono create intorno alla superficie delimitata degli oggetti e non all'intersezione delle guide.

example-of-how-Illustrator-assigns-numbers-to-each-sliceexample-of-how-Illustrator-assigns-numbers-to-each-sliceexample-of-how-Illustrator-assigns-numbers-to-each-slice

3.3. Creare le Sezioni con lo Strumento Sezione

Questo terzo metodo è probabilmente il "top" quando si tratta di precisione, poiché consente di fare clic e trascinare per creare una selezione manuale di sezione al 100%. Ad essere onesti, ci saranno situazioni in cui vorrai avere più controllo sulle tue sezioni, ma non lo trovo molto utile quando devi sezionare un grande pacchetto di icone, poiché ci vorrebbe molto tempo per farlo.

Ma, nel caso in cui sia necessario usarlo, devi sapere come farlo. In primo luogo prendi lo Strumento Sezione, che per impostazione predefinita si trova nella sidebar di sinistra verso la sezione inferiore, appena sopra lo Strumento Mano. Una volta che hai selezionato lo strumento, posizionati sopra la sezione del disegno che vuoi delimitare e poi semplicemente fai clic e trascina per creare una selezione che si trasformerà automaticamente in una sezione, una volta che rilasci il pulsante del mouse.

Rispetto a una normale selezione, lo Strumento Sezione consente di tenere premuta la Barra Spaziatrice per spostare / riposizionare la selezione, che è molto utile dato che a volte potresti aver iniziato con il piede sbagliato.

example-of-slicing-using-the-slice-toolexample-of-slicing-using-the-slice-toolexample-of-slicing-using-the-slice-tool

Ora, la cosa bella di questo metodo è che le sezioni vengono create istantaneamente, senza la necessità di andare su Oggetto > Sezione sottomenu per Creare o Creare una sezione da una Selezione.

Il suo unico aspetto negativo che mi viene in mente è che potresti non avere il 100% di precisione fino a quando non accedi alla Modalità Anteprima Pixel (Visualizza > Anteprima Pixel o Alt-Control-Y), consentendo di creare selezioni di pixel perfetti, che per i designer di oggi è un must.

4. Il Processo di Esportazione

Così fino a questo punto ho parlato dei tre diversi metodi che è possibile utilizzare per creare sezioni. Ora è il momento di vedere quale metodo è il migliore quando si tratta di esportare le nostre preziose piccole icone.

4.1. L'Esportazione Mediante il Metodo di Oggetti Selezionati

Cominciamo con il primo metodo. Come ricorderai, quest'ultimo si basa sull'utilizzo di uno o più oggetti al fine di creare le sezioni.

Ora, diciamo che abbiamo lo stesso piccolo pacchetto di icone di prima, solo che questa volta vogliamo sezionare ed esportare tutte le icone che lo compongono, non solo una.

Beh, normalmente basta selezionare tutte le risorse premendo Control-A e poi andando su Oggetto > Sezione > Crea.

Poi vai su File > Salva per Web, scegli PNG come formato desiderato, imposta l'opzione di Esportazione su Sezioni Selezionate e infine fai clic su Salva.

exporting-all-the-icons-using-the-slice-make-optionexporting-all-the-icons-using-the-slice-make-optionexporting-all-the-icons-using-the-slice-make-option

La cosa è che in un primo momento potresti pensare che tutto è andato bene, ma non appena dai un'occhiata alle tue icone (più precisamente la loro dimensione), potresti trovare che qualcosa è andato storto.

Questo perché anche se hai usato una Griglia personalizzata per ridimensionare le icone, le risorse stesse potrebbero non andare completamente bene in termini di larghezza e altezza, e dal momento che hai utilizzato le icone come oggetti selezionati e non griglie effettive, questa non dovrebbe essere una sorpresa.

Il trucco è quello di utilizzare le griglie effettive anziché le icone e creare le sezioni intorno a loro. In questo modo le icone esportate saranno esattamente come le vuoi.

Ora, nel mio caso, ad esempio, sto usando una griglia di 48 x 48 px, ma ho aggiunto tutt'intorno 2 px di padding. Per non parlare del fatto che le mie icone sono leggermente più corte, avendo un'altezza di soli 40 px. Ciò significa che se dovessi creare le sezioni utilizzando le stesse icone e poi esportarle, mie icone sarebbero leggermente più piccole (44 x 40 px), poiché Illustrator ha utilizzato la Larghezza e l'Altezza delle mie risorse invece delle mie griglie (48 x 48 px).

exported-icon-size-using-the-objects-method-without-gridexported-icon-size-using-the-objects-method-without-gridexported-icon-size-using-the-objects-method-without-grid

Detto questo, dovresti sempre avere un secondo livello con solo le tue griglie e utilizzarle per creare le sezioni al fine di esportare correttamente le tue risorse.

example-of-using-grids-on-a-separate-layerexample-of-using-grids-on-a-separate-layerexample-of-using-grids-on-a-separate-layer

Ora, la cosa interessante è che dopo aver creato le sezioni e vai su File > Salva per Web, Illustrator ti dà la possibilità di selezionare manualmente o rimuovere le icone che esporti. Così, per esempio, se decido che non voglio selezionare l'ultima icona, posso semplicemente andare su questa e cliccare il tasto sinistro del mouse una volta, mentre tengo premuto MAIUSC, e quindi la rimuovo dalla mia esportazione definitiva.

Per impostazione predefinita se selezioni tutte le icone e poi vuoi salvarle, Illustrator manterrà tutte le sezioni selezionate. Puoi vedere se una sezione è selezionata osservando la sua delimitazione. Se la linea intorno alla risorsa è rossa (tutte tranne la prima icona), l'oggetto viene aggiunto alla selezione finale; se è blu e un po' sbiadita, allora l'oggetto non viene aggiunto (prima icona).

example-of-selected-and-unselected-slices-within-the-save-for-web-screenexample-of-selected-and-unselected-slices-within-the-save-for-web-screenexample-of-selected-and-unselected-slices-within-the-save-for-web-screen

Puoi deselezionare le parti del tuo pacchetto di icone tenendo premuto il tasto MAIUSC e cliccando col tasto sinistro su di essi. Potresti chiederti perché usiamo il tasto MAIUSC. È perché poiché Illustrator ha già tutto selezionato, è necessario tenere il tasto premuto al fine di mantenere il resto delle risorse selezionate, altrimenti finirai con l'avere sola icona attiva.

Ora per essere onesti non vedo perché dovresti farlo, dato che una volta che hai finito il tuo pacchetto io sono abbastanza sicuro che vorrai esportare tutte le risorse, non solo alcune, ma ho pensato che sarebbe stato comunque bello fartelo notare.

Non appena premi il pulsante Salva, Illustrator ti chiederà un percorso per memorizzare i file, dandoti la possibilità di nominare le tue risorse. Questa parte è un po' difficile dato che il nome assegnato verrà trasferito a tutte le icone, che è quello che volevamo, ma le risorse porteranno il numero delle loro sezioni.

Potresti esportare solo i file e quindi rinominarli, o puoi farlo direttamente all'interno di Salva per Web facendo doppio clic sulla selezione di ogni icona e dandogli il nome desiderato.

renaming-the-slices-within-the-save-for-web-screenrenaming-the-slices-within-the-save-for-web-screenrenaming-the-slices-within-the-save-for-web-screen

Non importa il metodo scelto, passerai ancora del tempo per controllarle tutte fine di assegnare loro un nome corretto.

Ora, ad essere onesti trovo che questa opzione sia la migliore delle tre, dal momento che è super-veloce, ed esporta solo le icone, così non ci saranno slide vuote sulla tavola da disegno che dovranno poi essere eliminate.

4.2. Esportare Utilizzando il Metodo Guide

Come con il metodo precedente, le cose sono abbastanza semplici. Innanzitutto crea le sezioni utilizzando le Guide (Oggetto > Sezione > Crea da Guide), e poi vai su File > Salva per Web.

Qui ci sono un paio di cose che dovresti sapere. Se lasci l'opzione di Esportazione impostata su Sezioni Selezionate come abbiamo fatto per il primo metodo, Illustrator esporterà le icone, ma esporterà anche le sezioni vuote tra esse. Ora, se non hai un grande set, ti basterebbe deselezionare quelle sezioni, ma se hai qualcosa di più grande, può rivelarsi un processo davvero doloroso.

D'altra parte, potresti esportare solo le icone e quindi eliminare le sezioni indesiderate, ma ancora una volta questo potrebbe richiedere molto tempo.

Ora se prendi in considerazione che devi aggiungere manualmente le guide su ogni lato delle tue icone, è abbastanza evidente che il primo metodo è più adatto, in quanto è molto più veloce e senza problemi.

4.3. L'Esportazione Mediante il Metodo Strumento Sezione

Se pensavi che il metodo delle Guide sia stato lento e doloroso, allora quest'ultimo ti metterà l'ultimo chiodo nella bara poiché ci vorranno secoli per finire.

Ma ormai ora probabilmente sai che devi creare manualmente le sezioni per ciascuna delle tue icone per poi andare direttamente su File > Salva per Web.

Qui sarai tentato di utilizzare l'opzione Esporta Sezioni Selezionate, ma rispetto agli altri due metodi, questo esporterà solo l'ultima sezione dalla Tavola da disegno. Ciò significa che è necessario utilizzare l'opzione Tutte le Sezioni, che naturalmente esporterà tutte le sezioni, sia piene di icone che vuote.

example-of-exporting-the-slices-using-the-slice-tool-method-with-export-set-to-all-slicesexample-of-exporting-the-slices-using-the-slice-tool-method-with-export-set-to-all-slicesexample-of-exporting-the-slices-using-the-slice-tool-method-with-export-set-to-all-slices

Infine dovrai controllare l'intera cartella e cancellare tutte le icone inutili e rinominarle per come ti serve.

Quindi consiglierei a tutti questo metodo? No. Quindi perchè ne ho parlato? Beh mi piacere essere il più esplicito possibile quando si parla di questo genere di strumenti e metodi.

Conclusione

Quindi, a questo punto, davvero spero che tu sappia cosa sono le sezioni, e ancora più importante come sono fatte, cosicché tu possa approfittare di questo strumento e rendere il processo di esportazione delle icone veloce e indolore.

Ora, io di solito tendo a lasciare il processo decisionale a te, ma questa volta dovrò essere rude e dirti di usare il primo metodo, quello degli Oggetti, dato che è abbastanza ovvio che è l'unico metodo valido.

Detto questo, vorrei ringraziarti per il tuo tempo e la tua attenzione, e come sempre ci sentiamo la prossima volta.

One subscription.
Unlimited Downloads.
Get unlimited downloads