Una de las últimas tendencias en diseño gráfico y diseño web es el efecto cristal o Glassmorphismo. Es un recurso que combina el desenfoque con la transparencia y un borde en degradado en muchas ocasiones, generando la sensación de profundidad a nuestros diseños de dos dimensiones. En el artículo de hoy te enseñamos a crear el efecto cristal en Illustrator.
Grandes marcas como Apple o Microsoft ya han implementado este efecto a sus interfaces de usuario, y cada vez está más presente en diferentes plataformas, aplicaciones, webs o diseños. Este recurso minimalista aporta novedad y frescura a nuestros diseños, y destaca el contenido sobre fondos coloridos o complejos.
El efecto cristal está siendo utilizado sobre todo en el mundo app y web, por su efectividad a la hora de jerarquizar, organizar y estructurar la información mediante tarjetas, o paneles que se superponen a todo lo demás. Estos ejemplos de CodePen muestran alguna de las posibles aplicaciones que puede tener el efecto cristal en el mundo web.
El efecto cristal o Glassmorphismo es un efecto que simula un cristal encima de una superficie. Se consigue mediante degradados, opacidades, desenfoques y sombras, y puede ser un recurso muy sencillo, aplicable y atractivo en diseño gráfico y diseño web, sobre todo para crear tarjetas de información que se superpongan a otros elementos.
Sigue con nosotros los pasos para crear este efecto de cristal en Illustrator:
Escoge una imagen, un degradado o unas formas en la que aplicar el efecto cristal. Se necesitan formas o colores en la parte posterior para crear este efecto.
Crea una forma encima de tu fondo, puede ser un rectángulo, o la forma que tú elijas, tanto las formas predefinidas de Illustrator como elipses, polígonos o estrellas, como cualquier forma que tú generes mediante la pluma o el pincel.
Este paso es opcional, depende de la apariencia que le queramos dar a nuestro efecto cristal, podremos elegir entre redondear los bordes de la forma que hayamos dibujado o dejarlos en punta. En este caso, mediante la Herramienta de Selección Directa (A) hemos redondeado 6 mm las esquinas del rectángulo
Añade un degradado a tu forma. En este caso, hemos añadido un degradado en blanco a 120º con opacidad del 0% en el inicio y del 40% en el final.
Para crear un efecto de volumen y resaltar el efecto de cristal de nuestra forma, añadimos un degradado también al trazado de nuestra forma. En este caso también lineal a 120º en blanco, pero esta vez de 0% de la opacidad en el inicio y 80% en el final.
A continuación, copia y pega la forma en el mismo lugar mediante los comandos Ctrl+C y Mayúsculas+Ctrl+V.
El siguiente paso es copiar y pegar en el mismo lugar, esta vez el fondo. Ordenaremos los elementos de tal manera que los fondos estén en la parte posterior de nuestro lienzo y las formas duplicadas en la parte anterior. Una vez ordenados los elementos, seleccionaremos pulsando la tecla Mayúsculas uno de los fondos y una de las formas y les aplicaremos una máscara de recorte mediante el comando Ctrl+7.
En el panel de apariencia seleccionaremos el efecto de desenfoque gaussiano, para aplicar un sutil desenfoque al fondo. En este caso, hemos aplicado un desenfoque gaussiano de 35 píxeles.
Por último, solo quedaría ordenar los elementos para ver el resultado final. De esta manera, ordenaremos el fondo completo (sin máscara de recorte ni desenfoque) en la parte posterior del lienzo, a continuación estará la forma con la máscara de recorte del fondo y el desenfoque gaussiano, y por último la forma con el degradado en el relleno y en el trazo.
Si te interesa este efecto y quieres aprender también a tenerlo en tus diseños web, en próximos artículos te explicamos cómo crear un efecto cristal o Glassmorphism mediante CSS. Si quieres aprender todo sobre la herramienta de Adobe Illustrator y conocer todos los trucos, efectos y posibilidades que ofrece, echa un vistazo a los cursos de Diseño Gráfico que ofrecemos en Caronte.
Esperamos que este artículo haya sido de tu interés, no dudes en dejar un comentario con tus dudas, aportaciones, o consejos. ¡Nos vemos en el siguiente!
En este artículo, aprenderás qué es el Lazy Loading y cómo implementarlo fácilmente en tu… Leer más
En esta guía práctica, te explicamos qué es el presupuesto de rastreo, por qué es… Leer más
¿Alguna vez te has encontrado con un mensaje que te invita a actuar, ya sea… Leer más
Una de las preguntas más comunes entre los desarrolladores web que comienzan a usar JavaScript… Leer más
Descubre qué es y para qué sirve la preimpresión digital para conseguir una buena impresión… Leer más
Ampliamos información para las redes sociales. Descubre cómo gestionar correctamente los consentimientos necesarios en las… Leer más