Diseño Gráfico: Crea iconos para la vuelta al cole

Cómo configurar un nuevo documento

Como hemos hecho con todos nuestros proyectos, empezaremos por configurar un nuevo documento (Archivo > Nuevo o Control + N), que ajustaremos utilizando los siguientes parámetros:

• Anchura: 800 px
  
• Altura: 600 px
  
• Unidades: Píxeles
  

Y en la pestaña Avanzado:

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

Vamos a crear los iconos utilizando un flujo de trabajo con píxeles perfectos. Por lo tanto, recomendamos encarecidamente que te tomes un momento para leer este tutorial a fondo, con el que cogerás soltura muy rápidamente.

Cómo configurar las capas

Cuando tengo mi documento nuevo, me gusta separar mis valores en un par de capas diferentes, ya que así puedo dibujar el contorno de mi proyecto centrándome en cada objeto por separado, lo que me ayudará a mantener el trazo de cada uno y su forma.

Así que abre el panel de capas y crea un total de cuatro capas que nombraremos de la siguiente manera:

• Capa 1 > cuadrícula de referencia
  
• Capa 2 > maleta
  
• Capa 3 > portátil
  
• Capa 4 > libros
  

La forma en la que vamos a utilizar estas capas en nuestro en nuestro flujo de trabajo es muy sencilla. Debemos bloquear todas, excepto aquella con la que vayamos a trabajar, así no moveremos o situaremos incorrectamente las formas por accidente. Luego, cuando hayamos terminado con el icono en cuestión, podemos bloquear sus capas y pasar al siguiente.

Cómo crear una cuadrícula de referencia

En cuanto hayamos separado las capas de nuestro proyecto, podemos empezar a crear las cuadrículas de referencia, que nos ayudarán a crear nuestros iconos, especialmente en relación a su consistencia y tamaño.

Paso 1

Utiliza el Rectángulo (M) para crear un cuadrado de 128x128 px, que colorearemos con el color #F15A24, y luego ponlo en el centro de la mesa de trabajo utilizando la opciones de Centrar verticalmente y Centrar del panel de Alineación.

Paso 2

Crea otro cuadrado más pequeño de 120x120 px, que será nuestra zona de dibujo activo; de este modo conseguimos un relleno de 4 px. Colorea la figura utilizando el blanco (#FFFFFF) y luego abre el grupo de cuadrados (Control + G) y crea dos copias más a los lados (Control + C > Control + F dos veces), separándolos a 40 px del original.

Cuando ya hayas creado y dispuesto la cuadrícula de referencia, puedes ver sus capas y pasar a la siguiente, donde empezaremos a trabajar en nuestro primer icono.

Cómo crear el icono de la maleta

Una vez en la siguiente capa (sería la segunda), empezaremos el proyecto creando nuestro primer icono, que será el elegante maletín del colegio.

Paso 1

Empieza creando el fondo circular utilizando un círculo de 120x120 px, que colorearemos utilizando el color #FFCF6E, y luego lo centraremos en la zona activa de dibujo, como se puede ver en la imagen de referencia.

Paso 2

Añade la línea del primer plano utilizando un trazo de 92 px de ancho y 4 px de grosor con remates redondeados, que colorearemos utilizando el color #2B3249, luego alinea el círculo más grande en el centro, poniéndolo a una distancia de 34 px del borde inferior.

Paso 3

Comienza a trabajar en la zona lateral del pequeño maletín creando un rectángulo de 10x42 px (#2B3249), el cual ajustaremos configurando el Radio de sus esquina izquierdas en 4 px dentro del panel Transformar de la Propiedades del Rectángulo. Cuando lo tengas, coloca la figura resultante a una distancia de 26 px del borde izquierdo de la zona de dibujo y a 42 px del borde superior.

Paso 4

Dale una línea de contorno mediante el método de trazado a la figura que acabamos de crear, de modo que crearemos una copia (Control + C), la cual pegaremos en frente (Control + F) y luego ajustaremos primero cambiando su color por el #2B3249, y luego dándole la vuelta al relleno con su trazado (Shift + X). Configura el Peso de la figura resultante en 4 px y las esquinas con juntas redondas, asegurándote de seleccionar y agrupar las dos juntas después de todo utilizando el comando Control + G.

Paso 5

Crea la sección frontal de la maleta utilizando un rectángulo redondeado de 52 x42 px (#FFFFFF), con un radio en las esquinas de 4 px y un grosor del contorno de 4 px (#2B3249), que agruparemos (Control + G) y luego colocaremos encima de la sección anteriror, a una distancia de 34 px del borde derecho de la zona activa de dibujo y a 40 px del superior.

Paso 6

Añade la solapa superior del maletín utilizando un rectángulo redondeado de 52x20 px (#FFFFFF) con un radio en sus esquinas de 4 px, que ajustaremos modificando los inferiores hasta los 8 px dentro del Panel Transformas en las Propiedades del Rectángulo. Dale un contorno de 4 px de grosor (#2B3249) a la figura resultante, agrupa (Control + G) y luego centra la alineación de ambas con el borde superior de la zona frontal.

Paso 7

Utiliza el Lápiz (P) y dibuja las dos líneas diagonales de los detalles, utilizando un trazo de 4 px de grosor con el color #2B3249. Tómate tu tiempo, y cuando hayas seleccionado ambas líneas y el área de la solapa agrúpalo todo junto utilizando el comando Control + G en tu teclado.

Paso 8

Añade el cierre de la zona frontal utilizando un rectángulo redondeado de 8x16 px con un radio en sus esquinas de 4 px y un trazo con un grosor de 4 px (#2B3249), que colocaremos en el centro del borde inferior de la solapa.

Paso 9

Añade los botones utilizando dos círculos de 4x4 px (#2B3249), que alinearemos con el borde inferior y superior de la figura dibujada previamente. Cuando tengas las figuras en su sitio, selecciona ambas junto con el cierre y agrúpalo todo junto (Control + G) antes de pasar al siguiente paso.

Paso 10

Crea las dos líneas de texto ficticio utilizando un rectángulo de 8 x 2 px (#2B3249) a una distancia en vertical de 2 px del otro que será un poco más grande, de 12x2 px (#2B3249). Agrúpalos (Control + G) y luego colócalos a una distancia de 4 px de la esquina inferior izquierda de la zona frontal. Cuando lo tengas, selecciona y agrupa todas las figuras que componen la zona frontal juntas utilizando las teclas de atajo Control + G.

Paso 11

Termina la maleta añadiendo el asa superior que crearemos utilizando un rectángulo de 16x6 px con un trazo de 4 px de grosor (#2B3249), y con un radio en sus esquinas superiores de 4 px. Coloca la figura resultante encima del maletín y después selecciona y agrupa todas las figuras juntas.

Paso 12

Comienza a trabajar en la pequeña calculadora creando el lateral con un rectángulo de 2x26 px (#2B3249) con un trazo de 4 px de grosor (#2B3249), que agruparemos y colocaremos en primer plano, a una distancia de 42 px del borde derecho del área activa de dibujo.

Paso 13

Añade la sección frontal del dispositivo utilizando un rectángulo de 18x26 px (#FFFFFF) con un contorno de 4 px de grosor (#2B3249), que agruparemos (Control + G) y luego colocaremos en el lado derecho de la figura creada previamente, a una distancia de 24 px del borde derecho del área activa de dibujo.

Paso 14

Crea la pequeña pantalla utilizando un rectángulo de 10x6 px (#2B3249) que alinearemos en el centro de la sección frontal más grande, colocándolo a una distancia de 2 px del borde superior.

Paso 15

Añade los pequeños detalles de la pantalla utilizando un cuadrado de 2x2 px (#FFFFFF) que colocaremos a una distancia de 2 px del su borde derecho, asegurándonos de que después seleccionamos y agrupamos las dos juntas (Control + G).

Paso 16

Crea los pequeños botones del dispositivo utilizando tres hileras con tres cuadrados de 2x2 px a una distancia en horizontal de 2 px entre ellas, y a 2 px de distancia de los bordes de la calculadora. Tómate tu tiempo, cuando lo tengas, selecciona y agrupa todos los botones juntos (Control + G), haciendo lo mismo con todos las secciones que componen la calculadora.

Además, ya que casi hemos terminado con este icono, selecciónalos junto con el grupo del primer plano y agrúpalo todo junto (Control - G).

Paso 17.

Añade los toque finales al fondo del icono creando un círculo de 36x36 px con un trazo de 4 px de grosor (#FFFFFF), seguido de uno más pequeño de 24x24 px (#FFFFFF), que agruparemos (Control + G) y luego colocaremos como en la image de referecia.

Paso 18

Termina el icono seleccionando ambos círculos y el fondo y luego envíalos detrás de los otros objetos haciendo clic en el botón derecho > Organizar > Enviar detrás. Cuando lo tengas, selecciona y agrupa (Control + G) todas las formas que componen el icono antes de pasar al siguiente.

Cómo crear un icono de portátil

Sumiendo que has terminado con éxito el primer icono, bloquea su capa y luego pasa a la siguiente (que sería la tercera), aquí nos centraremos en crear el pequeño portátil.

Paso 1

Tal y como hicimos con el icono anterior, empezamos creando el fondo utilizando un círculo de 120x120 px, que colorearemos con el color #FFCF6E y luego lo alinearemos con la segunda área activa de dibujo.

Paso 2

Añade la línea en primer plano utilizando un trazo de 92 px de ancho y 4 px de grosor con Extremos Redondeados, que colorearemos con el color #2B3249 y luego lo alinearemos en el centro del círculo grande, colocándolo a una distancia de 34 px del borde inferior.

Paso 3

Crea la sección frontal del cuerpo inferior del portátil utilizando un rectángulo de 52x6 px (#FFFFFF), del que ajustaremos el Radio de las esquinas derechas a 3 px dentro del panel Transformar en las Propiedades del Rectángulo. Dale a la figura resultante un contorno de 4 px de grosor (#2B3249), agrupa (Control + G) y luego coloca ambas en primer plano, a una distancia de 20 px del borde derecho del área activa de trabajo.

Paso 4

Añade la sección lateral del objeto utilizando un rectángulo redondeado de 28x6 px (#2B3249) con un Radio en las Esquinas de 3 px y un contorno de 4 px de grosor (#2B3249), que agruparemos (Control + G) y colocaremos en primer plano, a una distancia de 20 px del borde izquierdo del área activa de trabajo.

Paso 5

Crea los pequeños puertos USB utilizando rectángulos redondeados de 4x2 px (#FFFFFF) con un Radio en las Esquinas de 1 px, que colocaremos con una separación entre ellos de 2 px. Luego los agruparemos (Control + G) y los pondremos en la sección lateral, a una distancia de 8 px del borde izquierdo.

Paso 6

Añade el puerto de audio utilizando un círculo de 2x2 px (#FFFFFF) que colocaremos a una distancia de 4 px del lado derecho de la figura creada previamente. Tómate tu tiempo y cuando lo tengas, selecciona y agrupa (Control + G) todas las figuras que componen esta sección antes de pasar al siguiente paso.

Paso 7

Muévete unos pocos píxeles hacia arriba y empieza a trabajar en el cuerpo superior del dispositivo creando la sección lateral con un rectángulo de 8x42 px (#2B3249), del que ajustaremos el Radio de sus esquinas izquierdas en 4 px. Dale a la figura resultante un contorno de 4 px de grosor (#2B3249), agrupándolas (Control + G) y colocando ambas encima del cuerpo inferior, asegurándote de que lo alineas con su borde izquierdo.

Paso 8

Añade la sección frontal utilizando un rectángulo redondeado de 56x42 px con un Radio en sus Esquinas de 4 px y un contorno de 4 px (#2B3249), que colocaremos encima del cuerpo inferior del dispositivo, a una distancia de 38 px del borde derecho del área activa de dibujo.

Paso 9

Crea la pantalla en sí utilizando un rectángulo de 44x30 px, el cual colorearemos utilizando el color #2B3249 y luego alinearemos en el centro de las figuras que acabamos de crear.

Paso 10

Tómate un momento y añade las columnas de texto utilizando dos grupos de cinco rectángulos de 16x2 px (#FFFFFF) apilados verticalmente con una distancia de 2 px entre ellos. Además, añadiremos un rectángulo más pequeño de 12x2 px (#FFFFFF), colocándolos como aparece en la imagen de referencia.

Paso 11

Crea la webcam utilizando un círculo de 2x2 px que colorearemos utilizando el color #2B3249, luego lo alinearemos en el centro de del embellecedor de la sección superior. Cuando lo tengas, selecciona y agrupa (Control + G) todas las figuras de esta sección juntas, haciendo después lo mismo con el portátil al completo.

Paso12

Añade los toques finales al fondo del icono creando un círculo de 24x24 px con un trazo de 4 px de grosor (#FFFFFF) seguido de otro un poco más grande, de 36x6 px (#FFFFFF), que colocaremos como aparece en la imagen de referencia.

Paso 13

Termina el icono seleccionando los dos círculos y el fondo y enviándolos detrás de todas las figuras haciendo clic en el botón derecho > Organizar > Enviar detrás. Cuando lo tengas asegúrate de seleccionar y agrupar (Control + G) todas las figuras juntas antes de pasar al tercer y último icono.

Cómo crear un icono de libros

Ahora vamos a por nuestro tercer y último icono, así que sin malgastar más el tiempo, asegúrate de estás en la capa correcta (sería la cuarta) y ¡terminemos esto!

Step 1

Crea el fondo utilizando un círculo de 120x120 px, que colorearemos con el color #FFCF6E y luego lo alinearemos en centro de la segunda área activa de dibujo.  

Paso 2

Tal y como hicimos en el icono anterior, añade la línea en primer plano utilizando un trazo de 92 px de ancho y 4 px de grosor con Extremos Redondeados, que colorearemos con el color #2B3249 y luego lo alinearemos en el centro del círculo grande, colocándolo a una distancia de 34 px del borde inferior.

Paso 3

Crea la sección frontal del libro de pie utilizando un rectángulo de 34x48 px (#FFFFFF) con un contorno de 4 px de grosor (#2B3249), que agruparemos (Control + G) y luego colocaremos encima de la línea en primer plano, a una distancia de 28 px del borde derecho del área activa de trabajo.

Paso 4

Añade la sección interior de la portada utilizando un rectángulo de 18x32 px (#2B3249) que alinearemos con el centro de las figuras creadas previamente.

Paso 5

Crea la línea del marco interior utilizando un rectángulo de 24x38 px con un trazo de 2 px de grosor (#2B3249), el cual alinearemos con los rectángulos más grandes de la sección frontal.

Paso 6

Añade las líneas de texto ficticias utilizando dos rectángulos de 10x2 px (#FFFFFF) apilados verticalmente con una distancia de 2 px entre ellos, luego lo agruparemos (Control + G) y lo alinearemos en el centro de la sección interior de la portada, a una distancia de 6 px del borde superior.

Paso 7

Crea la línea de texto inferior utilizando un rectángulo de 4x2 px (#FFFFFF) que colocaremos en la esquina inferior derecha de la sección interior, asegurándonos de dejar un hueco de 4 px a su alrededor. Cuando lo tengas, selecciona y agrupa todas las figuras que componen la sección frontal utilizando el comando Control + G de tu teclado.

Paso 8

Añade la parte lateral del libro utilizando un rectángulo de 8x48 px (#2B3249) con un contorno de 4 px de grosor (#2B3249), el cual agruparemos (Control + G) y colocaremos sobre el lado izquierdo de la sección frontal.

Paso 9

Crea las líneas de texto inferiores de la parte lateral utilizando dos rectángulos de 2x4 px (#FFFFFF), apilados verticalmente con una distancia de 2 px entre ellos, los cuales agruparemos (Control + G) y luego colocaremos a una distancia de 6 px del borde inferior.

Paso 10

Añade la línea de texto más larga utilizando un rectángulo de 2x26 px (#FFFFFF), el cual colocaremos a una distancia de 4 px de las figuras creadas anteriormente. Cuando lo tengas, selecciona y agrupa todas las figuras que componen la parte lateral utilizando el comando Control + G en tu teclado.

Paso 11

Crea el cuerpo del pequeño marca páginas utilizando un cuadrado de 8x8 px, el cual colorearemos con el color #2B3249 y luego colocaremos encima del lado derecho de la sección frontal, a una distancia de 8 px de su borde superior.

Paso 12

Ajusta la forma del marca páginas añadiendo un punto de ancla nuevo en el centro de su borde derecho utilizando la Herramienta Añadir Punto de Ancla (+), que seleccionaremos utilizando la Herramienta Selección Directa (A) y luego empujando hacia adentro una distancia de 4 px utilizando la Herramienta Mover (botón derecho > Transformar > Mover > Horizontal > -4 px). Cuando lo tengas, selecciona y agrupa (Control + G) todas las secciones que componen el libro antes de pasara al siguiente paso.

Paso 13

Empieza a trabajar en el libro de abajo horizontal creando su sección frontal utilizando un rectángulo de 18x16 px (#FFFFFF) con un contorno de 4 px de grosor (#2B3249), el cual agruparemos (Control + G) y luego colocaremos encima del lado izquierdo del libro de pie, como aparece en la imagen de referencia.

Paso 14

Añade un detalle circula a la sección frontal utilizando una elipse de 24x8 px (#2B3249), la cual ajustaremos seleccionando su punto de ancla derecho utilizando la Herramienta Selección Directa (A) y eliminándolo pulsando Suprimir. Cierra el trazado de la figura resultante utilizando Control + J en tu teclado, alineándolo en el centro del borde derecho del rectángulo inferior más grande, asegurándote de que seleccionas y agrupas todo junto utilizando el comando Control - G en tu teclado.

Paso 15

Crea la sección lateral del libro utilizando un rectángulo de 6x16 px (#2B3249) con un contorno de 4 px de grosor (#2B3249), el cual agruparemos (Control + G) y luego colocaremos en en lado izquierdo de la sección creada anteriormente. Cuando lo tengas, no olvides seleccionar y agrupar (Control + G) todas las figuras que componen el libro antes de pasar al siguiente paso.

Paso 16

Empieza a trabaja en el libro horizontal de encima creando su sección frontal con un rectángulo de 10x16 px (#FFFFFF) con un contorno de 4 px de grosor (#2B3249), el cual agruparemos (Control + G) y colocaremos como aparece en la imagen de referencia.

Paso 17

Añade un detalle rectangular utilizando un cuadrado de 4x4 px, el cual colorearemos con el color #2B3249 y luego lo alinearemos en al centro del borde derecho de la sección frontal, asegurándonos de que seleccionamos y agrupamos todo junto después con el comando Control + G del teclado.

Paso 18

Crea la sección lateral del libro utilizando un rectángulo de 6x16 px (#2B3249) con un contorno de 4 px de grosor (#2B3249), el cual agruparemos (Control + G) y luego colocaremos sobre el lado izquierdo de la figura creada anteriormente. Y que casi hemos terminado con los libros, no olvides seleccionar y agrupar (Control + G) juntas todas las secciones que componen el libro y haciendo lo mismo luego con las otras tres.

Paso 19

Como ya hicimos con los otros dos iconos, tómate un momento para añadir los toques finales al fondo creando un círculo de 24x24 px con un trazo de 4 px de grosor (#FFFFFF), seguido de otro un poco más grande de 36x36 px (#FFFFFF) que colocaremos como aparece en la imagen de referencia.

Paso 20

Termina el icono y por consiguiente, el proyecto en sí, seleccionando ambos círculos y el fondo y enviándolos detrás de las otras figuras haciendo clic en el botón derecho > Organizar > Enviar detrás. Cuando lo tengas, asegúrate de seleccionar y agrupar (Control + G) todas las figuras juntas antes de apretar el botón de guardar.

¡Salvado por la campana!

Ahí lo tenéis colegas, un tutorial rápido paso por paso sobre cómo crear tus propios iconos de vuelta al colegio, utilizando nada más que formas geométricas básicas y herramientas con las que probablemente ya trabajas a diario. Como siempre, espero que te hayas divertido creando estos objetos, y lo más importante, que hayas aprendido algo nuevo y útil durante el proceso.