En el desarrollo de una aplicación móvil el diseñador UI debe exportar los recursos gráficos adaptados para todas las densidades de pantalla, o también conocida como densidades de píxel, y asi evitar que los diferentes recursos gráficos se vean borrosos en la pantalla del dispositivo. En este artículo vamos a hablar en qué consiste la densidad de píxel y las herramientas disponibles para generar los recursos gráficos en las distintas densidades.
Densidades de píxel
La densidad de píxel es la cantidad de píxeles que hay en una determinada medida en la pantalla. Por lo tanto como diseñadores UI debemos exportar los recursos gráficos de tal forma que si el usuario tiene una pantalla de última generación el icono o imagen no pixele. Para ello es necesario sacar la imagen en las diferentes densidades establecidad para cada sistema (Android e iOS).
Si no tienes en cuenta estas variaciones de densidad de píxel, es posible que el sistema escale tus imágenes (y se vean borrosas) o que estas se muestren en el tamaño incorrecto.
Densidades de paíxel para Android
Debido a que Android es un sistema de código abierto, cada compañía adapta y diseña diferentes modelos de pantalla buscando la mejor solución para sus usuarios, esto provoca que la diversidad de pantallas sea mucho mayor que en iOS. En este caso se establece 6 multiplicadores (5 en realidad).
Si vamos a diseñar un elemento UI de 48×48 píxeles en formato .png, deberemos exportarlo en los siguiente tamaños:
- Densidad baja: 36x36px (0,75x)
- Densidad media: 48x48px (1x – mdpi)
- Densidad alta: 72x72px (1,5x – hdpi)
- Densidad extra alta: 96x96px (2x – xhdpi)
- Densidad extra extra alta: 144x144px (3x – xxhdpi)
- Densidad extra extra extra alta: 192×192 (4x – xxxhdpi). Este caso sólo afecta al icono principal de la app.
Cuando se trata de iconos, la mejor solución es utilizar archivos SVG (gráfico vectorial escalable), HTML5 los soporta, con lo cual podemos escalarlos sin ningún miedo a perder resolución, pero si el recurso que vamos a utilizar es un mapa de bits necesitaremos exportarlo siguiendo estas directrices de densidad.
Actualmente iOS no soporte este formato vectorial por lo que es aconsejable seguir utilizando el formato .png para todos sus recursos, ya sean iconos o imágenes en mapa de bits. Esperemos que en futuras versiones den soporte para imágenes vectoriales.
Densidades de píxel para iOS
En el caso iOS, al ser más exclusivo, las especificaciones técnicas en este sentido las dictamina Apple, por lo que tiende a simplificar el trabajo. Exportaremos nuestras imágenes e iconos en densidades 1x, 2x y 3x, el modo de nombrarlos es nombre@1x.png, nombre@2x.png, nombre@3x.png.
Herramientas para exportar recursos gráficos a diferentes densidades de píxel
App icon
App icon te ofrece la posibilidad de generar todas las densidades que actualmente demanda el mercado con la características principal que permite realizar la conversión por bloques de imágenes, reduciendo considerablemente el tiempo si tuviesemos que hacerlo recurso por recurso.
Hotpot
El inconveniente de Hotpot es que solo te permite generar las distintas densidades, recurso a recurso, una tarea bastante tediosa si tenemos que generar las densidades para 100 iconos. La ventaja es que además te ofrece la posibilidad de elegir densidades y tamaños para otras plataformas como Firefox o Chrome e incluso establecer una densidad (resolución) personalizada.
En ambas herramientas necesitaremos tener el recurso en su densidad más alta (x3) para que no nos genere recursos pixelados.
Otras herramientas
Cualquier herramienta enfocada al diseño UI ofrece la posibilidad de exportar los diferentes recursos a todas las densidades que el mercado demanda (Sketch – Adobe XD – Figma) incluido Adobe Illustrator, aunque enfocado más al diseño vectorial en las últimas versiones ofrece esta posibilidad.