Diseño, Video | 6 de noviembre de 2019

Cómo hacer degradados para diseño gráfico y UI

Hoy vamos a hablar de degradados, pero no cualquier tipo. Hoy aprenderemos a crear degradados que se vean bien.

La parte práctica de crear un degradado en una aplicación de diseño es bastante sencilla. Solo debes buscar la herramienta de degradado y si no la encuentras selecciona el elemento que quieres rellenar y en opciones de relleno seguramente encontrarás la opción de degradado.

Si esto se te hace difícil déjame un comentario y hacemos un video al respecto en el futuro, porque hoy vamos a hablar un poco de teoría del color y de cómo aplicarla al crear degradados para entender por qué esto se ve tan bien y esto se ve tan mal.

Partamos por lo esencial: la rosa cromática (que tiene forma de estrella, no de rosa, pero en fin).

Rosa cromática
Rosa cromática, aún sin colores

Partamos dibujando dos triángulos equiláteros en direcciones opuestas el uno del otro. Eso nos dará seis pequeños triangulitos externos.

Tomemos tres de esos triángulos y llenémoslos con los colores primarios: rojo, azul y amarillo.

Rosa cromática - Colores primarios
Rosa cromática – Colores primarios

En algunos modelos los colores primarios son otros. Por ejemplo, en el modelo aditivo los primarios son rojo verde y azul y en el modelo sustractivo son cyan, magenta y amarillo, pero por ahora sigamos con este modelo que es el tradicional.

Ahora, para llenar los otros triángulos tendremos que encontrar el color que se genera al mezclar los colores primarios. Azul con amarillo nos da verde. Amarillo con rojo nos da naranjo. Rojo con azul nos da violeta.

Ahora ya tenemos los colores secundarios.

Rosa cromática - Colores secundarios
Rosa cromática – Colores secundarios

¿Qué tiene que ver esto con degradados? Mucho.

Gracias a esta rosa cromática tenemos muy claro cuál es la posición de cada color y su relación con los demás.

Así podemos identificar, por ejemplo, los colores complementarios, que son los que están en la posición directamente contraria, o los colores adyacentes, que se ubican uno al lado del otro.

Aún nos falta mucho por cubrir, pero comencemos a crear degradados con lo que sabemos hasta ahora. Partamos con los colores complementarios.

Como puedes ver, crear degradados a partir de colores complementarios no da muy buenos resultados ¿por qué?

Degradado con colores complementarios
Degradado con colores complementarios

Los colores complementarios son los más alejados entre sí en la rosa cromática y prácticamente no tienen relación entre sí. Son tan diferentes entre sí, que por eso habitualmente se usan en el diseño para generar contraste.

Entonces cuando haces un degradado con colores complementarios, estás pasando de un extremo al otro de la rosa cromática y en el centro se genera este color horrible, porque ese es el color que de genera al mezclar colores complementarios.

Consideremos este ejemplo, el verde es una mezcla de azul con amarillo y lo que pasa en el medio es que agregamos rojo a la suma y es natural que de esa mezcla no salga nada bonito.

Miremos en cambio lo que pasa al crear un degradado con colores adyacentes. Mucho mejor.

Degradado colores adyacentes
Degradado colores adyacentes

El pasar de rojo a violeta resulta verse mucho más natural, pues al rojo solo le agregas un poco de azul y esa mezcla queda mucho más limpia.

Agreguemos un factor adicional: la luminosidad.

Convirtamos la rosa en un círculo y agreguemos otros círculos concéntricos que oscurecen cada color hacia afuera y los aclaran hacia el medio.

Colores con luminosidad
Colores con luminosidad

Ahora esto nos abre la posibilidad de hacer degradados para aclarar y oscurecer colores. Pero aquí también podemos meter la pata.

Estos son los dos errores más comunes que he visto:

  1. Usar negro puro para oscurecer un color
  2. Hacer el degradado muy pronunciado y sacrificar la legibilidad

Veamos por qué usar negro no siempre es una buena idea.

Al usar negro puro en un degradado lo que haces es ensuciar el color. ¿Por qué?

El negro es la mezcla de todos los colores primarios, por eso, si el color que se generaba al mezclar colores complementarios ya era sucio, imagínate cuando mezclamos todos los colores.

Lo recomendable en la mayoría de los casos es que el degradado no llegue a negro 100%, sino que se quede en una versión más oscura del color inicial.

También considera que agregar negro no es la única forma de oscurecer un color. Por ejemplo, el amarillo se puede oscurecer acercándolo parcialmente al naranja.

Degradado desde amarillo, usando negro y naranja para oscurecer
Degradado desde amarillo, usando negro y naranja para oscurecer

Por otra parte, si el degrado lo estás haciendo para imprimir, y haces un degradado de color compuesto a negro puro se verá horrible si es que solo usas la tinta negra.

Supongamos que estamos en illustrator y queremos degradar de violeta a negro. Por un lado tienes la mezcla de dos tintas de cuatricromía (cyan y magenta) y por el otro solo la tinta negra. El lado violeta se verá intenso, llamativo, pero el lado negro se verá deslavado y poco interesante.

Si vas a usar la tinta negra para oscurecer un color procura que sea encima de las otras tintas y no el negro por si solo.

Degradado para impresión, usando negro como tinta
Degradado para impresión, usando negro como tinta

Ahora veamos el segundo error.

Muchas veces usamos los degradados como fondo y sobre ellos tenemos textos e íconos que deberían leerse fácilmente, pero cuando el degradado es demasiado pronunciado, pasando de un tono oscuro a uno muy claro, es muy difícil poner íconos o textos que se lean bien.

Si pones el texto muy claro se verá bien de un lado y no del otro. Si lo pones muy oscuro pasa lo mismo.

Al hacer degradados que vayan de fondo, procura que ambos colores tengan un nivel de oscuridad y saturación similar, de modo que el texto que pongas encima se pueda leer bien en ambos extremos.

Degradados de fondo, evita cambios de color drásticos
Degradados de fondo, evita cambios de color drásticos

Si tienes un degradado y no sabes si el cambio de color es muy drástico, te recomiendo ponerle el texto o icono encima y luego en photoshop u otra app de edición de imagen bajarle la saturación hasta dejarlo en blanco y negro. Si el texto se lee bien, entonces no hay problema, si no, ajusta tu degradado.

Bien, esos eran los consejos que tenía hoy para ti. Ahora ve y hay un degradado hermoso, súbelo a tu instagram y etiquétame @franciscoamk para poder verlo.

Un abrazo,
@FranciscoAMK

También te podría interesar:

Cómo realizar cálculos en WordPress fácilmente

Hace un tiempo que vengo usando Ninja Forms para mis formularios en WordPress. Al principio comencé a usar este plugin porque no solamente servía para enviar formularios vía correo electrónico, sino que además guardaba cada uno de los envíos dentro de la base de datos, de tal forma que si no recibes el email, siempre […]

Seguir leyendo...

Cómo trasladar un sitio en WordPress desde un servidor de pruebas al servidor definitivo

En este artículo voy a mostrarte cómo es que habitualmente realizo la tarea de trasladar un sitio en WordPress desde un ambiente de desarrollo o pruebas a su servidor final o ambiente de producción, como le llamarían los más técnicos. Todos quienes nos dedicamos a crear sitios web para clientes solemos desarrollar e instalar los sitios web […]

Seguir leyendo...

Definamos un objetivo y definámoslo claro

Cuando estudié diseño,  tuve un profesor que rechazaba la mayoría de las ideas que los alumnos le presentábamos. El motivo de este rechazo siempre fue que no teníamos un foco u objetivo claro al que apuntar. El profesor siempre decía: Trabaja en un sólo concepto, tienes el resto de tu vida para trabajar en los otros conceptos […]

Seguir leyendo...

Y tú ¿Qué opinas?

Puede que no te responda, pero ten por seguro que leeré tu comentario. Por si acaso, tu email no se mostrará ;)

Recibe más artículos como este cada semana

Únete a los 8.191 suscriptores y recibe cada miércoles nuevo contenido sobre diseño, sitios web y creatividad.

¡Ya estamos casi! revisa tu bandeja de entrada para verificar tu email por favor.
Uy! Parece que algo salió mal procesando tu solicitud. Recaraga la página e inténtalo de nuevo.

Ya me suscribí antes, no me muestres esto.