Guía Definitiva de Degradados Web. Parte III

Ya que sabemos los conceptos básicos de la teoría del color y conocemos las buenas prácticas para diseñar con degradados, ha llegado el momento de practicar. La tercer parte de esta Guía Definitiva de Degradados Web se enfoca en la manera de cómo crear degradados a través de Photoshop, y tips para seleccionar colores dependiendo del efecto que se desee.

Si aún no han leído las otras partes de esta guía, los invito a que les den un vistazo antes de continuar, ya que en ellas se revisan una serie de conceptos que ayudarán a comprender mejor los ejemplos listados a continuación.

Parte III. Creando Degradados.

A lo largo de esta guía se encontrarán con los siguientes gráficos:

Flechas:
Indican el tamaño del degradado.
Tamaño del degradado

Cuadros de color:
Se refieren a la opción de foreground (primer plano) y background (fondo) de photoshop. El color de fondo sería el color base.
Foreground y Background

Color Base:
Es el color principal que elegimos para degradar. El color secundario dependerá del color base.

Color Picker:
Es la herramienta de selección de color en Photoshop. Aparece para mostrar de mejor manera qué colores seleccionar para nuestros degradados. En la primer parte de la guía se explica más a detalle cómo funciona.

Sutileza:

La sutileza en los degradados se debe tanto al tamaño del degradado como al contraste de los colores que elegimos. Un degradado es una transición de color, y mientras más contrastantes sean los colores, necesitarán de mayor espacio para completar la transición de manera sutil.

En el siguiente ejemplo tenemos una selección de colores (blanco, negro, rosa brillante, rosa opaco) que utilizaremos para degradar a nuestro color base (rosa). La flecha de la izquierda nos indica el tamaño del degradado, por lo tanto, el primer ejemplo consta de degradados cortos.

Falta de Sutileza. Degradado muy corto

Los degradados a blanco (1), negro (2) y rosa brillante (3) se ven agresivos y causan una sensación visual poco agradable. La razón es porque se tiene muy poco espacio para poder completar el degradado y los colores iniciales se apelmazan en la parte de arriba. En el ejemplo 4 se utilizó un color muy parecido al base y da como resultado un degradado más suave que los otros tres. Sin embargo el efecto se ve forzado.

Ahora veamos qué resultado obtenemos con un degradado más largo y los mismos colores.
Falta de Sutileza. Colores muy Contrastantes.

En el ejemplo 1 y 2 el resultado sigue siendo muy agresivo en la parte inicial. Habrá veces que para evitar esto, debamos iniciar el degradado fuera de nuestra área de trabajo (en este caso, fuera de la parte rosa).

El ejemplo 3 y 4 se ven mejor, ya que utiliza colores similares al base. El degradado 4 es la clase de degradados que queremos buscar en un diseño. Tal vez se vea sutil, pero es lo suficientemente notorio para poder resaltar un área y darle un detalle elegante. Si lo comparamos con el color original sin degradado, se puede apreciar mejor la diferencia:

Degradado Sutil

Luces:

Crear una metáfora de iluminación, es tal vez el propósito más popular por el cual utilizamos degradados. Para lograrlo, necesitamos degradar nuestro color base a un color más claro o luminoso. Sin embargo, debemos tener cuidado sobre qué color elegir, porque no todos nos darán un buen resultado. Veamos los siguientes ejemplos:

Degradados a claro

1. En el primer ejemplo utilizamos un degradado con blanco. Empezamos el degradado fuera del cuadro como había sugerido antes. A pesar de que se obtuvo un color más claro; el degradado se ve poco sutil y el rosa parece deslavado.

2. En este ejemplo se utilizó un color más claro al color base, pero con menos saturación. Aunque el degradado se ve más integrado, parece como si a la parte de arriba se le fuera la vida.

3. Este degradado ya se ve mucho mejor, se ha elegido un color más luminosoque el base, sin perder saturación. Nuestro color se ve con más luz, y más vivo.

4. En el último ejemplo se ha elegido un color que no sólo es más luminoso que el base, sino que también es más saturado. El resultado es un degradado sutil que agrega luz y vitalidad al área.

Al diseñar debemos evitar obtener degradados como el 1 y el 2, ya que harán que nuestro diseño pierda impacto y se vea triste o aburrido.
Comparando el ejemplo 4 con el color base

¿Cómo elegir los colores?
Démosle un vistazo a nuestro color picker. Cuando queremos otorgarle luz a nuestro color, los colores ideales son los que se encuentran justo arriba y hacia la derecha de nuestro color base (muestras 3 y 4). Estos colores consisten en colores más claros o luminosos y saturados. Los colores que están del lado izquierdo son colores menos saturados y debemos evitarlos, en caso contrario nos darán resultados parecidos a los ejemplos 1 y 2.

Colores ideales para lograr luces

Degradando con blanco:

Para poder trabajar con blanco sin que éste le quite brillantez a nuestro color habrá que manejarlo en una capa por separado, utilizando el degradado a transparente. De esta manera, podremos agregarle un modo de mezcla y ajustar su opacidad para lograr un resultado deseado. Veamos los siguientes ejemplos:
Degradado con Blanco a Transparente

En este ejemplo utilicé un color oscuro (azul) y uno más claro (verde) para que se pueda apreciar el efecto del degradado blanco en cada uno.

1. Aplicamos el degradado en una capa por separado sobre la que tiene a nuestro color base. No importa si comenzamos el degradado desde el inicio del cuadro, porque ya tenemos la flexibilidad de moverlo.
Para poder tener más control sobre la capa que contiene el degradado, sugiero que la agreguemos como clipping mask.
Clipping Mask

2. Movemos nuestro degradado blanco hacia arriba para hacerlo más sutil.

3. Aplicamos overlay (en español superponer) como modo de mezcla. Ahora se puede observar cómo el degradado blanco ha pasado de ser un color deslavado a uno con más brillantez y vivacidad.

Opacidad y modo de mezcla

4. Si consideramos que todavía no es lo suficientemente sutil, podemos cambiar la opacidad de la capa para ajustar el degradado hasta llegar al resultado deseado. En el ejemplo bajamos la opacidad al 60%.

Comparando el ejemplo 3 y 4 con el color base
Comparación de los degradados 3 (overlay y opacidad al 100%) y 4 (overlay y opacidad al 60%) con respecto al color base.

Sombras

La manera de obtener sombras es exactamente igual que cuando queremos luces, pero esta vez buscamos degradar con un color más oscuro. Observemos los siguientes ejemplos para poder elegir los colores adecuados:

Sombras

1. En esta ocasión utilizamos un degradado con negro. A pesar de que se obtuvo el efecto de sombra, el negro resulta ser demasiado fuerte. Si nuestro rosa fuera más claro, se vería sucio. En este caso, el degradado sólo se ve agresivo.

2. Nuevamente se elige un color más oscuro que el base, pero con menos saturación. Con este color, no parece que obtengamos una sombra y le quita la vivacidad al otro color.

3. Esta nueva combinación se ve mejor. Es más sutil, integrada y se nota que es una sombra.

4. En el último cuadro, se elige un color un poco más oscuro y más saturado que el base. Se ve mejor integrado, y le da un detalle de brillantez y vivacidad.

¿Cómo elegir los colores?
Al igual que con las luces, para crear sombras es necesario evitar los colores que se encuentran del lado derecho del color base, que son los menos saturados.

Colores Ideales para Sombras

La gama de colores ideales para hacer sombras se encuentran hacia abajo y a la derecha del color base, pero hay que cuidar que el color no sea tan oscuro, como en el ejemplo 1, ya que nos resultará en un degradado sucio o agresivo.

Degradando con negro:

Como pudieron observar en el ejemplo anterior, trabajar con negro puede ser algo delicado, ya que es un color bastante contrastante y puede dominar por completo a nuestro color base.

Otra forma de trabajar con degradados a negro, es utilizar la opción de degradado a transparente. Esto nos permite manipularlo mejor en una capa por separado. También podemos agregarle el modo de mezcla overlay; sin embargo, este modo de mezcla lo que hará es darle más saturación al degradado, y aunque se vea más oscuro, tal vez no sea el efecto que estamos buscando para crear una sombra.

Veamos los siguientes ejemplos:

Degradando con Negro Para Obtener Sombras

1. Aplicamos el degradado a negro en una capa por separado. No olviden utilizar un clipping mask para evitar que el degrado afecte otras capas al cambiarlo de lugar.

2. Movemos nuestro degradado negro hacia arriba para hacerlo más sutil. El color azul se acopla mejor con el degradado que el color verde. Esto es porque el azul es más oscuro, en cambio como el verde es más claro, parece sucio.

3. Aplicamos overlay sobre nuestro degradado en negro. En ambos colores, el negro se mezcla y da como resultado un color más vivaz.

4. Ajustamos la opacidad para poder hacer el degradado más sutil.

Comparación del ejemplo 3 y 4 con el color base
Comparación de los degradados 3 (overlay y opacidad al 100%) y 4 (overlay y opacidad al 60%) con respecto al color base.

Volumen

Crear el efecto 3D o de volumen, es tal vez el segundo motivo por el cual se utilizan los degradados. Puede haber ocasiones en las que apliquemos degradados y nos aparezcan estos efectos de manera involuntaria, generalmente se ven como “ondas” o “tubos”. Es importante aprender a reconocerlos para poder disimularlos o deshacernos de ellos, ya que terminan viéndose fuera de lugar y hacen que nuestro sitio web se vea raro.

Efectos involuntarios de volumen
Efectos involuntarios de volumen

La imagen de arriba muestra qué efectos de volumen se obtienen de manera accidentals:

1. Este degradado parece dar la sensación de una onda larga hacia arriba.

2. En este ejemplo se da la sensación de que hay una onda hacia abajo.

3. En este cuadro parece como si hubiera una pequeña onda en la parte de arriba.

4. Este ejemplo parece un papel que sale de una ranura.

Para deshacerse de estos efectos, basta con hacer el degradado menos notorio. Puede lograrse eligiendo colores menos contrastantes, o incrementando el tamaño del degradado para hacerlo más sutil. (Ver siguiente ejemplo)

Para deshacerse del volumen
Para eliminar el efecto de onda (1), se puede alargar el tamaño del degradado (2) o eligiendo colores menos contrastantes (3)

Banding

El “Banding” (bandeado) como su nombre lo indica, consiste en la aparición de “bandas” a lo largo del degradado. Estas bandas indican el lugar donde el color va cambiando y resulta ser un efecto muy molesto a la hora de trabajar con degradados.
Banding en degradados

Ruido en degradados
Zoom In de un degradado. Se puede observar la presencia de ruido que ayuda a eliminar el banding.

La manera de evitarlo es simplemente agregándole ruido a nuestro degradado, para que los colores se mezclen mejor y hagan más sutil su transición. Para agregar ruido, podemos utilizar el filtro de ruido que se encuentra en el menú principal de Photoshop. Filtro > Ruido

Filtro de ruido

También podemos optar por activar la opción de dither que se encuentra en la barra superior.
Dither
Lo que hace dither es agregarle ruido automáticamente a los colores para que se mezclen mejor previniendo la aparición del banding. Lo malo es sólo funciona cuando trabajamos con degradados sólidos. No está disponible para la opción de degradado con transparencia, ni tampoco se aplica a los estilos de capa.(Aunque creo que las versiones más modernas de photoshop como el CS6 y CC, ya aplican dither a los estilos de capa)