Cómo crear activos de imagen de pantalla retina para sitios web más atractivos

Explicación de las imágenes de la pantalla Retina

Las pantallas de los dispositivos han seguido mejorando en calidad durante los últimos años, y  Apple  en particular ha estado trabajando para hacer que sus pantallas sean extremadamente claras y visibles; de hecho, ‘Retina Display’ es una marca de Apple que se usa para describir las pantallas de sus dispositivos. dispositivos más nuevos.

Las pantallas Retina tienen como objetivo mostrar texto e imágenes con la mayor nitidez posible, sin píxeles visibles a simple vista. El desafío para los diseñadores es que las pantallas retina no son un estándar: varían según el tamaño de la pantalla del dispositivo (por ejemplo, la pantalla de un reloj en comparación con una tableta) y qué tan cerca estaría un usuario típico de la pantalla.

Cuando hablamos de pantallas retina, tenemos que pensar en la densidad de píxeles , que es la cantidad de píxeles que una pantalla puede caber en una distancia fija. Esto no es lo mismo que la resolución , que es la cantidad de píxeles en todo el alto y el ancho de un dispositivo. Una pantalla más pequeña (como la de un iPhone) con la misma resolución que una más grande (como la de un iPad) tendría una mayor densidad de píxeles.

Dividir el ancho físico de la pantalla por la cantidad de píxeles que se muestran horizontalmente nos da los píxeles por pulgada (ppi, también llamados dpi para puntos por pulgada). ‘Alto DPI’ se usa para referirse a cualquier dispositivo que tenga más de 200 píxeles por pulgada. Esto incluye todos los dispositivos con pantalla retina de Apple y algunos dispositivos de otros fabricantes. Para obtener una explicación más detallada, consulte este artículo en la  Guía del diseñador para DPI .

Tradicionalmente, los gráficos web se optimizaban a 72 ppp. Una imagen con esa densidad que se muestra en cualquier dispositivo de alto DPI (especialmente una pantalla de retina) se mostrará de una de dos maneras:

1. Como una fracción del tamaño si se muestra en el DPI del dispositivo.
2. Se muestra en las dimensiones originales con píxeles adicionales adivinados (interpolados) y rellenados para reducir la calidad de la imagen.

Esto significa que para obtener la mejor calidad de visualización de imágenes en los dispositivos de pantalla retina, debe trabajar con imágenes de mayor resolución. Esto garantiza que la imagen se pueda mostrar con una densidad de píxeles adecuada para estas pantallas más nuevas. Echemos un vistazo a cómo puede hacer eso dentro de su Photoshop.

Cómo usar Photoshop para crear imágenes de pantalla Retina

Trabajar con imágenes al doble o al cuádruple de resolución significa que es posible que deba acercar la imagen para poder ver cualquier detalle fino, pero los archivos de imagen extremadamente grandes pueden crear problemas de rendimiento y desafíos de almacenamiento de archivos.

La solución para la mayoría de los diseñadores ha sido crear varias capas y grupos, activarlos y desactivarlos según sea necesario mediante la función de composición de Photoshop, o trabajar con la resolución original y exportar los tamaños que necesiten (utilizando una acción como retinizar . eso ).

El desafío con ambos métodos es que no puede ver varias imágenes al mismo tiempo. Si necesita ver las diferencias en las imágenes en los tamaños necesarios, debe cambiar entre ellas o exportar y luego volver a trabajar.

Afortunadamente para los amantes de Photoshop, Adobe ha agregado una funcionalidad que facilita aún más la creación de múltiples imágenes. Ahora puede crear varios lienzos uno al lado del otro con la función de mesa de trabajo y crear varios tamaños de imagen con Generar . Veamos cómo funciona esto para crear imágenes para pantallas retina.

1. Crea tu primera mesa de trabajo

La nueva herramienta Mesa de trabajo , introducida en Photoshop CC 2015, se encuentra oculta detrás de la herramienta Mover . Puede hacer clic en la herramienta en el menú o usar Mayús+V para cambiar entre Mover y Mesa de trabajo :

Para crear una mesa de trabajo, haga clic y arrastre un área. La nueva mesa de trabajo se mostrará en el panel Capas con el nombre predeterminado Mesa de trabajo 1 .

2. Configure su mesa de trabajo

Puede agregar las capas que necesite a su mesa de trabajo y se anidarán de forma similar a los grupos de capas, lo que le permitirá crear una estructura de capas adecuada. Le sugerimos que agregue sus diversos activos, como formas y tipos, para que estén posicionados como los necesita antes de continuar con el siguiente paso.

3. Duplica tu mesa de trabajo

Una vez que su primera mesa de trabajo esté configurada para satisfacer sus necesidades, puede duplicarla usando el menú contextual. Haga clic con el botón derecho en Mesa de trabajo 1 en el panel Capas y seleccione Mesa de trabajo duplicada . Esto crea otra mesa de trabajo del mismo tamaño y posición, que contiene exactamente la misma estructura de capas con todos los activos incluidos:

4. Posiciona tus mesas de trabajo

La gran ventaja de usar mesas de trabajo es poder ver todas sus imágenes al mismo tiempo. Para hacer esto, solo coloque sus mesas de trabajo según sea necesario. Hay varias formas de mover una mesa de trabajo:

1. Use el panel Propiedades que se muestra cuando se selecciona una mesa de trabajo para ingresar las coordenadas X e Y para la esquina superior izquierda de la mesa de trabajo.
2. Arrastre la mesa de trabajo seleccionada a cualquier posición dentro de Photoshop. La mesa de trabajo está habilitada para la guía inteligente, por lo que puede alinear automáticamente varias mesas de trabajo y sus posiciones se bloquearán en el espacio anterior.
3. Utilice las teclas de flecha del teclado para mover una mesa de trabajo seleccionada. Una tecla de flecha por sí sola empujará el tablero un píxel, mientras que mantener presionadas las teclas Mayús+Flecha lo moverá diez píxeles.

5. Cambie el tamaño de sus mesas de trabajo (si es necesario)

Si necesita ajustar el tamaño de sus mesas de trabajo, nuevamente tiene múltiples opciones:

1. Cambie su tamaño usando los controladores que aparecen cuando selecciona una mesa de trabajo.
2. Use el panel de opciones justo debajo del menú Archivo para elegir tamaños preestablecidos, establecer anchos o altos personalizados, o cambiar entre orientación vertical y horizontal.
3. Utilice el panel Propiedades que se muestra cuando se selecciona una mesa de trabajo para cambiar el tamaño y acceder a los tamaños preestablecidos.

6. Crea tu arte

Ahora puede trabajar con sus mesas de trabajo, reemplazar activos de imagen y realizar cambios según sea necesario. Suponiendo que su configuración original salió bien, ahora tendrá imágenes perfectas en píxeles con todos los activos en el lugar correcto.

7. Configure la herramienta Generar

Generar le permite exportar mesas de trabajo, capas o grupos mediante una sintaxis de nomenclatura especial. Actúa como un acceso directo de Guardar para Web . Para asegurarse de que Generar esté activado para su PSD, vaya a Archivo > Generar > Activos de imagen:

8. Cambia el nombre de tus mesas de trabajo

Genere trabajos guardando activos de imagen mientras trabaja en función de las opciones que establezca en el nombre del grupo de capas, o en este caso, su mesa de trabajo. Hay algunas opciones que puede configurar:

• Formato de archivo.  Agregue una extensión (como -opt.jpg , .gif o .png ) para guardar el archivo relevante, por ejemplo,  header-main.png. Los activos de imagen se guardarán en la misma carpeta que el archivo PSD, pero con el sufijo -assets .
• Compresión de archivo.  Después de la extensión, puede agregar una cifra que indique el nivel de compresión utilizado. Para opt.jpg puede usar porcentajes y para . png use 8 , 24 o 32 para los formatos de bits respectivos, por ejemplo,  header-main.png8.
• Escala de salida.  Puede establecer la escala de la salida agregando el porcentaje o los píxeles (ancho por alto) antes del nombre de la imagen (por ejemplo,  100% header-main.png8 ).
• Múltiples imágenes.  Puede exportar varias imágenes desde la misma mesa de trabajo utilizando una coma o un signo más para separar los nombres de las imágenes. Por lo tanto, cada imagen puede tener sus propias opciones siempre que cada nombre de imagen sea único, por ejemplo,  100% header-main.png8, 200% header-main.png8 .

La combinación de estas opciones le permite crear recursos de imagen complejos de manera uniforme a partir de sus mesas de trabajo:

Si se necesitan imágenes estándar para todas sus mesas de trabajo, la herramienta Generar le permite crear una configuración predeterminada para aplicar a cada una. Para crear esta configuración, agregue una capa vacía en la parte superior de su documento con las siguientes opciones:

• Palabra clave predeterminada: el nombre debe comenzar con esto para que Generate sepa que debe usarla como predeterminada.
• Escala de salida:  como antes, establezca la escala de la salida con un porcentaje o píxeles (ancho por alto).
• Carpeta/sufijo: establezca el nombre de la carpeta donde se deben guardar las imágenes y un sufijo para agregar a los nombres de archivo.

Al agregar múltiples opciones, puede crear automáticamente las imágenes que necesita para las pantallas retina, por ejemplo,  final predeterminado del 100 %/@1x, final del 200 %/@2x, final del 300 %/@3x. Luego puede agregar extensiones a cualquier tablero que desee exportar utilizando la opción predeterminada.

Si usa otras herramientas de diseño como Sketch , tienen sus propios mecanismos de exportación, pero si es fanático de Photoshop, este flujo de trabajo reducirá drásticamente la cantidad de tiempo que le lleva crear las múltiples imágenes necesarias para las pantallas retina.

Cómo optimizar los activos de imagen de su pantalla Retina

El tamaño del archivo siempre es una consideración importante al crear imágenes para su sitio web. Las imágenes deben cargarse en los navegadores de sus visitantes, por lo que cuanto mayor sea el tamaño de los archivos, más lento se cargará su sitio. Es probable que sus visitantes no vean un hermoso sitio web que tarda una eternidad en cargarse, ya que no querrán esperar.

Puede comenzar a optimizar las imágenes de su sitio web asegurándose de que está utilizando las opciones relevantes al guardar sus archivos en Photoshop. Como cubrimos en el flujo de trabajo anterior, guardará sus imágenes como archivos JPEG o PNG . El formato JPEG es mejor para fotografías con muchos colores ya que usa compresión para reducir el tamaño del archivo. El formato PNG funciona mejor para capturas de pantalla e imágenes de diseño, como íconos y botones, pero usa compresión sin pérdidas , por lo que los tamaños de archivo son mayores.

WordPress también le ofrece asistencia en la optimización, creando múltiples tamaños de imagen cuando carga imágenes en su sitio de WordPress. Esto ayuda a garantizar que use una imagen de tamaño adecuado; por ejemplo, las miniaturas se usarían en listas de varias publicaciones. Además, hay complementos de optimización de imágenes  para ayudar a optimizar las imágenes a medida que se cargan.

Conclusión

Está muy bien seleccionar imágenes sorprendentes de alta resolución para su sitio web, pero si no las ha preparado correctamente antes de cargarlas, podrían lucir inesperadamente pixeladas cuando se vean en los dispositivos de visualización de retina más nuevos.

Crear imágenes de retina en Photoshop es pan comido. Recapitulemos los pasos:

1. Cree sus mesas de trabajo, teniendo cuidado de configurarlas, duplicarlas y colocarlas correctamente.
2. Cambie el tamaño de sus mesas de trabajo si es necesario, antes de crear las imágenes en cuestión.
3. Configure la herramienta Generar para ayudar a exportar sus imágenes.
4. Cambie el nombre de sus mesas de trabajo dentro de Generar, configurándolas como opciones predeterminadas si es necesario.

Los consejos compartidos anteriormente deberían ayudarlo a comprender cómo crear imágenes que están optimizadas para mostrarse en pantallas de dispositivos más nuevos, lo que le permite crear hermosas imágenes que se ven como espera en todas las pantallas.

Si tiene algo de experiencia trabajando con activos de imagen de pantalla retina, nos encantaría escuchar sus consejos y trucos para crearlos y optimizarlos suscribiéndose a la sección de comentarios a continuación.

Imagen en miniatura del artículo por Blablo101 / Drawn Keeper / shutterstock.com