Seguir

Imágenes en Spark Page

Hay dos tipos de fotos en Adobe Spark Page: las recortadas y las no recortadas. Los tipos de imagen de pantalla completa y de ventana pueden recortar las fotos según la naturaleza de esta y el tamaño de la pantalla del usuario. Con los tipos de imagen con foto incrustada y de anchura completa nunca se recortará la foto.

imageTypes.png

Lo que es muy importante entender aquí es que algunos tipos de imágenes (como las de pantalla completa y de ventana) no son posibles sin recortar. Tampoco podemos decir cómo se recortarán esas imágenes, lo que hace que la situación sea aún más confusa. Esto se debe a que Spark Page puede visualizarse en cualquier dispositivo independientemente del tamaño de su pantalla. Esto implica que las imágenes se recortarán de miles de formas diferentes al mismo tiempo.

Si no entiendes por qué estamos ante ese caso, ¡no te preocupes! Te ponemos un ejemplo ahora para aclararlo. Imagina que tenemos una imagen como esta de cinco personas caminando por la playa:

sample.png

Crédito: Unsplash

Veamos cómo verían esa imagen dos clientes que están viendo mi Spark Page al mismo tiempo. Uno de esos clientes está usando un teléfono móvil y el otro un ordenador. Como se muestra a continuación, hay dos formas en que los usuarios pueden visualizar la imagen en Spark Page:

 

Opción A: permitir el recorte

Lo que ven los usuarios:

compare1_r3_c1.png

La contrapartida

El usuario obtiene una experiencia muy inmersiva a costa del recorte de la imagen.

Algunas pantallas mostrarán menos de cinco personas en la playa. El número de personas que se verán dependerá del tamaño de la ventana del navegador del cliente.

Tipos de imagen de Spark Page que utilizar 

  • Imagen de título
  • Imagen a pantalla completa
  • Imagen de ventana
  • Diaporama
  • Diseño dividido

 

Opción B: no permitir el recorte

Lo que ven los usuarios:

compare1_r1_c1.png

La contrapartida

La imagen no se recorta, pero la experiencia no es muy inmersiva.

Todos los clientes podrán ver siempre las cinco personas.


Tipos de imagen de Spark Page que utilizar

  • Imagen con foto incrustada
  • Imagen de anchura máxima

 

Explicación de la opción A: permitir el recorte

Ten en cuenta que estas fotos siempre ocupan toda la pantalla en cualquier dispositivo en el que las estés mirando. Si giras el dispositivo, el tamaño de la pantalla cambia (va de alto a ancho o viceversa) y, sin embargo, la foto seguirá ocupando toda la pantalla. No verás espacios en blanco alrededor de los lados de la foto.

Este efecto hace que la foto tenga un aspecto verdaderamente inmersivo en el dispositivo (independientemente del tamaño) en el que los usuarios la vean. Incluso si cambian el tamaño en la ventana del navegador o giran el dispositivo, la foto seguirá ocupando toda la pantalla.

Este efecto inmersivo tiene un coste: a veces será necesario recortar la imagen para conseguirlo. Esto se debe a que la foto tiene una relación de aspecto única, pero se verá en pantallas con muchas relaciones de aspecto diferentes. Incluso si esta foto encaja perfectamente en el ordenador, no encajaría de ningún modo en el teléfono.

Por lo tanto, tenemos que tomar una decisión: podemos reducir la foto e insertar barras blancas en los laterales de manera que se visualice toda la imagen o estirar y recortar la imagen de manera que la parte de la imagen siempre ocupe la pantalla al completo. Cuando eliges el tipo de foto a pantalla completa, estás indicándole básicamente a Spark Page que prefieres sacrificar el recortado porque es más importante que la foto ocupe toda la pantalla.

 

Explicación de la opción B: no permitir el recorte

Si decides que tu foto no debe recortarse, puedes elegir los tipos de foto con imagen incrustada o de anchura completa. En ningún caso se recortará la imagen. Ten en cuenta que es posible que tengas que desplazarte para ver toda la imagen, pero la imagen al completo estará ahí.

Estos tipos de imagen son útiles cuando no puedes sacrificar el recorte para lograr la sensación inmersiva que te proporciona una foto a pantalla completa. Esto no quiere decir que un tipo de foto sea mejor que otro. Ambos tipos de fotos se pueden utilizar para conseguir un gran efecto dependiendo de la foto y su contexto en el documento. Por ejemplo, las imágenes con foto incrustada son una muy buena opción para los logotipos, ya que es poco probable que quieras que se estiren para ocupar toda la pantalla.

 

Una nota sobre el título, la ventana, el diaporama y el diseño dividido

No vamos a entrar en detalles sobre los tipos de fotos de título, ventana, diaporama y de diseño dividido. Solo vamos a mencionar que básicamente funcionan de la misma forma que el tipo de foto a pantalla completa en lo que a comportamiento de recorte se refiere.

 

Sugerencias

Si no entendiste todas las explicaciones anteriores, no pasa nada. Te ayudamos a recordar estas sugerencias:

  • Utiliza el tipo de foto a pantalla completa para crear una experiencia inmersiva en pantalla, pero recuerda utilizar fotos que puedan recortarse sin ningún problema.
  • Recuerda que el recorte de las imágenes a pantalla completa será diferente en los distintos dispositivos y tamaños de pantalla, por lo que debes comprobar que el resultado sea bueno en varias situaciones. Puedes comprobar esto muy rápido en el ordenador si cambias el tamaño de la ventana del navegador para explorar diferentes relaciones de aspecto.
  • Asegúrate de que estableces el punto focal en cada foto a pantalla completa. Esto proporciona a Spark Page una pista sobre la que es la parte más importante de la foto. De ese modo, puede intentar conservar dicho punto en la pantalla cuando se realice el recorte.
  • Si el formato de tu foto es importante o hay detalles en los bordes que no se deben recortar, utiliza imágenes con foto incrustada o de anchura completa.



Sugerencias para fotógrafos: ¿Cómo realizo fotos que se vean bien a pantalla completa?

La composición del marco o la forma en la que se coloca lo que se vaya a fotografiar es probablemente lo que determina que una foto sea buena. Si realizas la mejor foto del mundo y la recortas de forma ligeramente distinta, se puede reducir notablemente la calidad de la foto. De igual forma, si se toma una foto normal, recortarla de forma ligeramente diferente puede ser algo positivo. Los fotógrafos utilizan muchas técnicas de composición. Algunas de ellas se muestran aquí.

Tomemos como ejemplo algunas de estas reglas que aparecen en ese artículo:

  • Regla de los tercios
  • Marco dentro del marco
  • Triángulos dorados
  • Proporción de dorado

Estas son reglas extremadamente sensibles al recorte. Los fotógrafos que usan estas reglas no suelen optar normalmente imágenes a pantalla completa en Spark Page debido al recorte que supondrá en algunos dispositivos.

Sin embargo, si los fotógrafos quieren usar tipos de imagen inmersivos en Spark Page, conseguirá el mejor de los resultados teniendo en cuenta lo anterior y trabajando en ello. Esto significa que deben usar la función de punto focal de Spark Page con criterio, tener un solo elemento que fotografiar en la foto y evitar esas reglas sensibles al recorte.

Otra opción es evitar las reglas sensibles al recorte anteriores y centrarse en otras reglas fotográficas que aparecen en el artículo anteriores y que pueden proporcionar un aspecto fantástico a las fotos a pantalla completa:

  • Composición centrada y simetría
  • Líneas principales
  • Patrones y texturas
  • Simplicidad y minimalismo

Comprender estas limitaciones para las fotos y trabajar con ellas es la clave para conseguir de verdad el mejor aspecto de Spark Pages para los usuarios.

 

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 1 de 2
¿Tiene más preguntas? Enviar una solicitud