La imatge per a mòbils no sempre és el que sembla
Cada vegada és més freqüent que els professionals gràfics no només apareguin a la impressió, sinó també a la web i dispositius com iPhones, iPads, dispositius Android i tauletes d'Android. A la superfície, això es podria veure com "bo", ja que els mitjans de comunicació que apareix el nostre treball s'expandeix a les pantalles digitals. El desavantatge és la gran quantitat de pantalles i el nombre confús de resolucions de pantalla. No és estrany escoltar als professionals experimentats preguntant-se què ha passat amb els dies en què la imatge TIFF de resolució de 300 ppp en format CMYK era la norma. Ah pels bons temps!
Aquests dies han acabat. Ara hem d'enfrontar-nos al fet que una imatge de 200 a 200 pot aparèixer bé en un dispositiu i, tanmateix, apareixerà una grandària de quart en una altra i una mida de tres quarts en una altra. Tot plegat es redueix a la "Resolució de la cursa d'armes" a càrrec dels fabricants de dispositius a mesura que intenten confondre més píxels en una pantalla que els seus competidors.
Això ens porta al que anomenarem "L'ascens dels sufixos". Els sufixos són aquestes coses: @ 2x, @ 3x - enganxats al nom d'una imatge. Fonamentalment, per exemple, poseu la imatge adequada al lloc correcte al dispositiu adequat. A continuació, es fa encara millor.
Molts dels nostres treballs consisteixen a treballar amb icones i, amb l'auge del moviment de disseny Flat, aquestes coses es creen en aplicacions de dibuix vectorial com Illustrator and Sketch. El problema és que els dispositius simplement no poden representar fitxers .ai o .eps. Han de convertir-se a gràfics vectorials escalables i, depenent de l'aplicació utilitzada per crear les icones, potser no hi hagi una opció SVG.
A continuació, es fa encara millor.
Hi ha una nova classe de programari: aplicacions de prototipatge que s'estan convertint en el punt de muntatge abans que les imatges i les icones s'incorporin als dispositius i també tenen les seves peculiaritats.
Aquest tutorial es mou entre Photoshop i Sketch per als gràfics i l'ús d' Adobe Experience Design per demostrar alguns dels punts de dolor entre la vostra idea i la seva implementació final. Comencem.
01 de 05
Com preparar imatges per a dispositius mòbils a Adobe Photoshop
El primer pas en aquest procés és conèixer el vostre dispositiu o dispositius objectiu. En aquest cas, se us dirigirà a l'iPhone 6 que té una àrea de pantalla de 375 píxels d'ample per 667 píxels d'alçada. El disseny demana que la imatge sigui l'amplada de la pantalla.
La imatge que s'utilitzarà es va disparar a la catedral de Bern Minster a Berna, Suïssa. Una vegada que la imatge s'obre a Photoshop, seleccioneu Imatge> Mida d'imatge per comprovar les dimensions de la imatge i la seva resolució. Òbviament, una imatge que sigui de 3156 x 2592 amb una resolució de 300 ppi i una mida de fitxer de 23.4 Mb simplement no funcionarà.
A l'interior del quadre de diàleg Mida d'imatge, reduïu la resolució a 100 ppi . Feu això primer perquè també canviaran les dimensions de la imatge. Amb el conjunt de resolució, canvieu l'amplada a 375 píxels. Si comprova les dades de la mida de la imatge, observarà que la imatge s'ha reduït de 23,4 Mb a un 338 k més mòbil. Feu clic a Accepta per acceptar el canvi i tanqueu el quadre de diàleg Mida d'imatge.
02 de 05
Com s'utilitza el quadre de diàleg "Exporta com a ..." a Adobe Photoshop
Quan la imatge estigui preparada per a l'exportació, seleccioneu "Exporta> Exporta com a ..." per obrir el quadre de diàleg Exportar com.
Aquest quadre de diàleg és una addició recent al Photoshop i substitueix el quadre de diàleg "Desa per a la web" que han utilitzat durant anys. Si encara ho necessiteu, podeu trobar-lo a la barra d'exportació cap avall. És, per raons òbvies, ara conegudes com "Export For Web (Legacy)". Si aquesta és la vostra primera visita a aquest quadre de diàleg, aquí teniu un breu recorregut:
- Mida: aquesta columna estableix la mida de sortida de la imatge. L'aspecte interessant d'aquesta àrea és que ampliarà la imatge, però la imatge no apareixerà com "difusa" al dispositiu a causa del gran nombre de píxels a la pantalla del dispositiu.
- 1X: feu clic a això i us mostraran diverses mides. Les categories 1x, 2x i 3x estan tradicionalment associades amb els dispositius Hi Dpi d'Apple i, juntament amb uns altres, prepararan imatges per a dispositius Android.
- Sufix: aquesta opció mostrarà la vostra mida, però es mostrarà com a @ 2x o es triarà la mida. Aquest sufix s'afegirà al nom de la imatge.
- El signe +: feu clic aquí per afegir diverses mides per a la sortida. En aquest cas, feu-hi clic dues vegades i trieu 2x i 3x des del menú cap avall. Això cobrirà pràcticament qualsevol dispositiu iOS.
- La paperera: feu clic aquí i l'elecció es retira de la llista.
- Configuració del fitxer: trieu el format - jpg, png, gif o svg - més adequat a la imatge. Si la mida del fitxer és una preocupació, també podeu reduir la configuració de qualitat.
- Mida d'imatge: podeu canviar les dimensions físiques de la imatge.
- Mida de lona: podeu canviar les dimensions físiques del llenç de la imatge.
- Metadades: podeu afegir drets d'autor i la vostra informació de contacte a les metadades de la imatge.
Quan hàgiu acabat, feu clic al botó Exporta-ho tot. Se't preguntarà a on vols col·locar les imatges. Un bon hàbit per desenvolupar és fer clic al botó Nou carpeta i crear una carpeta per contenir les imatges exportades. Quan feu clic a Exporta, es mostraran les imatges a la carpeta.
03 de 05
Com preparar imatges per a dispositius mòbils en esbós 3 des de la codificació bohèmia
Sketch 3, una aplicació exclusiva de Macintosh de Bohemian Coding, està guanyant protagonisme ràpidament entre els dissenyadors UI i UI a causa del seu intens enfocament en el disseny web i l'aplicació. De fet, Photoshop, de moltes maneres, es troba en la estranya posició d'haver de jugar "catch up" amb Sketch.
Per preparar una imatge per a mòbils a Sketch, seleccioneu la imatge a l'artboard i feu clic al botó "Fer Exportable" a la part inferior del quadre Propietats . Això obrirà el quadre de diàleg Exportar. Feu clic al signe + per afegir les versions 2x i 3x i també afegiu els sufixos. Els formats disponibles són PNG, JPG, TIF, PDF, EPS i SVG. En aquest cas, seleccioneu JPG. Feu clic al botó Exporta i miri o creeu una carpeta per mantenir les diferents imatges exportades.
04 de 05
Per què necessiteu crear tres (o més) versions de la imatge
En molts aspectes, el mercat mòbil és el "salvatge oest" de les resolucions i una mida definitivament no encaixa. A l'exemple anterior d'Adobe Experience Design, la imatge es col·loca en 2 artistes de l'iPhone 6 i en un dispositiu d'Android. Observeu com la versió 1x a l'esquerra sembla ser la meitat de la mida. Això és exactament com apareixeria la imatge en un iPhone 6 amb la seva pantalla de retina. La versió 2x s'adapta perfectament i la versió d'Android s'apaga de la pantalla. La vostra elecció és escalar la imatge o exportar la imatge de Photoshop a una mida diferent.
05 de 05
Prova primerenc, prova sovint, no confieu en res, confia en ningú i en especial a tu mateix
El que cal entendre és que aquest és només l'inici del procés. Visualitzar el vostre treball en tants dispositius com sigui possible ha de ser considerat com una part vital del flux de treball. També cal tenir present que aquest és només el primer pas en el procés de creació d'actius gràfics per a una aplicació o projectes web per a mòbils.
L'ús d'aplicacions de prototips és una excel·lent forma de descobrir els punts de dolor, però aquests mateixos actius hauran de ser utilitzats per al desenvolupador. En molts casos, les dimensions físiques dels actius, incloses les icones, seran físicament enormes i no en el format svg sinó png. A primera vista, això pot semblar una mica per sobre, però recorda la regla d'or d'escalar les imatges: és millor que reduïu la mida de l'escala.
La conclusió és treballar estretament amb el vostre desenvolupador i utilitzar el programari de prototipatge com a forma de mostrar el vostre intent de disseny. Eventualment, però, aquests mateixos actius hauran d'estar preparats per al producte final i el vostre desenvolupador té un millor control sobre el que necessita que vostè.