Es un hecho innegable: el uso de imágenes borrosas es una técnica de diseño web de tendencias en 2015. Parece que en todas partes se ve algo borroso.
Pero esto no es una solución para algunos de sus problemas de fotos. Es una técnica distinta que lleva la práctica a la perfección y la atención a los detalles para hacerlo bien. Entonces, antes de saltar a la tendencia, piense en las opciones para usar imágenes borrosas para decidir si es la adecuada para usted y cómo puede hacer el mejor uso de esta técnica en sus proyectos.
Las fotos borrosas son de moda
Podríamos dedicar páginas enteras a la cantidad de sitios web que utilizan imágenes borrosas. La tendencia es un gran problema en este momento.
Eso es lo primero que debe considerar al avanzar con una idea que incluye imágenes borrosas.
- ¿Quieres ser parte de la tendencia?
- ¿Puede usar la tendencia de una forma un poco diferente a la de otros sitios web?
- ¿Es tu estilo o un poco demasiado usado para tus gustos?
- ¿Estarás bien con el diseño del sitio después de que la tendencia siga su curso? ¿O necesitarás un rediseño?
No hay absolutamente nada de malo en crear algo que esté de moda. Pero es una decisión que debes considerar desde el principio. Crear un sitio web con imágenes borrosas, dependiendo de su estilo y uso preferido, puede llevarle mucho tiempo y, si no tiene experiencia en software de edición de fotos, podría requerir capacitación adicional.
El desenfoque es una técnica para usar con buenas imágenes
Esta podría ser la oración más importante que leerá cuando piense en desenfocar imágenes. Solo funciona si tienes buenas imágenes para empezar. La falta de definición no es una manera de? Corregir? una mala imagen
Para decirlo de otra manera. Si te dan una fotografía borrosa y te dicen que hagas un sitio web, no está de moda. Esa es una mala foto. Si esa es tu situación, esta no es la técnica para ti. (Es posible que desee comenzar a pensar en crear un elemento de arte con tipografía o buscar imágenes de archivo).
Pero si tiene una buena imagen de la que desea obtener un poco más de millas o usarla de otra manera, la técnica borrosa es una posibilidad. Hay varias formas de pensar sobre el desenfoque (nos enfocaremos en cada una de ellas más adelante), pero el primer paso es entender cómo crear el desenfoque. Adobe tiene un tutorial bastante bueno para comenzar en Photoshop.
Desenfocar la imagen completa
Una de las cosas que ha contribuido a la tendencia de imagen borrosa es otra tendencia: el uso de encabezados de héroe. Los diseñadores están combinando las técnicas para crear imágenes borrosas de estilo de pantalla completa como imágenes visuales dominantes en las páginas de destino de los sitios web.
El sitio web de Trellis Farm utiliza una imagen icónica de una granja para darle un sentido de lugar a su sitio web. Para un mayor interés, la foto es en blanco y negro, para transmitir esa sensación de antaño, y en capas con un gran tipo de letra para llamar su atención. El pergamino continúa esa sensación mientras agrega color a la mezcla. El desenfoque es agradable porque sabe lo que hay en la imagen y ayuda al usuario a concentrarse en el texto y las siguientes acciones a tomar en la pantalla.
Por qué funciona:
- Un fondo borroso puede enfocar las capas en la parte superior de la imagen, como el texto. Sólo asegúrese de seleccionar un tipo de letra impactante.
- Puede crear un nuevo interés con una imagen que usa regularmente, como una foto de marca estándar.
- Se puede usar con casi cualquier tipo de contenido en casi cualquier esquema de color para un atractivo universal.
Fondos e imágenes en capas
El desenfoque no es una técnica de imagen completa. Las partes específicas de una imagen pueden ser borrosas para el impacto. Si bien es más común ver fondos borrosos con un enfoque nítido en primer plano, algunos diseñadores toman el enfoque opuesto para una opción nueva que tiene un primer plano borroso con un fondo enfocado.
La agencia Anchour usa imágenes borrosas en su página de destino. La técnica utilizada en la imagen puede ser parte de la fotografía real o puede crear el mismo efecto en el software de edición de fotos. El truco aquí cuando estás creando este estilo de desenfoque es que no puedes decir que fue creado. y debe parecer natural como si la foto hubiera sido tomada de esa manera. (En el software de edición de fotos, puede lograr esto utilizando la herramienta de desenfoque gaussiano con pequeños ajustes incrementales).
Por qué funciona:
- El desenfoque crea un contraste visual y puede atenuar la sensación de ocupado de una imagen.
- Cambia la perspectiva de la imagen y la vista del usuario de lo visual.
- Agrega dimensión a una imagen que, de otro modo, podría parecer plana para una representación casi en 3D.
Desenfoque dramático para el arte abstracto
Cuando necesita una imagen de fondo para su sitio web pero puede encontrar un patrón o color que haga el truco, una foto con un desenfoque dramático puede ser la solución perfecta. Considere un desenfoque dramático como cualquier cosa que haga que el contenido de la foto no sea visible a simple vista, y podría hacer que la foto sea completamente irreconocible.
Esta es una opción popular para los sitios web que lanzan o promocionan un proyecto digital con un fondo de foto borroso abstracto detrás de un teléfono que muestra el producto. Piction utiliza la misma imagen en el fondo y en el teléfono con diferentes niveles de zoom y desenfoque para un diseño bastante llamativo.
Por qué funciona:
- Trae foco al producto destacado.
- Crea un fondo personalizado en lugar de usar un patrón que podría estar en otros sitios web.
- Le da al diseñador control sobre el color y la sensación de cómo el desenfoque abstracto funciona desde la nitidez a los colores y formas suaves hasta la legibilidad de la imagen de fondo y la conexión con la marca.
Desenfoque sutil para cualquier imagen
Un pequeño grado de desenfoque puede funcionar también en muchos otros tipos de fotos y no tiene que usarse únicamente para una imagen de pantalla completa. Los diseñadores pueden agregar un toque de desenfoque a una imagen que necesita un poco de enfoque en primer plano para ayudar a los usuarios a mirar las partes correctas de una imagen, para estilizar un logotipo o simplemente para crear una imagen más compleja.
El logotipo de Zeo utiliza un desenfoque sutil pero agradable en el diseño redondo. El desenfoque lo obliga a mirar el logotipo más de cerca debido a la forma interesante y el borde que tiene un lado del logotipo en comparación con la nitidez del otro. La técnica se enfatiza aún más debido a que el diseño del sitio web en su conjunto se utiliza para desenfocar en otros lugares, como en el fondo de la imagen dominante en la página de destino.
Por qué funciona:
- Pequeños borrones pueden crear un elemento de sorpresa.
- Atrae el foco a partes específicas de una foto, con enfoque visual. (Echa un vistazo a algunas de las promociones en el sitio de Zeo para otros usos del desenfoque sutil para el enfoque de fotos).
- Puede darle la cantidad correcta de contraste para colocar en capas otros elementos en una sección de una imagen, como el texto, de la misma manera que un desenfoque de pantalla completa puede funcionar con un encabezado de héroe.
Úsalo para video, también
También puede vincular la tendencia de desenfoque con otro elemento de diseño activo: el video. Puedes usarlo como lo harías con cualquier otra técnica de imagen. Funciona de la misma manera (aunque las herramientas de edición y el proceso son un poco diferentes).
El diseño de nivel 2 utiliza azul y un efecto de tipo pantalla para agregar interés a un video de pantalla completa. (Actualice el navegador para ver más videos borrosos). El efecto es divertido y fresco y funciona con el video que se supone que tiene una sensación de la vieja escuela. Los bucles de video rápidos son muy legibles y llamativos.
Conclusión
Hay muchas formas de utilizar el desenfoque eficazmente para proyectos de diseño web. El secreto, si realmente hay uno, es crear un efecto borroso que se combine perfectamente con el resto del diseño. Y puedes hacerlo casi pensando en desenfocar en extremos.
Use mucho desenfoque para un alto impacto y un sentimiento abstracto. Use un desenfoque mínimo para crear un contraste sutil y establecer el enfoque. Al igual que con cualquier diseño, pruébelo en algunos usuarios antes del lanzamiento y vea lo que piensan. ¿Notan el desenfoque? (La mayoría de los que no son diseñadores no lo piensan realmente).