Spanish (Español) translation by Naudys Angulo (you can also view the original English article)
Sigue este tutorial y aprende a crear un conjunto de iconos de redes sociales en forma vectorial. Usarás formas básicas para crear las formas de los iconos de estilo plano, los iconos de notificación y los logotipos de las redes sociales. También hablaremos de cómo guardarlos individualmente, y al final tendrás el conocimiento para crear otros iconos en este estilo plano en Adobe Illustrator.
¿Tienes hambre de más iconos? Tanto si buscas más iconos de redes sociales, iconos de estilo plano o iconos vectoriales en general, dirígete a GraphicRiver y allí encontrarás un montón de recursos en diferentes estilos y diseños.
Activos del Tutorial
Para completar el tutorial necesitará los siguientes recursos:
- La fuente World of Water
- La fuente Magnolia Script
- La fuente Sniglet
1. Cómo abrir un nuevo documento
Inicia Illustrator y ve a Archivo > Nuevo para abrir un documento en blanco. Escribe un nombre para tu archivo, establece las dimensiones y luego selecciona Píxeles como Unidades y RGB como Modo de Color.
Luego, ve a Edición > Preferencias > General y establece el Incremento del Teclado en 1 px y mientras estás allí, ve a Unidades para asegurarte de que están establecidas como en la siguiente imagen. Normalmente trabajo con estos ajustes, y te ayudarán a lo largo del proceso de dibujo.
2. Cómo elaborar una forma de ícono vectorial plano
Paso 1
Toma la Herramienta Elipse (L) y dibuja un círculo de 98 x 98 px en tu mesa de trabajo. Dale un Trazo gris oscuro de 4 pt y presiona la opción Alinear trazo al interior en el panel de Trazo.
Ve a Ver > Reglas > Mostrar Reglas para activarlas y luego arrastra una línea guía por los cuatro puntos del círculo. Notarás que todo se mantiene dentro de las líneas guía, y esto facilitará las cosas cuando llegue el momento de guardar cada icono. No tendrás que preocuparte por añadir el grosor del trazo al tamaño del círculo para calcular el tamaño final del icono.
Paso 2
A continuación, dibuja un pequeño cuadrado de 30 x 30 px con la Herramienta Rectángulo (M) y úsala como guía para dibujar un triángulo entre sus puntos de esquina. Mueve este triángulo a la parte inferior izquierda del círculo gris. Asegúrate de que no se salga de las líneas guías.
Paso 3
Necesitamos hacer un pequeño ajuste. Toma la Herramienta Añadir puntos de ancla (+) y úsala para agregar un punto extra en el triángulo. Arrastra este punto en el contorno gris para despejar el interior del círculo. Al final, coloréalo con el mismo gris oscuro.
Paso 4
Selecciona el círculo gris y ve a Objeto > Expandir Apariencia para convertir el trazo interior en un relleno. Ahora, selecciona la forma de anillo gris resultante junto con el triángulo y pulsa Unir en el panel Buscatrazos para fusionarlos en una sola forma. Esta será la forma final, y puedes nombrarla "forma de icono" en el panel Capas.
Paso 5
Haz cinco copias de la "forma de icono" y usa las líneas guías o el panel Alinear para organizarlas en tu mesa de trabajo. Mueve cada forma de icono a una capa separada y nómbrala según corresponda para mantener las cosas organizadas en el panel Capas.
3. Cómo crear un icono vectorial de Facebook
Paso 1
Colócate en la capa de "Icono de Facebook", y vamos a completar el primer icono de las redes sociales. Agarra la Herramienta Texto (T) y escribe la letra "f" en tu mesa de trabajo usando la Fuente World of Water, en Negrita, con un tamaño de 68 pt. Esta es la fuente más similar al logo actual de Facebook que encontré. Rellénala y dale un Trazo de 2 pt usando el mismo color gris oscuro.
Ve a Objeto > Expandir dos veces para expandir el texto y luego el trazo aplicado. Ahora, puedes mover la letra dentro de la forma del ícono y usar las guías para alinearla al centro.
Paso 2
En este punto, el icono de Facebook está listo. Puedes dejarlo tal como está con la forma del icono y el logotipo como dos formas separadas, o puedes fusionarlo en un solo trazado compuesto. Para ello, presiona Unir en el panel Buscatrazos seguido de Objeto > Trazado Compuesto > Crear (Control-8). ¡Hecho!
4. Cómo crear un icono vectorial de Instagram
Paso 1
Colócate en la capa "Icono del Instagram". Utiliza la Herramienta Rectángulo (M) para dibujar un cuadrado de 44 x 44 px en tu mesa de trabajo; luego ve al panel Transformar e introduce 10 px en los cuatro campos de Radios de los vértices para obtener las esquinas redondeadas (1). Rellena esta forma con el mismo color gris oscuro.
Utiliza la Herramienta Elipse (L) para dibujar un círculo de 25 x 25 px; luego selecciona ambas formas y presiona Centrar Horizontalmente y Centrar Verticalmente en el panel Alinear (2).
Mientras ambas figuras siguen seleccionadas, presiona Menos Frente en el panel Buscatrazos para obtener un trazado compuesto (3).
Paso 2
A continuación, dibuja un delgado rectángulo de 46 x 2 px sobre el icono; luego selecciona ambas formas y pulsa Menos Frente en el panel Buscatrazos seguido de Objeto > Trazado Compuesto > Crear (Control-8) (1).
Dibuja un pequeño círculo de 5 x 5 px en la parte superior derecha del icono, y mientras ambas formas están seleccionadas, presiona Menos Frente en el panel Buscatrazos seguido de Objeto > Trazado Compuesto > Crear (Control-8) de nuevo (2).
Paso 3
Dibuja otro círculo de 18 x 18 px y dale un Trazo de 2 pt usando el mismo color gris oscuro. Selecciona la forma del icono junto con este círculo y presiona Centrar Horizontalmente y Centrar Verticalmente en el panel de Alinear para asegurarte de que están perfectamente alineados (1).
Mientras el círculo interior permanece seleccionado, ve a Objeto > Expandir para convertir el trazo en un relleno (2). Ahora, selecciona ambas formas y presiona Unir en el panel Buscatrazos seguido de Objeto > Trazado Compuesto > Crear (Control-8) (3).
Paso 4
El trazado compuesto del logotipo está listo ahora. Puedes moverlo dentro de la forma del ícono y usar las líneas guias para colocarlo en el centro (1).
En este punto, deberías tener dos formas en la capa "Icono de Instagram": el logotipo y la forma del icono. Puedes dejarlas como están, o puedes fusionarlas en un nuevo Trazado Compuesto presionando Unir en el panel Buscatrazos seguido de Objeto > Trazado Compuesto > Crear (Control-8) (2).
5. Cómo crear un icono vectorial de Twitter
Paso 1
Colócate en la capa de "Icono de Twitter" y dibujemos el lindo pájaro. Comienza con un círculo de 27.5 x 27.5 px relleno con el mismo color gris oscuro. Cambia a la Herramienta Pluma (P) y dibuje la forma del cuerpo como se muestra en la imagen de abajo.
Para el pico, dibuja una forma similar a un triángulo y luego ve a Objeto > Transformar > Reflejar, marca Horizontal y pulsa Copiar para obtener la mitad inferior.
Finalmente, dibuja la forma del ala con la Herramienta Pluma (P). Ahora, seleccione todas las formas y presiona Unir en el panel del Buscatrazos para fusionarlas en una sola forma.
Paso 2
Mueve el logo del pájaro dentro de la forma del icono y usa las líneas guías para colocarlo en el centro (1).
En la capa "Icono de Twitter", ahora deberías tener dos formas: el logo y la forma del icono. Déjalas así, o fusionalas en un nuevo trazado compuesto presionando Unir en el panel del Buscatrazos seguido de Objeto > Trazado Compuesto > Crear (Control-8) como lo hiciste antes (2). El icono vectorial de Twitter está listo.
6. Cómo crear un icono vectorial de YouTube
Paso 1
Colócate en la capa de "Icono de YouTube". Utiliza la Herramienta Rectángulo (M) para dibujar un rectángulo de 50 x 37 px en tu mesa de trabajo (1); luego ve al panel Transformar e ingresa 8 px en los cuatro campos de Radios de los vértices para obtener las esquinas redondeadas (2).
A continuación, dibuja un pequeño triángulo en el centro (3) y luego, mientras ambas formas permanecen seleccionadas, presiona Menos Frente en el panel del Buscatrazos para obtener un trazado compuesto (4).
Paso 2
Mueve el logo dentro de la forma del icono y arréglalo en el centro (1). Fusiona la forma del icono y el logo en un nuevo trazado compuesto si quieres, o mantén las dos formas por separado (2).
7. Cómo crear un icono vectorial de Snapchat
Paso 1
En la capa "Icono de Snapchat", dibuja un rectángulo de 27 x 43 px (1); luego ve al panel Transformar e ingresa 12 px en los campos superiores de los Radios de los vértices para obtener esquinas redondeadas en la parte superior (2).
Usa la Herramienta Selección Directa (A) para seleccionar solo los puntos de las esquinas inferiores izquierda y derecha y moverlos un poco hacia afuera (3). Cambia a la Herramienta Añadir punto de ancla (+) y utilízala para añadir tres puntos adicionales en la parte inferior; luego muévelos y ajuste los tiradores para crear la parte inferior ondulada (4).
Añade otros dos puntos en el lado izquierdo y derecho con la Herramienta Añadir punto de ancla (+); luego muévelos hacia adentro para obtener una forma fantasmagórica (5).
Paso 2
Rellena la forma obtenida en el paso anterior con el mismo color gris oscuro (1). Luego, utiliza la Herramienta Pluma (P) para dibujar dos trazos cortos como los brazos y darles un trazo de 4 pt. Presiona la opción Remate extremo redondeado en el panel Trazos para obtener los extremos redondeados (2). Mientras ambos brazos permanecen seleccionados, ve a Objeto > Expandir para convertir los trazos en rellenos (3).
Selecciona todas las formas y presiona Unir en el panel Buscatrazos para fusionarlas en una sola forma (4).
Paso 3
Mueve el logo dentro de la forma del icono y arréglalo en el centro usando las líneas guías (1). Fusiona el logo y la forma del icono en un nuevo trazado compuesto si quieres, y en este punto, el icono de Snapchat está listo (2).
8. Cómo crear un icono vectorial de Pinterest
Paso 1
En la capa "Icono de Pinterest", toma la Herramienta Texto (T) y escribe la letra "P" en tu mesa de trabajo usando la fuente Magnolia Script, con un tamaño de 64 pt (1). Esta es la fuente más similar al logo original de Pinterest que encontré. Ve a Objeto > Expandir para convertir el texto en una forma (2) y ahora, hagamos algunos ajustes.
Con la ayuda de la Herramienta Selección Directa (A), distorsionaremos esta letra moviendo algunos de los puntos para obtener la parte inferior puntiaguda, para hacerla más redondeada en la parte superior, para que sea menos redondeada en el lado derecho (3) , y al final, obtendrás una forma mucho más similar al logotipo original (4). Sin embargo, no tiene que ser idéntico.
Paso 2
Mueve el logo al centro de la forma del icono (1). Fusiona el logo y la forma del icono en un nuevo trazado compuesto si quieres, o mantenlos separados (2). En este punto, el icono de Pinterest está hecho.
9. Cómo guardar los iconos vectoriales de las redes sociales
Paso 1
Ahora tienes todos los íconos de las redes sociales dispuestos en tu mesa de trabajo y puedes guardarlos individualmente.
Paso 2
Tomemos el icono de Facebook como ejemplo. Utiliza la Herramienta Rectángulo (M) para dibujar un cuadrado de 98 x 98 px, que es el tamaño de la forma del icono del principio del tutorial. No tienes que preocuparte por el ancho del trazo porque todo encaja perfectamente dentro del cuadrado. Mientras el icono y el cuadrado permanecen seleccionados, presiona Centrar Horizontalmente y Centrar Verticalmente para asegurarte de que están centrados.
Selecciona solo el cuadrado y va a Objeto > Mesas de trabajo > Convertir a mesas de trabajo para definir una nueva área. Ahora, puedes guardar el icono yendo a Archivo > Exportar > Guardar para Web. Elige el tipo de archivo que necesitas, PNG con fondo transparente o JPEG, y presiona Guardar. Haz lo mismo con el resto de los iconos para guardarlos individualmente.
10. Cómo crear iconos vectoriales de notificación
Paso 1
No podemos olvidarnos de los iconos de notificación. Utiliza la Herramienta Rectángulo (M) para dibujar un rectángulo de 80 x 50 px y colórealo con rojo claro (1). En el panel Transformar, ingresa 10 px en los cuatro campos de Radios de los vértices para obtener las esquinas redondeadas (2).
Dibuja una pequeña forma de triángulo justo en la parte inferior (3) y luego, mientras ambas formas permanecen seleccionadas, presiona Unir en el panel Buscatrazos para fusionarlas en una sola forma (4).
Paso 2
Vamos a crear el símbolo para el nuevo seguidor. Comienza con un círculo de 11 x 11 px relleno de blanco, y luego dibuja un pequeño rectángulo de 15.5 x 6 px debajo de él. Redondea solo las esquinas superiores a 4 px usando el panel Transformar, y el símbolo está listo (1).
Toma la Herramienta Texto (T) y escribe "1" o el número de tu elección usando la fuente Sniglet, con un tamaño de 27 pt. Dale un relleno blanco y también un Trazo de 0.75 pt para hacerlo más grueso (2).
Paso 3
Vamos a crear el símbolo de "Me gusta" en tus mensajes. Comienza con un círculo de 14 x 14 px relleno de blanco (1). Utiliza la Herramienta Selección Directa (A) para seleccionar solo el punto inferior y muévelo un poco hacia abajo para obtener una forma parecida a un pétalo (2); luego gira esta forma 20 grados en el panel Transformar (3). Ve a Objeto > Transformar > Reflejar, marcar Vertical y pulsa Copiar para obtener la segunda forma, y alinear haciendo que sus puntos inferiores se superpongan (4).
Mientras ambas formas permanecen seleccionadas, presiona Unir en el panel Buscatrazos para fusionarlas en la forma de un corazón (5).
Finalmente, escribe un número junto al símbolo utilizando la misma fuente y ajustes (6).
Paso 4
Mueve los iconos de notificación en la parte superior derecha de los iconos de las redes sociales. Puedes mantener los números como texto editable para que puedas cambiarlos en cualquier momento, o puedes expandirlos.
¡Felicidades! Ya terminaste
Los iconos vectoriales de las redes sociales están listos. Ahora tienes el conocimiento para crear otros iconos del mismo estilo.
¡Expande tus habilidades de construcción de iconos!
Sigue dibujando y aprendiendo con estos tutoriales recomendados:
Diseño de iconosCómo elaborar iconos
Diseño de iconos10 consejos para crear iconos increíbles
Diseño de iconosCómo crear un paquete de iconos de redes sociales en Adobe Illustrator
Diseño de iconosCómo crear un paquete de iconos de lanzadores para Android en Adobe Illustrator
Diseño de iconosCómo crear un conjunto de iconos de editor de texto en Adobe Illustrator
InviernoCómo crear un conjunto de iconos de copos de nieve en Adobe Illustrator
Diseño de iconosCómo crear un conjunto de iconos de cuidado dental en Adobe Illustrator
Diseño de iconosCómo diseñar un conjunto de iconos de circo en Adobe Illustrator
Diseño planoCómo crear iconos de Pascua de diseño plano en Adobe Illustrator
Diseño de iconosCómo crear un conjunto de iconos de animales planos en Adobe Illustrator
Diseño de iconosCómo crear iconos planos inspirados en la naturaleza en Adobe Illustrator
Diseño de iconosCómo crear avatares planos de profesiones en Adobe Illustrator
Diseño de iconosCómo crear un conjunto de iconos científicos en Affinity Designer
Affinity DesignerCómo crear un conjunto de iconos del navegador en Affinity Designer
Diseño de iconos¡Qué rico! Cómo crear deliciosos iconos de donuts en Adobe Illustrator
Diseño de iconosCómo crear deliciosos iconos de cupcake (magdalenas) en Adobe Illustrator
By
