Es cada vez más común que los profesionales de los gráficos no solo tengan su trabajo impreso, sino también en la web y en dispositivos como iPhones, iPads, dispositivos Android y tabletas Android. En la superficie, esto podría verse como una "cosa buena" ya que los medios en los que aparece nuestro trabajo se expanden a las pantallas digitales. El inconveniente es el gran número de pantallas y el confuso número de resoluciones de pantalla. No es raro escuchar a profesionales experimentados que se preguntan qué sucedió con los días en que la resolución TIFF de 300 ppp en formato CMYK era la norma. ¡Oh por los buenos viejos tiempos!
Esos días han terminado. Ahora tenemos que lidiar con el hecho de que una imagen de 200 por 200 puede aparecer bien en un dispositivo y, sin embargo, debe aparecer un tamaño de cuarto en otro y de tres cuartos en otro. Todo se reduce a la "Resolución de la Carrera de Armas" emprendida por los fabricantes de dispositivos mientras intentan colocar más píxeles en una pantalla que sus competidores.
Esto nos lleva a lo que llamaremos "El aumento de los sufijos". Los sufijos son esas cosas - @ 2x, @ 3x - pegadas al nombre de una imagen. Esencialmente, por ejemplo, colocan la imagen correcta en el lugar correcto en el dispositivo correcto. Entonces se pone aún mejor.
Gran parte de nuestro trabajo implica trabajar con iconos y, con el auge del movimiento de diseño plano, estas cosas se crean en aplicaciones de dibujo vectorial como Illustrator y Sketch. El problema es que los dispositivos simplemente no pueden renderizar archivos .ai o .eps. Deben convertirse a gráficos vectoriales escalables y, dependiendo de la aplicación utilizada para crear los íconos, puede que ni siquiera haya una opción SVG.
Entonces se pone aún mejor.
Existe una nueva clase de software, las aplicaciones de creación de prototipos, que se están convirtiendo en el punto de reunión antes de que sus imágenes e íconos se introduzcan en los dispositivos y también tengan sus particularidades.
Este tutorial se mueve entre Photoshop y Sketch para los gráficos y utiliza Adobe Experience Design para demostrar algunos de los puntos débiles entre su idea y la eventual implementación. Empecemos.
01 de 05Cómo preparar imágenes para dispositivos móviles en Adobe Photoshop
El primer paso en este proceso es conocer su dispositivo o dispositivos de destino. En este caso, apuntará al iPhone 6, que tiene un área de pantalla de 375 píxeles de ancho por 667 píxeles de alto. El diseño exige que la imagen sea el ancho de la pantalla.
La imagen que se usó fue tomada dentro de la Catedral de la Catedral de Berna en Berna, Suiza. Una vez que la imagen se abre en Photoshop, seleccione Imagen> Tamaño de imagen Para comprobar las dimensiones de la imagen y su resolución. Obviamente, una imagen de 3156 x 2592 con una resolución de 300 ppi y un tamaño de archivo de 23.4 Mb simplemente no funcionará.
Dentro del cuadro de diálogo Tamaño de imagen, Reducir la resolución a 100 ppi.. Haga esto primero porque las dimensiones de la imagen también cambiarán. Con la resolución establecida, cambia el ancho a 375 píxeles. Si verifica los datos de Tamaño de imagen, notará que la imagen se ha reducido de 23.4 Mb a 338k más compatible con dispositivos móviles. Haga clic en Aceptar para aceptar el cambio y cerrar el cuadro de diálogo Tamaño de imagen.
Continuar leyendo a continuación
02 de 05Cómo utilizar el cuadro de diálogo "Exportar como …" en Adobe Photoshop
Una vez que la imagen está lista para su exportación, seleccione "Exportar> Exportar como …" para abrir el cuadro de diálogo Exportar como.
Este cuadro de diálogo es una adición reciente a Photoshop y reemplaza el cuadro de diálogo "Guardar para web" que usaron durante años. Si aún lo necesita, puede encontrarlo en el menú desplegable Exportar. Es, por razones obvias, ahora conocido como "Export For Web (Legacy)". Si esta es su primera visita a este cuadro de diálogo, aquí hay un breve recorrido:
- Tamaño: Esta columna establece el tamaño de salida de la imagen. El aspecto interesante de esta área es que ampliará la imagen, pero la imagen no aparecerá como "borrosa" en el dispositivo debido a la gran cantidad de píxeles en la pantalla del dispositivo.
- 1X: Haga clic en este botón y se le presentarán varios tamaños. Las categorías 1x, 2x y 3x se asocian tradicionalmente con los dispositivos Hi Dpi de Apple y, junto con algunos otros, prepararán imágenes para dispositivos Android.
- Sufijo: Esta opción mostrará su tamaño, pero se mostrará como @ 2x o se elige el tamaño. Este sufijo se añadirá al nombre de la imagen.
- El signo +: Haga clic aquí para agregar varios tamaños para la salida. En este caso, haga clic dos veces y elija 2x y 3x del menú desplegable. Esto cubrirá prácticamente cualquier dispositivo iOS.
- El bote de basura: Haga clic en este botón y la opción se eliminará de la alineación.
- Configuración de archivo: Elija el formato (jpg, png, gif o svg) que mejor se adapte a la imagen. Si el tamaño del archivo es una preocupación, también puede reducir la configuración de Calidad.
- Tamaño de la imagen: Puedes cambiar las dimensiones físicas de la imagen.
- Tamaño del lienzo: Puede cambiar las dimensiones físicas del lienzo de la imagen.
- Metadatos: Puede agregar derechos de autor y su información de contacto a los metadatos de la imagen.
Cuando haya terminado, haga clic en el botón Exportar todo. Se le preguntará dónde desea colocar las imágenes. Un buen hábito para desarrollar es hacer clic en el botón Nueva carpeta y crear una carpeta para contener las imágenes exportadas. Cuando haga clic en Exportar, se le mostrarán las imágenes en la carpeta.
Continuar leyendo a continuación
03 de 05Cómo preparar imágenes para dispositivos móviles en Sketch 3 de Bohemian Coding
Sketch 3, una aplicación solo para Macintosh de Bohemian Coding, está ganando rápidamente protagonismo entre los diseñadores de UX y UI debido a su intenso enfoque en el diseño web y de aplicaciones.De hecho, Photoshop, en muchos sentidos, se encuentra en la extraña posición de tener que "ponerse al día" con Sketch.
Para preparar una imagen para móvil en Sketch, seleccione la imagen en la mesa de trabajo y haga clic en el botón Hacer exportable en la parte inferior del panel Propiedades. Esto abrirá el cuadro de diálogo Exportar. Haga clic en el signo + para agregar las versiones 2x y 3x y también agregar los sufijos. Los formatos disponibles son PNG, JPG, TIF, PDF, EPS y SVG. En este caso, elija JPG. Haga clic en el botón Exportar y seleccione o cree una carpeta para contener las diversas imágenes exportadas.
04 de 05Por qué necesita crear tres (o más) versiones de la imagen
En muchos aspectos, el mercado móvil es el "Salvaje Oeste" de las resoluciones y una talla definitivamente no se ajusta a todas. En el ejemplo anterior de Adobe Experience Design, la imagen se coloca en 2 tableros de anuncios de iPhone 6 y en una mesa de trabajo de dispositivo Android. Observe cómo la versión 1x de la izquierda parece ser de tamaño medio. Así es exactamente como aparecerá la imagen en un iPhone 6 con su pantalla de retina. La versión 2x se ajusta perfectamente y la versión de Android sale de la pantalla. Su elección es escalar la imagen o exportarla de Photoshop a un tamaño diferente.
Continuar leyendo a continuación
05 de 05Pruebe temprano, pruebe a menudo, no confíe en nada, no confíe en nadie y especialmente en usted mismo
Lo que hay que entender es que esto es solo el comienzo del proceso. La visualización de su trabajo en tantos dispositivos como sea posible debe considerarse como una pieza vital del flujo de trabajo. También debe tener en cuenta que este es solo el primer paso en el proceso de creación de activos gráficos para una aplicación o proyectos web móviles.
El uso de aplicaciones de creación de prototipos es una excelente manera de descubrir los puntos débiles, pero estos mismos activos deberán ser utilizados por el desarrollador. En muchos casos, las dimensiones físicas de los activos, incluidos los íconos, serán físicamente enormes y no en el formato svg sino png. A primera vista, esto puede parecer un poco exagerado, pero recuerde la regla de oro de escalar imágenes: es mejor escalar que escalar.
La conclusión es trabajar estrechamente con su desarrollador y usar el software de creación de prototipos como una forma de mostrar su intención de diseño. Sin embargo, eventualmente, esos mismos activos deberán estar listos para el producto final y su desarrollador tiene un mejor manejo de lo que él o ella necesita que usted.
