¿Cómo crear un icono de visibilidad en Adobe Illustrator?

En el tutorial de hoy, analizaremos en profundidad el proceso de creación de un icono de visibilidad y veremos cómo podemos hacer algunas formas simples y convertirlas en un producto final utilizable.

Entonces, asumiendo que ya tiene el software ejecutándose en segundo plano, ¡ábrelo y salta directamente a él!

Programa: Adobe Illustrator CS6 – CC 2020
Dificultad: Principiante
Tiempo estimado de finalización: 20 minutos

Paso 1

Como hacemos con cada nuevo proyecto, comenzaremos por configurar un Nuevo documento, dirigiéndose a Archivo> Nuevo (o usando el Control-N atajo de teclado), que luego ajustaremos de la siguiente manera:

Perfil: Web
Número de Artboards: 1
Anchura: 64 px
Altura: 64 px
Unidades: Pixeles

Paso 2

Cree la forma principal para el cuerpo del icono usando un 56 x 56 px cuadrado, que colorearemos usando # 494951 y luego alinear al centro con el subyacente Mesa de trabajo utilizando el Alinear del panel Horizontal y Centro de alineación vertical opciones.

Paso 3

Ajusta la forma que acabamos de crear abriendo el Transformar panel y luego configurar el Radio de su abajo a la derecha esquina a 12 px, y sus restantes a 28 px.

Paso 4

Agrega la forma principal del ojo usando una elipse de 32 x 20 px, que colorearemos usando #ffffff y luego alinearemos al centro con el cuadrado que acabamos de ajustar.

Paso 5

Ajusta la elipse agarrando la herramienta Punto de ancla (Shift-C), y luego pellizcando sus puntos de ancla laterales como se ve en la imagen de referencia simplemente haciendo clic en ellos.

Paso 6

Aumenta la redondez de la forma resultante, creando una copia de ella (Control-C), que pegaremos al frente (Control-F) y luego ajustaremos primero volteando su Relleno con su Trazo (Shift-X), y luego abriendo el panel Trazo y estableciendo su Grosor en 4 px y su Esquina en Unión Redondeada. Una vez que hayas terminado, selecciona y agrupa las dos formas usando el atajo de teclado Control-G.

Paso 7

Agrega el iris usando un círculo de 12 x 12 px, que colorearemos usando # 494951 y luego alinearemos al centro con el cuerpo principal del ojo.

Paso 8

Crea el pequeño resaltado usando un círculo de 4 x 4 px (#ffffff), que colocaremos en el iris como se ve en la imagen de referencia. Una vez que tengas la forma en su lugar, asegúrate de seleccionar y agrupar (Control-G) todas las formas que componen el ojo antes de pasar al siguiente paso.

Paso 9

Termina el icono y con él el proyecto en sí, creando un círculo de 8 x 8 px (# ffd188), que colocaremos en la esquina inferior derecha de la forma más grande, a una distancia de solo 6 px. Tómate tu tiempo y, una vez que hayas terminado, no olvides seleccionar y agrupar (Control-G) todas las formas que componen el icono antes de finalmente presionar el botón de guardar.

¡Buen trabajo!

Como siempre, espero que te hayas divertido trabajando en el proyecto y, lo más importante, que hayas logrado aprender algo nuevo y útil durante el proceso.