Se c'è un aspetto di lavorare con Illustrator che non mi piace davvero, è la conversione della grafica in immagini svg per dispositivi mobili o sul web. Usando il menu Esporta> Esporta come e, per essere brutalmente onesti, la funzione Salva per Web - Esporta> Salva per Web - non era esattamente facile da usare.
La conversione di un disegno nel formato .svg apriva una finestra di dialogo piuttosto intimidatoria che, per le persone nuove a questo flusso di lavoro, offriva una confusa gamma di opzioni per non menzionare il fatto che esistevano numerosi formati .svg e solo uno di essi era il giusto formato. Una volta che ti sei abituato a questo flusso di lavoro non è stato un grosso problema, ma la curva di apprendimento è stata ripida.
Tutto è cambiato con la nuova funzione Esporta per schermi - Esporta> Esporta per schermi - e il pannello Esportazione risorse che è stata introdotta in Illustrator CC 2015 a giugno 2016. In questo "Come fare" mostrerò come utilizzare entrambi Caratteristiche. Iniziamo.
01 di 04
Come accedere all'esportazione di schermate in Adobe Illustrator CC 2015
Essendo stato un utente Illustrator da Illustrator 88 penso che tu possa capire la mia riluttanza a considerare Illustrator come un serio strumento di progettazione per interfacce e progetti web e mobili.
Quando sono state introdotte tavole da disegno nella versione 2008 di CS4, ho pensato che fosse un'aggiunta interessante all'applicazione. Quando ho visto per la prima volta l'ormai deprecata funzionalità di Save For Web in Illustrator, di nuovo, l'ho trovato interessante ma ho trovato che la stessa funzionalità in Adobe Fireworks era più allineata con la grafica web di Illustrator.
Con l'avvento di un approccio mobile al design e la crescente dipendenza dalle immagini SVG per i progetti mobili, Illustrator è stato il mio strumento "go to" per SVG e si è trasformato in un'importante tappa nel flusso di lavoro dell'interfaccia utente.
Tuttavia, se avessi bisogno di esportare risorse per dispositivi mobili, Sketch 3 e Photoshop CC 2015 sono i miei strumenti preferiti. Illustrator è entrato nella lista a giugno 2016 con il menu Esportazione per schermi veramente carino.
Nell'esempio precedente, ho due schermi destinati a un iPhone e sono su tavole da disegno separate denominate "Casa" e "Luoghi". Per riprodurli, ho selezionato File> Esporta> Esporta per schermi. Si apre la finestra di dialogo Esporta per schermate.
02 di 04Come utilizzare la finestra di dialogo Esporta per schermate
Quando viene visualizzata la finestra di dialogo, fare clic su ogni tavola da selezionare. Quindi mostrerà un segno di spunta. È inoltre possibile fare doppio clic sul nome di una tavola da disegno per selezionarlo e modificarlo. Questa è una buona cosa sapere se le tue tavole da disegno sono denominate "tavola da disegno 1" e "tavola da disegno 2" che, francamente, non ti dicono nulla.
Hai tre scelte nell'area Seleziona:
- Tutti: Questa scelta esporta ciascuna tavola da disegno nel documento come un file separato.
- Gamma: Inserisci una gamma di tavole da disegno da esportare. Questo è particolarmente utile per progetti con poche dozzine di tavole da disegno.
- Documento completo: Seleziona questo e tutte le tavole da disegno verranno appiattite in un singolo documento.
L'area Esporta in consente di scegliere la cartella di destinazione per l'output. La cartella predefinita sarà la posizione corrente del documento di Illustrator.
I formati sono dove "la magia accade. Noterai che ci sono tre icone: iOS. Android e un Gear. I primi due sono auto-esplicativi. L'icona a forma di ingranaggio apre le impostazioni di formattazione che consentono di controllare l'ottimizzazione di ciascuno dei formati di file nell'elenco. Queste impostazioni sono "specifiche del formato" e una volta apportate le modifiche, fai clic sul pulsante Salva impostazioni e tali modifiche verranno applicate ai formati da emettere.
Una volta scelto iOS o Android, la lista cambierà per includere tutte le risoluzioni disponibili su quella piattaforma. L'elenco di iOS mostrerà i fattori di scala per il display Retina e la selezione di Android avrà scale che vanno da 0,75x a 4x che può contenere praticamente qualsiasi dispositivo Android.
Se c'è un formato che mostra che vuoi rimuovere, clicca la "x". Se ce n'è uno da aggiungere, fai clic sul pulsante + Aggiungi scala.
Al termine, fai clic sul pulsante Esporta tavola artistica e una barra di avanzamento ti mostrerà quando il processo è finito.
03 di 04Utilizzo dei file Esporta per schermate di Adobe Illustrator CC 2015.
Quando esci dai risultati di Export for Screens, scoprirai che Illustrator ha prodotto una versione appiattita di ogni schermata. In apparenza, questo potrebbe sembrare un po 'debole, specialmente se ti aspettavi che Illustrator avesse esportato tutti i bit e le parti come immagini.
Se fai un passo indietro e ci pensi per un momento, questo è esattamente ciò di cui hai bisogno perché puoi utilizzare questo output in un'applicazione di prototipazione come Adobe Experience Design, Principleformac, Atomic.io, UXPin o un'altra applicazione di prototipazione
In questo esempio, sto usando Adobe Experience Design (XD) per creare un semplice click-thru. Il primo passo del processo è stato selezionare la dimensione dell'iPhone 6 che corrisponde alle dimensioni dell'interfaccia di Illustrator
Quando l'interfaccia è stata aperta, ho selezionato lo strumento tavola da disegno e ho fatto clic una volta sulla lavagna per aggiungere un'altra tavola da disegno. Ho quindi chiamato "Home" e "Luoghi", selezionato ogni tavola da disegno e importato l'immagine png da Illustrator nella tavola da disegno.
Per creare gli "hotspot" per il click-thru, ho disegnato un rettangolo sul pulsante Esplora nella schermata iniziale e impostato i valori di riempimento e bordo su zero deselezionando tali proprietà nel pannello Proprietà. Ho fatto la stessa cosa con il pulsante Indietro nella pagina Luoghi.
Per aggiungere l'interattività, ho selezionato la modalità Prototipo e poi ho fatto clic su "hotspot". Ho quindi trascinato la freccia, chiamata filo, nella pagina Luoghi e impostato il Target di transizione nei Luoghi, il movimento a Spingere a sinistra, l'andamento per facilitare l'uscita e la durata della transizione a 0,6 secondi.
Ho ripetuto questo passaggio con l'hotspot nella pagina Luoghi. L'unica differenza era che il Transition era impostato su Push Right. Quando ho fatto clic sul pulsante Riproduci ho testato il mio prototipo.
04 di 04Come utilizzare il pannello Risorse di esportazione in Adobe Illustrator CC 2015
Insieme al menu Salva per schermate, Adobe ha anche aggiunto un nuovo pannello, Asset Export, che ha rimosso un enorme punto dolente nel flusso di lavoro dell'interfaccia utente.
Il punto dolente erano le icone. Illustrator è un'ottima applicazione per il disegno vettoriale, ma per produrre, diciamo 10 icone, su una pagina con 40 o 50 di esse è necessario che ciascuna di esse venga salvata come immagine SVG. Ciò ha inevitabilmente richiesto più tempo del solito grazie ai successivi viaggi nel pannello SVG. Questo punto dolente è ormai una cosa del passato.
Questo nuovo pannello può essere trovato in Finestra> Esportazione asset. Quando il pannello si apre, seleziona la risorsa che vuoi convertire in SVG o in altro formato e trascina nel pannello. Quando si rilascia il mouse, una miniatura della risorsa viene aggiunta al pannello. Assegna un nome alla risorsa. Continua a trascinare gli oggetti nel pannello finché non hai finito.
Seleziona ciascuna voce Nell'area Impostazioni esportazione o selezionale tutte tenendo premuto il tasto Maiusc e facendo clic su ciascuna di esse. Seleziona il tuo formato - in questo esempio, ho scelto SVG- e fai clic sul pulsante Esporta. Gli elementi selezionati verranno emessi come file SVG nella stessa posizione del file di Illustrator.
Laddove l'intero processo diventa ancora più ordinato, non è necessario utilizzare il pannello Esportazione risorse. Facendo clic sul pulsante Salva per schermi nella parte inferiore del pannello si apre la finestra di dialogo.
Al contrario, è possibile fare clic sulla scheda Risorse nel pannello Salva per schermi per accedere al pannello Esportazione risorse. Ad esempio, se si dispone di un'icona personalizzata su una tavola da disegno, è possibile aprire il pannello Esportazione risorse nella finestra di dialogo Salva per schermo e trascinare l'elemento nel pannello Esportazione risorse.
