Cómo usar fondos transparentes eficazmente en el diseño gráfico

Fondos transparentes en diseño gráfico

En el diseño gráfico, los fondos son como la pintura de una pared o papel tapiz…

Si lo haces bien, tienes un bonito fondo que se ve bien y crea un espacio atractivo, lo haces mal, y lo único que lograrás es desviar las miradas de los demás muebles y artes seleccionados cuidadosamente.

Aunque el fondo de tu sitio web, flyer o gráfico para las redes sociales puede parecer algo menor, estoy segura que no quieres que sea el equivalente de un mal trabajo de pintura o una mala elección de papel tapiz que le quite la oportunidad a la audiencia de centrarse en otras cosas.

Así que, inspirémonos un poco y veamos unas técnicas que puedes usar para la mayoría de los fondos en tus proyectos de diseño. Si bien no hay nada malo en utilizar un blanco básico o un color liso, los diseños de este artículo se basarán específicamente en cómo agregarle transparencia a los fondos puede ser una herramienta práctica y versátil:

1. Simplifica un fondo cargado

Un fondo estampado o ilustrado puede darle mucha personalidad a tu diseño, pero al mismo tiempo lo puede hacer muy cargado o dificultar la legibilidad del texto. ¿La solución? Haz una superposición y coloca un fondo adicional semi-transparente encima.

En este caso, un póster para un evento cuenta con una hermosa ilustración de estilo vintage en el fondo. Sin embargo, sin esa pantalla blanca transparente encima, el fondo podría sobrecargar el resto del diseño y sería difícil, por no decir imposible, leer el texto (en especial las partes más pequeñas). Observa cómo la parte blanca es lo suficientemente opaca para atenuar algunos detalles de la ilustración, y al mismo tiempo es lo suficientemente transparente para dejar que se vea algo de la textura. La mayoría de los programas de diseño te permiten ajustar el nivel de transparencia con ajuste de opacidad, que por lo normal va desde 0% (completamente claro) hasta 100% (completamente opaco).

Via Behance. Diseño por Sara Dávila Evangelista.

En este otro ejemplo, los fondos circulares de estas postales ocultan una parte de la fotografía detallada del paisaje que se encuentra debajo para darle un fondo simple y colorido a la tipografía, lo que nos lleva a nuestra próxima técnica…

Diseño por Sarah Champion.

2. Dale más visibilidad al texto

Tanto en la web como imprenta, la fotografía es una elección muy popular en proyectos que van desde anuncios de productos hasta encabezados de sitios web o gráficos para redes sociales. Sin embargo, dependiendo de la composición de la foto y atributos como el color, brillo, etc., agregarle texto encima puede que o puede que no sea adecuado.

Este informe presenta una serie de figuras transparentes puestas en capas una encima de la otra para crearle un fondo al texto (que de lo contrario, no se podría ver encima de la foto detallada en blanco y negro). A su vez, que las figuras rojas en el fondo varíen su transparencia también crea un efecto visual interesante.

Diseño por John Florez.

En este otro ejemplo, el fondo blanco transparente de la página web posibilita que se le coloque texto encima a una foto bastante oscura.

Via Dribbble. Diseño por Ben Schade.

Por otro lado, esta técnica también sirve cuando el esquema cromático es al revés: una foto colorida, fondo oscuro transparente y texto en blanco.

 

Via Dribbble. Diseño por Bart Ebbekink.

Si buscas fotos para usar en tus diseños, te sugerimos esta selección de recursos gratis de fotos libre de derechos.

3. Crea una apariencia limpia y espaciosa

Cuando puedes ver a través de la parte de un diseño, el layout tiene un toque se simpleza y amplitud. Por ejemplo, el siguiente diseño de sitio web tiene una de figuras en el fondo que ni siquiera pareciera que estuvieran ahí, a los que se le agregan fuentes limpia y un layout ordenado para obtener un estilo minimalista.

Via Behance. Diseño por Thorben Pöhlmann.
Via Behance. Diseño por Thorben Pöhlmann.

Esta serie de portadas de catálogo logra esa simpleza en una forma distinta, con fondos transparentes de colores primarios, básicos como parte de un layout reducido, que cuenta con una sola fotografía y unas pocos pedazos de texto.

Diseño por Studio Beige.

4. Guía la atención de la audiencia

Los fondos transparentes no tienen que cubrir tu diseño completamente, ni siquiera tienen que ser una figura concreta. Es muy fácil utilizar la inventiva y creatividad cuando se trata de la transparencia, pues se pueden crear siluetas o aperturas para que la audiencia vea, al igual que se puede jugar con los niveles de transparencia para llamar (o desviar) la atención de ciertas partes del diseño.

Aquí por ejemplo, los posters de un teatro combinan fondos transparentes y figuras recortadas de letras para crear centros de atención dándole la oportunidad a la audiencia de centrarse en el personaje principal en cada póster.

Diseño por Willem Henri Lucas.

Y en este diseño, la orientación y posicionamiento de los triángulos transparentes en el fondo son el centro de atención que guían tu mirada directamente a la cara de la mujer.

Via The Nina Project. Diseño por Anna Kövecses.

5. Muestra lo que hay dentro

Para cualquier diseño que conlleve una presentación, portada o cualquier otra clase de envoltura, la transparencia puede ser una gran forma de revelar lo que está adentro o debajo de la misma, dejando que el producto se venda por sí solo.

El diseño de la siguiente revista coloca la tipografía de su título en un fondo completamente transparente, lo que le da a la portada un brillo adicional y una cualidad que realza la foto debajo.

Via Behance. Diseño por Sidney Lim YX.

Para aunar en este punto, los dos siguientes ejemplos ilustran cómo los fondos transparentes pueden ser especialmente efectivos para presentaciones de alimentos. Primero, estas simples bolsas de granos muestran el color y la forma de lo que está dentro:

Diseño por Freddy Taylor.

Y esta sencilla bolsa diseñada para una café llamado Voyageur du Temps (significa “viajero del tiempo” en francés) no esconde los sabrosos horneados que están dentro de la bolsa, sino que se aprovecha del material semi-transparente para darle visibilidad al contenido y agregarle un poco de branding, así como también un interés visual adicional con un patrón de mapas  astronómicos de estilo vintage que se relaciona con la temática de viajes en el tiempo.

Via The Inspiration Grid. Diseño por Character.

6. Crea un look en capas

Uno de los beneficios de usar fondos transparentes es que puedes apilar varios fondos juntos o un solo fondo transparente con otros elementos de diseño, para así darle profundidad a tu layout y/o crear interesantes efectos visuales poniendo diferentes colores, fotos o figuras en capas.

Esta serie de posters para eventos, a través de la transparencia en el fondo, yuxtapone retratos e imágenes, además de contar con figuras transparentes adicionales en el fondo, detrás del texto. Estas capas de colores y elementos de diseño producen un efecto en general que es dinámico, de alto contraste y le agrega una gran profundidad al layout.

Diseño por Rachel Wan.

Este es otro ejemplo en donde se ilustran las capas, con diseños que combinan fotografía, bloques de color transparentes y un patrón gráfico.

Diseño por Eight Hour Day.

7. Deja que se vea la textura

Volteando la moneda de lo dicho en nuestro primer punto, los fondos transparentes pueden cubrir detalles que distraigan o, si se usan de otra forma, dejan que ciertas texturas le agreguen interés visual al diseño.

El siguiente banner ad para un retailer de ropa cuenta con un patrón textil a cuadros para darle forma a la tipografía principal, que se puede ver a través de los recortes en el fondo transparente. Pero la textura también es algo visible a través del fondo, dándole un aspecto coherente a todo el diseño.

Vía  ae.com.

Este próximo ejemplo utiliza algunas de las técnicas previamente mencionadas, incluyendo las últimas dos de hacer el texto más visible y el uso de capas, pero lo interesante de esta técnica es el círculo verde transparente en el fondo que también deja que se vean algunos detalles de textura de la foto, pues los dos elementos se superponen.

Diseño por Cosa Visuales.

8. Agrega un suave color con un degradado

Cuando se trata de agregar color a tu diseño, la transparencia brinda mucha versatilidad. Comparado a los fondos lisos, los transparentes se ven mucho más suaves y sutiles cuando utilizas un toque de color que no sea tan llamativo.

Este diseño cuenta con un color pastel suave y transparente que crea un espacio para colocar el texto encima de la fotografía. En lugar de utilizar una figura lisa, el fondo es un degradado que va disminuyendo su opacidad a medida que se va bajando la página, llegando a estar completamente claro al final. Particularmente, la transparencia y el degradado hacen una buena combinación.

Via The Fresh Exchange.

Aquí pueden ver otro ejemplo de un degradado transparente, utilizado en el diseño de una aplicación móvil. En este caso, el degradado consiste de cambios en la intensidad, tono y transparencia del color que conforma un enfoque de fondos coloridos sobre los cuales colocar el texto más vibrante y aun algo tenue.

Via Dribbble. Diseño por Alexey Izotov.

9. Ponte creativo con efectos de fusión

Muchos programas de diseño tienen modos de fusión o herramientas que te permiten fusionar y poner en capas fotos, colores u otros elementos de forma creativa, para así producir varios efectos visuales usando la transparencia y otros ajustes. Este método usualmente combina otras de las técnicas que ya mencionamos, como la superposición (poner en capas), las texturas y el uso de fotografías.

Este diseño cuenta con un fondo en capas conformado por un collage digital de fotografías viejas, texturas de papel con escritos a mano, manchas de tinta y trazos sutiles de color que crean una composición vívida y de estilo vintage. Que dicha combinación de varios elementos de diseño sea interesante en vez de sobrecargada se debe en gran parte a los niveles de transparencia que al ser tan variados, permiten que todas las partes se mezclen con armonía en un todo.

Diseño por Dubois & Barral.

Los fondos en los siguientes diseños se centran básicamente en cómo los colores se mezclan e interactúan unos con otros, lo que es muy popular en esta clase de efecto.

Via Behance. Diseño por Jack Crossing.
Via Paperless Post.

10. Refuerza el branding

Los fondos no tienen por qué ser ideas de último momento en tus diseños. De hecho, otra de las formas en las que los puedes usar es remarcando la identidad o estilo de una compañía, utilizando los colores distintivos de la marca u otros elementos visuales que se relacionen con el branding.

Por ejemplo, en este proyecto que conforma un nuevo diseño del informe anual de Google se incorporan los colores llamativos de la marca utilizando figuras transparentes en el fondo.

Via Behance. Diseño por Brendan Jones.

El diseño web a continuación toma un enfoque similar, utilizando tanto los colores como las figuras geométricas del logotipo de la compañía para crear gráficos y fondos transparentes.

Via Dribbble. Diseño por Bart Ebbekink.

11. Indica las áreas de énfasis

Los fondos transparentes, especialmente aquellos que presentan colores llamativos, también pueden formar un fondo que resalte partes importantes del texto u otros elementos de diseño.

Este gráfico publicitario utiliza un banner rojo transparente que realmente se destaca al contrastarse con el esquema cromático blanco y negro del resto del diseño y a su vez, resalta la oferta especial que se está promocionando.

Via Pinterest. Originally appeared in email from asos.com.

Este diseño también utiliza figuras rojas transparentes para llamar la atención (una elección común de color cuando se quiere lograr este objetivo) a ciertas secciones del sitio web.

Via Behance. Diseño por Milk Work.

12. Crea composiciones ingeniosas

Por último, pero no menos importante, un consejo que cae más de lado general: ¡sé creativo! Los ajustes de transparencia y opacidad son herramientas absolutamente versátiles que pueden crear una infinidad de efectos interesantes en tus proyectos, y puedes dar con un diseño increíblemente único si experimentas con ellas.

Para concluir esta exhibición, veamos varios ejemplos que utilizan fondos transparentes como parte de diseños creativos y visualmente atractivos.

En primer lugar, la portada de un libro que dice mucho con muy poco. Observa cómo un simple rectángulo azul transparente representa el océano e interactúa con el título para insinuar que un tiburón amenazante surge del agua.

Diseño por Tom Lenartowicz.

Luego, tenemos el fondo transparente de este póster alternativo para un musical clásico que cumple varios propósitos al mismo tiempo: resalta un momento simbólico de la película; sirve como trasfondo para la tipografía del título y por último, simboliza la lluvia, la cual hace referencia de vuelta al título. Le agregas a eso la combinación con otros elementos de diseño y el resultado es una composición ingeniosa y compacta.

Diseño por Adam Juresko.

Para continuar con la temática de cine, observa estos posters para festivales de cine, diseños que cuentan con círculos transparentes que le agregan un toque de color al fondo y no solo eso, sino que también resaltan las diferencias entre las imágenes opuestas con matices que se contrastan, mientras que simultáneamente unen dichas imágenes con una figura en común.

Diseño por 1 Trick Pony.
Diseño por 1 Trick Pony.
Diseño por 1 Trick Pony.

Y eso es todo

¿Ya te sientes inspirado? Esperamos que esta exhibición de diseños te haya ayudado a ver el potencial que tienen los fondos transparentes para tus diseños. Desde el color hasta la composición, esta clase de fondos pueden ser una solución práctica que siempre deberías tener a disposición en tu caja de herramientas de diseño. No hay mejor momento que ahora para usarlas y como nos gusta cerrar, ¡feliz diseño!