Cómo configurar un documento nuevo


Como hacemos con todos los proyectos, empezaremos por crear un documento nuevo yendo a Archivo > Nuevo (o usando el atajo de teclado Control + N), al cual le asignaremos los siguientes ajustes:

• Número de mesas de trabajo: 8
  
• Espaciado: 32 px
  
• Columnas: 4
  
• Anchura: 64 px
  
• Altura: 64 px
  
• Unidades: Píxeles
  

Y desde la pestaña Avanzado:

• Modo de color: RGB
  
• Efectos de rasterizado: Pantalla (72 ppp)
  

Antes de ponernos con los iconos, quería comentarte que todos y cada uno de ellos los vamos a crear al píxel, así que te recomiendo que dediques un poco de tiempo a leer este tutorial para estar preparado.

Cómo configurar las capas


En cuanto hayas terminado de configurar el documento nuevo, tendrás que estructurarlo para que podamos separar los iconos de las cuadrículas de referencia y, así, optimizar el flujo de trabajo. Para ello, abre el panel Capas y crea un total de dos capas, a las cuales llamaremos de la siguiente manera:

• Capa 1 > Cuadrículas de referencia
  
• Capa 2 > Iconos

Cómo crear las cuadrículas de referencia


Cuando hayas terminado de organizar el documento por capas, podrás añadir las pequeñas cuadrículas de referencia, que definirán el espacio asignado para cada icono y nos ayudarán a mantener la consistencia.
Paso 1

Activa la herramienta Rectángulo (M) y úsala para crear un cuadrado de 64x64 px con el color #F15A24. Colócalo en el centro de la primera mesa de trabajo usando las opciones de Centrar y Centrar verticalmente del panel Alinear.

Paso 2

Crea otro cuadrado más pequeño, de 56x56 px (#FFFFFF), que nos servirá de área activa de dibujo y nos proporcionará unos márgenes de seguridad de 4 px de grosor. Cuando termines, selecciona y agrupa ambas formas usando el atajo de teclado Control + G.

Paso 3

Añade las cuadrículas de referencia que faltan usando copias (Control + C) de la que acabamos de crear y pegándolas (Control + F) en las mesas de trabajo vacías que nos quedan. Cuando termines, bloquea esta capa antes de ir al siguiente paso.

Cómo crear el icono de la mochila


En cuanto hayas terminado de crear las cuadrículas de referencia, pasa a la siguiente capa (que sería la superior), en la que nos centraremos en crear el primer icono.
Paso 1

Colócate en la primera mesa de trabajo y crea las correas de la mochila usando dos rectángulos de 4x8 px. Asígnales el color #967065 y sepáralos a una distancia horizontal de 8 px. Selecciona ambos rectángulos y agrúpalos usando el atajo de teclado Control + G. Luego, céntralos al borde inferior del área activa de dibujo.

Paso 2

Crea la forma principal de la parte inferior usando un rectángulo de 32x8 px. Asígnale el color #967065 y colócalo encima de las formas que acabamos de agrupar.

Paso 3

Añade la sección central de la mochila usando un rectángulo de 32x16 px. Asígnale el color #EFAC4B y colócalo encima del rectángulo anterior..

Paso 4

Añade unas líneas horizontales de detalle usando dos rectángulos de 32x1 px (#967065) a una distancia vertical de 1 px uno del otro. Agrúpalos (Control + G) y colócalos tal como se ve en la imagen de referencia.

Paso 5

Crea los bolsillos laterales usando dos rectángulos de 4x12 px (#967065), sobre cada uno de los cuales deberás añadir la cremallera usando un rectángulo de 1x4 px (#FFF4D7). Agrupa individualmente cada bolsillo (Control + G) y colócalos por encima de la parte inferior de la mochila.

Paso 6

Crea la parte superior usando un rectángulo de 36x20 px (#FFCB64), el cual ajustaremos cambiando el radio de vértice de los vértices inferiores a 2 px desde las propiedades del rectángulo del panel Transformar. Cuando termines, coloca la forma resultante encima de la sección central de la mochila.

Paso 7

Añade una sombra dura usando un rectángulo de 32x2 px que tenga el color #967065. Colócalo debajo de la parte superior que acabamos de crear.

Paso 8

Crea las correas frontales usando dos grupos (Control + G) compuestos de un rectángulo de 6x2 px (#FFF4D7) sobre otro más alto de 4x12 px (#967065). Separa ambos grupos a una distancia horizontal de 8 px. Después, agrupa ambos (Control + G) y colócalos sobre la parte superior tal como se ve en la imagen de referencia.

Paso 9

Añade una pequeña etiqueta usando un rectángulo de 8x6 px (#967065), sobre el cual añadiremos uno más pequeño, de 4x2 px (#FFF4D7). Agrupa ambos (Control + G) y céntralos a la parte superior de la mochila, a una distancia de 4 px del borde superior.

Paso 10

Termina con el icono añadiéndole el asa. Para ello, usa un rectángulo de 8x4 px (#967065), al cual deberás recortarle una superficie rectangular de 4x2 px usando el modo de forma Menos frente del Buscatrazos. Centra la forma resultante a la parte superior. Luego, selecciona y agrupa todas las secciones que componen la mochila con el atajo de teclado Control + G.

Cómo crear el icono del cuaderno


En cuanto hayas terminado de trabajar en el primer icono, pasa a la siguiente mesa de trabajo, en la que crearemos el cuaderno.
Paso 1

Empieza a crear la sección lateral usando un rectángulo de 4x48 px. Asígnale el color #967065 y colócalo tal como se ve en la imagen de referencia.

Paso 2

Añade el cuerpo principal con un rectángulo de 28x48 px (#FF9255). Cámbiale el radio de los vértices derechos a 2 px desde las propiedades del rectángulo del panel Transformar. Coloca la forma resultante a la derecha de la forma anterior.

Paso 3

Crea la etiqueta usando un rectángulo de 16x8 px. Asígnale el color #FFF4D7 y céntralo al cuerpo principal del cuaderno, a una distancia de 12 px del borde superior.

Paso 4

Con la herramienta Pluma (P), dibuja la correa diagonal (#967065) siguiendo la imagen de referencia como guía. Cuando termines, selecciona y agrupa (Control + G) todas las formas que componen el cuaderno antes de ir al siguiente paso.

Paso 5

Crea la forma principal del marcapáginas usando un cuadrado de 8x8 px (#FFCB64). Alinéalo al borde inferior del área activa de dibujo y colócalo a una distancia de solo 2 px del borde izquierdo del cuerpo principal del cuaderno.

Paso 6

Ajusta el cuadrado que acabamos de crear añadiendo un nuevo punto de ancla en el centro del borde inferior con la herramienta Añadir punto de ancla (+). Selecciónalo con la herramienta Selección directa (A) y empújalo hacia el interior 2 px usando las teclas de dirección.

Paso 7

Termina con el icono añadiendo la sombra dura al marcapáginas. Para ello, usa un rectángulo de 8x2 px (#967065) y céntralo al borde superior del marcapáginas. Selecciona y agrupa ambas formas usando el atajo de teclado Control + G. Después, haz lo mismo con todo el cuaderno.

Cómo crear el icono de las taquillas


Colócate sobre la siguiente mesa de trabajo y acerca el zoom para poder trabajar en el siguiente icono.
Paso 1

Crea la forma principal de la taquilla de la izquierda usando un rectángulo de 14x56 px. Asígnale el color #FFCB64 y colócalo a una distancia de 13 px del borde izquierdo del área activa de dibujo.

Paso 2

Añade la rejilla superior usando cuatro rectángulos de 6x1 px (#967065) apilados unos encima de otros a una distancia de 1 px entre ellos. Agrúpalos (Control + G) y céntralos al cuerpo principal, a una distancia de 8 px del borde superior.

Paso 3

Crea la rejilla inferior usando dos rectángulos de 6x1 px (#967065), uno encima del otro, a una distancia de 1 px entre ellos. Agrúpalos (Control + G) y colócalos a una distancia de 4 px del borde inferior del cuerpo principal.

Paso 4

Añade el tirador usando un rectángulo de 2x8 px (#967065) y colócalo tal como se ve en la imagen de referencia. Cuando termines, selecciona y agrupa (Control + G) todas las formas que componen esta taquilla antes de ir al siguiente paso.

Paso 5

Crea la sombra dura usando un rectángulo de 2x56 px. Asígnale el color #967065 y colócalo en el lado derecho de la taquilla en la que acabamos de trabajar.

Paso 6

Termina con el icono añadiendo la segunda taquilla. Para ello, usa una copia de la que ya tenemos (Control + C > Control + F) y colócala justo al lado. Cambia el color del cuerpo principal a #EFAC4B. Cuando termines, selecciona y agrupa todas las formas que componen el icono usando el atajo de teclado Control + G.
Cómo crear el icono de la calculadora


Ya solo nos queda un icono más en la primera fila, así que ve a la siguiente mesa de trabajo y ¡adelante!
Paso 1

Crea la forma principal de la parte superior de la calculadora usando un rectángulo de 36x16 px. Asígnale el color #FF9255 y céntralo al borde superior del área activa de dibujo.

Paso 2

Añade la pequeña pantalla usando un rectángulo de 28x8 px. Asígnale el color #967065 y colócalo en el centro de la forma anterior. Asegúrate de seleccionar y agrupar ambas formas usando el atajo de teclado Control + G.

Paso 3

Crea la forma principal de la parte inferior usando un rectángulo de 36x40 px. Asígnale el color #967065 y céntralo al borde inferior del área activa de dibujo.

Paso 4

Empieza a añadir los botones creando dos filas de cuatro rectángulos de 4x2 px (#FF9255), colocados a una distancia horizontal de 4 px entre ellos. Agrupa las filas individualmente (Control + G) y colócalos tal como se ve en la imagen de referencia.

Paso 5

Añade más botones usando tres filas de cuatro cuadrados de 4x4 px (#FFF4D7), colocados a una distancia horizontal de 4 px entre ellos. Agrupa las filas individualmente (Control + G) y colócalas unas encima de otras a una distancia de 4 px.

Paso 6

Termina con el icono eliminando el último botón de la fila inferior y luego ajustando la altura del que está encima para que llegue hasta donde estaba el botón eliminado. Cambia el color de la forma resultante a #FF9255. Luego, selecciona y agrupa (Control + G) todas las formas que componen la sección actual. Después, haz lo mismo con toda la calculadora.