Hoy es uno especial, ya que estamos celebrando diez años de genialidad, y qué mejor manera de hacerlo que dándote un tutorial especial donde aprenderás cómo crear un conjunto de diez íconos de la IU imprescindibles, utilizando la mayoría formas y herramientas básicas que Illustrator tiene para ofrecer.

Si estás buscando más íconos, en diferentes estilos, ve hacia GraphicRiver.

Habiendo dicho eso, obtén un rápido sorbo de ese café fresco y reciente, y trabajemos.

1. Cómo Establecer un Nuevo Archivo de Proyecto

Suponiendo que ya tiene Illustrator ejecutándose en segundo plano, críelo y configuremos un Nuevo documento (Archivo> Nuevo o Control-N) usando la siguiente configuración:

• Número de Mesas de Trabajo: 20
• Espaciado: 20 px
• Ancho: 64 px
• Altura: 64 px
• Unidades: Píxeles

Y de la pestaña de Avanzado:

• Modo de Color: RGB
• Efectos Raster: Pantalla (72ppi)
• Modo de Pre visualización: Default

2. Cómo Establecer una Cuadrilla Personalizada

Ya que vamos a crear los íconos utilizando un flujo de trabajo perfecto para píxeles, querremos configurar una cuadrícula pequeña para que podamos tener un control total sobre nuestras formas.

Paso 1

Vaya al menú Editar> Preferencias> Guías y cuadrícula, y ajuste las siguientes configuraciones:

• Cada Cuadrícula: 1 px
• Subdivisiones: 1

Consejo rápido: puedes aprender más sobre cuadrillas al leer esta pieza profunda sobre Cómo el Sistema de Cuadrillas de un Ilustrador Funciona

Paso 2

Una vez que hemos configurado nuestra grilla personalizada, todo lo que necesitamos hacer para asegurarnos de que nuestras formas se vean nítidas es habilitar la opción Ajustar a cuadrícula y Ajustar a píxel que se encuentra en el menú Ver, que se transformará en Ajustar a píxel cada vez ingresa al modo Vista previa de píxeles (si está usando una versión anterior del software).

Ahora, si es nuevo en todo el "flujo de trabajo perfecto para píxeles", le recomiendo que lea mi tutorial Cómo crear ilustraciones perfectas para píxeles, que lo ayudará a ampliar sus habilidades técnicas en poco tiempo.

3. Cómo Establecer las Capas

Con el nuevo documento creado, sería una buena idea estructurar nuestro proyecto usando algunas capas para separar las cuadrículas de referencia de los iconos reales. Si está familiarizado con mis tutoriales anteriores, notará que con este enfoque estamos tomando un enfoque ligeramente diferente, ya que basamos el proyecto en Artboards en lugar de en Capas debido a la gran cantidad de iconos.

Habiendo dicho eso, trae el panel de Capas, y crea un total de dos capas, las cuales volveremos a nombrar como lo que sigue:

• capa 1: cuadrillas de referencia
• capa 2: íconos

4. Cómo Crear Cuadrillas de Referencia

Las cuadrículas de referencia (o cuadrículas base) son un conjunto de superficies de referencia delimitadas con precisión, que nos permiten construir nuestros íconos al enfocarnos en el tamaño y la consistencia.

Por lo general, el tamaño de las cuadrículas determina el tamaño de los iconos reales, y siempre deben ser la primera decisión que tome una vez que comience un nuevo proyecto, ya que siempre querrá comenzar desde el tamaño más pequeño posible y basarse en eso.

Ahora, en nuestro caso, vamos a crear el paquete de íconos usando solo un tamaño, más exactamente 64 x 64 px, que está en la parte media de la escala.

Paso 1

Asegúrate de estar en la capa correcta (que sería la primera), y luego toma la herramienta Rectángulo (M) y crea un cuadrado naranja de 64 x 64 px (n.º F15A24) que centraremos en la alineación del primer tablero y usar para definir el tamaño total de nuestros iconos.

Paso 2

Agregue uno más pequeño de 56 x 56 px (#FFFFFF) que colocaremos en la parte superior de la forma anterior, ya que actuará como nuestro área de dibujo activa, dándonos un relleno de 4 px alrededor para trabajar.

Paso 3

Seleccione y agrupe los dos cuadrados con el atajo de teclado Control-G, y luego cree las cuadrículas restantes usando 19 copias (Control-C> Control-F) que colocaremos en cada uno de los tableros vacíos. Tómese su tiempo, y una vez que haya terminado, asegúrese de bloquear la capa actual antes de pasar a la siguiente sección.

5. Cómo Crear Íconos de Navegación

Suponiendo que haya logrado crear las pequeñas cuadrículas de referencia, pase a la siguiente capa (que sería la segunda) y comencemos el proyecto creando el primer grupo de iconos, que nos ayudará a navegar mejor.

Paso 1

Comience a trabajar en el ícono de la parte posterior creando su cuerpo principal usando un círculo de 48 x 48 px, que colorearemos usando #DCEEFF y luego alinearemos en el centro al primer Artboard.

Paso 2

Dale a la forma que acabamos de crear un esquema usando el método de Trazo, creando una copia (Control-C), que pegaremos al frente (Control-F) y luego ajusta cambiando primero su color a # 629CF9 y luego volteando su Relleno con su Trazo (Shift-X). Establezca el grosor del contorno resultante en 8 px, seleccionando y agrupando todas las formas de composición de la sección actual juntas usando el atajo de teclado Control-G.

Paso 3

Comience a trabajar en la pequeña flecha hacia la izquierda creando su cuerpo principal usando una línea de Trazo de 24 px de ancho y 8 px de ancho (# 629CF9) con una Tapa Redonda, que centraremos en alinear con el Artboard inferior más grande.

Paso 4

Finalice el ícono dibujando la cabeza de la flecha con un trazo de 8 px de grosor (# 629CF9) con una Tapa redonda y unir. Tómese su tiempo, y una vez que haya terminado, seleccione y agrupe los dos juntos (Control-G), haciendo lo mismo para todas las formas de composición del icono antes de pasar al siguiente.

Paso 5

Cree el ícono de reenvío usando una copia (Control-C) del que acabamos de terminar de trabajar, que pegaremos (Control-F) en el segundo pizarrón y luego ajustaremos reflejándolo verticalmente (clic con el botón derecho> Transformar> Reflejar> Vertical).

Paso 6

Cree el icono de desplazamiento hacia arriba usando una copia (Control-C) del icono anterior, que pegará (Control-F) en el siguiente tablero y luego ajuste girándolo -90º con la herramienta Girar (clic derecho> Transformar> Girar > -90º).

Paso 7

Agregue el ícono de desplazamiento hacia abajo usando una copia (Control-C) de la que acabamos de crear, que pegaremos (Control-F) en el cuarto Artboard y luego lo ajustaremos reflejándolo horizontalmente (clic con el botón derecho> Transformar> Reflejar > Horizontal).

Paso 8

Comience a trabajar en el ícono de actualización creando su cuerpo principal usando un círculo de 36 x 36 px con un trazo de 8 px de grosor (# 629CF9), que centraremos en alinear con el borde inferior del área de dibujo activa.

Paso 9

Abra el círculo quitando la sección del cuarto superior izquierdo, asegurándose de establecer la Tapa a la Ronda de la ruta resultante desde el panel Trazo.

Paso 10

Cree la punta de la flecha usando un rectángulo de 18 x 24 px, que colorearemos usando #DCEEFF, y luego la posición como se ve en la imagen de referencia.

Paso 11

Convierta el rectángulo en una flecha hacia la izquierda agregando un nuevo punto de anclaje al centro de su borde izquierdo con la herramienta Agregar punto de ancla (+) y luego extraiga los bordes externos haciendo clic en ellos con la herramienta Eliminar punto de ancla. (-).

Paso 12

Finalice la flecha, y con ella el icono mismo, dando a la forma resultante un contorno de 8 px de grosor (# 629CF9) con una unión redonda, seleccionando y agrupando (Control-G) los dos juntos, y haciendo lo mismo para la totalidad ícono después.

6. Cómo Crear los Íconos de Búsqueda y Magnificación

Suponiendo que haya terminado de trabajar en el primer grupo de iconos, avance al siguiente Artboard y comencemos a trabajar en nuestro próximo grupo.

Paso 1

Cree la sección del objetivo del icono de búsqueda usando un círculo de 40 x 40 px (#DCEEFF) con un contorno de 8 px de grosor (# 629CF9), que agruparemos (Control-G) y luego alineará a la esquina superior izquierda del área de dibujo activa.

Paso 2

Tómese un par de momentos y dibuje la sección del mango con un trazo de 8 px de grosor (# 629CF9) con una tapa redonda, usando la imagen de referencia como su guía principal.

Paso 3

Finalice el icono acortando la longitud de su mango seleccionando su punto de anclaje superior con la herramienta de selección directa (A) y luego arrastrándolo hacia abajo en diagonal, mientras mantiene presionada la tecla Shift para mantener una línea recta. Tómese su tiempo, y una vez que haya terminado, seleccione y agrupe (Control-G) todas sus formas de composición antes de pasar al siguiente icono.

Paso 4

Cree el ícono de acercamiento utilizando una copia (Control-C) de la que acabamos de terminar de trabajar, que pegará (Control-F) en el siguiente Artboard, agregando el signo más al centro de la sección del lente utilizando dos líneas de Trazo de 16 px de largo y 8 px de grosor (# 629CF9) con una Tapa Redonda. Tómese su tiempo, y una vez que haya terminado, seleccione y agrupe (Control-G) todas sus formas de composición antes de pasar a la siguiente.

Paso 5

Agregue el ícono de alejamiento con una copia (Control-C) de la que acabamos de crear, que pegaremos (Control-F) en el siguiente Artboard y luego ajustamos haciendo doble clic en el signo más para aislarlo. Luego desagrupe (clic derecho> Desagrupar) y elimine su línea de trazo vertical.

7. Cómo Crear los Íconos de Visibilidad

Ahora estamos en nuestro tercer grupo de iconos, así que asegúrate de posicionarte en el próximo Artboard (ese sería el noveno) y comencemos.

Paso 1

Cree el cuerpo principal del icono de alternar en la visibilidad con una elipse de 48 x 32 px, que colorearemos con #DCEEFF y luego centraremos en alinear con el Artboard subyacente.

Paso 2

Ajuste la forma que acabamos de crear pellizcando sus puntos de anclaje izquierdo y derecho con la herramienta de punto de anclaje (Shift-C) para girar la elipse en una forma más parecida a un ojo.

Paso 3

Dale a la forma resultante un contorno de 8 px de grosor (# 629CF9) con una unión circular, seleccionando y agrupando los dos juntos luego usando el atajo de teclado Control-G.

Paso 4

Agregue la sección del alumno usando un círculo de 16 x 16 px, que colorearemos usando # 629CF9 y luego alinearemos el centro de las dos formas que acabamos de agrupar.

Paso 5

Termine el ícono agregando un pequeño reflejo usando un círculo de 8 x 8 px, que colorearemos usando #DCEEFF y luego lo alinearemos a la esquina superior derecha de la pupila, agrupando (Control-G) los dos juntos luego. Tómese su tiempo, y una vez que haya terminado, seleccione y agrupe (Control-G) todas sus formas de composición antes de pasar a la siguiente.

Paso 6

Cree el icono para desactivar la visibilidad con una copia (Control-C) de la que acabamos de terminar de trabajar, que pegaremos en el décimo Tablero y luego ajustamos dibujando la línea diagonal con un trazo de 8 px de grosor (# 629CF9), seleccionando y agrupando (Control-G) todos juntos después.

8. Cómo Crear los Íconos de Compartimiento de Archivos

Seamos honestos, ningún paquete de iconos de UI verdadero está completo sin un conjunto de íconos para compartir archivos, así que asegurémonos de agregar un juego propio.

Paso 1

Comience a trabajar en el icono de carga creando las formas principales para su sección de caja usando un rectángulo de 48 x 12 px (#DCEEFF) con un contorno grueso de 8 px (# 629CF9), que agruparemos (Control-G) y luego alinee el centro al borde inferior del área de dibujo activa.

Paso 2

Agregue los pequeños segmentos que se extienden usando dos líneas de Trazo de 8 px de alto 8 px (# 629CF9) con una Tapa Redonda, que colocaremos en los lados de las formas previamente creadas, seleccionándolas y luego creando un grupo más grande (Control-G).

Paso 3

Agregue la flecha hacia arriba utilizando una copia (Control-C) de la que ya creamos para los íconos de navegación, la cual pegaremos (Control-F) en el Artboard actual y luego centraremos en el borde superior del área de dibujo activa . Una vez que tenga la flecha en su lugar, seleccione y agrupe todas las formas de composición del icono usando el atajo de teclado Control-G.

Paso 4

Cree el ícono de descarga usando una copia (Control-C) de la que acabamos de terminar de trabajar, que pegaremos en el siguiente Artboard y luego ajustaremos horizontalmente reflejando su pequeña flecha (clic con el botón derecho> Transformar> Reflejar> Horizontal)

9. Cómo Crear el Ícono de Información de Anuncio

Si eres como yo, probablemente seas una de esas personas a las que realmente no les gusta el siguiente artículo, ya que las interfaces deben ser fáciles de usar, pero en el fondo sabes que a veces es un mal necesario.

Paso 1

Crea el cuerpo principal del ícono usando un círculo de 48 x 48 px (#DCEEFF) con un contorno de 8 px de grosor (# 629CF9), que agruparemos (Control-G) y luego alineaos en el centro en el 13º Artboard.

Paso 2

Crea el pequeño punto del signo de exclamación con un círculo de 8 x 8 px, que colorearemos usando # 629CF9 y luego centraremos en las formas más grandes, colocándolas a una distancia de 4 px del borde inferior del contorno.

Paso 3

Finalice la marca y con ella el icono en sí, agregando el segmento de línea con un trazo de 12 px de alto y 8 px de grosor (# 629CF9), que colocaremos sobre el punto, a una distancia de solo 4 px. Seleccione y agrupe (Control-G) las dos formas juntas, haciendo lo mismo para todo el icono, antes de pasar al siguiente.

10. Cómo Crear el Ícono de Compartimiento

Compartir es una de esas cosas que hacen que Internet sea un gran lugar para vivir tu existencia digital, por lo que compartiré contigo un enfoque simple sobre cómo crear tu propio ícono para compartir.

Paso 1

Cree las secciones principales del icono usando tres círculos de 16 x 16 px (#DCEEFF) con un contorno grueso de 8 px (# 629CF9), que agruparemos individualmente (Control-G) y luego la posición como se ve en la imagen de referencia.

Paso 2

Dibuja el segmento de línea que conecta las tres secciones con un contorno de 8 px de grosor (# 629CF9) con una tapa redonda y unir. Tómese su tiempo, y una vez que haya terminado, envíe la ruta resultante debajo haciendo clic derecho> Organizar> Enviar al fondo, seleccionando y agrupando todas las formas de composición del icono usando el atajo de teclado Control-G.

11. Cómo crear los iconos de alternar de estado

Nos encanta encender y apagar cosas, entonces ¿por qué no pasar un par de momentos y ver cómo podemos crear nuestro propio indicador de estado?

Paso 1

Comience a trabajar en el icono de alternar creando su cuerpo principal usando un rectángulo redondeado de 48 x 32 px (#DCEEFF) con un radio de esquina de 16 px y un contorno de 8 px de grosor (# 629CF9), que agruparemos (Control-G) y luego alinear en el centro al siguiente Artboard.

Paso 2

Agregue el indicador de estado usando un círculo de 16 x 16 px, que colorearemos usando # 629CF9, y luego alinee el centro a las formas más grandes, colocándolo a una distancia de 4 px del borde izquierdo del contorno. Una vez que haya terminado, seleccione y agrupe (Control-G) las tres formas juntas, antes de pasar al siguiente icono.

Paso 3

Cree el estado de alternar utilizando una copia (Control-C) de la que acabamos de terminar de trabajar, que pegaremos en el siguiente Artboard (Control-F), y luego lo ajustaremos reflejándolo verticalmente (clic derecho> Transformar> Reflejar> Vertical).

12. Cómo Crear un Ícono de Menú Hamburger

El siguiente elemento de nuestra lista es uno de esos íconos que instantáneamente se convirtió en un elemento de cambio de juegos una vez que se usó y entendió completamente, ya que se adoptó instantáneamente como un símbolo universal.

Paso 1

Comience a trabajar en la sección central del menú creando un círculo de 8 x 8 px, que colorearemos con # 629CF9 y luego alineará al centro al borde izquierdo del área de dibujo activa.

Paso 2

Agregue el segmento de la barra usando una línea de Trazo de 36 px de ancho y 8 px de ancho (# 629CF9) con una Tapa Redonda, que centraremos y alinearemos con el lado derecho del área de dibujo activa. Tómese su tiempo, y una vez que tenga el camino en su lugar, selecciónelo y el círculo y agrúpelos utilizando el atajo de teclado Control-G.

Paso 3

Para finalizar, agregue las secciones superior e inferior con dos copias (Control-C> Control-F dos veces) de las formas que acabamos de agrupar, que colocaremos a una distancia de 8 px del original. Una vez que haya terminado, seleccione y agrupe (Control-G) todas las secciones de composición antes de pasar al siguiente icono.

13. Cómo Crear el Ícono de Ajustes

Ya sea piñones o controles deslizantes, todos podemos estar de acuerdo en que el ícono de configuración es un elemento imprescindible en cualquier paquete UI, ya que los ajustes son una de esas cosas que siempre nos gusta hacer, si sabes a qué me refiero.

Paso 1

Comience creando los segmentos del control deslizante del icono usando tres líneas de trazo de 48 px de ancho y 8 px de grosor (# 629CF9) con una Tapa redonda, que apilaremos verticalmente a una distancia de 16 px, alineándolas con el panel de texto subyacente vacío después.

Paso 2

Para finalizar, agregue las perillas de ajuste usando tres círculos de 12 x 12 px (#DCEEFF) con un contorno grueso de 8 px (# 629CF9), que agruparemos individualmente (Control-G) y luego los posicionaremos en los controles deslizantes como se ve en la imagen de referencia. Una vez que haya terminado, no olvide seleccionar y agrupar (Control-G) todas las formas de composición del icono antes de pasar al siguiente.

14. Cómo Crear los Íconos de Me Gusta

Ahora nos hemos limitado a nuestro último grupo de iconos, y qué mejor manera de terminar el paquete que añadiendo los pequeños estados cardiacos.

Paso 1

Comience a trabajar en la sección superior del botón Me gusta creando un círculo de 28 x 28 px, que colorearemos usando #DCEEFF, y luego coloque 8 px desde el borde superior del área de dibujo activo y 4 px desde el izquierdo.

Paso 2

Cree otro círculo de 28 x 28 px (#DCEEFF), que colocaremos en el lado opuesto del área de dibujo activa, asegurándose de mantener los mismos espacios. Una vez que tenga ambas formas en su lugar, selecciónelas y únelas en un único objeto más grande utilizando el modo Unite Shape de Pathfinder.

Paso 3

Active el modo Previsualización de píxeles (Alt-Shift-Y) y ajuste la forma resultante seleccionando y quitando la mitad inferior y luego ajustando el punto de anclaje de centro superior a la Cuadrícula de píxeles.

Paso 4

Coge la herramienta Pluma (P) y dibuja la parte inferior del cuerpo del cuerpo, asegurándote de suavizar los puntos de anclaje laterales usando Convertir puntos de anclaje seleccionados para suavizar. Tómese su tiempo y ajuste la forma seleccionando y reposicionando algunos de los puntos finales de sus manijas como se ve en la imagen de referencia, apagando el modo Previsualización de píxeles (Alt-Control-Y) antes de pasar al siguiente paso una vez que haya terminado.

Paso 5

Termine el icono dando a la forma resultante un contorno de 8 px de grosor (# 629CF9) con una unión circular, asegurándose de seleccionar y agrupar (Control-G) los dos antes de pasar al siguiente.

Paso 6

Cree el ícono final usando una copia de la que acabamos de trabajar, que colocaremos en el último pizarrón y luego lo convertiremos en un botón antipático agregando la barra transversal diagonal con un trazo de 8 px de grosor (# 629CF9) con una tapa redonda. Una vez que haya terminado, seleccione y agrupe (Control-G) todas sus formas de composición antes de guardar el proyecto.

¡Gran trabajo! ¡Nuestro pequeño paquete de UI ha terminado!

Como siempre, espero que hayas disfrutado de este tutorial paso a paso y lo más importante, aprendiste algo nuevo y útil en el camino.