Blog / Efecto cristal en Illustrator, aprende a crearlo

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.

¿Qué es el Glassmorphismo?

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.

¿Cómo crear el efecto cristal en Illustrator?

Pasos para crear un efecto vidrio en Illustrator

Sigue con nosotros los pasos para crear este efecto de cristal en Illustrator:

Escoge un fondo

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

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.

Redondea los bordes de la forma

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

Degradado en la forma

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.

Degradado en el trazo

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.

Duplica la forma

A continuación, copia y pega la forma en el mismo lugar mediante los comandos Ctrl+C y Mayúsculas+Ctrl+V.

Duplica el fondo y haz una máscara de recorte

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.

Aplica un desenfoque a la máscara de recorte

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.

Ordenar los elementos

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.

Conclusión: Crear el efecto vidrio en Illustrator es muy sencillo

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!