Share
Cosa starai creandoOggi daremo un'occhiata ai diversi modi di esportare le icone usando uno strumento che è spesso temuto, ma porterà la tua produttività ad un altro livello una volta che l'hai padroneggiato. Quello strumento non è altro che il Strumento Slice, e credimi, se non l'hai mai usato prima, ti consigliamo di leggere questo articolo, dato che ti spiegherò tutto quello che c'è da sapere quando si tratta di esportare icone.
Sia che tu scelga di utilizzare un pacchetto di icone premade, o di iniziare da zero, oggi ti insegneremo alcune considerazioni chiave su cui riflettere quando esporti le tue preziose risorse.
Prima che diventiamo tutti tecnici, voglio prendere un paio di secondi e spiegare la ragione per scrivere questo particolare pezzo.
Quindi, in un precedente tutorial, ho parlato dell'uso Tavole da disegno e Livelli come metodi per esportare le nostre preziose icone, ma per essere onesti questi metodi potrebbero rallentarti quando hai un pacchetto più grande. L'idea era che volevo / avevo bisogno di presentare un processo adatto ai principianti che fosse facile da capire, assumendo che sapessero come usare il più basilare degli strumenti di Illustrator.
Ora, mentre quei metodi non potevano essere il meglio del meglio in termini di produttività, erano piuttosto semplici da seguire e da applicare, dando esattamente lo stesso risultato.
Poiché alcuni di voi pensavano che il processo fosse troppo lento e doloroso, ho deciso di iniziare il mio gioco e mostrarvi il modo più veloce di esportare un pacchetto di icone, usando un metodo leggermente più avanzato.
Beh, avrei potuto dire avanzato, ma ad essere onesti, non è poi così difficile una volta che ci giochi un paio di volte.
Detto questo, torniamo al nostro argomento principale e parleremo un po 'delle sezioni e di come Illustrator le usa.
Puoi pensare a una "fetta" come a una sezione definita di un pezzo di materiale illustrativo che puoi creare per esportare singolarmente anziché esportare l'intero pezzo.
Inizialmente le slice sono state create per i web designer, ma come per la maggior parte degli strumenti di Illustrator, questo ha trovato rapidamente un nuovo uso: esportare le icone.
In realtà è abbastanza semplice. Per prima cosa pensiamo alla tavola da disegno come a un pezzo di carta su cui posi le tue opere d'arte. Ora, quando crei una "fetta" stai effettivamente delimitando un segmento di quel foglio, creando un ritaglio che puoi rimuovere liberamente dalla composizione più grande.
Mi piace immaginare che il processo sia simile a quello di prendere un cutter e tagliare i margini tracciati di quel segmento, separandolo dal pezzo di carta.
Con ogni porzione creata, Illustrator assegna un numero, partendo dall'angolo in alto a sinistra fino a quello in basso a destra. All'inizio potresti non interessarti troppo di questa azione, ma con il tempo imparerai ad apprezzarla, dal momento che avrai una migliore comprensione di ciò che sta accadendo con la tua opera d'arte.
Se non hai mai creato una sezione prima, non ti preoccupare perché è abbastanza facile da fare. Esistono tre modi per creare sezioni di cui dovresti essere a conoscenza:
Questa prima opzione è davvero facile da capire, poiché consente di creare sezioni attorno ai confini di uno o più oggetti.
Quindi, diciamo che abbiamo un paio di icone e vogliamo suddividere il primo.
Per farlo, selezioneremo l'icona, quindi andremo a Oggetto> Slice> Crea.
Questo separerà immediatamente quell'icona dal resto creando una linea di delimitazione attorno ad essa.
Anche se abbiamo creato una sezione per una sola icona, Illustrator ha suddiviso le sezioni rimanenti della tavola da disegno in sezioni più grandi, una per ciascun lato della sezione dell'icona. Ne abbiamo uno grande per il lato superiore, uno più stretto per il lato sinistro, uno piuttosto largo per il lato destro e uno ancora più stretto per il lato inferiore.
Ora, se dai un'occhiata più da vicino alla tua tavola da disegno, potresti vedere che queste fette 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 consentire all'utente di selezionare quale delle sezioni si desidera esportare e quali no. Ne parlerò di più nel processo di esportazione.
Consiglio rapido: Come puoi vedere, il contorno della sezione creato ha una forma rettangolare, poiché Illustrator crea la delimitazione osservando la larghezza e l'altezza totali dell'icona e non la sua forma. Questo è abbastanza comprensibile in quanto se si stesse progettando una pagina Web, sarebbe piuttosto difficile abbattere la composizione usando linee più organiche, e quindi rimetterla perfettamente insieme.
Ci sono un paio di cose di cui dovresti essere a conoscenza quando usi questo metodo. Se apri il Oggetto> Slice menu, vedrai che hai il Rendere opzione che abbiamo usato in precedenza e a Crea dalla selezione uno poche file più in basso. Mentre i due fanno la stessa cosa quando hai selezionato un solo oggetto, si comportano in modo completamente diverso quando hai selezionato più oggetti.
La differenza chiave tra i due è che con Rendere puoi creare sezioni attorno a ciascuno degli oggetti selezionati, mentre con Crea dalla selezione opzione istruirai Illustrator per creare sezioni attorno alla superficie totale di tutti gli oggetti selezionati.
Ora, se si dovesse creare un progetto web (pagina web), il Crea dalla selezione l'opzione sarebbe assolutamente valida, ma se stai creando un pacchetto di icone, dovrai sempre farlo Rendere dal momento che dovrai esportare singolarmente ciascuna delle tue icone.
Rispetto al metodo precedente, il Guide uno è più meticoloso, poiché il processo richiede di aggiungere manualmente guide verticali e orizzontali a ciascun lato della sezione del disegno che si desidera delimitare.
Per prima cosa devi attivare i righelli premendo Control-R (tasto destro> Mostra righelli) quindi trascina le guide e posizionale dove desideri che le linee di sezione cadano. Una volta che hai delimitato la sezione utilizzando le guide, puoi andare su Oggetto> Sezione> Crea da Guide per creare le sezioni effettive.
Se osservi da vicino il modo in cui Illustrator ha aggiunto i numeri alle sezioni, vedrai che una volta che una sezione è delimitata e assegnata, costringerà le altre a prendere il seguente valore numerico indipendentemente dalla dimensione che hanno. Inoltre, è abbastanza interessante vedere che le sezioni sono create attorno alla superficie delimitata degli oggetti e non all'intersezione delle guide.
Questo terzo metodo è probabilmente il "top dog" per quanto riguarda la precisione, poiché consente di fare clic e trascinare per creare una selezione manuale del 100%. Per essere onesti, ci saranno situazioni in cui vorrete avere più controllo sulle fette, ma non trovo tutto ciò che è utile quando si tratta di affettare un grande pacchetto di icone dato che richiederebbe molto tempo per farlo.
Ma, nel caso abbiate bisogno di usarlo, dovreste sapere come farlo. Per prima cosa devi afferrare il Strumento Slice, che si trova di default sulla barra laterale di sinistra verso la sua sezione inferiore, appena sopra il Strumento a mano. Una volta che hai selezionato lo strumento, puoi posizionarti sopra la sezione del disegno che vuoi delimitare, quindi fai semplicemente clic e trascina per creare una selezione che si trasformerà automaticamente in una sezione una volta rilasciato il pulsante del mouse.
Rispetto ad una selezione regolare, il Strumento Slice ti permette di tenere premuto il tasto Spazio chiave per spostare / riposizionare la selezione, che è piuttosto utile poiché a volte potresti scoprire di aver iniziato con il piede sbagliato.
Ora, la cosa interessante di questo metodo è che le fette vengono create istantaneamente, senza bisogno di andare oltre Oggetto> Slice sottomenu per Rendere o Creare una fetta a partire dal un Selezione.
L'unico lato negativo che posso pensare è che potresti non avere il 100% di accuratezza fino all'accensione Anteprima pixel modalità (Visualizza> Anteprima pixel o Alt-Control-Y), che consente di creare selezioni pixel-perfect, che per i designer di oggi è un must.
Quindi 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.
Iniziamo con il primo metodo. Come ricordi, questo si basa sull'utilizzo di uno o più oggetti per creare le sezioni.
Ora, diciamo che abbiamo lo stesso piccolo pacchetto di icone di prima, solo che questa volta vogliamo tagliare ed esportare tutte le icone di composizione, non solo una.
Bene, normalmente dovresti selezionare tutte le risorse premendo Control-A e poi andare a Oggetto> Slice> Crea.
Allora andresti a File> Salva per Web, scegliere PNG come il formato desiderato,imposta il tuo Esportare opzione a Fette selezionate e infine colpito Salvare.
Il fatto è che all'inizio potresti pensare che tutto sia andato per il meglio, ma non appena guardi le tue icone (più precisamente le loro dimensioni), potresti scoprire che qualcosa è andato storto.
Questo perché anche se hai usato un'abitudine Griglia per dimensionare le icone, le risorse stesse potrebbero non andare fino in fondo in termini di larghezza e altezza, e dal momento che hai usato le icone come oggetti selezionati e non le griglie attuali, non dovrebbe essere una sorpresa.
Il trucco è usare le griglie reali invece delle icone e creare le sezioni attorno a loro. In questo modo le icone esportate saranno esattamente come le vuoi tu.
Ora, nel mio caso per esempio, sto usando un 48 x 48 px griglia, ma ho un tuttofare 2 px imbottitura aggiunta. Per non parlare del fatto che le mie icone sono leggermente più corte, con un'altezza di appena 40 px. Ciò significa che se dovessi creare le fette usando le icone stesse e poi esportarle, le mie icone sarebbero leggermente più piccole (44 x 40 px), dal momento che Illustrator ha utilizzato il Larghezza e Altezza delle mie risorse invece delle mie griglie (48 x 48 px).
Detto questo, dovresti sempre avere un secondo livello con solo le tue griglie e usarle per creare le sezioni per esportare correttamente le tue risorse.
Ora, la cosa bella è che una volta create le fette e vai a File> Salva per Web, Illustrator ti offre la possibilità di selezionare o rimuovere manualmente quali icone esportare. Ad esempio, se decido che non voglio selezionare l'ultima icona, posso semplicemente passare sopra e fare clic con il tasto sinistro una volta mentre tieni premuto Cambio, e quindi rimuoverlo dalla mia esportazione finale.
Per impostazione predefinita, se selezioni tutte le icone, quindi vai a salvarle, Illustrator manterrà tutte le fette selezionate. Puoi vedere se una fetta è selezionata osservando la sua delimitazione. Se la linea attorno alla risorsa è rossa (tranne la prima icona), il tuo oggetto viene aggiunto alla selezione finale; se è blu e leggermente sbiadito, allora non lo è (la prima icona).
Puoi deselezionare parti del tuo icon pack tenendo premuto il tasto Cambio tasto e clic sinistro su di loro. Potresti chiederti perché usiamo il Cambio chiave. È perché poiché Illustrator ha già selezionato tutti, è necessario tenere premuto il tasto per mantenere il resto delle risorse selezionate, altrimenti si finirà con una sola icona attiva.
Ora, ad essere onesti, non vedo perché lo faresti, dal momento che una volta che hai finito il tuo pack sono quasi sicuro che vorrai esportare tutte le risorse, non solo alcune, ma ho pensato che sarebbe stato carino rimarcare che su.
Non appena colpisci il Salvare pulsante, Illustrator ti chiederà una posizione per archiviare i tuoi file, dandoti la possibilità di nominare le tue risorse. Questa parte è un po 'complicata dal momento che il nome che assegnerai verrà trasferito su tutte le icone, che è quello che volevamo, ma le risorse stesse porteranno il numero delle loro fette.
Potresti semplicemente esportare i file e poi rinominarli, oppure puoi farlo direttamente all'interno di Salva per Web popup facendo doppio clic su ciascuna selezione di icone e dandogli il nome desiderato.
Indipendentemente dal metodo scelto, dovrai comunque dedicare il tuo tempo e analizzarli tutti in modo appropriato.
Ora, ad essere sinceri, trovo che questa opzione sia la migliore delle tre in quanto è super veloce e esporta solo le icone, quindi non ci sono sezioni di tavola vuota che devono essere cancellate in seguito.
Come con il metodo precedente, le cose sono piuttosto semplici. Prima crei le fette usando le guide (Oggetto> Sezione> Crea da Guide), e poi vai File> Salva per Web.
Qui ci sono un paio di cose di cui dovresti essere a conoscenza. Se lasci il Esportare opzione impostata su Fette selezionate come abbiamo fatto per il primo metodo, Illustrator esporterà le icone, ma esporterà anche le sezioni vuote tra di loro. Ora, se non hai un set di grandi dimensioni, puoi semplicemente deselezionare quelle fette, ma se hai qualcosa di più grande, allora può rivelarsi un processo davvero doloroso.
D'altra parte, è possibile esportare le icone e quindi eliminare le sezioni indesiderate, ma potrebbe richiedere ancora del tempo.
Ora, se si tiene conto del fatto che è necessario aggiungere manualmente le guide su ciascun lato delle icone, è abbastanza ovvio che il primo metodo è più adatto, poiché è privo di problemi e molto più veloce.
Se pensavi che il metodo Guide fosse lento e doloroso, allora questo ti metterà l'ultimo chiodo nella tua bara dato che ti porteranno le età alla fine.
Ormai probabilmente saprai che devi creare manualmente le fette per ognuna delle tue icone e poi andare direttamente a File> Salva per Web.
Qui sarai tentato di usare il Esportazione fette selezionate opzione, ma rispetto agli altri due metodi, questo verrà esportato solo l'ultima fetta dalla tavola da disegno. Ciò significa che devi usare il Tutte le fette opzione, che ovviamente esporterà tutte le sezioni sia che siano piene di icone o semplicemente di spazio vuoto.
Infine devi passare attraverso l'intera cartella ed eliminare tutte le icone non necessarie e rinominarle come ti serve.
Quindi consiglio questo metodo? No. Allora perché l'ho menzionato? Beh, mi piace essere il più esplicito possibile quando parlo di questo tipo di strumenti e metodi.
Quindi, a questo punto, spero davvero che tu sappia quali sono le fette e, soprattutto, come sono fatte, in modo che tu possa trarre vantaggio da questo strumento e rendere il processo di esportazione delle tue icone veloce e indolore.
Ora, di solito tendo a lasciare la decisione che ti riguarda, ma questa volta dovrò essere duro e dirti di andare con il primo metodo, l'oggetto / i, dal momento che è abbastanza ovvio che è l'unico ben fatto.
Detto questo, vorrei ringraziarvi per il vostro tempo e attenzione, e come sempre vi parlerò la prossima volta.
Accentsconagua