¿Has notado que una de las tendencias en diseño para redes sociales es un degradado de colores? ¿Quieres hacer el tuyo? En este artículo te contaremos todo lo que debes hacer para tener un diseño propio, adaptado a tus gustos y de forma sencilla.
Definición del degradado
El degradado es una transición de colores que se empiezan a ver nuevamente en todas partes, como mencionábamos antes. Pero esta no es una herramienta nueva en el diseño gráfico. De hecho, se ha usado desde los años 90.
Cuando se habla de un degradado de color se hace referencia de un rango de colores que van a ser ordenado de forma lineal, en los que se hará una transición que puede ser suave, gradual y progresiva. Lo que se hace es que se reduce el porcentaje de un color y se aumenta el porcentaje del otro color, esto hará que se produzcan tonalidades nuevas que saldrán de la fusión de los dos colores originales.
Visualmente, el resultado que se tiene de la fusión va a darle una relación a quien lo ve de profundidad. Y también se va a captar una riqueza del color mayor en los diseños que se hacen.
Los colores planos pueden resultar limitados, trasmitiendo una imagen mucho más fría. Mientras que cuando se hacen este tipo de fusiones de los colores se pueden hacer una tonalidad nueva, un color que es fresco y logra aportar matices, darle énfasis a algunas partes del diseño debido a sus transiciones, las partes de luz y de oscuridad en la transición del color.
Igualmente el uso de los degradados va a poder dar un aspecto que resulta mucho más cercano a la naturaleza. Por ejemplo: puestas de sol, cielo, mar, frutas, plantas, etc. En cada una de estas cosas se van a encontrar degradado de colores.
Estructura del degradado
Degradado axial o lineal: Este será definido por una varios puntos de color que harán la transición o interpolación de color desde el punto en el que inicial hasta el punto en el que termine la línea recta imaginaria.
Degradado radial: este tipo de degradado, se va a tratar en una interpolación de color que se va a producir basado en un círculo, esto es en vez de tratarse de una línea recta, como el caso anterior. Los colores que van a quedar como intermedio van a ser calculados por medio de la interpolación linear en base a la distancia de este color en el centro del círculo.
¿Cómo hacer un degradado de colores?
Antes de empezar a adentrarnos en este tema, nuestra recomendación es que siempre que vayas a hacer un diseño haz que este sea sutil, de forma de que apliques solo ligeros toques, porque sino correrás el riesgo de que tu imagen esté muy sobrecargada y no tenga el impacto que deseas.
Con esta técnica que te daremos no solo podrás crear los degradados que quieres, sino que también podrás hacer tus propios salvapantallas.
Aunque pienses que un degradado solo se basa en fundir colores, estás equivocado, acá la clave se va a centrar totalmente de los colores que elijas.
Tienes la opción de hacer un degradado de tono, lo que sería pasar de uno claro a uno más oscuro. Otra que puedes hacer es un degradado de distintos colores, eso sí, siempre tienen que ser colores que combinen entre ellos.
Un truco clave para que el degradado que hagas no sea pesado es que no añadas más de tres colores al diseño que estás haciendo. De esta forma podrás asegurarte de que tu mezcla no sea un fracaso.
Tu mente fijará el límite de tu diseño, por lo que podrás añadir todo lo que desees. Pero nuestra recomendación siempre será a que empieces solo con dos o tres colores. Ya que hacer degradados que son complejos requiere que se elijan con extremo cuidado todos los tonos para que no quede como una especie de mancha.
Un elemento que puedes elegir para darle personalidad a tu degradado será el tipo que escojas. Nunca será o se verá igual un degradado lineal, donde los colores se van a fusionar horizontalmente, a un degradado radial, donde se mezclan los colores desde el centro formando así una redonda.
También es posible variar el diseño que quieres, modificando el ángulo en el que aparecerán los colores. Ya que si pones un degradado a 45º, nunca se verá como si lo hubieses puesto de 90º. Aunque estén los mismos colores, no se verá igual.
Ya que te señalamos toda la teoría que necesitabas saber, es hora de comenzar con el paso a paso que te hará que logres el diseño que tanto quiere para tus redes sociales.
Primer paso
Lo primero que debes hacer es crear un archivo nuevo en Adobe Photoshop. Este deberá ser de 1400×900 pixeles. Una vez que ya tengas la hoja blanca con este tamaño deberás buscar la herramienta de degradado. Esta la encontrarás seleccionando la el icono de cubo de pintura, si lo mantienes pulsado te saldrá un menú desplegable, allí encontrarás la herramienta de degradado. En el caso de necesitar degradados en videos, debes utilizar herramientas de edición de vídeos.
Segundo paso
En este segundo paso vas a elegir el tipo de degradado que quieras, si lineal o radial, así como los colores que vas a usar. Para seleccionar esto solo tienes que pulsar la opción que más te gusta. Para cambiar el color debes hacer clic en el degradado de muestra que aparece en la pantalla.
Tercer paso
Ahora verás que aparece una ventana flotante en la que observarás la opción en la que se ve desglosado el degradado, puedes hacer clic en los puntos de los colores, se abrirá una nueva ventana en la que puedes escoger el color que desees. También verás unos puntos negros en cada punto de color, esto te va a ayudar a cambiar la opacidad que tiene cada color.
Cuarto paso
Ya que escogiste tus colores, solo tendrás que arrastrar (en el ángulo que quieras tu degradado) el mouse sobre tu mesa de trabajo. De esta forma creas tu degradado. Y listo, esto es todo. ¿Muy fácil, no? Lo importante acá es que sigas practicando y pruebes cada vez con distintos colores y ángulos.
Una vez que ya sepas hacer tus diseños degradados a la perfección podrás empezar a componer tus piezas gráficas con distintos tipos de tipografías y lettering. Incluso podrás incluir una imagen con un fondo transparente.
Degradado transparente
Esta opción es muy útil para combinarla con una imagen o dos. Ahora, vamos a explicar cómo se puede crear un degradado transparente.
Nuevamente tienes que abrir un nuevo archivo en Photoshop, espera a que aparezca en el panel las Capas (Layers) y busca la capa “Fondo” (Background). Luego de esto, debes escoger la herramienta en forma de rectángulo que encontrarás en la barra de herramienta principal. Luego tendrás que escoger un tono contrastante como color frontal para que se pueda distinguir de la fotografía que pusiste en el fondo.
Ahora tienes que dibujar un rectángulo sobre la foto, la parte donde quieres el degradado. Cuando hayas hecho esto debes darle clic al icono que dice fx. Te saldrá una ventana de estilo de capa con varias opciones escoge la superposición de degradado.
En esta pestaña que te mencionamos escoge la que tiene el degradado de negro a blanco. Después el ángulo en el que quieres el degradado. En esa misma pestaña debes buscar la opción editor degradado, allí cambiarás el degradado de blanco a negro por uno transparente. Para eso selecciona el ajuste de opacidad y cámbialo a 0. Dale aceptar y se hará combinará lo que has hecho con el color original.
Lo siguiente será volver a fx, luego suposición de degradado, degradado y una vez allí selecciona color para cambiarlo de nuevo. Después tendrás que seleccionar el rectángulo en la paleta de capas y poner 0 por ciento en la sección de relleno. Una vez que hagas esto tendrás listo tu diseño.
¿Cómo hacer colores degradados en HTML?
Si se trata de hacer un diseño realmente bueno en una página web, usar un degradado de color en el fondo que sea progresivo de un tono a otro será práctico. Para poder hacer esto, antes solo se tenía que poner una imagen de fondo en el div. Que se tenía que diseñar en Photoshop. Sin embargo, ahora por medio del CSS3 se puede hacer un degradado de una forma muy rápida con códigos que se van a integrar a la perfección en HTML.
La propiedad tendrá el nombre de Grandient Background, que quiere decir fondo degradado, y es aplicable en cualquier tabla o div. Aunque debes tener en cuenta que las tablas no son recomendables. Esto va a tratar de una transición de color de forma muy suave, este puede ser entre dos o más colores.
La ventaja que esto va a ofrecer no se va a limitar únicamente en el ahorro del tiempo, sino que también se va a ahorrar en tiempo de descarga y ancho de banda. Por lo que usando fondos degradados en un div con CSS se hace que la página web pueda ser mucho más rápida.
Existen dos tipos de degradados en CSS
Degradados lineales: estos van a ir de arriba abajo, derecha, izquierda o diagonal.
Para poder lograr este tipo de degradado, se va a tener que definir dos colores de destino. Un punto de inicio y uno que será el punto final. Igualmente se va a poder especificar una dirección o ángulo para el degradado. El código CSS debe ser de esta forma:
background: linear-gradient(direction, color-stop1, color-stop2, …);
Para llevar esto a un ejemplo real, digamos que va a empezar arriba con rojo y se terminará con un verde:
#degradado {
background: -webkit-linear-gradient(red, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, green); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, green); /* Standard syntax */
}
Degradados radicales: este tipo de degradado va a ir desde el centro hacia afuera con la creación de un círculo.
Este es el código para lograr un degradado radical:
background: radial-gradient(shape size at position, start-color, …, last-color);
Ejemplo:
#degradado {
background: -webkit-radial-gradient(red, violet, blue); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, violet, blue); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(red, violet, blue); /* For Firefox 3.6 to 15 */
background: radial-gradient(red, violet, blue); /* Standard syntax */
Recomendaciones para la creación de degradados
Cuando se quiera usar un degradado en algún diseño, hay diferentes puntos que se deben tener en consideración para que el efecto sea verdaderamente lo que se desea conseguir. Lograr un degradado no es nada complicado, sin embargo, conseguir un resultado que sea natural, atractiva, inspiradora, si puede ser más difícil.
Para eso, haremos unas recomendaciones para que cualquiera pueda lograr una transición de color que sea suave, y que se tenga así una sensación de continuidad visual, una fusión correcta, de forma que se evite tonos insaturados o pardos que van a restar atractivo visual.
Una de las primeras cosas que se deben hacer es la selección de los colores con los que se van formar los degradados. Esto debido a que una gran parte del resultado va a depender de él. Entonces, entre lo que se debe considerar cuando se escoge a los colores, es que estos pertenezcan al mismo espacio de color. Es decir, RGB o CMYK.
Acá es apropiado referirnos al círculo cromático para cuando se haga la elección de los colores. Es importante que cuando se escojan los colores que están más cerca, de esta forma se puede lograr una transición que será suave entre estos, que lo que pasaría si se escogen colores que estarán de un lado opuesto o que pueden ser complementarios. Cuando se mezclan pigmentos de colores complementarios se va a terminar obteniendo un color neutro, en la mayoría de los casos, lo que va a matar o eliminar el brillo del otro color.
Colores insaturados
Hablemos de los colores insaturados. En este caso, supongamos que se tiene un color verde oscuro que está insaturado durante una transición que va a ir de un tono verde brillante hasta un tono púrpura brillante.
Este caso se va a poder solucionar si se hace un degradado que conste de tres colores. En el que se va hacer una sustitución del color intermedio que es poco saturado por otro color. Este debe aportar brillo y este va a estar entre los dos colores que se escogieron en el círculo cromático.
Cómo se sustituye un color insaturado
Cuando se trata de sustituir un color insaturado por un tercero que se encuentre entre los dos primeros colores. La recomendación es lograr hacer un desvanecimiento completa del color hasta llegar a blanco o transparente. Esto también va a producir una pérdida de color que no resulta muy atractiva.
Tenemos dos opciones, la primera se trata de alargar la fusión del color a transparencia o al blanco, de una forma en la que no esté en 50 por ciento y la transición resulte mucho más suave. Por otro lugar, se recomienda que el color final tenga una parte de la tinta inicial en menos dos o tres por ciento. Esto con lo que queramos hacer el degradado. Es de esta forma que se evita hacer un desvanecimiento que resulte brusco o sin contar con una transición suave.
Sobre la opacidad y el punto de fusión
Igualmente es mucho más correcto cuando se está haciendo la fusión de dos colores que estos cuenten con un ciento de la tinta inicial como final, es decir al comienzo y al final de la fusión. Esto va hacer que se consiga una buena mezcla de los colores. El tanto por ciento va a depender de la intensidad que estas tengas, así como el efecto que se está buscando lograr.
Cuando se fusiona dos tintas de igual forma se puede producir un mal efecto en cuanto a bandas de color o banding. Para poder encontrar una solución a esto se puede introducir más de una tinta en cada color usado. Con esto se puede controlar el desvanecimiento de una forma progresiva o se puede manejar luego ese degradado por medio de la aplicación de efectos. Por ejemplo, ruidos o desenfoques en Photoshop.
Herramientas para realizar degradado de colores
Ahora, hoy en día se cuenta con muchas herramientas que harán más fácil la creación de colores degradados armoniosos y llamativos virtualmente. Tener conocimiento de estas, puede que simplifique el proceso de creación evitando fracasar en el proceso.
Grabient
Esta es una aplicación ofrece degradados que ya están listos para usar. Estos también se pueden modificar según el gusto del creador. Por ejemplo, se pueden agregar o eliminar colores, así como cambiar la posición que estos tienen. El uso de esta herramienta es realmente intuitivo y sencillo. Se puede hacer una selección en cuanto a la posición de los colores, en la que se puede mover el cursor del ordenador sobre el degradado para que se le pueda asignar el ángulo que se busca. Una vez que el diseño esté terminado se puede hacer una copia para el CSS.
UiGradients
Esta es una colección de degradados de múltiples colores. En los que se puede encontrar la inspiración que buscas.
Webgradients
En esta herramienta encontrarás más de 180 degradados lineales, estos pueden ser usados en el fondo de un contendido en cualquier parte de una web. Igualmente puede copiarse el código CSS3 o la versión en formato .PNG.
Paletton
Fue diseñado para crear paletas de colores que van a trabajar muy bien en conjunto. Todo basado en las teorías de color de forma clásica. Aunque resulta menos intuitiva, se pueden lograr resultados muy buenos.
También te va a interesar:
