¿Cómo diseñar hermosos colores degradados?
Prólogo: El gradiente está en todas partes. Los diseñadores tienden a utilizar colores degradados en interfaces de usuario modernas y minimalistas, incluidos fondos, botones, interruptores, tarjetas e incluso sombras. Los degradados están en todas partes donde piensas en ellos y se han apoderado de productos digitales y plataformas de diseño como Dribbble/Behance.
Entonces, ¿qué es un gradiente?
Un degradado es una transición de un color a otro, una mezcla de múltiples colores (un degradado puede tener una variedad infinita de tonalidades). Podemos utilizar degradados de muchas formas. Por ejemplo, los elementos degradados en el fondo y en el primer plano pueden crear combinaciones de colores sutiles o extremadamente atrevidas.
Debido a que los degradados son tan versátiles, podemos usarlos para transmitir diseños únicos o ideas de marca. En este artículo, compartiremos algunos consejos prácticos para que sus diseños degradados se destaquen.
I. Encuentra la inspiración adecuada
Primero, necesitamos encontrar la fuente del degradado.
La mejor fuente de inspiración para los degradados es la naturaleza. Por tanto, el primer paso en el proceso de diseño es dedicar tiempo a observar el mundo real. Busque fotografías de paisajes, entornos o plantas para utilizarlas como fuente de color y crear una conexión con su proyecto.
Dos: Crea tu propia paleta de colores
Utiliza el "Selector de color" para encontrar la parte correcta. Elija 2 o 3 colores primarios llamativos de fotografías/imágenes para crear su paleta de colores.
Se recomienda comenzar con una pequeña cantidad de color. Debido a que el modelo de color RNG solo tiene tres variables, esto significa que puedes mezclar rojo (R), verde (G) y azul (B) para crear cualquier degradado.
Además, para que el degradado luzca suave y fluido, considere usar un valor entre 50 y 150 al crear su paleta.
3. Mezcla los colores de la paleta
Crea una nueva capa en la paleta seleccionada y añade un efecto "Desenfoque de fondo" para lograr una transición suave.
Crea una nueva capa y recrea el degradado lineal utilizando el trazado de desenfoque obtenido.
4. Utilice degradados radiales en degradados lineales para aumentar la profundidad.
Los degradados radiales se utilizan para simular la luz y la luz no siempre es lineal. Puede aplicar un degradado radial dentro de un degradado lineal prediseñado y configurar la dirección de la fuente de luz para que parezca más efectiva.
V. Utilice direcciones de gradiente significativas
Utilice direcciones de gradiente cuando sea necesario. Por ejemplo, utilice luces emisoras para resaltar elementos específicos, mejore la legibilidad del texto colocándolo en áreas coloreadas o guíe a los usuarios a través de la interfaz de usuario con trazados de degradado suaves.
En sexto lugar, agrega ruido granulado para hacerlo más impactante.
En Figma o Sketch, puedes agregar una capa de textura encima del degradado para darle una sensación retro. . En el lado web, puedes aplicar un efecto de ruido de textura colocando una imagen sobre un degradado.
Aquí puedes aprender cómo agregar ruido usando CSS. Nota: normalmente sólo necesita una transparencia de imagen con ruido de 0,1 a 0,5.
Siete: combina degradados con gráficos abstractos
Para que tus degradados sean más geniales, puedes incluso utilizar gráficos abstractos semitransparentes. Utilice la herramienta Enmascaramiento para anidar puntos claros o formas onduladas fuera o encima de la capa de degradado.