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.

Advertisement

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 untrazo 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.