Ilustración: Crea un pack de iconos de temática médica
Hola y bienvenido de nuevo a otro tutorial de creación de iconos, en el cual veremos el proceso de crear cuatro pequeños iconos usando solamente formas y herramientas básicas que seguramente ya conocerás de tu día a día. Dicho esto, ¡busca tu taza de café calentito y pongámonos manos a la obra!
Cómo configurar un documento nuevo
Como hacemos con todos nuestros proyectos, empecemos creando un documento nuevo (Archivo → Nuevo o Control + N), para el cual elegiremos los siguientes ajustes:
- Número de mesas de trabajo: 1
- Anchura: 800 píxeles
- Altura: 600 píxeles
- Unidades: Píxeles
Y en la pestaña de opciones avanzadas:
- Modo de color: RGB
- Efectos de rasterizado: Pantalla (72 ppp)
Cómo configurar las capas
Una vez tengo el documento nuevo, me gusta separar los elementos en varias capas. De esta manera, puedo optimizar mi flujo de trabajo centrándome en un elemento cada vez, lo que me permite ir haciendo un seguimiento de todas y cada una de las formas en todo momento.
Abre el panel Capas y crea un total de cinco capas, a las cuales llamaremos de la siguiente manera:
- Capa 1 → cuadrículas de referencia
- Capa 2 → goteo intravenoso
- Capa 3 → bote de pastillas
- Capa 4 → estetoscopio
- Capa 5 → tablilla
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 hayamos dividido el proyecto por capas, podremos empezar a crear las cuadrículas de referencia, que nos ayudarán a crear los iconos, centrándonos en el tamaño y la consistencia.
Paso 1
Activa la herramienta Rectángulo (M) y crea un cuadrado de 128×128 px, al cual le asignaremos el color #F15A24. Céntralo a la mesa de trabajo usando las opciones de Centrar y Centrar verticalmente del panel Alinear.
Paso 2
Crea otro cuadrado más pequeño, de 120×120 px, que servirá de área activa de dibujo, lo cual nos dará unos contornos de 4 px. Colorea la forma usando el blanco (#FFFFFF) y luego agrupa los cuadrados (Control + G). Crea tres copias más a un lado (Control + C → Control + F tres veces), y colócalas a una distancia de 40 px del original.
Cuando hayas terminado de crear y colocar la cuadrícula de referencia, bloquea la capa y pasa a la siguiente, donde empezaremos a trabajar en el primer icono.
Cómo crear el icono del goteo intravenoso
Asumiendo que ya estás en la siguiente capa (que sería la segunda), metámonos de lleno en el primer icono, que será el del goteo intravenoso.
Paso 1
Empieza creando la forma principal de la bolsa usando un rectángulo redondeado de 40×56 px, con un radio de vértice de 8 px. Coloréalo con el color #A7B4D1 y colócalo en el área activa de dibujo, a una distancia de 18 px del borde izquierdo y de 10 px del borde superior.
Paso 2
Ajusta la forma que hemos creado asignando un valor de 16 px al radio de sus vértices inferiores desde las propiedades del rectángulo del panel Transformar.
Paso 3
Crea un contorno a la forma resultante usando el método del trazo: crea una copia (Control + C), pégala en el mismo lugar (Control + F) y luego cámbiale el color al #2B3249 e intercámbiale el trazo y el relleno (Mayús + X). Asigna un grosor de trazo de 4 px y agrupa las dos formas después usando el atajo de teclado Control + G.
Paso 4
Crea la pequeña asa de la bolsa usando un cuadrado de 8×8 px con un grosor de 4 px (#2B3249). Cambia el radio de los vértices superiores a 4 px desde las propiedades del rectángulo del panel Transformar. Una vez termines, coloca la forma resultante sobre la bolsa, tal como ves en la siguiente imagen.
Paso 5
Añade un detalle en forma de línea horizontal usando un rectángulo redondeado de 16×4 px, con un radio de vértice de 2 px. Asigna el color #2B3249, centra la forma respecto de la bolsa y colócala a una distancia de 4 px del borde superior de esta.
Paso 6
Crea la etiqueta usando un rectángulo de 16×20 px (#EBEDEC) con un contorno cuyo grosor sea de 4 px(#2B3249). Agrupa (Control + G) y coloca la etiqueta debajo de la forma que hemos creado en el paso anterior, a una distancia de solo 4 px (6 px en el apartado de Distribuir espaciado del panel Alinear).
Paso 7
Añade algunas líneas de texto en la etiqueta usando un rectángulo de 4×2 px (#2B3249) y otro de 8×2 px(#2B3249), los cuales colocaremos uno encima del otro a una distancia de 2 px. Agrúpalos (Control + G) y posiciónalos a una distancia de 2 px del borde izquierdo de la etiqueta y de 4 px del borde superior. Cuando termines, selecciona las líneas de texto y la etiqueta y agrúpalas (Control + G).
Paso 8
Creemos ahora los indicadores de volumen usando cuatro líneas de 4 px de grosor (#2B3249) colocadas unas encima de otras a una distancia de 2 px entre ellas. Agrúpalas (Control + G) y posiciónalas en el lado derecho de la bolsa, a una distancia de 14 px del borde inferior.
Paso 9
Añade una pequeña textura a la bolsa usando nueve círculos de 2×2 px (#2B3249), los cuales debes colocar de la manera que ves en la siguiente imagen. Cuando hayas terminado, selecciona todos los círculos y agrúpalos (Control + G). Luego, agrupa toda la bolsa antes de ir al siguiente paso.
Paso 10
Crea la apertura de la bolsa creando un cuadrado de 8×8 px (#ED795A), con un contorno cuyo grosor sea de 4 px. Agrupa (Control + G) y posiciona la forma debajo de la bolsa.
Paso 11
Crea la ranura superior usando un rectángulo de 2×4 px (#2B3249). Céntralo al borde superior de la apertura de la bolsa.
Paso 12
Crea un rectángulo de 16×4 px, coloréalo con el color #2B3249 y posiciónalo sobre el contorno del borde inferior de la apertura de la bolsa.
Paso 13
Añade otro rectángulo más pequeño, de 8×4 px (#2B3249), debajo del que hemos creado en el paso anterior. Selecciona todas las partes de la apertura de la bolsa y agrúpalas (Control + G). Después, agrupa toda la bolsa.
Paso 14
Comienza a trabajar en conducto de la bolsa dibujando una línea con un grosor de 4 px (#2B3249) tal como se muestra en la imagen. Tómate tu tiempo y, cuando hayas terminado, continúa con el siguiente paso.
Paso 15
Añade algunas curvaturas a la línea seleccionando primero sus vértices inferiores con la herramienta Selección directa (A) y cambiándoles el radio a 16 px haciendo uso de la función de Vértices interactivos. Cuando hayas terminado, haz lo mismo con los vértices superiores, pero, en esta ocasión, asígnales un radio de 13 px.
Paso 16
Comienza con la abrazadera creando un rectángulo de 6×12 px (#ED795A) con un contorno de 4 px de grosor. Agrupa (Control + G) y posiciona la abrazadera en la sección central del conducto, a una distancia de 24 px del borde superior.
Paso 17
Dale a la abrazadera una ranura rectangular de 3×4 px (#2B3249). Céntrala al borde derecho de la abrazadera.
Paso 18
Añade una pequeña ruedecita usando un círculo de 6×6 px (#2B3249) y colócala en el lado derecho de la abrazadera. Cuando termines, selecciona y agrupa (Control + G) todas las formas que componen la abrazadera antes de ir al siguiente paso.
Paso 19
Empieza con el extremo inyectable creando un rectángulo de 8×12 px (#ED795A) con un radio de 4 px para sus vértices inferiores y un contorno de 4 px de grosor. Agrupa (Control + G) y colócalo al final del conducto.
Paso 20
Añade una pequeña ranura con un rectángulo de 2×4 px (#2B3249). Céntralo al borde superior del extremo inyectable.
Paso 21
Crea un rectángulo de 8×4 px (#2B3249) y colócalo encima de otro de 16×4 px (#2B3249). Agrúpalos (Control + G) y posiciónalos sobre el borde superior del contorno del extremo inyectable.
Paso 22
Añade una pequeña aguja usando una línea vertical de 10 px de longitud y un grosor de 2 px (#2B3249). Colócala de manera que su extremo superior coincida con el borde inferior del extremo inyectable. Una vez hecho, selecciona todas las formas que componen el extremo inyectable y agrúpalas (Control + G). Agrupa también todo el conjunto del goteo intravenoso.
Paso 23
Para terminar con el icono, añade una pequeña sombra circular usando una elipse de 88×12 px. Coloréala con el color #DCDFE5 y céntrala al borde inferior del área activa de dibujo. Una vez hecho, selecciona todas las formas que componen el goteo inyectable y agrúpalas (Control + G) antes de pasar al siguiente icono.
Cómo crear el icono del bote de pastillas
Asumiendo que ya has terminado con el primer icono, bloquea su capa y pasa a la siguiente (que sería la tercera), en la cual nos centraremos en crear el bote.
Paso 1
Crea la forma principal del icono usando un rectángulo redondeado de 72×92 px (#A7B4D1) con un radio de vértice de 8 px y un contorno de 4 px de grosor (#2B3249). Agrupa (Control + G) y centra al borde superior del área activa de dibujo.
Paso 2
Añade una línea vertical divisoria usando un rectángulo redondeado de 4×56 px (#2B3249) con un radio de vértice de 2 px. Céntralo con las demás formas.
Paso 3
Crea la ranura superior con un círculo de 16×16 px (#7E8EA8). Elimínale la mitad superior seleccionando su punto de ancla superior con la herramienta Selección directa (A) y pulsando la tecla Suprimir. Dale a la forma resultante un contorno de 4 px de grosor (#2B3249). Agrupa (Control + G) y centra al borde superior de la forma principal del bote.
Paso 4
Añade la ranura inferior usando una copia (Control + C → Control + F) de la que acabas de crear. Refléjala horizontalmente (clic derecho → Transformar → Reflejo → Horizontal) y colócala en la parte inferior del bote. Cuando lo hayas hecho, selecciona y agrupa (Control + G) todas las formas que componen el bote antes de ir al siguiente paso.
Paso 5
Comienza a trabajar en la primera pastilla creando su mitad izquierda con un rectángulo 10×8 px (#EBEDEC) que tenga un radio de 4 px para su vértice izquierdo y un contorno de 4 px de grosor (#2B3249). Agrupa (Control + G) y posiciona la forma a una distancia de 4 px del borde izquierdo del bote y de 8 px del borde superior.
Paso 6
Crea la mitad derecha de la pastilla usando una copia de la forma que acabas de crear. Refléjala verticalmente (clic derecho → Transformar → Reflejo → Vertical) y colócala en el lado opuesto. Cuando termines, selecciona ambas mitades y agrúpalas (Control + G) antes de ir al siguiente paso.
Paso 7
Crea las demás pastillas del lado izquierdo del bote usando tres copias (Control + C → Control + F tres veces) de la que acabas de crear. Colócalas unas encima de otras a una distancia de 12 px entre ellas, tal como ves en la siguiente imagen.
Paso 8
Añade unas pequeñas texturas usando tres grupos horizontales de círculos de 2×2 px (#2B3249) situados a una distancia de 2 px unos de otros. Agrúpalos por separado (Control + G) y coloca cada grupo entre dos pastillas. Tómate tu tiempo y, cuando hayas terminado, selecciona y agrupa las texturas junto con las pastillas usando el atajo de teclado Control + G.
Paso 9
Crea las pastillas del lado derecho del bote usando copias (Control + C → Control + F) de las formas que acabas de agrupar. Colócalas en el lado opuesto de la línea vertical divisoria. Cuando hayas terminado, selecciona y agrupa (Control + G) todo el bote antes de ir al siguiente paso.
Paso 10
Como hicimos con el icono anterior, terminemos este añadiendo la sombra circular mediante una elipse de 88×12 px, a la cual colorearemos con el color #DCDFE5. Céntrala al borde inferior del área activa de dibujo. Cuando hayas terminado, selecciona y agrupa (Control + G) todas las formas que componen el bote antes de pasar al siguiente icono.
Cómo crear el icono del estetoscopio
Asumiendo que ya has terminado con el segundo icono, pasa a la siguiente capa (que sería la cuarta), en la cual empezaremos a trabajar en el estetoscopio.
Paso 1
Comienza a trabajar en la sección binaural creando un rectángulo de 52×56 px con un grosor de 4 px(#2B3249). Haz que los vértices superiores tengan un radio de 8 px y los inferiores, de 26 px. Una vez hecho, coloca la forma resultante a una distancia de 16 px del borde izquierdo del área activa de dibujo y de 4 px del borde superior.
Paso 2
Activa el modo Previsualización de píxeles (Alt + Control + Y) y ajusta la forma que tenemos añadiendo un punto de ancla nuevo en el centro del borde superior, además de otros dos, uno a cada lado, a una distancia de 2 px cada uno de los vértices superiores.
Paso 3
Separemos el trazo seleccionando con la herramienta Selección directa (A) el punto de ancla central que acabamos de crear y eliminándolo pulsando la tecla Suprimir.
Paso 4
Crea los auriculares usando dos círculos de 8×8 px (#ED795A) que tengan un contorno de 4 px de grosor (#2B3249). Agrúpalos (Control + G) por separado y colócalos en cada uno de los extremos del trazo que acabamos de separar en el paso anterior.
Paso 5
Crea el puente circular que conecta las dos mitades del trazo separado usando una copia de él (Control + C → Control + F). Selecciona sus vértices superiores con la herramienta Selección directa (A) y elimínalos pulsando Suprimir. Una vez hecho, arrastra la forma resultante 8 px hacia arriba con la función de Mover (clic derecho → Transformar → Mover → Vertical → -8 px).
Paso 6
Crea la sección conductora del sonido usando un rectángulo de 8×8 px (#ED795A). Haz que el radio de los vértices inferiores sea de 4 px desde las propiedades del rectángulo del panel Transformar. Dale a la forma resultante un contorno de 4 px de grosor (#2B3249) y crea una ranura rectangular de 2×4 px (#2B3249) en el centro del borde superior. Agrupa (Control + G) y posiciona las tres formas debajo de la sección binaural. Una vez hecho, selecciona todas las formas que componen el estetoscopio y agrúpalas (Control + G) antes de ir al siguiente paso.
Paso 7
Dibuja la sección del tubo usando una línea de 4 px de grosor (#2B3249). Colócala como ves en la imagen.
Paso 8
Ajusta la curvatura de la parte inferior del tubo modificando el radio de dos de los vértices a 24 px usando la función de Vértices interactivos.
Paso 9
Crea el auscultador usando un círculo de 20×20 px (#A7B4D1) que tenga un contorno de 4 px de grosor (#2B3249). Agrupa (Control + G) y posiciónalo al final del tubo.
Paso 10
Sigamos ahora con los detalles creando un círculo de 8×8 px, el cual tendrá el color #2B3249. Céntralo a la forma anterior que hemos creado.
Paso 11
Crea un rectángulo redondeado de 4×6 px (#2B3249) que tenga un radio de vértice de 2 px. Colócalo sobre la mitad superior del círculo que hemos creado en el paso anterior.
Paso 12
Añadamos el conector usando un cuadrado de 8×8 px (#2B3249). Colócalo debajo de la forma del auscultador. Cuando lo hayas hecho, selecciona todas las formas que componen el auscultador y agrúpalas (Control + G) Luego, agrupa todo el estetoscopio.
Paso 13
Terminemos con el icono añadiendo la sombra circular. Usa una elipse de 88×12 px y coloréala con el color #DCDFE5. Céntrala al borde inferior del área activa de dibujo. Una vez hecho, selecciona todas las formas que componen el estetoscopio y agrúpalas (Control + G) antes de pasar al último icono.
Cómo crear el icono de la tablilla
Nos queda el cuarto y último icono. Asumiendo que ya has pasado a la siguiente capa, acerca el zoom y empecemos.
Paso 1
Comencemos por el clip. Crea un rectángulo de 16×6 px y coloréalo con el color #ED795A. Céntralo al borde superior del área activa de dibujo y colócalo a una distancia de 2 px de dicho borde.
Paso 2
Crea la sección inferior del clip usando un rectángulo de 36×6 px (#ED795A). Colócalo debajo del que acabamos de crear y, luego, unifica ambos rectángulos usando la opción de Unificar del panel Buscatrazos.
Paso 3
Ajusta la forma resultante seleccionando los vértices por separado y asignando a sus radios los siguientes valores:
- Vértices centrales superiores: 4 px
- Vértices centrales que dan al interior de la forma: 2 px
- Vértices superiores exteriores: 4 px
Paso 4
Dale a la forma resultante un contorno de 4 px de grosor (#2B3249). Luego, crea un círculo de 4×4 px(#2B3249) y colócalo en el centro. Antes de ir al siguiente paso, no te olvides de seleccionar y agrupar las tres formas usando el atajo de teclado Control + G.
Paso 5
Crea la forma principal de la tablilla usando un rectángulo redondeado de 60×80 px (#A7B4D1) con un radio de vértice de 8 px y un contorno de 4 px de grosor (#2B3249). Agrupa (Control + G) y colócalo debajo del clip.
Paso 6
Añade la hoja de papel usando un rectángulo redondeado de 48×68 px (#EBEDEC) con un radio de vértice de 4 px y un contorno de 4 px de grosor (#2B3249) Agrupa (Control + G) y céntralo a la forma principal de la tablilla.
Paso 7
Empecemos con los detalles de la hoja de papel creando un cuadrado de 8×8 px (#ED795A) que tenga un contorno de 4 px de grosor (#2B3249). Agrupa (Control + G) y colócalo a una distancia de 4 px del borde izquierdo de la hoja de papel y de 12 px del borde superior.
Paso 8
Añade unas líneas de texto usando un rectángulo de 10×2 px (#2B3249). Colócalo, a una distancia de 2 px, encima de otro rectángulo de 20×2 px (#2B3249). Agrupa (Control + G) ambos rectángulos y colócalos a la derecha del cuadrado que creamos antes, a una distancia de 4 px. Una vez hecho, selecciona las líneas de texto y el cuadrado y agrupa todo esto usando el atajo de teclado Control + G.
Paso 9
Rellenemos la hoja de papel usando dos copias (Control + C → Control + F dos veces) de las formas que acabamos de agrupar. Colócalas a una distancia de 4 px entre ellas y de las originales.
Paso 10
Añade unos puntitos, que representarán la firma, usando cuatro círculos de 2×2 px (#2B3249). Colócalos a una distancia de 2 px unos de otros. Agrúpalos (Control + G) y posiciónalos a una distancia de 4 px de la esquina inferior derecha de la hoja de papel. Una vez hecho, selecciona todas las formas que componen la tablilla y agrúpalas (Control + G) antes de ir al siguiente paso.
Paso 11
Empecemos con el cuerpo del propio clip creando un rectángulo de 24×14 px que tenga un grosor de 4 px(#2B3249). Céntralo a la forma principal de la tablilla.
Paso 12
Crea un rectángulo más pequeño, de 12×8 px, (#2B3249). Céntralo al borde inferior del clip. Una vez hecho, selecciona las dos formas que acabamos de crear y agrúpalas (Control + G). Luego, agrupa toda la tablilla.
Paso 13
Para terminar con el icono y con el proyecto en sí, añadamos la sombra circular usando una elipse de 88×12 px(#DCDFE5). Céntrala al borde inferior del área activa de dibujo. Una vez hayas terminado, selecciona todas las formas que componen la tablilla y agrúpalas (Control + G) antes de guardar el documento.
¡Bien hecho!
Damas y caballeros, hasta aquí este tutorial sobre cómo crear un pack de iconos médicos usando solamente formas y herramientas básicas con las que la mayoría de los usuarios ya estarán familiarizados.
