Guía Definitiva de Degradados Web

Los degradados son uno de los recursos gráficos más populares en diseño web, y por lo mismo, es fácil incurrir en un mal uso. Su mala utilización ha hecho que la gente piense en ellos como una forma barata de adornar un sitio, y no los culpo; técnicas novatas de degradados dan como resultado un sitio web sucio, poco profesional, feo y de mal gusto.

Los degradados bien utilizados, otorgan no sólo estilo llamativo y único; sino que también pueden ser un poderoso apoyo visual para cumplir nuestros objetivos.

¿Cómo reconocer cuándo utilizar degradados y cuándo no? ¿Cómo saber si los estoy utilizando bien? ¿Qué hacer para arreglar los errores del pasado? En esta guía que he preparado en tres partes, expongo cuál es la mejor manera de utilizar degradados a la hora de diseñar un sitio web.

Parte I: Conceptos y Definiciones

La primer parte de esta guía consta en una explicación sobre algunos conceptos básicos de la teoría del color, sobre cómo se comportan los degradados, cómo funciona la herramienta de degradado y cómo reconocer los valores del color en nuestro programa gráfico.

Dimensiones del color:

Nos referiremos como dimensiones de color al tono, saturación y luminosidad. La herramienta que estaremos utilizando por el momento será Photoshop; sin embargo, después de comprender en qué consiste cada dimensión, con un poco de práctica y experimentación, serán capaces de identificar estas mismas dimensiones en otros programas de edición gráfica.

¿Qué es tono?

Es el nombre con el cual nos referimos a un color. Por ejemplo, azul, rojo, verde, amarillo, etc.
En nuestra herramienta de selección de color, podemos seleccionar el tono en el rectángulo vertical que vemos a continuación (Fig 1).
Localización del círculo cromático en la herramienta de selección de color en photoshop.

Ese rectángulo es el equivalente a tomar un círculo cromático, hacerle una incisión y desplegarlo; Por lo tanto, comienza y termina con rojo.

Nos referiremos al tono como el color original. Un tono expuesto a diferencias en los valores de luminosidad y saturación, nos resultará en diferentes variedades del mismo color. Para lograr elegir colores que resulten en un degradado armonioso, es importante contar con una buena comprensión de las siguientes características.

¿Qué es saturación?

Es la pureza del color.
La saturación se encuentra en el eje X.

La saturación está en el eje X. El valor mínimo de saturación en esta herramienta, es el que está pegado a la izquierda, por lo tanto, en esta área se encuentra la escala de grises. El valor máximo de saturación es el borde derecho.

Cuando un color es vivo o brillante, decimos que es un color saturado. Un color poco saturado, es aquél que se acerca cada vez más a la escala de los grises.

¿Qué es luminosidad?

La cantidad de luz emitida por un color.
03_gdI_luminosidad

En photoshop, esta dimensión se encuentra en el eje Y. Por lo tanto, mientras más arriba esté nuestro color, más cantidad de luz emite. Mientras más abajo esté, más oscuro será hasta llegar al negro. Un color que se encuentre en el máximo de luminosidad de esta herramienta, puede encontrarse en cualquier posición del eje X y no ser necesariamente blanco. Sin embargo, si se encuentra en el mínimo de luminosidad, no importa en qué posición del eje X esté, siempre será negro, porque en teoría, no está emitiendo ninguna luz.

Blanco y Negro. Sombra y Tinta.

El blanco y el negro son dos colores muy poderosos. Cuando trabajamos con espacio blanco, una delgada línea divide el lograr un diseño limpio y elegante a un desastre total. La mala utilización de blancos o negros puede resultar en un diseño apagado, con falta de vida y aburrido.

Para los que han trabajado mezclando colores, ya sea con acrílicos o acuarelas, saben bien que se requiere una muy poca cantidad de blanco o de negro para apagar o ensuciar completamente un color; y por lo tanto debemos aprender a utilizarlos con cuidado.

Cuando mezclamos un color con blanco, generalmente con la intención de obtener un tono más claro, decimos que tenemos una tinta.

Una sombra es cuando hemos mezclado el color con negro para obtener una variación más oscura.

¿Qué es un degradado?

En términos de diseño web, podemos definir un degradado como la transición de un color a otro. Por lo tanto, la cantidad mínima de colores que necesitamos para un degradado es dos. Un degradado puede componerse de tantos colores como queramos.
Un degradado es la transición de un color a otro

Herramienta de degradado en Photoshop:

Herramienta de gradiente en photoshopLa herramienta de degradado  se encuentra debajo del borrador en la barra de herramientas.

El shortcut para seleccionarla es G. Si en vez de degradado, está activa la herramienta de la cubeta,cubeta
simplemente necesitamos dejarla presionado un poco hasta que nos aparezca del lado derecho la herramienta de degradado. Otra manera sería presionar las teclas SHIFT + G. (Windows y MAC)

En photoshop encontramos cinco tipos de degradado. De izquierda a derecha: Linear (1), Radial (2), Angular (3), Reflectivo (4) y Diamante (5).Tipos de degradados en Photoshop.

En esta guía, nos enfocaremos en los primeros dos, ya que los últimos son variaciones y combinaciones de los dos primeros.

Ahora debemos elegir un color inicial y un color final para nuestro degradado.En este caso voy a elegir un color que se degrade a gris, para que podamos apreciar mejor cómo se va transformando el color.

Selección de nuestros colores
Herramienta Color Picker

El color inicial estará determinado por el Foreground (primer plano). El color Final se determinará por el Background (fondo). Si queremos que el orden sea inverso, o sea, que el color inicial sea determinado por el background (fondo) y el final por el foreground (primer plano), sólo tenemos que seleccionar la opción reverse, en la barra superior de herramientas.

Reverse
Reverse para crear el degradado de manera inversa. (Del segundo plano al primer)

 

Degradado Lineal:

En el degradado lineal, la transición de color adoptará una trayectoria en línea recta, como en se explica en el siguiente esquema:
Esquema de degradado lineal

El lugar donde pongamos el cursor indicará el punto de inicio del degradado. Para crear el degradado, debemos elegir dónde queremos que inicie y arrastrar el cursor hacia alguna dirección. (arriba, abajo, izquierda, derecha, diagonal)

Si estamos trabajando con un degradado lineal, y nos interesa que realmente siga una trayectoria horizontal o vertical, es importante dejamos apretada la tecla SHIFT a la hora de hacer el arrastre. De esta manera, podemos asegurarnos que la trayectoria no se desvíe en diagonal.

El resultado es el siguiente:

Esquema final de degradado lineal

Degradado Radial:

En el degradado radial, la transición de color seguirá una trayectoria circular.

Esquema de degradado Radial

En el caso del degradado radial, nuestro punto de inicio indicará el centro del círculo, la longitud entre el punto inicial y el final trazará el radio del círculo que se estará degradando.

Esquema de degradado radial

Así que no importará mucho si al trabajar con el degradado radial, el arrastre se nos desvía un poco hacia la diagonal, porque el resultado será el mismo.

Degradado a Transparente:

En los ejemplos anteriores, elegíamos un color inicial y uno final, sin embargo, Photoshop nos permite elegir una opción a transparente. Para activar la opción a transparente, basta con que demos click al ícono de degradadoícono de degradado para que nos aparezcan nuevas opciones de degradados. La segunda de izquierda a derecha, es la opción de degradar a transparente.

Opción de degradar a transparente

Ya sea que apliquemos este degradado en una capa separada o en la misma capa, el color se irá mezclando con el de abajo debido a su transparencia.

Esta opción permite más versatilidad en la manipulación del degradado, ya que podemos modificar esta capa por separado, agregarle efectos, cambiarlo de posición, y experimentar sobre el resultado final; sin embargo, no es posible activar la opción dither, que prevendrá la aparición de banding (bandas) en nuestros degradados.

La preferencia de utilizar la opción a transparente ya dependerá de cada quién.


Aquí concluye la primer parte de nuestra guía. En la segunda parte incluiré las técnicas para crear degradados y con qué propósito utilizarlos, así como ejemplos de lo que queremos evitar en ellos.

Ayúdame a seguir mejorando esta guía. Si tienes algún comentario sobre cómo mejorar, o si alguna parte se te hizo confusa, no te olvides de ponerte en contacto conmigo :).