Share
El patrón de usar texto sobre imágenes de fondo ha sido popular durante años. Al originarse mucho antes del diseño web, el texto en una imagen puede proporcionar una experiencia emocionalmente atractiva y contextualmente rica. Antes del día presente, las imágenes tenían que ser mucho más pequeñas para permitir un ancho de banda significativamente más lento. A medida que las velocidades de conexión y las densidades de pantalla aumentan rápidamente, estamos abiertos a utilizar imágenes mucho más grandes en nuestros diseños..
Las decisiones de diseño relacionadas con esta técnica son increíblemente importantes a considerar, y el desarrollo de las mejores prácticas para regir esta práctica es imperativo para mantener un diseño de alta calidad. Uno no puede simplemente colocar texto sobre cualquier imagen y esperar que se vea bien.
En este artículo, discutiremos cinco aspectos diferentes de colocar texto sobre imágenes que le ayudarán a mezclar correctamente la copia y las imágenes.
Nota: a lo largo del artículo, se aplican los mismos principios al elegir combinaciones de video y texto.
El uso de imágenes que tienen un contraste significativo con el texto es imperativo. En particular, usar imágenes más oscuras con un texto más claro o imágenes más oscuras con filtros o un elemento de superposición puede ser una forma efectiva de asegurarse de que está utilizando suficiente contraste.
En este ejemplo, utilizamos filtros WebKit para manipular el contraste y el brillo de una imagen, que colocamos y manipulamos utilizando un elemento adicional. Echa un vistazo a la demo. El color no es la única forma de mejorar el contraste de una imagen en relación con el texto superpuesto. Es esencial elegir el tamaño y la posición del texto en relación con los elementos enfocados de la imagen, ya que esto se relaciona con la legibilidad del texto en sí.. En este ejemplo, hemos elegido una imagen con un área de cielo grande y relativamente homogénea. Esta es un área perfecta para colocar texto. En contraste, una posición mucho menos legible del texto sería directamente en el centro de la imagen, donde aparece el horizonte. Echa un vistazo a la demo. Elija una imagen que utilice la profundidad de campo. Esto permitirá un fondo más suave para el texto, lo que aumentará la legibilidad. Coloque el texto en la parte desenfocada de la imagen y asegúrese de que el color del texto contrasta adecuadamente con el color primario del área desenfocada.. Podemos hacerlo fácilmente colocando el texto en áreas de menor enfoque, como en este ejemplo. Echa un vistazo a la demo. El texto sobre las imágenes es tan efectivo como la reunión inferida de la combinación. Por ejemplo, no elija imágenes genéricas si las imágenes más específicas se comunicarán de manera más adecuada. Al elegir las imágenes, tenga en cuenta la evocación emocional y el contexto literal de la imagen, especialmente en lo que se refiere al tono del mensaje que la copia pretende transmitir.. Piense en dónde aparece el texto en relación con el nivel de enfoque de los diversos elementos de la imagen. ¿Parece que el texto se sienta en la imagen, o viene al primer plano? ¿Se mezcla el texto o mantiene su propia posición única en el espacio z? ¿Cómo se relaciona el texto con los elementos enfocados de la imagen, más específicamente?? Una regla de oro: cuanto más pequeño sea el texto, más lejos aparecerá el texto en el espacio z. En este ejemplo, utilizamos un texto de primer plano que parece estar mucho más cerca de nosotros que los arbustos en el fondo. A pesar del alto nivel de detalle en el fondo, nuestros ojos naturalmente identifican las líneas más largas y las formas más grandes del texto, interpretando el texto mucho más fácilmente que el mal ejemplo. En el mal ejemplo, las formas de los caracteres parecen colocar el texto en aproximadamente la misma posición z que las hojas del fondo.. Echa un vistazo a la demo. Bueno, eso concluye nuestra discusión sobre la estética. En el siguiente artículo, cubriremos diferentes formas de combinar estas técnicas con las interacciones de desplazamiento y la animación..filtro: brillo (40%) contraste (70%);
Dificultad para leer; sin punto focal en el texto o en la imagen
Mucho más fácil de leer; requiere filtros CSSMás ejemplos
https://ayr.com/
https://www.geckoboard.com/
http://anodpixels.com/
https://obakkifoundation.org/ 2. Contraste a través del dimensionamiento y posicionamiento.
Mal ejemplo; Mal contraste, mala colocación..
Buen contraste, mejor colocación..Otros ejemplos
http://www.themostnorthernplace.com/
http://eup.volkswagen.no/
http://www.dtelepathy.com/ 3. La legibilidad a través de la profundidad
Otros ejemplos
http://une.ch/creation/home
http://www.gloriasrestaurants.com/
http://www.atelier-serge-thoraval.com/en/
http://purplerockscissors.com/ 4. Elección del sujeto de la imagen
Algunos consejos:
Ejemplos
http://blood-and-water.animalplanet.com/
http://pixelgrade.com/demos/rosa/
http://formula1data.com/ 5. Conciencia tridimensional
Más ejemplos
http://danielladraper.com/
http://www.lobagola.com/
http://vivaco.com/demo/ventcamp/index-photo.htmlPróximamente
Accentsconagua