Diseño Gráfico: Crea un set de iconos sobre higiene

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: 1
• Anchura: 800 px
• Altura: 600 px
• Unidades: Píxeles

En la pestaña Avanzado:

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

Crearemos los iconos al píxel, así que te recomiendo antes echar un vistazo a este tutorial para estar bien preparado.

Cómo configurar las capas

Una vez que hayas creado el documento, es buena idea separar los iconos por capas, ya que así podrás optimizar tu flujo de trabajo centrándote en un elemento cada vez, lo que te permite ir haciendo un seguimiento de todas y cada una de las formas en todo momento.

Para ello, abre el panel Capas y crea un total de cinco capas, que llamaremos de la siguiente manera:

• Capa 1 → Cuadrículas de referencia
• Capa 2 → Perfume
• Capa 3 → Papel higiénico
• Capa 4 → Jabón
• Capa 5 → Toalla

La manera en que integraremos estas capas en nuestro flujo de trabajo será sencilla. Bloquearemos todas las capas excepto aquella en la que vayamos a trabajar. De esta manera, no moveremos algunas de las formas por accidente. Luego, cuando terminemos con el icono en cuestión, podemos bloquear su capa y pasar a la siguiente.

Cómo crear las cuadrículas de referencia

En cuanto hayas organizado el documento por capas, podrás empezar a crear las cuadrículas de referencia, que nos ayudarán a crear los iconos centrándonos en la consistencia y el tamaño.

Paso 1

Activa la herramienta Rectángulo (M) y crea un cuadrado de 128×128 px. Asígnale el color #F15A24 y colócalo en el centro de la mesa de trabajo usando las opciones de Centrar y Centrar verticalmente del panel Alinear.

Paso 2

Crea otro cuadrado de 120×120 px, que servirá de área activa de dibujo, lo que nos dará unos márgenes de seguridad de 4 px. Colorea la forma usando el blanco (#FFFFFF). Luego, agrupa ambos cuadrados (Control + G) y crea tres copias (Control + C → Control + F tres veces), colocadas a una distancia de 40 px del original.

Cuando hayas terminado de crear las cuadrículas de referencia, bloquea esa capa y pasa a la siguiente, en la cual empezaremos a trabajar en el primer icono.

Cómo crear el icono del perfume

Asumiendo que ya estás en la siguiente capa (que sería la segunda), empecemos con el proyecto creando el primer icono, que será el del frasco de perfume que imita el de Gucci.

Paso 1

Comienza creando el relleno de la forma del pulverizador usando un cuadrado de 16×16 px. Asígnale el color #F2DFCE y céntralo al área activa de dibujo. Colócalo a una distancia de 4 px del borde inferior.

Paso 2

Dale a la forma resultante un contorno creándole una copia (Control + C), que habrá que pegar delante (Control + F). Asígnale el color #2B3249 e intercambia el trazo por el relleno (Mayús + X). Cambia el grosor del trazo de la forma resultante a 8 px y asegúrate de elegir la opción de extremos redondeados.

Paso 3

Añade la forma del tapón con un rectángulo redondeado de 6×4 px (#2B3249) que tenga un radio de vértice de 2 px. Céntralo con respecto al borde derecho del cuadrado. Cuando termines, selecciona y agrupa las tres formas usando el atajo de teclado Control + G.

Paso 4

Para crear la base del pulverizador, empieza por el lateral. Para ello, dibuja un rectángulo de 12×10 px(#C6A187) y aplícale un contorno de 8 px de grosor (#2B3249). Agrupa (Control + G) y coloca ambas formas debajo del tapón a una distancia de 38 px del borde izquierdo del área activa de dibujo.

Paso 5

Crea la sección frontal con un rectángulo ligeramente más ancho, 24×10 px, que tenga un contorno de 8 px de grosor. Agrupa (Control + G) y coloca ambas formas a la derecha de las formas creadas anteriormente para que los contornos queden superpuestos entre ellos. Cuando termines, selecciona y agrupa (Control + G) las dos secciones antes de ir al siguiente paso.

Paso 6

Empieza a trabajar en la varilla creando un rectángulo de 12×6 px (#2B3249), debajo del cual añadiremos otro más pequeño de 4×6 px (#2B3249). Agrupa las dos formas con el atajo de teclado Control + G y colócalas debajo del pulverizador. Cuando termines, selecciona y agrupa (Control + G) las dos secciones antes de ir al siguiente paso.

Paso 7

Empieza a crear la sección lateral del frasco usando un rectángulo de 56×42 px (#DD886B). Ajústalo cambiándole el radio de los vértices inferiores a 8 px desde las propiedades del rectángulo del panel Transformar. Cuando termines, coloca la forma resultante debajo de la varilla a una distancia de 24 px del borde izquierdo del área activa de dibujo.

Paso 8

Crea un contorno usando un rectángulo redondeado de 56×54 px con un radio de vértice de 8 px y un contorno de 8 px de grosor (#2B3249), que centraremos con respecto al borde inferior del relleno de la forma.

Paso 9

Añade la sección del contorno al relleno de la forma actual usando una línea de 56 px de ancho y 8 px de grosor (#2B3249), que centraremos al borde superior. Cuando termines, selecciona y agrupa (Control + G) las tres formas antes de ir al siguiente paso.

Paso 10

Crea la sección frontal usando una copia (Control + C) de la que acabamos de terminar, que tendrás que pegar delante (Control + F). Colócala hacia la derecha con el comando Mover (clic derecho → Transformar → Mover → Horizontal → 16 px).

Paso 11

Selecciona la forma del relleno de la sección resultante con la herramienta Selección Directa (A) y luego aplícale el color #F4AB8C.

Paso 12

Crea el pequeño logo con dos círculos de 20×20 px (#2B3249), que agruparemos (Control + G) y luego centraremos con respecto a la sección frontal de la forma del relleno, asegurándonos de colocarlos a una distancia de 6 px del borde inferior. Cuando termines, selecciona y agrupa (Control + G) las partes principales de la forma, y el icono al completo después.

Paso 13

Ya casi hemos terminado con el perfume. Selecciona la herramienta Elipse (L) y crea dos anillos. Para el primero, dibuja un círculo de 10×10 px (#2B3249), que colocaremos en la mitad superior derecha del área activa de trabajo. Luego, crea otro ligeramente más grande de 16×16 px (#2B3249) en el lado contrario.

Paso 14

Para terminar el icono añade una pequeña sombra circular con un círculo de 88×12 px (#DCDFE5), que centraremos con respecto al borde inferior del área activa de trabajo. Cuando termines, selecciona y agrupa (Control + G) todos los elementos del icono antes de empezar con el siguiente.

Cómo crear el icono del papel higiénico

Asumiendo que ya has terminado de trabajar en el primer icono, pasa a la siguiente capa (que sería la tercera), en la que crearemos el segundo icono, el papel higiénico.

Paso 1

Para crear la parte trasera del rollo, dibuja un rectángulo de 52×56 px (#C6A187) que tenga un contorno de 8 px de grosor (#2B3249). Agrupa ambas formas (Control + G) y colócalas a una distancia de 18 px del borde izquierdo del área activa de trabajo y a 24 px del borde superior.

Paso 2

Para crear la parte delantera del rollo, dibuja un rectángulo de 52×48 px (#F2DFCE) y colócalo a una distancia de 4 px del borde superior del área activa de trabajo y a 34 px del borde derecho.

Paso 3

Para crear la sección curva, dibuja una elipse de 24×48 px (#F2DFCE), que colocaremos a la derecha de los rectángulos para que se superponga al lado izquierdo. Una vez que hayas colocado la forma en su sitio, selecciona ambas, ve al panel Buscatrazos y elige la opción Unificar para convertirlas en un solo objeto.

Paso 4

Dale a la forma resultante un contorno de 8 px de grosor (#2B3249) y uniones redondeadas. Asegúrate de agrupar ambas formas después usando el atajo de teclado Control + G.

Paso 5

Crea la sección lateral del rollo con una elipse de 24×48 px (#DBBCA5) que tenga un contorno de 8 px de grosor (#2B3249). Después, crea una más pequeña de 6×12 px (#2B3249). Selecciona y agrupa (Control + G) las tres formas, y colócalas en el lado izquierdo de la sección trasera.

Paso 6

Para terminar el rollo, añade unas líneas a la sección frontal usando cuatro rectángulos de 6×4 px (#2B3249), colocados horizontalmente a 4 px de distancia entre ellos. Agrúpalos (Control + G) y céntralos con respecto a la sección visible de la forma de relleno subyacente. Cuando termines, selecciona y agrupa (Control + G) todas las secciones antes de ir al siguiente paso.

Paso 7

A continuación, vamos a crear una estrella pequeña. Para ello, dibuja cuatro círculos de 8×8 px (#2B3249), separados vertical y horizontalmente a una distancia de 2 px entre ellos para que queden como un cuadrado (1). Una vez que los tengas colocados correctamente, selecciona los puntos de ancla exteriores con la herramienta Selección directa (A) y elimínalos pulsando Suprimir (2). Selecciona y une los trazos para convertirlo todo en una sola forma haciendo clic derecho → Unir (3). Utiliza cuatro círculos de 2×2 px(#2B3249) para hacer los bordes redondeados. Colócalos sobre la forma más grande y unifícalos con la opción Unificar del panel Buscatrazos (4).

Paso 8

Coloca la estrella que acabamos de crear a la derecha del rollo de papel, tal como se ve en la imagen de referencia.

Paso 9

Para terminar el icono, añade una pequeña sombra usando una elipse de 88×12 px (#DCDFE5). Selecciona y agrupa (Control + G) todas las partes del icono. 

Cómo crear el icono del jabón

Asumiendo que ya has terminado de trabajar en el segundo icono, pasa a la siguiente capa (que sería la cuarta), en la que crearemos el tercer icono, la pastilla de jabón.

Paso 1

Empieza creando la sección lateral del jabón usando un rectángulo redondeado de 56×80 px (#DD886B) que tenga un radio de vértice de 8 px y un contorno de 8 px de grosor (#2B3249). Agrupa (Control + G) y centra las formas con respecto al borde superior del área activa de trabajo, colocándolas a una distancia de 20 px del borde izquierdo.

Paso 2

Crea la sección frontal usando una copia (Control + C) de la que acabamos de terminar. Pégala delante (Control + F) y colócala hacia la derecha con el comando Mover (clic derecho → Transformar → Mover → Horizontal → 16 px).

Paso 3

Añade un rectángulo de 36×60 px que tenga un contorno de 4 px de grosor (#2B3249) para crear la etiqueta frontal. Centra estas formas con respecto al elemento que creamos en el paso anterior.

Paso 4

Crea una gota de agua usando un círculo de 16×16 px (#2B3249), que centraremos con respecto a la inserción rectangular colocándolo a una distancia de 16 px del borde inferior.

Paso 5

Ajusta la forma que acabamos de crear seleccionando los puntos de ancla superiores con la herramienta Selección directa (A) y desplazándolos hacia fuera a una distancia de 8 px con el comando Mover (clic derecho → Transformar → Mover → Vertical → -8 px).

Paso 6

Una vez que hayas hecho esto, con la herramienta Punto de ancla (Mayús + C), modifica el punto de ancla superior de la forma resultante, de manera que esta quede puntiaguda. Después, ajusta la posición de los manejadores de los laterales. Cuando termines, selecciona y agrupa (Control + G) las formas que componen la sección frontal. Haz lo mismo con el icono al completo después.

Nota: para este paso, te recomiendo encarecidamente activar el modo Previsualización de píxeles (Alt + Ctrl + Y), ya que te permitirá hacer los ajustes necesarios de manera más precisa.

Paso 7

Ya casi hemos terminado con el icono del jabón. Selecciona la herramienta Elipse (L) y crea dos anillos. Para el primero, dibuja un círculo de 10×10 px (#2B3249). Para el segundo, dibuja otro ligeramente más grande de 16×16 px (#2B3249). Colócalos tal como se ve en la imagen de referencia.

Paso 8

Para terminar el icono, añade una pequeña sombra con una elipse de 88×12 px (#DCDFE5). Selecciona y agrupa (Control + G) todas las partes del icono, antes de pasar al cuarto y último icono.

Cómo crear el icono de la toalla

Ahora, vamos a por nuestro cuarto y último icono. Asumiendo que ya te has colocado sobre la siguiente capa, prepárate para terminar con el proyecto.

Paso 1

Para crear la parte central de la toalla, dibuja un rectángulo de 64×80 px (#F2DFCE) y colócalo a una distancia de 4 px del borde superior del área activa de trabajo y a 22 px del borde derecho.

Paso 2

Ajusta la forma que acabamos de crear cambiando el radio de los vértices superiores a 12 px desde las propiedades del rectángulo en el panel Transformar.

Paso 3

Sigue ajustando la forma. Para ello, recórtale en su lado izquierdo una superficie equivalente a un rectángulo redondeado de 24×92 px (en rojo) que tenga un radio de vértice de 12 px usando la opción Menos frente delpanel Buscatrazos.

Paso 4

Dale a la forma resultante un contorno de 8 px de grosor (#2B3249). Selecciona y agrupa ambas formas usando el atajo de teclado Control + G.

Paso 5

Añade detalles a la sección frontal de la toalla. Para ello, dibuja un rectángulo de 52×4 px (#2B3249), que tendrás que colocar a una distancia de 4 px del borde inferior.

Paso 6

Crea los detalles de las líneas verticales usando cinco rectángulos de 4×8 px (#2B3249), que colocaremos a una distancia horizontal de 4 px entre ellos. Agrúpalos (Control + G) y luego céntralos a la parte inferior de la forma de relleno. Cuando termines, selecciona y agrupa (Control + G) todas las secciones antes de ir al siguiente paso.

Paso 7

Empieza a crear la sección lateral de la toalla usando un rectángulo de 24×56 px (#C6A187). Ajústalo cambiándole el radio de los vértices superiores a 12 px desde las propiedades del rectángulo del panel Transformar. Dale a la forma resultante un contorno de 8 px de grosor (#2B3249). Agrúpalas (Control + G) y colócalas en el lado izquierdo de la sección mayor.

Paso 8

Añade el detalle de la línea horizonta. Para ello, dibuja un rectángulo de 24×4 px (#2B3249) que colocaremos a una distancia de 4 px del borde inferior. Cuando termines, selecciona y agrupa (Control + G) las partes principales de la forma y el icono al completo después.

Paso 9

Haz una copia (Control + C) de la estrella que creamos para el icono anterior y pégala (Control + V) a la capa actual, colocándola como vemos en la imagen de referencia.

Paso 10

Para terminar el icono, y el proyecto en sí, añade una pequeña sombra con una elipse de 88×12 px (#DCDFE5). Selecciona y agrupa (Control + G) todas las partes del icono.

¡Se acabó!

Ya está, hasta aquí este rápido y sencillo tutorial sobre cómo crear tu propio pack de iconos de temática de la higiene. Como siempre, espero que te hayas divertido con el proyecto y hayas podido aprender algo nuevo y útil sobre la marcha.