¡Hola! En este artículo, te enseño cómo crear iconos personalizados utilizando Adobe Illustrator, una aplicación de la Suite de Adobe. Es una herramienta de pago, pero más adelante os mostraré opciones gratuitas. Os explicaré cómo instalarla, probarla, generar un nuevo documento, qué herramientas incluye y cómo crear guías e iconos para vuestros informes.

Aprenderás:

• Los conceptos básicos de Illustrator.
• Cómo crear iconos.
• Cómo exportar iconos.

¡No te pierdas este tutorial y haz que tus informes destaquen! 💡✨

Si prefieres ver el contenido en vídeo, ¡aquí lo tienes! Si te resulta más cómodo leer, sigue con el texto a continuación.

1. Instalación y configuración de Illustrator

Para comenzar, vamos a ver cómo generar nuestros propios iconos con Illustrator.

Para instalar Illustrator, debéis ir a la web oficial de Adobe, descargar la versión de prueba o adquirir la suscripción.

Una vez descargado e instalado, iniciamos sesión con una cuenta de Adobe, descargamos y abrimos la aplicación.

1.1. Configuración del espacio de trabajo

El espacio de trabajo de Illustrator es el entorno donde se crean y editan los diseños. Se compone de diversas herramientas, paneles y la mesa de trabajo. Podéis personalizar la disposición de los elementos dentro de la herramienta. Yo suelo usar la configuración «Aspectos esenciales clásicos», pero podéis explorar otras opciones según vuestra preferencia. Si os falta alguna ventana, podéis ir al menú «Ventana» y añadir las que necesitéis, como «Capas», «Alineación» o «Trazo».

2. Creación de un nuevo documento

Una vez abierto, lo primero que debéis hacer es generar un nuevo documento. En mi caso, selecciono un tamaño de 600 x 600 píxeles, que define el tamaño de la mesa de trabajo. La mesa de trabajo es el área donde se colocan los elementos gráficos. Se pueden crear múltiples mesas de trabajo dentro de un mismo archivo para organizar distintos iconos o versiones de un diseño.

Illustrator permite trabajar con diferentes formatos como píxeles, centímetros o milímetros y ajustar la orientación del documento según vuestras necesidades.

También podéis configurar el color en modo RGB si vuestros iconos serán utilizados en pantallas, o CMYK si son para impresión.

Pasos:

1. Abrir Illustrator.
2. Ir a Archivo > Nuevo.
3. Seleccionar un tamaño de 600 x 600 píxeles (o el que prefiráis).
4. Elegir el modo de color RGB para pantalla o CMYK para impresión.
5. Hacer clic en Crear.

 3. Organización con capas

Un aspecto importante son las capas, las capas permiten organizar los elementos de un diseño en distintos niveles, facilitando la edición y modificación de los iconos sin afectar otras partes del diseño.

Illustrator permite organizarlas para trabajar de manera más ordenada. Podéis bloquear capas para evitar mover elementos por accidente, ocultarlas o agrupar elementos dentro de una misma capa.

Recomiendo crear capas separadas para guías, formas básicas y detalles del icono.

Pasos:

1. Abrir el panel de Capas en Ventana > Capas.
2. Crear capas separadas para guías, formas básicas y detalles del icono.
3. Bloquear capas para evitar mover elementos accidentalmente.
4. Nombrar las capas para facilitar la organización.

4. Creación de guías y estructuras básicas

Las guías son esenciales para crear iconos alineados y bien estructurados dentro de la mesa de trabajo. Para añadir una guía, podéis dibujar una línea con la herramienta de línea y convertirla en guía bloqueándola en una capa independiente. También podéis activar la opción «Guías inteligentes» desde el menú «Ver», lo que os ayudará a alinear los elementos con precisión. En el paso a paso se verá como generarlas con un círculo, dos cuadrados y un par de líneas.

Pasos: 

1. Crear una nueva capa, para ello, abrir el panel de Capas en Ventana > Capas.
2. Hacer clic en el icono Nueva capa y nombrarla «Guías».
3. Bloquear las demás capas para trabajar exclusivamente en esta.
4. Añadir un cuadrado en el lienzo seleccionando la herramienta Rectángulo (M).
5. Mantener presionada la tecla Shift mientras se dibuja el cuadrado para mantener sus proporciones.
6. Se puede ajustar el tamaño deseado desde la barra superior de propiedades.
7. En el panel de propiedades, quitar el relleno haciendo clic en la opción Relleno (sin color).
8. Establecer un trazo de color gris desde la misma barra de propiedades.
9. Duplicar el cuadrado con Ctrl + C y Ctrl + F (pegar en el mismo lugar).
10. Redimensionar el segundo cuadrado para que quede en el centro.
11. Asegurarse de que ambos cuadrados estén alineados en el centro usando Ventana > Alinear y seleccionando Alinear al centro horizontal y vertical.
12. Seleccionar ambos cuadrados.
13. Ir a Objeto > Fusión > Crear.
14. Ajustar los pasos de la fusión en Objeto > Fusión > Opciones de fusión y establecer 2 pasos.
15. Añadir dos líneas formando una cruz, para ello, seleccionar la herramienta Línea.
16. Mantener presionada Shift mientras se dibuja una línea vertical.
17. Duplicar la línea con Ctrl + C y Ctrl + F.
18. Girar la línea duplicada 90 grados manteniendo Shift presionado.
19. Alinear ambas líneas en el centro con la herramienta Alinear.
20. Añadir un círculo en el centro, para ello, seleccionar la herramienta Elipse (L).
21. Mantener presionada Shift mientras se dibuja un círculo para que sea perfecto.
22. Ajustar su tamaño y posición para que quede centrado en la intersección de las líneas.
23. Usar la herramienta Alinear para asegurar su correcta colocación.

5. Herramientas clave para crear iconos

Algunas de las herramientas clave en Illustrator son:

• Herramienta de selección (V): Permite mover, escalar y rotar objetos completos.
• Herramienta de selección directa (A): Permite seleccionar y modificar puntos de anclaje de formas y trazados.
• Pluma (P): Permite crear formas personalizadas punto por punto con gran precisión.
• Cuentagotas (I): Sirve para seleccionar colores de otros elementos y mantener coherencia en la paleta de color.
• Herramientas de formas básicas: Rectángulo (M), Elipse (L), Polígono (Shift + L), Estrella, etc.
• Herramienta de texto (T): Crea y edita texto en la mesa de trabajo.
• Herramienta de degradado (G): Aplica y edita degradados en formas.
• Herramienta de fusión (W): Interpola formas entre dos objetos para crear transiciones suaves.
• Herramienta de rotación (R)Rota objetos alrededor de un punto específico.
• Herramienta de reflejo (O)Refleja objetos horizontal o verticalmente.
• Herramienta de escala (S)Permite agrandar o reducir elementos manteniendo sus proporciones.
• Herramienta de texto en trazado (Shift + T):Permite escribir texto siguiendo una curva o línea.
• Fusión de formas (Pathfinder): Combina diferentes elementos para generar figuras más complejas mediante la unión, resta o intersección de formas. Se accede en Ventana > Buscatrazos. Si deseamos fusionar formas, seleccionamos dos figuras y aplicamos la herramienta «Unificar» dentro del panel «Buscatrazos». Esto permite combinar elementos de manera eficiente.
• Alineación y distribución: Facilita colocar elementos de manera ordenada y mantener la simetría en el icono. Se encuentra en Ventana > Alinear.

6. Creación de iconos

Vamos a crear dos iconos, uno de lupa y otro de casa, para el menú principal.

Si queremos que nuestro icono sea escalable y editable, trabajaremos con capas separadas y bloquearemos las guías. También podemos utilizar degradados o contornos para darle más estilo y profundidad.

Icono de lupa

Pasos:

1. Círculo exterior: Selecciona la herramienta de Elipse (L), mantén presionadas las teclas Shift y Alt, y dibuja un círculo sin relleno, con un borde negro.
2. Círculo central: Vuelve a seleccionar la herramienta de Elipse, pero esta vez dibuja un círculo más pequeño en el centro del primer círculo. Usa las teclas Ctrl, Shift, y Alt para que el círculo se dibuje desde el centro.
3. Rectángulo para la base: Usa la herramienta Rectángulo (M) para crear un rectángulo que será el mango de la lupa.
4. Redondear los bordes del rectángulo: Selecciona el rectángulo y ve a la herramienta de selección directa (A). Haz clic en los vértices del rectángulo y redondea los bordes moviendo los puntos de anclaje.
5. Unir las figuras: Selecciona todas las figuras (el círculo grande, el círculo pequeño y el rectángulo) y usa el «Creador de Formas» (Shift + M) para combinarlas. Esto unirá el mango con el círculo de la lupa.

Icono de Casa

Pasos:

1. Rectángulo base: Usa la herramienta de Rectángulo (M) para crear la base de la casa.
2. Pico de la casa: Selecciona la herramienta añadir punto de ancla (+), haz clic en el centro del rectángulo, se creará un punto. Usa la herramienta de selección directa (A) para moverlo y dar forma al pico de la casa.
3. Añadir la puerta: Con la herramienta Rectángulo (M), dibuja un rectángulo más pequeño en la parte inferior del rectángulo base para formar la puerta.
4. Combinar las formas: Selecciona todas las formas (la base de la casa, el pico y la puerta), luego usa el «Creador de Formas» (Shift + M) para combinarlas. Finalmente, elimina el rectángulo que creaste para la puerta, dejando solo la forma de la casa.

Nota: Para alinear las formas se puede usar el panel de Alineación: Ve a Ventana > Alineación o presiona Shift + F7 para abrir el panel.

7. Uso de colores y sombras

Para que los iconos tengan un diseño más atractivo, podemos aplicar:

• Colores planos
  • Pasos:
    1. Seleccionar el icono
    2. Aplicar un color base desde el panel de muestras.
• Colores degradados: Usad la herramienta de degradado para crear transiciones suaves.
  
  • Pasos
  1. 1. Seleccionar el icono
     2. Ir a Ventana > Degradado
     3. Ajustar los colores y dirección del degradado
• Sombras suaves: Aplicad una sombra sutil usando «Efectos» > «Estilizar» > «Sombra paralela».
• Bordes redondeados: Ajustad las esquinas con la herramienta «Transformar» para un acabado más moderno. Ir a Efecto > Estilizar > Bordes redondeados

8. Exportación de iconos

Una vez que tengamos nuestro icono listo, lo exportaremos en formato SVG para poder usarlo en informes de Power BI o en desarrollo web. Para ello, vamos a Archivo > Exportar > Exportar como y seleccionamos SVG. En las opciones de exportación, es importante marcar «SVG minificado» y «Responsive» para optimizar el tamaño y compatibilidad del archivo.

Si queremos utilizar el icono en otros formatos, podemos exportarlo como PNG o JPG ajustando la resolución según nuestras necesidades. Para iconos con fondo transparente, seleccionad PNG y activad la opción «Transparente».

Pasos:

1. Ir a Archivo > Exportar > Exportar para pantallas.

2. Seleccionar el formato SVG.

3. Para otros formatos:

• • PNG: Para iconos con fondo transparente.
  • JPG: Si no se necesita fondo transparente.
  • PDF: Para impresión.

9. Conclusión

Illustrator es una herramienta muy potente para la creación de iconos personalizados. Si bien es de pago, permite una gran precisión y flexibilidad en el diseño. A lo largo de este tutorial hemos visto cómo instalar la aplicación, configurar el espacio de trabajo, utilizar herramientas clave y exportar nuestros iconos en formatos útiles.

En próximos posts, os mostraré opciones gratuitas para crear iconos sin necesidad de utilizar Illustrator y exploraré técnicas avanzadas para mejorar vuestros diseños.

¡Nos vemos en el siguiente artículo!