Sta diventando sempre più comune per i professionisti della grafica non solo avere il proprio lavoro in stampa ma anche sul web e su dispositivi come iPhone, iPad, dispositivi Android e tablet Android. In apparenza, questo potrebbe essere visto come una "buona cosa" dato che i media su cui il nostro lavoro appare si espandono agli schermi digitali. Lo svantaggio è il numero di schermate e il numero confuso di risoluzioni dello schermo. Non è raro ascoltare professionisti esperti chiedendosi cosa sia successo ai giorni in cui un'immagine TIFF con risoluzione 300 dpi nel formato CMYK era la norma. Oh per i bei vecchi tempi!
Quei giorni sono finiti. Ora dobbiamo fare i conti con il fatto che un'immagine su 200 per 200 può apparire bene su un dispositivo e tuttavia sembrare quadrata su un'altra e una dimensione di tre quarti su un'altra. Tutto si riduce alla "Resolution Arms Race" condotta dai produttori di dispositivi che cercano di bloccare più pixel in uno schermo rispetto ai loro concorrenti.
Questo ci porta a ciò che chiameremo "The Rise Of The Suffixes". I suffissi sono queste cose - @ 2x, @ 3x - attaccate al nome di un'immagine. In pratica, per esempio, mettono l'immagine giusta nel posto giusto sul dispositivo giusto. Poi diventa ancora meglio.
Gran parte del nostro lavoro riguarda il lavoro con le icone e, con l'avvento del movimento del design piatto, queste cose vengono create in applicazioni di disegno vettoriale come Illustrator e Sketch. Il problema è che i dispositivi semplicemente non possono riprodurre file .ai o .eps. Devono essere convertiti in grafica vettoriale scalabile e, a seconda dell'applicazione utilizzata per creare le icone, potrebbe non esserci nemmeno un'opzione SVG.
Poi diventa ancora meglio.
Esiste una nuova classe di software - Le applicazioni di prototipazione - che stanno diventando il punto di raccolta prima che le immagini e le icone vengano spostate sui dispositivi e che abbiano le loro peculiarità.
Questa esercitazione si sposta tra Photoshop e Sketch per la grafica e utilizza Adobe Experience Design per illustrare alcuni dei punti critici tra l'idea e l'eventuale distribuzione. Iniziamo.
01 del 05Come preparare le immagini per dispositivi mobili in Adobe Photoshop
Il primo passo in questo processo è conoscere il dispositivo o i dispositivi di destinazione. In questo caso, sceglierai come target iPhone 6 con un'area dello schermo di 375 pixel di larghezza per 667 pixel di altezza. Il design richiede che l'immagine sia la larghezza dello schermo.
L'immagine da utilizzare è stata scattata all'interno della Cattedrale di Berna a Berna, in Svizzera. Una volta che l'immagine si apre in Photoshop, seleziona Immagine> Dimensione immagine per controllare le dimensioni dell'immagine e la sua risoluzione. Ovviamente, un'immagine che è 3156 x 2592 con una risoluzione di 300 ppi e una dimensione del file di 23,4 Mb semplicemente non funzionerà.
All'interno della finestra di dialogo Dimensione immagine, ridurre la risoluzione a 100 ppi. Fallo prima, perché anche le dimensioni dell'immagine cambieranno. Con la risoluzione impostata, modifica la larghezza a 375 pixel. Se controlli i dati sulle dimensioni dell'immagine noterai che l'immagine si è ridotta da 23,4 Mb a un 338k più mobile-friendly. Clicca OK per accettare la modifica e chiudere la finestra di dialogo Dimensione immagine.
Continua a leggere sotto
02 di 05Come utilizzare la finestra di dialogo "Esporta come …" in Adobe Photoshop
Una volta che l'immagine è pronta per l'esportazione, seleziona "Esporta> Esporta come …" per aprire la finestra di dialogo Esporta come.
Questa finestra di dialogo è una recente aggiunta a Photoshop e sostituisce la finestra di dialogo "Salva per Web" utilizzata per anni. Se ne hai ancora bisogno, puoi trovarlo nel pop-up Export. È, per ovvi motivi, ora noto come "Export For Web (Legacy)". Se questa è la tua prima visita a questa finestra di dialogo, ecco un breve tour:
- Taglia: Questa colonna imposta la dimensione di output dell'immagine. L'aspetto interessante di quest'area è che ingrandirà l'immagine ma l'immagine non apparirà come "fuzzy" sul dispositivo a causa dell'enorme numero di pixel sullo schermo del dispositivo.
- 1X: Fai clic su tieni premuto e ti verrà presentato un numero di dimensioni. Le categorie 1x, 2x e 3x sono tradizionalmente associate ai dispositivi Hi Dpi di Apple e insieme a pochi altri prepareranno le immagini per i dispositivi Android.
- Suffisso: Questa scelta mostrerà la tua taglia ma verrà mostrata come @ 2x o la dimensione è scelta. Questo suffisso verrà aggiunto al nome dell'immagine.
- Il segno +: Fare clic qui per aggiungere varie dimensioni per l'output. In questo caso, fai doppio clic e scegli 2x e 3x dal menu a discesa. Questo coprirà praticamente qualsiasi dispositivo iOS.
- La pattumiera: Fare clic qui e la scelta viene rimossa dalla scaletta.
- Impostazioni file: Scegli il formato - jpg, png, gif o svg - più adatto all'immagine. Se la dimensione del file è un problema, puoi anche ridurre le impostazioni di qualità.
- Dimensione dell'immagine: puoi cambiare le dimensioni fisiche dell'immagine.
- Dimensioni della tela: È possibile modificare le dimensioni fisiche dell'area di disegno dell'immagine.
- Metadati: Puoi aggiungere il copyright e le tue informazioni di contatto ai metadati dell'immagine.
Al termine, fai clic sul pulsante Esporta tutto. Ti verrà chiesto dove vuoi inserire le immagini. Una buona abitudine da sviluppare è fare clic sul pulsante Nuova cartella e creare una cartella per conservare le immagini esportate. Quando fai clic su Esporta, ti verranno mostrate le immagini nella cartella.
Continua a leggere sotto
03 di 05Come preparare immagini per dispositivi mobili in Sketch 3 Da Bohemian Coding
Sketch 3, un'applicazione solo per Macintosh di Bohemian Coding, sta rapidamente guadagnando risalto tra i progettisti di UX e UI, grazie alla sua attenzione concentrata sul web e sul design delle app.Infatti Photoshop, in molti modi, si trova nella strana posizione di dover "recuperare" con Sketch.
Per preparare un'immagine per dispositivi mobili in Sketch, seleziona l'immagine nella tavola da disegno e fai clic sul pulsante Esportabile nella parte inferiore del pannello Proprietà. Questo aprirà la finestra di dialogo Esporta. Fai clic sul segno + per aggiungere le versioni 2x e 3x e aggiungi anche i suffissi. I formati disponibili sono PNG, JPG, TIF, PDF, EPS e SVG. In questo caso, scegli JPG. Fai clic sul pulsante Esporta e scegli come target o crea una cartella per conservare le varie immagini esportate.
04 di 05Perché è necessario creare tre (o più) versioni dell'immagine
Per molti aspetti, il mercato mobile è il "selvaggio West" delle risoluzioni e una misura sicuramente non va bene per tutti. Nell'esempio sopra di Adobe Experience Design, l'immagine è posizionata su 2 tavole da disegno iPhone 6 e una tavola da disegno per dispositivi Android. Si noti come la versione 1x a sinistra sembra essere la metà delle dimensioni. Questo è esattamente come l'immagine apparirebbe su un iPhone 6 con il suo schermo retina. La versione 2x si adatta perfettamente e la versione di Android scappa dallo schermo. La scelta è di ridimensionare l'immagine o esportare l'immagine da Photoshop con dimensioni diverse.
Continua a leggere sotto
05 del 05Prova presto, prova spesso, non fidarti di niente, fidati di nessuno e soprattutto di te stesso
Quello che devi capire è che questo è solo l'inizio del processo. Visualizzare il tuo lavoro su quanti più dispositivi puoi deve essere considerato come una parte vitale del flusso di lavoro. È inoltre necessario essere consapevoli che questo è solo il primo passaggio nel processo di creazione di risorse grafiche per un'app o per i progetti Web mobili.
L'utilizzo di applicazioni di prototipazione è un ottimo modo per scoprire i punti deboli, ma questi stessi beni dovranno essere prodotti dallo sviluppatore. In molti casi, le dimensioni fisiche delle risorse, incluse le icone, saranno fisicamente enormi e non nel formato svg ma png. A prima vista, questo potrebbe sembrare un po 'esagerato, ma ricorda la regola d'oro del ridimensionamento delle immagini: è meglio ridimensionare che scalare.
La linea di fondo è lavorare a stretto contatto con il tuo sviluppatore e utilizzare il software di prototipazione come mezzo per mostrare il tuo intento progettuale. Alla fine, però, quegli stessi asset dovranno essere pronti per il prodotto finale e il tuo sviluppatore avrà una migliore gestione di ciò che lui o lei ha bisogno di te.
