Imaging for mobile non sempre é o que parece
Cada vez é máis común que os profesionais de gráficos non só teñan o seu traballo en forma impresa senón tamén na web e dispositivos como iPhones, iPads, dispositivos Android e tabletas con Android. Na superficie, isto podería ser visto como un "bo", xa que os medios nos que o noso traballo aparece aparece se expande ás pantallas dixitais. A desvantaxe é o gran número de pantallas eo número confuso de resolucións de pantalla. Non é raro escoitar profesionais experimentados que se preguntan o que pasou aos días nos que a resolución de 300 ppp de imaxe TIFF no formato CMYK era a norma. ¡Oh, para os bos tempos!
Eses días acabaron. Agora temos que enfrontar o feito de que unha imaxe de 200 a 200 pode parecer boa nun dispositivo e aínda así aparecer un tamaño de cuarto noutro e de tres cuartos nun outro. Todo se reduce á "Raza de Armas de resolución" que os fabricantes de dispositivos emiten mentres intentan pegar máis píxeles nunha pantalla que os seus competidores.
Isto lévanos ao que chamamos "The Rise Of The Suffixes". Os sufixos son esas cousas: @ 2x, @ 3x - atadas ao nome dunha imaxe. Basicamente, por exemplo, colócanse a imaxe correcta no lugar correcto no dispositivo correcto. Entón fica aínda mellor.
Moito do noso traballo consiste en traballar con íconos e, co auxe do movemento de deseño plano, estas cousas créanse en aplicacións de debuxo vectorial como Illustrator and Sketch. O problema é que os dispositivos simplemente non poden renderizar ficheiros .ai ou .eps. Deben ser convertidos a Scalable Vector Graphics e, dependendo da aplicación utilizada para crear as iconas, pode que nin sequera teña unha opción SVG.
Entón fica aínda mellor.
Existe unha nova clase de software: aplicacións de prototipos que se están convertendo no punto de montaxe antes de que as imaxes e os íconos se engadan aos dispositivos e tamén teñen as súas peculiaridades.
Este tutorial móvese entre Photoshop e Sketch para os gráficos e usando Adobe Experience Design para demostrar algúns puntos de dor entre a súa idea e a súa eventual implementación. Comezamos.
01 de 05
Como preparar imaxes para dispositivos móbiles en Adobe Photoshop
O primeiro paso neste proceso é coñecer o dispositivo ou dispositivos de destino. Neste caso, estarás dirixido ao iPhone 6 que ten unha área de pantalla de 375 píxeles de ancho por 667 píxeles de alto. O deseño fai que a imaxe sexa o ancho da pantalla.
A imaxe que se utilizou foi baleada dentro da catedral de Bern Minster en Berna, Suiza. Unha vez que a imaxe se abre en Photoshop, seleccione Imaxe> Tamaño da imaxe para comprobar as dimensións da imaxe ea súa resolución. Obviamente, unha imaxe que é de 3156 x 2592 cunha resolución de 300 ppp e un tamaño de arquivo de 23.4 Mb simplemente non funcionará.
Dentro do cadro de diálogo Tamaño de imaxe, reduza a Resolución a 100 ppp . Faino primeiro porque as dimensións da imaxe tamén cambiarán. Co conxunto de Resolución, cambie o ancho a 375 píxeles. Se verifica os datos do tamaño da imaxe notarás que a imaxe reduciuse desde 23,4 Mb ata un 338 k máis móbil. Faga clic en Aceptar para aceptar o cambio e pechar o cadro de diálogo Tamaño de imaxe.
02 de 05
Como usar o cadro de diálogo "Exportar como ..." en Adobe Photoshop
Unha vez que a imaxe estea lista para exportar, seleccione "Exportar> Exportar como ..." para abrir a caixa de diálogo Exportar como.
Este cadro de diálogo é unha adición recente ao Photoshop e substitúe á caixa de diálogo "Gardar por web" que usaron durante anos. Se aínda o necesitas, podes atopalo no menú Exportar abaixo. É, por razóns obvias, agora coñecido como "Export For Web (Legacy)". Se esta é a túa primeira visita a este cadro de diálogo, aquí tes un breve percorrido:
- Tamaño: Esta columna define o tamaño de saída da imaxe. O aspecto interesante desta área é que amplíe a imaxe pero a imaxe non aparecerá como "difusa" no dispositivo debido ao gran número de píxeles na pantalla do dispositivo.
- 1X: fai clic en manteña isto e será presentado con varios tamaños. As categorías 1x, 2x e 3x están tradicionalmente asociadas con dispositivos Hi Dpi de Apple e, xunto con algúns outros, prepararán imaxes para dispositivos con Android.
- Sufixio: Esta opción mostrará o tamaño pero mostrarase como @ 2x ou escolle o tamaño. Este sufijo engadirase ao nome da imaxe.
- O sinal +: faga clic nesta para engadir varios tamaños para a saída. Neste caso, prema dúas veces e elixe 2x e 3x desde o pop down. Isto cubrirá practicamente calquera dispositivo iOS.
- The Trash Can: faga clic nesta e a elección quítase da liña.
- Configuración do ficheiro: Escolla o formato - jpg, png, gif ou svg - mellor adaptado á imaxe. Se o tamaño do ficheiro é unha preocupación tamén pode reducir a configuración de calidade.
- Tamaño da imaxe: podes cambiar as dimensións físicas da imaxe.
- Tamaño da lona: pode cambiar as dimensións físicas da lona da imaxe.
- Metadatos: pode engadir dereitos de autor ea súa información de contacto aos metadatos da imaxe.
Cando remate, faga clic no botón Exportar todo. Preguntarás onde desexas colocar as imaxes. Un bo hábito para desenvolver é facer clic no botón Novo cartafol e crear un cartafol para almacenar as imaxes exportadas. Cando fai clic en Exportar, mostraranse as imaxes no cartafol.
03 de 05
Como preparar imaxes para dispositivos móbiles en Sketch 3 desde a codificación bohemia
Sketch 3, unha aplicación exclusiva de Macintosh de Bohemian Coding, está a gañar carteis prominentes entre os diseñadores UX e UI debido ao seu intenso foco no deseño web e aplicación. De feito, o Photoshop, de moitas maneiras, está na estraña posición de ter que xogar "catch up" con Sketch.
Para preparar unha imaxe para móbil en Sketch, seleccione a imaxe no cadro artístico e faga clic no botón "Facer exportable" na parte inferior do panel Propiedades . Isto abrirá o cadro de diálogo Exportar. Fai clic no signo + para engadir as versións 2x e 3x e tamén engade os sufixos. Os formatos dispoñibles son PNG, JPG, TIF, PDF, EPS e SVG. Neste caso, escolla JPG. Faga clic no botón Exportar e obxecto ou crea un cartafol para almacenar as varias imaxes exportadas.
04 de 05
Por que precisa crear tres (ou máis) versións da imaxe
En moitos aspectos, o mercado móbil é o "Oeste Salvaxe" das resolucións e un tamaño definitivamente non encaixa. No exemplo anterior de Adobe Experience Design, a imaxe colócase en 2 artilugios para iPhone 6 e en dispositivos para dispositivos Android. Observe como a versión 1x á esquerda parece ser de tamaño medio. Isto é exactamente como aparecería a imaxe nun iPhone 6 coa súa pantalla retina. A versión 2x encaixa perfectamente e a versión de Android sae da pantalla. A súa elección é escalar a imaxe ou exportar a imaxe de Photoshop nun tamaño diferente.
05 de 05
Probar a principios, probar moitas veces, confiar en nada, confiar en ninguén e especialmente si mesmo
O que cómpre entender é que este é só o comezo do proceso. Ver o traballo en tantos dispositivos como pode ser considerado como unha peza vital do fluxo de traballo. Tamén cómpre ter en conta que este é só o primeiro paso no proceso de creación de activos gráficos para unha aplicación ou proxectos web móbiles.
Usar aplicacións de prototipado é unha boa forma de descubrir os puntos de dor, pero estes mesmos bens terán que ser emitidos para o seu uso polo desarrollador. En moitos casos, as dimensións físicas dos bens, incluídos os íconos, serán fisicamente enormes e non no formato svg pero png. A primeira vista, isto pode parecer un pouco máis alto, pero recorda a regra dourada de escalar as imaxes: é mellor escalar que escalar.
O resultado final é traballar en estreita colaboración co seu desarrollador e utilizar o software de prototipado como unha forma de mostrar a súa intención de deseño. Eventualmente, con todo, eses mesmos bens terán que estar preparados para o produto final eo seu creador ten un mellor control sobre o que necesita que vostede.