Krypton Solid

Una mejor manera de diseñar para Retina en Photoshop

Una mejor manera de diseñar para Retina en Photoshop

Recientemente, tuve un proyecto en el que necesitaba producir pantallas de alta fidelidad para una tableta. Tenía que presentar estas pantallas en el dispositivo y también producir un prototipo en el que se podía hacer clic. Debían tener píxeles perfectos. La línea de tiempo era ajustada (como siempre), así que opté por mi herramienta de uso, Photoshop. Lo he estado usando durante más de diez años y me brinda la salida más rápida de alta calidad.

¿Está diseñando con resolución “Retina” en Photoshop? Si la respuesta es sí, entonces este artículo es para ti. Lo guiaré a través de los problemas que enfrenté al crear maquetas de Retina para mostrar en una tableta. Luego explicaré una forma de trabajar que es más fácil y le brinda un mejor rendimiento. Se trata de mi experiencia con Photoshop, pero podría aplicarse a Illustrator y otro software.

Aquí hay algunos diseños para la aplicación de tableta.

A lo largo de este artículo, usaré la notación @ 2x y @ 3x. Estos representan los depósitos de Retina para iOS. Un gran ejemplo son los iconos de la aplicación. Para el iPhone original, sería de 60 × 60 píxeles (@ 1x). Para el iPhone 4, sería exactamente el doble, 120 × 120 píxeles (@ 2x). Ahora, los últimos dispositivos se están sumergiendo en un territorio triple. Para el iPhone 6 Plus, el ícono sería 180 × 180 (@ 3x). Cuando hablo de @ 2x o @ 3x, me refiero a usar el doble o el triple de las dimensiones de los píxeles. Todo debería quedar claro a medida que sigue leyendo.

Otras lecturas en SmashingMag:

Los problemas

Ahora, entremos en el diseño de esta aplicación para tableta. Como a muchos otros diseñadores, me habían dicho que hay que diseñar con resolución Retina. El consenso general es @ 2x o @ 3x. Entonces, me puse en camino feliz, diseñando @ 2x. El diseño se presentaría en un Nexus 9 con una proporción de 4: 3, por lo que mi lienzo de Photoshop se configuró en 2048 × 1536 píxeles. Después de crear algunas pantallas, me di cuenta de que en la práctica esto no funciona en absoluto. Trabajemos en los problemas que encontré.

Factor de zoom

Al principio, esto no es gran cosa. Aléjate al 50% o al 33% para ver tu diseño aproximadamente a 1: 1. Pero al mismo tiempo, es un poco ridículo, ¿verdad?

Se muestra la esquina de un diseño en @ 1x a @ 3x
Puede ver rápidamente que la resolución se sale de control. Se muestra la esquina de un diseño en @ 1x a @ 3x.

¿Por qué debería tener que acercar y alejar la imagen constantemente para ver qué está pasando? También arruina completamente captura de píxeles, que funciona mejor al 100%. ¡Es casi imposible saber si un píxel está alineado cuando se amplía al 33% o al 50%! Basta decir que me harté bastante de acercar y alejar el zoom como un loco para alinear las cosas a la perfección con los píxeles.

Actuación

Este es un grande. Usemos una tableta con una proporción de 4: 3 como ejemplo. Configuré un PSD en blanco @ 1x (que es 1024 × 768 píxeles) y otro @ 2x (2048 × 1536) y un tercero @ 3x (3072 × 2304). Luego hice algunas comparaciones.

Tabla que muestra el número de píxeles, el tamaño en el disco y la memoria para @ 1x - @ 3x PSD en blanco
Tabla que muestra el número de píxeles, el tamaño en el disco y la memoria para PSD en blanco de @ 1x a @ 3x.

Primero, miré la cantidad de píxeles en los PSD. El PSD @ 2x tiene cuatro veces más píxeles. El @ 3x tiene nueve veces más. Esto afecta directamente el uso de la memoria, que a su vez aumenta cuatro y nueve veces. Para nuestro PSD en blanco, esto pasó de 2.25M a 9M @ 2x, y luego 20M para @ 3x.

Por último, pero no menos importante, también necesita almacenar todos estos píxeles adicionales. Por lo tanto, el tamaño de su archivo también aumenta. El tamaño en disco aumentó un 280% para @ 2x y un 590% para @ 3x. Ahora, en nuestro PSD en blanco, esto es solo un aumento de 60 a 358 KB. Pero una vez que tenga algunos objetos y capas inteligentes serios, ¡cuidado! Tomemos el ejemplo de un PSD de 100 MB. El @ 3x podría ser de 590 MB. Luego, multiplique esto por los 20 a 30 documentos de su proyecto.

Desde el punto de vista del rendimiento, está muy claro que trabajar en Retina le va a costar bastante uso de RAM, CPU y disco.

Tamaño de fuente

Este problema se vuelve obvio con bastante rapidez cuando está trabajando @ 2x o @ 3x. Suponga que se ha propuesto hacer un cuadro de texto con la fuente configurada en 16 píxeles. ¡Pero @ 2x esto son 32 píxeles, y @ 3x son 48 píxeles! ¿No es ideal tener que multiplicar constantemente por dos o tres? No sé ustedes, pero podría hacerlo sin las constantes matemáticas. Cuando diseño, quiero saber que 16 píxeles son 16 píxeles.

Los tamaños de fuente se convierten en un juego de multiplicación cuando se trabaja en Retina
Los tamaños de fuente se convierten en un juego de multiplicación cuando se trabaja en la escala Retina.

Píxeles enteros

Aquí hay otra trampa. ¿Qué pasa cuando usas 1px en @ 2x Retina? Lo has adivinado, ¡se convierte en 0.5 píxeles! Y a 3x sería aún peor, ¡0,33 píxeles! Por lo tanto, también debe tener en cuenta constantemente que sus tamaños deben ser divisibles entre 2 o 3 cuando trabaje en Retina. Otra consideración entra en juego si alguna vez usa @ 2x con un valor de píxel impar. Digamos que tiene una caja de 33 píxeles de ancho; cuando se vuelve a convertir a @ 1x para la construcción, se convierte en 16,5 píxeles. Otra fuga de cerebros por trabajar con Retina.

Ilustración de cómo 1px retrocederá de @ 1x a @ 3x
Ilustración de cómo 1px retrocedería de @ 1x a @ 3x.

Especificaciones

Este es otro problema que he visto en el lugar de trabajo: diseñadores que han estado trabajando @ 2x o @ 3x y luego comienzan a especificar su diseño para los desarrolladores. Por lo general, esto implica documentar el relleno, los anchos, las alturas, los tamaños de fuente, etc. para garantizar que el diseño esté bien construido. Pero olvidan que tienen el doble o el triple de resolución. Entonces, ¡los pobres desarrolladores obtienen una especificación completa en la que necesitan dividir todo entre 2 o 3! No es genial, ¿verdad? ¿Por qué hacerles la vida más difícil?

La otra opción es que el diseñador podría guardar un nuevo PSD al 50% o 33%, y luego especificarlo. Pero Retina-land parece una calle de un solo sentido. Es difícil ver a través de esas anteojeras.

Las buenas noticias

No te preocupes. Después de todas las malas noticias, hay buenas noticias. Mientras trabajaba en exportar iconos para Android desde Illustrator, Descubrí el mundo de los píxeles independientes de la densidad (DP). Puede leer una gran explicación extensa en Desarrolladores de Android sobre «Soporta múltiples pantallas, ”O puedo desglosarlo muy rápido.

Básicamente, un DP es la dimensión de píxeles @ 1x o, en términos de Android, la densidad de línea de base que es media (MDPI). Un píxel independiente de la densidad es lo mismo que 1 píxel físico en una pantalla de 160 DPI. La conversión es DP = pixel ÷ (DPI ÷ 160).

Usemos nuestro ejemplo de tableta con una pantalla de 2048 × 1536 píxeles y 320 DPI. Al ejecutar la ecuación anterior, para el ancho obtenemos 1024 DP y para la altura, 768 DP. Esta se convierte en nuestra resolución de referencia. Y también necesitamos conocer el factor de escala de los activos de imagen. Esa ecuación es: scale factor = DP × (DPI ÷ 160).

Usando el ancho de 1024 DP y los 320 DPI del dispositivo, si ejecutamos esta ecuación, obtendríamos un factor de escala de 2. Esto significa que tendríamos que generar @ 2x activos para mostrar en este dispositivo. También es bastante sencillo ver que 2048 ÷ 1024 = 2. Entonces, ¡no te preocupes por las ecuaciones!

Como otro ejemplo rápido, tomemos el Nexus 5. Con su resolución de 1920 × 1080 píxeles y 480 DPI, las unidades DP resultan ser 640 × 360. Luego, el factor de escala es @ 3x. Entonces, ahora conoce las dimensiones de su DP y el factor de escala para los activos.

Ejemplo de unidades DP @ 1x a @ 3x en varios dispositivos
Ejemplo de unidades DP @ 1x a @ 3x en varios dispositivos.

Una vez que tenga las dimensiones de DP, se convertirán en el tamaño de su lienzo PSD a 72 DPI. Entonces, la respuesta a este misterio es diseño @ 1x o en DP.

Algunos otros dispositivos no encajan tan bien en estos cubos, pero entiendes la idea. El punto aquí es que está reduciendo a las unidades de DP de línea de base y que conoce la escala para exportar imágenes.

«¡Pero estoy atascado con imágenes @ 1x!»

Correcto. Y un @ 1x PNG se vería horrible en un dispositivo Retina. Lo que necesitaba era una forma de trabajar en @ 1x y con unidades DP, pero exportar a @ 2x o @ 3x para obtener una vista previa en un dispositivo. Mis clientes no aceptarían nada menos. Entonces, usando mi conocimiento de la exportación de íconos a varios DPI para Android, que he cubierto en otro lugar, Apliqué la misma técnica a Photoshop.

La solución a mi problema fue un script de Photoshop que exporta cualquier lienzo a @ 2x o @ 3x PNG para obtener una vista previa en un dispositivo. Por lo tanto, uno puede seguir trabajando @ 1x y en DP y obtener todos los beneficios de rendimiento y seguir obteniendo pantallas de buena calidad. Tenga su pastel y cómelo también, por así decirlo.

Exportar Scripts

Aquí hay un resumen rápido de cómo funciona el script:

  1. Su lienzo de Photoshop cambia de tamaño a 200% o 300%.
  2. Crea una nueva carpeta llamada retina, donde se guarda su PSD.
  3. Luego, guarda un PNG como <documentname>_2x.png o <documentname>_3x.png.
  4. También borra y depura el historial («Deshacer»).
  5. Luego, guarda el documento exactamente como estaba antes de que se ejecutara el script.

Los scripts son muy fáciles de modificar. Si desea cambiar el nombre de la carpeta o del archivo, simplemente debe cambiar las variables que se muestran a continuación:


var scale = "200%";
var folderName = "retina";
var extensionName = "_2x.png";

Instalación

Descarga los scripts (ZIP, 4 KB) o vea el proyecto en GitHub.

Una vez que estén descargados y descomprimidos, copie los scripts y péguelos en Photoshop Scripts carpeta: en Windows, Program FilesAdobeAdobe Photoshop CC 2014PresetsScriptsy en Mac ApplicationsAdobePhotoshop CCPresetsScripts.

Tenga en cuenta que esto varían según la versión de Photoshop y el sistema operativo.

Ya casi terminas. Reinicie Photoshop y los scripts estarán listos para funcionar. Ahora, en cualquier momento que desee exportar un PNG @ 2x o @ 3x, simplemente haga clic en “Archivo” → “Scripts” → “ExportDocument2xPNG” o “Archivo” → “Scripts” → “ExportDocument3xPNG”:

Haga clic en Archivo
Haga clic en «Archivo».
Vaya a Scripts y haga clic en ExportDocument2xPNG o ExportDocument3xPNG
Vaya a «Scripts» y haga clic en «ExportDocument2xPNG» o «ExportDocument3xPNG».

Ahora te quedan imágenes Retina @ 2x o @ 3x, listas para poner en el dispositivo.

Consejos

Tenga en cuenta algunas cosas si opta por este enfoque. Utilice formas y vectores siempre que sea posible. Se amplían perfectamente, al igual que los estilos de capas. Utilice siempre objetos inteligentes para cualquier mapa de bits. Tenga en cuenta que aún deberán estar @ 2x o @ 3x en el interior.

Usando este enfoque con Generador de Photoshop también funciona muy bien. Cualquier capa o grupo de capas se puede exportar @ 2x y @ 3x. Y sabrá que son perfectos en píxeles.

Después de producir los diseños, necesitaba crear un prototipo en el que se pudiera hacer clic para el cliente. Descubrí que los PNG exportados funcionan muy bien con Maravilla. Marvel te permite subir tus imágenes a Dropbox oa través de su propio sistema. Una vez que se cargan, puede crear puntos de acceso y vincularlos a otras pantallas. Luego, puede ver en un dispositivo para ver sus diseños en acción. La otra ventaja fue que usé menos ancho de banda y menos espacio en Dropbox. ¡Los PSD de Retina habrían sido superpesados!

Ilustrador

Si usa Illustrator, también puede trabajar @ 1x y en DP. Asegúrese de que su documento esté configurado para la web a 72 DPI. Luego, puede exportar manualmente imágenes @ 2x y @ 3x PNG haciendo clic en «Archivo» → «Exportar …» y seleccionando «PNG». Haga clic en «Exportar». Luego, use el menú desplegable «Resolución», haga clic en «Otro» e ingrese 144 PPI para @ 2x o 216 PPI para @ 3x. Al igual que con los scripts de Photoshop, ¡esto también se puede configurar para que sea solo un clic!

Bosquejo

Tu otra opción es usar la aplicación cada vez más popular Bosquejo. Viene todo configurado y listo para funcionar @ 1x con un flujo de trabajo basado en vectores. Hay soporte integrado para exportar @ 2x y @ 3x desde capas y cortes. Solo tenga en cuenta el requisito del sistema operativo. El creador, Bohemian Coding, se enorgullece de desarrollar exclusivamente para Mac, sin planes para admitir Windows o Linux (según sus preguntas frecuentes). Es un gran programa si su flujo de trabajo y su negocio lo respaldan.

Gracias por leer

Bueno, espero que esto te haya sido útil. Ciertamente ha mejorado mi flujo de trabajo. Ahora obtengo PSD superligeros y rápidos que se pueden exportar a la escala Retina para verlos en un dispositivo. ¡Y la mejor parte es que ya no estoy acercándome y alejándome maniáticamente ni multiplicando y dividiendo mis píxeles!

Deja un comentario