Krypton Solid

Listo para Retina HD: cree activos con píxeles perfectos para múltiples factores de escala

Listo para Retina HD: cree activos con píxeles perfectos para múltiples factores de escala

El 6 Plus es el primer iPhone que tiene una pantalla “Retina HD”, la pantalla más nítida que jamás haya creado Apple. Obliga a los diseñadores a proporcionar un conjunto adicional de recursos de imágenes a los desarrolladores para igualar esa nitidez. Solo necesitábamos un conjunto de activos para el iPhone original hasta el iPhone 3GS. Y cuando salió el iPhone 4 con la pantalla Retina, también necesitábamos recursos 2x: imágenes el doble de detalladas. Ahora, con la pantalla del 6 Plus aún más detallada que la del iPhone 4, también necesitaremos proporcionar activos 3x. Los números 1x, 2x y 3x también se denominan «factores de escala».

El 6 Plus es el primer iPhone que tiene una pantalla “Retina HD”, la pantalla más nítida que jamás haya creado Apple. Obliga a los diseñadores a proporcionar un conjunto adicional de recursos de imágenes a los desarrolladores para igualar esa nitidez.

Solo necesitábamos un conjunto de activos para el iPhone original hasta el iPhone 3GS. Y cuando salió el iPhone 4 con la pantalla Retina, también necesitábamos recursos 2x: imágenes el doble de detalladas. Ahora, con la pantalla del 6 Plus aún más detallada que la del iPhone 4, también necesitaremos proporcionar activos 3x. Los números 1x, 2x y 3x también se denominan «factores de escala».

Otras lecturas en SmashingMag:

Por supuesto, los desarrolladores de Android siempre han tenido que lidiar con muchos conjuntos diferentes de activos. Aún así, los diseñadores se encuentran cuestionando su flujo de trabajo de producción. En este artículo, nos centraremos en iOS, pero podría extender fácilmente este enfoque a Android y la web. No intentaremos ofrecer una solución milagrosa, y tal vez otras formas puedan parecer más fáciles al principio, pero este artículo presenta un flujo de trabajo sólido que se amplía para grandes proyectos.

En primer lugar, sus conjuntos de iconos deben estar basados ​​en vectores. El enfoque descrito en este artículo se centra en generar múltiples versiones de activos a partir de una única forma vectorial en un documento de Photoshop que contiene todos sus iconos.

Un documento de iconos unificado tiene la ventaja de mantener todo junto en un archivo, lo que le permite ver qué tan bien armonizan sus iconos y activos.

Si está diseñando para iOS 7 y superior, entonces podría pensar que las versiones 1x ya no son necesarias. Sin embargo, aún los necesitará para dispositivos como el iPad Mini original, el iPad 2 y potencialmente Android y la web.

Configurar Photoshop

Primero, te mostraré cómo configuro Photoshop. Si sabe lo que está haciendo, puede utilizar otras configuraciones. Pero para aquellos curiosos sobre cómo me gusta trabajar, este es:

  1. Desactive los atractivos visuales como «Zoom animado» y «Desplazamiento panorámico».
  2. Deshabilite «Ajustar herramientas y transformaciones vectoriales a cuadrícula de píxeles».

El primer punto es una cuestión de gusto personal, pero no seguir el segundo punto puede interponerse en su camino cuando intenta ser preciso con la herramienta Selección directa.

Estas selecciones le ayudarán a trabajar con precisión con la herramienta Selección directa. (Ver versión grande)

Luego, configuraré la herramienta Mover (V) para seleccionar capas. No es necesario marcar «Selección automática» porque puede seleccionar una capa automáticamente presionando el Command mientras hace clic. La desactivación de esta opción lo protege de mover capas involuntariamente.

Configure la herramienta Mover (V) para seleccionar capas.
Configure la herramienta Mover (V) para seleccionar capas. (Ver versión grande)

Sentirse libre

En primer lugar, creo que el diseño y la producción son dos fases separadas. Cuando su creatividad fluye, no debe preocuparse mucho por las limitaciones de producción.

Diseñe con su resolución favorita (quizás 2x) y distribuya utilizando las dimensiones de un dispositivo con el que esté familiarizado. Pero definitivamente use un dispositivo real y use aplicaciones como Skala Preview y xScope para reflejar el diseño en vivo en su dispositivo. No debería trabajar con aplicaciones a menos que esté comprobando constantemente el diseño en un dispositivo real.

Ponga en orden esos vectores

Como se señaló, asumiré que está diseñando sus íconos en Illustrator. Antes de copiarlos en Photoshop, deberá ordenarlos. Utilice Pathfinder para sumar y restar trazados hasta que tenga una forma única.

Si diseña sus iconos en Illustrator, debe ordenarlos antes de copiarlos en Photoshop.
Si diseña sus iconos en Illustrator, debe ordenarlos antes de copiarlos en Photoshop. (Ver versión grande)

A la izquierda, arriba, hay un ícono complejo compuesto por múltiples formas, incluida una forma blanca para simular la transparencia. Para el ícono de la derecha, resté el rectángulo blanco del negro detrás de él. Haz esto seleccionando los dos rectángulos y presionando el botón «Menos frente» en el panel Buscatrazos. Luego, seleccione todas las formas y haga clic en «Unir» para combinarlas en una.

Ahora, copie la ruta en Photoshop y péguela como una capa de forma.

Pega tu camino como una capa de forma.
Pega tu camino como una capa de forma.

Si su forma termina desordenada, eso significa que no ordenó el gráfico vectorial correctamente.

Alinear fuerzas

Cuando pegue el icono en Photoshop, podría verse así:

Cuando pegue el icono en Photoshop, probablemente verá esos píxeles grises alrededor de la forma.
Cuando pegue el icono en Photoshop, probablemente verá esos píxeles grises alrededor de la forma. (Ver versión grande)

Al acercar el zoom al icono, probablemente verá esos píxeles grises alrededor de la forma. Esos «píxeles parciales» se producen si una forma no ocupa un píxel completo. No queremos ninguno de esos.

Queremos empezar a trabajar desde una versión 1x del icono porque, cuando esté ordenado correctamente, podrá escalar esta versión hasta 2x y 3x sin ningún problema. Si hizo el diseño original en 2x, entonces deberá reducir la forma al 50%.

Ahora es el momento de alinear las líneas horizontales y verticales con el siguiente píxel completo. Está bien si las curvas y las líneas diagonales no ocupan píxeles completos.

Utilice la herramienta Selección directa de Photoshop para marcar un grupo de puntos de anclaje desalineados y utilice las teclas de flecha para mover estos puntos entre dos píxeles.

Nota: Cuanto más se acerque (utilice Option + Shift + mouse wheel), con mayor precisión podrá mover los puntos de anclaje.

Los puntos de ancla de la parte inferior y del lado derecho ahora están alineados con la cuadrícula de píxeles.
Los puntos de ancla de la parte inferior y del lado derecho ahora están alineados con la cuadrícula de píxeles.
Todos los píxeles parciales se han ido.
Todos los píxeles parciales se han ido.

Hacer un chequeo

Ahora, asegúrese de que todos los puntos de anclaje estén en la cuadrícula escalando su versión 1x hasta 500%. Si ve píxeles parciales, alinéelos como se describe arriba. Si todo está bien, reduzca la forma al 20%.

Recuerda: De ahora en adelante, siempre debe escalar proporcionalmente desde la esquina superior izquierda y siempre asegúrese de que los valores de X e Y sean números redondos.

Si ve píxeles parciales, alinéelos como se describe arriba.
Si ve píxeles parciales, alinéelos como se describe arriba. (Ver versión grande)

Escalarlo

Veamos cómo funcionan las diferentes resoluciones de nuestro icono. Seleccione la versión 1x (V, luego Command + mouse click) y duplicar el icono (Option + click and drag) a una posición junto a la versión 1x.

Escale el icono duplicado hasta un 200% proporcionalmente desde la esquina superior izquierda. La versión 2x ​​no debería mostrar nuevos píxeles parciales. Solo debería ser más grande.

Para simplificar las cosas, asumiremos que está satisfecho con las versiones 1x y 2x y que ahora quiere ver la 3x.

Duplica la versión 2x ​​(Option + click and drag), muévalo hacia un lado y luego escale en un 150%. (Entonces, 200% × 150% = 300%)

Más adelante en este artículo, le diré qué hacer si no está satisfecho con los resultados. Pero si está satisfecho con las versiones 2x y 3x, entonces ya sabe que las versiones 2x y 3x se pueden generar a partir de la versión 1x sin ningún problema.

Continúe y elimine las versiones 2x y 3x; las generaremos automáticamente.

Genera y disfruta

Photoshop tiene una herramienta incorporada llamada «Generador» que automáticamente renderiza una capa de forma a múltiples versiones de imagen. Para ello, tenemos que crear un grupo de capas y darle un nombre especial: el nombre del archivo y el factor de escala para cada versión.

En este caso, debería verse así: cover.png, 200% cover@2x.png, 300% cover@3x.png

Las comas separan las versiones y el porcentaje le dice a Photoshop la cantidad de escala.

Las comas separan las versiones y el porcentaje le dice a Photoshop la cantidad de escala.
Las comas separan las versiones y el porcentaje le dice a Photoshop la cantidad de escala. (Ver versión grande)

Ahora, active Generator.

Activar generador.
Activar generador. (Ver versión grande)

Generator creará una carpeta junto a su archivo PSD y guardará automáticamente los archivos PNG cuando guarde el documento de Photoshop.

Generator guardará automáticamente los archivos PNG cuando guarde el documento de Photoshop.
Generator guardará automáticamente los archivos PNG cuando guarde el documento de Photoshop. (Ver versión grande)

Para agregar un nuevo factor de escala en un momento posterior, simplemente debe modificar el nombre del archivo de la capa.

Sea creativo para diferentes resoluciones

La modificación de las ilustraciones para diferentes factores de escala es una práctica común porque puede mostrar más detalles en un gráfico de 2x que en una versión de 1x.

En el siguiente ejemplo, la versión 1x del icono contiene solo una corchea única, mientras que la versión 2x ​​contiene una nota radiada.

Crea diferentes iconos para diferentes resoluciones.
Crea diferentes iconos para diferentes resoluciones. (Ver versión grande)

Obviamente, no eliminaría la versión 2x ​​porque es diferente de la 1x. Cree un grupo adicional para la versión 2x ​​y asígnele un nombre de capa que sea compatible con Generator. Debido a que ya ha escalado la versión 2x ​​en Photoshop, no agregue «200%».

Para terminar con una versión 3x después de trabajar en 2x, tendrá que escalar en un 150%. Por lo tanto, agregaría este número al nombre del archivo 3x.

Para terminar con una versión 3x después de trabajar en 2x, tendrá que escalar en un 150%.
Para terminar con una versión 3x después de trabajar en 2x, tendrá que escalar en un 150%. (Ver versión grande)

El tamaño importa

Hacer que las versiones 2x de sus activos sean exactamente dos veces más grandes que los activos 1x es absolutamente fundamental. A veces, esto es más difícil de lo que cree. Considere este teclado:

Hacer las versiones 2x de sus activos a veces es más difícil de lo que cree.
Hacer las versiones 2x de sus activos a veces es más difícil de lo que cree. (Ver versión grande)

Para la versión 1x (el teclado más pequeño a la izquierda), decidí que las teclas negras de 1 píxel de ancho eran demasiado delgadas, así que usé 2 píxeles.

Cuando escala esa versión (marcada en rosa en el teclado a la derecha), termina con teclas negras que tienen 4 píxeles de ancho, lo que parece un poco demasiado ancho.

Pero con las teclas de 3 píxeles de ancho, la distancia entre todas las teclas cambia. Para mantener todo simétrico, necesitamos hacer que el teclado sea 1 píxel más corto. Y como no podemos escalar 3 píxeles por 1,5 sin terminar con gráficos borrosos, también necesitamos una versión especial de 3x.

Para arreglar el tamaño de exportación de nuestro activo 2x, podemos agregar una máscara de capa. Generator siempre usará las dimensiones de una máscara de capa si hay una presente.

Para arreglar el tamaño de exportación de nuestro activo 2x, podemos agregar una máscara de capa.
Para arreglar el tamaño de exportación de nuestro activo 2x, podemos agregar una máscara de capa. (Ver versión grande)
Generator siempre usará las dimensiones de una máscara de capa si hay una presente.
Generator siempre usará las dimensiones de una máscara de capa si hay una presente. (Ver versión grande)

Resumen

Con suerte, los métodos descritos aquí simplificarán su flujo de trabajo. Como puede ver, crear activos con píxeles perfectos para diferentes tamaños y densidades de pantalla no es tan complicado cuando usa gráficos vectoriales para su ventaja y deja que Photoshop haga el trabajo pesado.

Desventajas de este enfoque

  • Los activos se almacenan en 1x en el archivo de Photoshop.

Ventajas de este enfoque

  • Cree varios activos de imagen a partir de una sola capa de forma, lo que le permitirá ahorrar mucho tiempo en el futuro.
  • Los iconos están todos en un documento.
  • Generar activos para otros factores de escala a partir de su PSD se vuelve fácil para otras personas.
  • Ver qué resoluciones de un icono necesitan una atención especial se vuelve fácil para otros diseñadores.

Deja un comentario