Cómo usar tintes y sombras en tus diseños

Tintes y sombras en tus diseños

A todos nos ha pasado, los últimos pasos de un diseño, pero hay uno que nos detiene: el esquema de colores.

Déjame adivinar, ¿también estás en las mismas? ¿Con problemas para elegir colores que se sientan correctos en tu diseño?

Ya tienes el layout organizado, el contenido listo e incluso hasta ya seleccionaste las fuentes. Pero te toca el color y todo es confuso, no sabes si elegir blanco y negro, algo brillante, monocromático o una mezcla de todo.

Como iniciar: una guía rápida para elegir los colores correctos

Todo comienza con elegir dos colores:

  • Uno neutro y,
  • uno de realce.

En cuanto a lo que se refiere este artículo, definamos el neutral como negro, blanco, gris o algo entre beige/marrón. El de realce sí puede ser lo que quieras, desde aguamarina hasta verde primavera.

Tomando como base esos dos, puede crear una paleta increíblemente variada, que puede contar desde tres opciones hasta 30. ¿Cómo lo haces? con tonos aclarados y oscurecidos.

Qué son los tintes y las sombras

Tomados de los términos en ingles tints (tintes) y shades (sombras), se utilizan en el arte para definir variaciones más claras y oscuras de un solo color, que se crean agregando blanco (tintes) o negro (sombras) a un color base.

Usarlas como parte de una paleta de colores tiene muchas ventajas, la primera siendo lo fácil que se vuelve el proceso de selección de colores, la cual se reduce y te quita la preocupación de que tu diseño se vea como un arcoíris. Otro de sus beneficios es que automáticamente le dan a tu paleta un aspecto pulido y coherente, ya que se forman desde el mismo color base.

1-tints-shades-tb-800x0como-usar-tintes-y-tonos-en-tus-disenos

Un ejemplo de esta técnica es el siguiente branding hecho por Whitney Blake, que usa una paleta de azules y grises (observa el contraste que se crea con las variaciones claras y oscuras de cada uno) para darle más versatilidad a lo que es un esquema de colores tenue.

2-blake-tb-800x0como-usar-tintes-y-tonos-en-tus-disenos

Whitney Blake

Cómo crear tintes y sombras

Si vas a usar solo tu ojo, como se diría coloquialmente al ojo por ciento, puede ser difícil elegir exactamente los tonos más claros y más oscuros correctos para armar una paleta de colores. Algunos programas de diseño cuentan con herramientas que te pueden ayudar con esto, pero normalmente son muy limitados o peor, ni siquiera se pueden personalizar. Sin embargo, hay muchas herramientas online que puedes usar, así que démosle un vistazo a las mejores.

3-beach-tb-800x0como-usar-tintes-y-tonos-en-tus-disenos

Via Dribbble/Lindsay Beach.

01. Paletton

El ajuste monocromático de Paletton automáticamente genera una paleta de tonos más claros y oscuros de un color base, el cual lo puedes elegir al azar usando el círculo cromático o igualmente puedes introducir un código RGB para empezar con un matiz específico.

Además, tienes a tu disposición la función de Free Style, que te permite agregar entre dos y cuatro colores base más. Por su parte, la pestaña “Presets” en la parte inferior (ver la segunda imagen a continuación) te brinda una selección de muchas más variaciones según los colores iniciales que elegiste.

5-paletton-tb-800x0como-usar-tintes-y-tonos-en-tus-disenos

Palleton

02. Material Palette

Material Palette es un poco más básica y puede ser de mucha ayuda cuando necesitas una solución rápida. Viene con una selección limitada de colores brillantes (basados en el estilo del Material Design de Google) más unos pocos neutrales, de los cuales se te indica que selecciones dos. Después de hacerlo, el sistema genera automáticamente una paleta del primer color que elegiste (más un tono claro y uno oscuro), te da el segundo como color de realce y además una selección de neutrales.

6-material-palette-tb-800x0como-usar-tintes-y-tonos-en-tus-disenos

Material Palette

03. Colour Code

El generador de paletas de Colour Code es muy fácil de usar, solo tienes que elegir un esquema del panel de la izquierda (monocromático, monocromático y gris oscuro o monocromático y gris claro serán las mejores paletas acorde a los tonos claros y oscuros) y luego arrastras tu mouse por todos lados hasta que veas una combinación que te guste.

7-colour-code-tb-800x0como-usar-tintes-y-tonos-en-tus-disenos

Colour Code

Formas de aplicar tintes y sombras

Bien, ya seleccionaste la paleta, ahora te toca aplicarla a tu diseño. Las variaciones claras u oscuras de un color base pueden agregar contraste, interés visual y versatilidad, pero es normal que quieras ver cómo se ven para inspirarte, así que chécate los siguientes ejemplos:

01. Crea un branding coherente

Lo bueno de tener tonos claros y oscuros de un mismo color que puedas usar para distintos motivos y efectos en varios diseños es que tu branding se verá pulido y uniforme. Por ejemplo, estos dos paquetes de marca, hecho por el estudio de diseño Mast, demuestran lo flexible y creativo que se puede ser con ambas clases de tonalidades.

El primer conjunto cuenta con variaciones de su azul medio base, mientras que el segundo hace un gran uso de un color base con una tonalidad más oscura. Observa como ambos rojos (así como los elementos gráficos de los diseños) se sacan del logotipo de la marca, un gran toque que refuerza la identidad visual de la compañía.

8-mast-tb-800x0como-usar-tintes-y-tonos-en-tus-disenos

Mast

9-mast-tb-800x0como-usar-tintes-y-tonos-en-tus-disenos

Mast

02. Agrega contraste

El contraste es esencial para que cualquier diseño sea visible y fácil de detallar y una forma fácil de crear es combinando uno de tus tonos más claros con una de tus tonalidades más oscuras, algo que ha hecho a la perfección Michael Hildebrand con el póster de este evento. El texto en rosa bebé en la parte inferior del póster sobresale puesto en contra el fondo rosa intenso, casi magenta, creando un contraste que se invierte para el pequeño cuadro de texto que dice “4th Annual” cerca de la parte superior. De esta manera se puede ver que la combinación de ambos colores se ve bien de cualquier forma.

10-hildebrand-tb-800x0como-usar-tintes-y-tonos-en-tus-disenos

Michael Hildebrand

En este otro ejemplo, el calendario hecho por Szende Brassai cuenta con al menos cuatro tonos claros/oscuros de aguamarina y dos del color coral (más unos neutrales), colocándolos uno al lado del otro de tal manera que se resaltan sus diferencias y crean un diseño visualmente interesante con mucho contraste. Igualmente, este contraste entre las temperaturas de colores fríos y cálidos maximiza el efecto mencionado del diseño.

11-brassai-tb-800x0como-usar-tintes-y-tonos-en-tus-disenos

Szende Brassai

03. Mezcla

Como viste en el punto anterior, el color se puede usar para que los elementos de diseño sobresalgan mediante contraste, pero se puede aplicar distintamente para que los elementos se mezclen y se vean más sobrios. La portada del siguiente libro, diseñada por Robert Frank Hunter, ostenta tonalidades claras y oscuras de azul que no tienen mucho contraste, pero que hacen que la ilustración tome un segundo plano para que la tipografía resalte.

12-hunter-tb-800x0como-usar-tintes-y-tonos-en-tus-disenos

Robert Frank Hunter

04. Simplifica y separa

Si todas las partes de un diseño fueran de un mismo color o saturación, sería muy difícil distinguirlas y aquí es cuando los tonos claros y oscuros son útiles. Si tu diseño conlleva mucha información, con las variaciones de color puedes separar visualmente las distintas partes de tu layout. Además, una paleta que comparta un color base evitará que un ya cargado diseño sea abrumador por los colores.

Chécate la infografía de William Mellor que está conformada, además del blanco y negro, solo por un verde como color base y un tono más claro, manteniendo todo el diseño limpio y sencillo y separando el diseño.

13-mellor-tb-800x0como-usar-tintes-y-tonos-en-tus-disenos

William Mellor

También tienes este ejemplo, un sitio web diseñado por Owen Shifflett, en el que usa tonalidades claras y oscuras de azul similarmente. Los tonos tenues hacen que las imágenes de los productos se destaquen, dándole a la estructura visual del diseño profundidad y una clara organización.

14-shifflett-tb-800x0como-usar-tintes-y-tonos-en-tus-disenos

Owen Shifflett

05. Crea profundidad y dimensión

Una de las formas más comunes de usar tonalidades aclaradas por blanco u oscurecidas por negro, sobre todo en el arte y las ilustraciones, creando la ilusión de profundidad y/o dimensión, que puede ser a través de la representación de luces o sombras.

Así lo hace Mads Berg en este diseño inspirado por posters de viaje de estilo vintage. Observa cómo solo unos trazos de color bien posicionados – particularmente las tonalidades de gris oscuro sobre el barco y azul oscuro en el cielo y agua – crean una curvatura y profundidad que hacen ver a la ilustración como si fuera 3D.

15-berg-tb-800x0como-usar-tintes-y-tonos-en-tus-disenos

Mads Berg

Continuando con el tema marítimo, este par de posters hecho DKNG Studios unen dos parejas de tonos claros/oscuros (una cálida y otra fría) para crear una obra en capas muy elaborada. A su vez, los colores usados sugieren ciertas horas del día y le dan a los posters un sentido de ambiente, lo que nos lleva a nuestra próxima técnica…

16-dkng-tb-800x0como-usar-tintes-y-tonos-en-tus-disenos

DKNG Studios

06. Establece un estado de ánimo o temática

El color tiene una capacidad de transmitir un estado de ánimo y emoción a tus diseños que no muchos otros elementos tienen. Por ejemplo, vuelve a ver los posters de arriba, ¿no te parece como si fueran en ocasiones de cálidas de verano y noches frías más tranquilas? Eso es porque el color juega un gran papel expresando dichas emociones y creando ese sentido de ambiente que mencionamos en el punto anterior.

Asimismo, el color le puede dar un contexto a los diseños, reforzando o aclarando temas o imágenes existentes. Aquí, por ejemplo, las tonalidades claras/oscuras llamativas que usó Alan Cheetham para diseñar estas etiquetas transmiten un ánimo amigable y moderno, al mismo tiempo que representa el aroma de cada vela.

17-cheetham-tb-800x0como-usar-tintes-y-tonos-en-tus-disenos

Alan Cheetham

De igual manera, las presentaciones de producto diseñadas por Veronica Lethorn cuentan con pares de colores (frecuentemente un color base más un tono claro) que aportan un aspecto moderno, atractivo y contemporáneo, pero que igualmente se relacionan con el sabor de cada producto.

18-lethorn-tb-800x0como-usar-tintes-y-tonos-en-tus-disenos

Veronica Lethorn

07. Utiliza degradados

Los degradados son excelentes formas de aplicar varios tonos aclarados u oscurecidos al mismo tiempo y si se usan particularmente con efectos de transparencia, son una opción muy sutil para agregar más color a tus diseños.

Las invitaciones diseñadas por Hyperakt para un evento utilizan degradados de dos formas. Si detallas la parte frontal (imagen de la izquierda), verás que muchos de los triángulos que forman los gráficos de la silueta tienen su propio degradado, agregándole dimensión y textura a la ilustración, mientras que en el interior de la invitación (la imagen a la derecha), se emplea un degradado sutil para formar el fondo.

19-hyperakt-tb-800x0como-usar-tintes-y-tonos-en-tus-disenos

Hyperakt

La presentación de este producto, diseñada por Brandexpert cuenta con un degradado transparente que forma una pequeña parte del diseño. Los colores los saca de la imagen de fondo para crear un espacio donde se lea el texto con mayor facilidad.

20-brandexpert-tb-800x0como-usar-tintes-y-tonos-en-tus-disenos

Brandexpert

08. Expande una paleta de color limitada

Pongamos el caso hipotético que estás limitado – no importa por qué, quizás sean pautas del branding, por requisitos de impresión o hasta por decisión propia – con respecto al número de colores que puedes usar en un diseño. Si en verdad estás en una situación similar, considera las especificaciones del proyecto, porque quizás puedas expandir tu paleta con tonos claros u oscuros.

En la imagen que ves debajo, Julie Wauters diseñó una portada impresionante para un libro infantil usando solo tintes/tonalidades de verde y rosa, agregando además blanco y negro. De esta forma, la composición no carece de detalle o variedad visual, pues los tintes y tonalidades le propician todos los colores que necesita.

21-wauters-tb-800x0como-usar-tintes-y-tonos-en-tus-disenos

Julie Wauters

09. Utiliza la transparencia

Los fondos y figuras transparentes pueden cumplir muchos propósitos en un diseño y expandir tu paleta cuando utilizas un esquema cromático de tintes y tonalidades, es uno de ellos. Al poner en capas dos tonos transparentes, independientemente de si son claros u oscuros, creas otra tonalidad superpuesta. Observa un ejemplo de este punto en las portadas de los siguientes libros, diseñadas por Julian Bauer.

22-bauer-tb-800x0como-usar-tintes-y-tonos-en-tus-disenos

Julian Bauer

También puedes usar transparencia como un método rápido para crear esta clase de tonalidades, poniendo una capa transparente del color base sobre negro o blanco, algo que realiza Oliver Lo con capas de rojo en este póster sobre el cine italiano.

23-lo-tb-800x0como-usar-tintes-y-tonos-en-tus-disenos

Oliver Lo

10. Mantenlo simple

Cuando quieras que un diseño tenga un estilo más minimalista o sobrio, tu mejor amiga será una paleta monocromática (o unicolor). Esta clase de esquemas a menudo dependen de las tonalidades aclaradas u oscurecidas de un color para que haya variación, pero siempre mantienen la estética limpia y simpleza que se obtiene al usar un solo color.

El programa para esta conferencia, diseñado por Chris Ross tiene, además de figuras geométricas, solo con tonos más claros de amarillo (no contaremos el blanco y negro), para producir una composición moderna y llamativa.

24-ross-tb-800x0como-usar-tintes-y-tonos-en-tus-disenos

Chris Ross

Inclusive, una paleta semi-monocromática puede ayudarte a simplificar un diseño, como lo ves en el ejemplo debajo. Además de los dos azules, Steve Wolf le agregó un tono blanquecino como color neutral y un pequeño toque de rojo como color de realce, teniendo como resultado un diseño atractivamente claro y no exagerado.

25-wolf-tb-800x0como-usar-tintes-y-tonos-en-tus-disenos

Steve Wolf

11. Crea figuras y patrones

Los tonos claros u oscuros no se tienen que usar de uno en uno. ¿Qué se quiere decir? que puedes combinarlos para formar figuras, patrones o cualquier otro elemento gráfico que le dé a tus proyectos de diseño esa chispa extra.

Las tarjetas de presentación de Chloe Park emplean gradualmente tonalidades que se van oscureciendo para agregar interés visual a lo que normalmente sería un fondo liso, común y corriente.

26-park-tb-800x0como-usar-tintes-y-tonos-en-tus-disenos

Chloe Park

Por otro lado, la presentación de este café de Starbucks (dirección creativa de Mike Peck) amplía este concepto, combinando tonos más claros y oscuros de varios colores, con efectos de transparencia y mezcla, para crear un fondo atractivo con patrones.

27-starbucks-tb-800x0como-usar-tintes-y-tonos-en-tus-disenos

Mike Peck

28-starbucks-tb-800x0como-usar-tintes-y-tonos-en-tus-disenos

Mike Peck

12. Duplica (o triplica) la diversión

Al elegir dos conjuntos distintos de tonalidades claras u oscuras para tus diseños puedes crear una paleta de colores más versátil y visualmente interesante. Por ejemplo, el material promocional para un restaurant, obra de Michael Hildebrand combina tanto tonalidades claras como oscuras de rojo con un color dorado, que es más neutral y cumple dos funciones: realza y al mismo tiempo atenúa el rojo más intenso.

29-hildebrand-tb-800x0como-usar-tintes-y-tonos-en-tus-disenos

Michael Hildebrand

Como podrás ver por las tiras de colores en la parte inferior de esta imagen, Megan Clark ha decidido usar para este branding, tres conjuntos de tonalidades/tintes complementarios (de azul, verde y gris), manteniéndolas en control limitando cada conjunto a dos colores, un tono claro y uno oscuro.

30-clark-tb-800x0como-usar-tintes-y-tonos-en-tus-disenos

Megan Clark

13. No te olvides del texto

No hay ninguna regla ni es obligatorio que el texto tenga que ser negro, blanco o gris. ¿Sabes qué? ¡Puedes agregarle colores! De hecho, los tintes y sombras son una solución fácil de aplicar para crear una relación en todo el diseño, tipografía incluida. Dependiendo de los demás elementos que lo conformen, aplicar un tono claro o uno oscuro puede ser una bonita alternativa al blanco o negro.

Francesco Poroli hace uso de este método empleando su paleta de morados tanto en texto como imágenes.

31-poroli-tb-800x0como-usar-tintes-y-tonos-en-tus-disenos

Francesco Poroli

Por el contrario, el diseño de un folleto hecho por Stephanie-Ann Savage coloca texto en el tono claro de su matiz base para crear una tabla de contenidos colorida y única.

32-savage-tb-800x0como-usar-tintes-y-tonos-en-tus-disenos

Stephanie-Ann Savage

Y con esto terminamos

Esperamos que te hayan quedado ideas que te inspiren a usar ya sea el blanco o negro para aplicar tonos claros u oscuros en tus diseños. Si quieres más consejos lee nuestro artículo sobre Principios y elementos de diseño.