Cómo eleborar iconos

Spanish (Español) translation by Naudys Angulo (you can also view the original English article)

Final product image — What You'll Be Creating

Siempre quisiste aprender lo que se necesita para crear tu propio icono, ¿pero nunca supiste exactamente por dónde comenzar? Bueno, con este artículo, eso va a cambiar. Aprenderás lo que es un icono y obtendrás respuestas a las preguntas y problemas más comunes que surjan. A lo largo del camino, descubrirás que el proceso no es tan difícil como podrías haber pensado alguna vez.

Ah, y antes de que se me olvide, si quieres ampliar tu biblioteca de iconos, siempre puedes dirigirte a Envato Elements, donde encontrarás una gran colección de paquetes de iconos de vectores esperando a ser recogidos.

1. ¿Qué son los iconos?

Si hay algo realmente importante que la escuela logró enseñarme, es que siempre que te encuentres abordando un nuevo concepto, debes dedicarle tiempo y llevar a cabo una investigación exhaustiva, para que puedas tener una comprensión total de lo que representa en última instancia.

Así que, siendo la criatura de hábitos que soy, voy a inculcarte ese mismo método de resolución de problemas, comenzando por las preguntas más básicas: "¿Qué es un icono?"

Bueno, según Google, la palabra se origina en el griego eikόn (imagen) y se define comúnmente hoy en día como una:

"Pintura devocional de Cristo u otra figura sagrada, típicamente ejecutada en madera y utilizada ceremonialmente en las iglesias bizantinas y otras iglesias orientales".

Si bien este no es exactamente el tipo de icono en el que los creativos tendemos a pensar, puede ser la primera cosa que algunas personas visualizan cuando les dices que te ganas la vida haciendo "diseño de iconos".

No me malinterpreten, no tengo nada en contra del arte de pintar iconos, que en sí mismo es un arte hermoso y algo difícil, pero estamos hablando aquí de un uso completamente diferente de las manos y la imaginación.

Desde una perspectiva digital más moderna, un "icono" se define como:

"Un símbolo o representación gráfica en una pantalla de un programa, opción o ventana".

Indistintamente de que estés utilizando un Mac o un PC, un iPhone o un dispositivo Android, cada uno de ellos tiene una interfaz de usuario basada en iconos de diferentes formas, colores y tamaños.

2. ¿Por qué usamos iconos?

Históricamente, el primer conjunto de iconos de computadora fue conceptualizado hace casi 37 años (más exactamente en 1981), cuando un informático llamado David Canfield Smith unió fuerzas con el diseñador Norman Lloyd Cox mientras trabajaba en la GUI (Interfaz Gráfica de Usuario) de la Xerox Star 8010. Su tarea era facilitar la interacción del usuario con la máquina, tarea que superaron creativamente introduciendo símbolos gráficos familiares destinados a reflejar los objetos de la vida real con los que el usuario podía relacionarse.

Dado que en el pasado las computadoras se utilizaban principalmente en los entornos de trabajo, rápidamente se dieron cuenta de que podían encontrar inspiración mirando los objetos más comunes que se encontraban en una oficina, dando así vida a la "metáfora de la oficina".

Esto sentó las bases para construir el primer lenguaje visual común para la era digital, que ha dado forma no solo a la apariencia de las GUI sino también a su funcionamiento.

Facilidad de interacción

Avanzando rápidamente hasta hoy, y aunque definitivamente se han visto algunos cambios en términos de forma, su función principal se ha mantenido bastante idéntica, ya que continúan cumpliendo el mismo propósito para el que fueron diseñados originalmente, y eso está facilitando nuestra interacción con las diferentes piezas y tipos de software.

Y honestamente, ¿deberíamos sorprendernos? Imagina tener que usar un software que tiene una GUI (interfaz gráfica de usuario) basada completamente en el uso de palabras clave. Lo acabo de hacer, y créeme, rápidamente se convirtió en una pequeña pesadilla.

Liberador de las barreras del idioma

Los iconos se comportan como símbolos visuales universales que liberan de la barrera del idioma, debido al hecho de que logran representar imágenes que pueden ser fácilmente entendidas por los usuarios que vienen de diferentes lados del planeta.

En lugar de tener que encontrar la manera de transmitir el mismo significado a los hablantes de dos idiomas diferentes, se puede encontrar fácilmente un símbolo comúnmente aceptado que haga el trabajo por ti.

Por supuesto, ocasionalmente habrá algunas representaciones que pueden requerir que los usuarios pasen por un proceso de memorización de un símbolo para añadirlo a su jerga. Por lo general, esto sucederá en el caso de nuevos conceptos o tecnologías con los que necesitan familiarizarse.

Desencadenantes de pensamientos más rápidos

En comparación con las palabras, las imágenes tienen la capacidad de estimular nuestros ojos significativamente más rápido y durante un período de tiempo más largo. Esto a su vez significa que el usuario no solo descifrará el significado detrás de un ícono más rápido, sino que el tiempo total de interacción esperado será mucho menor.

Imagina tener un software complejo con muchas herramientas y funciones. Ahora, ¿cómo sería si todas las herramientas fueran ilustradas usando etiquetas, es decir, texto en lugar de símbolos? Si bien es posible que te las arregles para descubrir la posición de algunos de ellos, rápidamente se convertiría en una sobrecarga visual que eventualmente te haría odiar ese software.

Lo creas o no, hay una razón real por la que nos alejamos de las interfaces de línea de comandos, y principalmente tiene que ver con la estética y la facilidad de interacción.

Atractivo a la vista

Yendo más allá de la idea de funcionalidad, los iconos se comportan como disparadores visuales que significan no solo retratar una idea más rápido sino también hacerlo de una manera que sea agradable a la vista.

Por ejemplo, me gusta pensar que la pantalla de un dispositivo es una de esas estanterías por las que suelo pasar cuando hago mis compras en el mini mercado local. Si los productos están envueltos de una manera colorida y llamativa, entonces mi atención es inmediatamente atraída hacia ellos, aunque a veces ni siquiera necesito ese producto- sólo estoy interesado en ver lo que contiene.

Lo mismo puede decirse de los iconos, ya que cuanto mejor se vean, más obligado estará el usuario a mirarlos y luego a interactuar, que a veces es exactamente lo que queremos que hagan.

3. Cómo hacer un icono

Bien, hasta ahora hemos hablado sobre qué son los iconos y por qué los usamos. Ahora es el momento de tener una idea de lo que se necesita para hacer uno.

3.1. La fase de investigación

Cada vez que comienzas a trabajar en un nuevo proyecto basado en iconos, hay algunos aspectos clave que debes resolver antes de pasar por el proceso real de construcción de los iconos.

Yo llamo a esto la "fase de investigación", ya que eso es básicamente todo lo que vas a hacer. Pasarás unos minutos u horas, dependiendo del tiempo y la paciencia que tengas, buscando respuestas a algunas preguntas básicas.

¿Cuántas variaciones de tamaño necesitas?

La primera pregunta que siempre debes hacerte tiene que ver con la cantidad de variaciones de tamaño que necesitas crear para un icono específico.

¿Necesitas un icono, dos, o tal vez más?

Si, por alguna razón, terminas trabajando en un proyecto de tamaño único, entonces esta parte debería ser bastante fácil de repasar. Por otro lado, si necesitas proporcionar varios tamaños, es posible que te encuentres en un aprieto, especialmente si está haciendo trabajo con el cliente pero no tienes un informe claro que indique los valores requeridos.

Afortunadamente para nosotros, la mayoría de estos valores ya se han convertido en "estándares" de la industria, lo que significa que no hay que perder tiempo jugando con números para averiguar qué funciona y qué no.

Si sabes dónde se usarán los iconos, generalmente puedes encontrar los valores de tamaño requeridos haciendo una simple búsqueda en Google.

Iconos pequeños:

12 x 12 px
16 x 16 px
24 x 24 px
32 x 32 px
48 x 48 px

Iconos medianos:

64 x 64 px
96 x 96 px
128 x 128 px
256 x 256 px

Iconos grandes:

512 x 512 px
1024 x 1024 px

Consejo rápido: si observas más de cerca los valores de tamaño arriba mencionados, rápidamente notarás que la mayoría de ellos se crean realmente duplicando el número anterior: 12 > 24 > 48 > 96; 16 > 32 > 64 > 128 > 256 > 512 > 1024.

En algunos casos, como para las aplicaciones móviles, puedes encontrar pautas detalladas directamente de los fabricantes del sistema operativo que están destinados a ayudarte:

¿Cuál será tu tamaño base?

Cuando se trabaja en proyectos de varios tamaños, te recomiendo encarecidamente que siempre comiences desde el tamaño direccionable más pequeño posible.

Este se convertirá en tu tamaño base, que luego usarás para elaborar todos los demás requeridos. La razón tiene que ver con la naturaleza pixel-perfect (pixel-perfecto) de tus formas, que se descompondrá si construyes las grandes y luego intentas obtener las variaciones más pequeñas al redimensionárlas.

Cuando se trata de elegir un valor para el tamaño base real, todo depende de los requisitos del proyecto, pero la regla general es que siempre debes ir al más pequeño posible.

Por ejemplo, si necesito crear tres variaciones (16 x 16 px, 32 x 32 px y 64 x 64 px), siempre me aseguraré de comenzar con el de 16 x 16 px como mi tamaño base, y luego crearé los otros duplicándolos.

¿Cuáles son las principales características definitorias del tema?

Una vez que hayamos entendido el problema del tamaño, debemos tomarnos un par de momentos y desglosar el concepto que vamos a ilustrar. Para mí personalmente, este paso es imprescindible ya que me permite identificar y aislar sus características principales.

Esto puedes hacerlo fácilmente agarrando un trozo de papel o abriendo un documento de texto, y luego escribiendo gradualmente observaciones breves (palabras clave) que tengan que ver con su forma, tamaño, colores, conformando elementos/características, etc.

Si bien algunos tienden a dedicar menos tiempo en esta parte de la investigación, agregar ese minuto adicional puede resultar extremadamente útil, especialmente si recién estás comenzando, ya que facilitará las cosas a la hora de "sentir" el tema.

¿Qué estilo usas?

En este punto, podemos y debemos comenzar a pensar en el "estilo", o en otras palabras, en el aspecto que nuestros iconos terminarán adoptando.

En el pasado, las cosas eran bastante diferentes, ya que el estilo de los primeros iconos estaba dictado por las limitaciones de la tecnología de visualización. Eso, a su vez, terminó dándole forma a la apariencia de estos símbolos visuales, pero también sentó las bases para el primer estilo, que utilizaba formas definidas por líneas atrevidas y duras para las secciones externas y más delgadas para los detalles internos.

Hoy, esa barrera de píxeles se ha sido cruzada hace ya mucho tiempo, permitiéndonos crecer y crear nuevos estilos, que evolucionan y cambian constantemente.

Los estilos más populares son:

arte de pixel
plano
material
arte lineal
isométrico
glifo
Esqueumorfismo
dimensional
dibujado a mano
animado

Personalmente, cuando se trata de elegir un aspecto para mis futuros iconos, generalmente termino yendo a Dribbble.com, donde tiendo a pasar unos minutos analizando las tendencias actuales. A medida que me desplazo hacia arriba y hacia abajo, rápidamente me las arreglo para tener una idea de lo que me gustaría hacer, y luego trato de ceñirme a eso.

Dicho esto, te recomiendo encarecidamente que te hagas una buena idea de lo que estás buscando desde el principio, ya que de lo contrario podrías perder mucho tiempo yendo y viniendo a través de diferentes estilos.

Ah, y otra cosa, no te conviertas en ese diseñador que ve algo bueno y luego copia completamente el trabajo de otra persona, y lo expone como propio. Si bien algunas personas recomiendan este enfoque para aprender y crecer, eso es lo que en última instancia debería ser, un ejercicio en el que se intentas averiguar cómo se hacen algunas cosas.

Si copiar es todo lo que terminas haciendo, entonces es posible que nunca llegues a ese punto en el que desarrolles un estilo personal, que es lo que distingue a un buen diseñador de iconos del resto.

Si quieres saber más sobre este tema, te recomiendo encarecidamente que leas mi artículo 10 Estilos que han cambiado la cara del diseño de iconos, que desglosará los principales estilos existentes y sus rasgos.

10 Estilos que han cambiado la cara del diseño de iconos

Cómo encontrar la inspiración

Dependiendo de la naturaleza del proyecto que estés llevando a cabo, ya sea personal o de trabajo para un cliente, en última instancia, necesitarás algo de inspiración. Esta fase está bastante enredada con la selección de un estilo, ya que aquí es donde comienzas a sentar las bases para tus futuros iconos.

Entonces, ¿cómo haces para tener esa sensación de estar inspirado?

Bueno, la mejor manera de hacer fluir tu creatividad es crear lo que comúnmente se conoce como un "tablero de estados de ánimo" (o tabla de inspiración).

Como su nombre lo indica, un tablero de estados de ánimo es una colección, o más exactamente un collage de ideas basadas en imágenes, que van desde paletas de colores hasta fotos, ilustraciones, texturas, tipografía, etc. Te ayuda a obtener una dirección para lo que en última instancia, como te gustaría que se sintiera tu producto.

Como diseñador, siempre estás marcando cosas que llaman la atención, pero a veces es difícil seguir la pista de todas elllas, sobre todo cuando tienes que verlas todas a la vez.

Aquí es donde herramientas como Pinterest e Instagram resultan útiles, ya que te permiten crear tableros de estados de ánimo con un solo clic.

Otra alternativa, que sé que mucha gente tiende a usar, es descargar la selección de imágenes que ha realizado, y luego crea el tablero de estado de ánimo directamente dentro de su conjunto de gráficos.

Si utilizas una configuración de un solo monitor, esto podría funcionar mejor para ti, pero si estás en un equipo doble, podrías considerar el uso del primer enfoque.

Cuando se trata de las imágenes reales en sí mismas, normalmente me baso en uno de los siguientes recursos:

A veces, te encontrarás en esa situación en la que tienes un tema más complicado con el que podrías necesitar ayuda para averiguar el símbolo utilizado para ello. Cuando esto sucede, suelo ir a The Noun Project o a Iconfinder y hacer una búsqueda simple, que siempre me lleva a una gran selección de imágenes que me ayudan a comprender mejor el tema.

En este punto, debería haber cubierto todas las preguntas anteriores, lo que significa que estamos listos para pasar a la siguiente fase.

3.2. La fase de construcción

Así que has averiguado el tamaño de tu base, decidido las variaciones de tamaño, e incluso has creado un pequeño tablero de estado de ánimo, lo que nos lleva a la segunda fase del proceso.

Ahora, independientemente del software que estés usando -Adobe Illustrator, Adobe Photoshop, Affinity Designer, Sketch, etc.- la parte siguiente es más o menos la misma, ya que puedes aplicar los conceptos a cualquiera de los conjuntos de gráficos existentes.

Lo mismo puede decirse de los diferentes sistemas operativos, ya que tanto si eres usuario de Mac o Windows, podrás conseguir el mismo resultado siguiendo el mismo proceso.

Dicho esto, veamos qué se necesita para empezar a construir tu icono.

Hazlo Pixel Perfect (Pixel Perfecto)

En este punto, la mayoría de los programas ya vienen preconfigurados para ayudarte a crear tus iconos pensando en la perfección de los píxeles.

Si es la primera vez que escuchas esta idea, te recomiendo encarecidamente que te tomes un par de minutos y repases mi artículo Cómo crear una ilustración de píxel perfecto, que te debería poner al día.

how to create pixel perfect artwork — Cómo crear una ilustración de píxel perfecto usando Adobe Illustrator

Ahora, asumiendo que has terminado de leer el artículo anterior, la pregunta es si debemos o no dedicar tiempo y adaptarnos a este flujo de trabajo más riguroso.

Bueno, personalmente lo he estado usando por más de cinco años, y no importa cuánto tiempo más pueda terminar comiendo, todavía creo que todo vale la pena. Si miras cómo se hacían las cosas originalmente en los primeros años de este oficio, cuando la resolución era un problema, notarás que los iconos se construían usando cuadrículas de píxeles, no formas de tamaño aleatorio.

Configurar un archivo de proyecto adecuado

El primer paso para crear tu propio icono, o paquete de iconos, es crear un nuevo archivo de proyecto. Es simple, ¿verdad? Bueno, en realidad no, ya que si estás empezando, hay un par de cosas que deberías tener en cuenta.

El perfil

En primer lugar, siempre debes asegurarte de que el perfil de tu documento esté configurado para la Web, ya que los iconos suelen utilizarse en el medio digital.

Esto es realmente importante, ya que los diferentes perfiles tendrán diferentes sistemas de color (la Web utiliza RGB, mientras que la Impresión utiliza CMYK), lo que podría dar lugar a representaciones de color no deseadas cuando otras personas lo vean.

Las unidades de medida

A continuación, tenemos las unidades de medida utilizadas para describir el ancho, la altura, el radio de los vértices, el grosor de los trazos y el espacio utilizado para las diferentes formas de la composición.

Por defecto, las unidades deben estar siempre en Pixeles siempre y cuando te asegures que el documento está destinado a ser utilizado para la web.

Usamos píxeles en lugar de otra cosa, ya que es la unidad universalmente acordada que se usa para medir cualquier producto digital.

El número de mesas de trabajo

Una vez que hayas establecido el perfil y las unidades de tu documento, tienes que averiguar si vas a usar una mesa de trabajo más grande o varias más pequeñas.

Mi consejo es que siempre intentes tomar la segunda ruta, ya que eso facilitará mucho las cosas a la hora de exportar los iconos.

Más allá de eso, tener múltiples mesas de trabajo significa que puedes concentrarte más fácilmente en un activo a la vez, a medida que construyes tu paquete.

Usar capas

Ya sea que estés creando un solo icono o un paquete completo, siempre debes intentar utilizar un par de capas para separar tus activos de tus cuadrículas de referencia.

De esta manera, puedes construir fácilmente tus iconos sin tener que preocuparte de mover o agrupar las cuadrículas subyacentes por error.

Más allá de eso, te ayudará durante el proceso de exportación, ya que querrás ser capaz de ocultar tus cuadrículas.

Usar cuadrículas de referencia

Por definición, una "cuadrícula de referencia" es una herramienta visual que consiste en lineas guías geométricas destinadas a ayudar a lograr la coherencia de tamaño en todos tus iconos.

Puede ser tan simple como dos cuadrados apilados uno encima del otro, o puedes usar algo un poco más complejo. Personalmente, prefiero ir con el más básico ya que hace el trabajo mejor de lo esperado.

Normalmente, comienzo creando la superficie de referencia principal usando exactamente los mismos valores de anchura y altura que mi mesa de trabajo subyacente. Luego añado una ligeramente más pequeña llamada el área de dibujo activa, que es donde voy a posicionar todas las formas de composición de mi activo.

Esto me dará un completo acolchado protector, que siempre incluyo para asegurarme de que los iconos no se recorten una vez que son entregados y utilizados más tarde por el cliente.

Cuando trabajo con varios iconos, mi regla de oro es decidir si voy a rellenar tanto el ancho como el alto del área de dibujo activa o sólo uno de ellos, dependiendo del estilo que estoy buscando. Una vez que lo averigüe, tomaré esa regla y la aplicaré a todos mis otros activos, logrando así la consistencia que busco.

4. Lo que hay que hacer y lo que no hay que hacer al crear iconos

Una vez que hayas terminado de configurar el archivo del proyecto, las capas y las cuadrículas de referencia, lo único que queda es empezar a trabajar en los iconos reales. Ahora, dependiendo del estilo que busques, hay un par de cosas que debes tener en cuenta.

Mantenlo simple

Cuando comenzamos a aprender algo nuevo, siempre tenemos ese deseo de crear a un nivel más alto, ya que tendemos a mirar lo que otras personas están haciendo y pensamos, "Bueno, eso no puede ser tan difícil".

Aunque no dudo de tu capacidad para crear algo completamente asombroso, te recomiendo que empieces por hacer diseños simples al principio, para que puedas desarrollar gradualmente tus habilidades de una manera más orgánica.

Más allá de eso, a veces lo simple es mejor, ya que la idea es representar un sujeto -ya sea un objeto, una función o una idea- de una manera que cualquiera pueda entenderlo instantáneamente.

Empieza con las formas básicas

Si te cuesta trabajar en un proyecto, la mejor idea es dar un paso atrás y luego concentrarte en establecer las formas básicas del sujeto. Ya sea que uses rectángulos, círculos o ambos, intenta relajarte y ver cómo puedes construir tu icono enfocándote en sus secciones principales de composición.

Una vez que hayas establecido los cimientos, puedes empezar a ajustar los bloques principales de composición y añadirles gradualmente detalles hasta que alcances la forma deseada.

Enfoque en los colores

Muchas veces veo un trabajo increíble realizado por creativos al azar que ponen mucha atención en sus composiciones, pero que por alguna razón fallan cuando se trata de los colores. Lo creas o no, una paleta de colores puede hacer o deshacer tu hermosa ilustración, por lo que creo que es importante que te tomes el tiempo y aprendas todo lo que puedas sobre la teoría del color.

Si te sientes flojo, o simplemente no tienes tiempo para empezar a leer libros sobre este tema, entonces busca algunos iconos (algunos buenos), y trata de analizar la forma en que su creador usó los colores para darles vida.

A veces, aprender mirando el ejemplo de otro puede activar los músculos de la memoria mucho más rápido, enseñando a tu mente qué colores funcionan y cuáles no.

Evita usar texto dentro de tus iconos

Esto es algo obvio, ya que la idea detrás de un icono es eliminar la necesidad de las letras escritas, que deben ser reemplazadas por símbolos.

Por supuesto, siempre habrá esas pocas situaciones en las que se necesita usar letras para distinguir un icono de otro. El mejor ejemplo es cuando se necesita armar un paquete de iconos temáticos para un documento, donde se necesita ilustrar un archivo PNG, un JPEG y un SVG. Dado que la forma del documento debe permanecer idéntica, tu mejor enfoque para hacerlo sería añadir una pequeña etiqueta en el centro de cada documento para que el usuario sepa cuál es cuál.

Puedes encontrar una lista más detallada leyendo mis 10 mejores consejos para crear iconos increíbles, que deberían aportar más luz a este tema.

Algunos estilos, como los iconos de líneas, requieren un poco más de atención cuando se trata del proceso de construcción real. Desde la superposición de trayectos hasta el posicionamiento de los trazos, he cubierto todos los diferentes rincones y grietas que hay que tener en cuenta al crear este tipo de iconos.

5. Problemas comunes

A continuación, vamos a repasar rápidamente algunos de los problemas más comunes con los que tendrás que lidiar cuando trabajes en un nuevo icono.

Rotación de la forma

Este es probablemente el más molesto cuando se trata de trabajar en un icono de píxeles perfectos, ya que cada vez que rotas una forma, instantáneamente se desprenderá de la Cuadrícula de Píxeles subyacente. Cuando esto ocurre, los valores de anchura y altura de la forma se convertirán en valores decimales, lo que normalmente se indica en el panel transformar del software.

example of shape snapping off the pixel grid after being rotated

Aunque podrías pensar que esto no es un problema tan grande, en breve descubrirás que en realidad lo es, ya que si necesitas alinear la forma con el borde de otra, simplemente no podrás hacerlo.

Dependiendo de la complejidad de la forma, la mayoría de las veces puedes arreglar el problema seleccionando individualmente sus anclas/nodos, y luego encajándolas de nuevo en su lugar en la intersección de la línea de la cuadrícula más cercana.

Personalmente, tiendo a alejarme de las formas rotadas y sólo las uso cuando realmente tengo que hacerlo, asegurándome de hacer todo lo posible para que colocarlas en la Cuadrícula de Píxeles.

Crear variaciones de tamaño

Así que has conseguido crear el tamaño base de tu icono, pero ¿qué tal si añades múltiples variaciones de tamaño basadas en él?

Bueno, el proceso en sí es bastante simple, ya que la mayoría de las veces todo lo que tienes que hacer es duplicar el tamaño de tu icono actual usando un incremento del 200%.

Por ejemplo, si tienes un icono de 64 x 64 px, puedes crear fácilmente la siguiente variación de tamaño duplicando sus valores de anchura y altura, así 128 x 128 px.

Puedes encontrar más información sobre este proceso en particular leyendo mi artículo Cómo escalar correctamente los iconos en Adobe Illustrator, que presenta conceptos que pueden ser utilizados en la mayoría de las suites de gráficos.

how to scale icons correctly in adobe illustrator — Cómo escalar correctamente los iconos en Adobe Illustrator

6. Cómo exportar tu icono

Hemos seguido los principales pasos necesarios para crear un icono, así que ahora vamos a tomarnos un par de momentos y hablar de lo que tenemos que tener en cuenta a la hora de exportarlo.

Esta última parte del proceso, aunque puede parecer complicada, es en realidad muy simple.

Elije el formato correcto

Lo primero que tienes que hacer es averiguar qué formato de archivo vas a usar para guardar tu diseño final.

Normalmente, al crear los iconos, querrás exportarlos usando un fondo transparente, para que puedan ser usados en una superficie de color. Esta función es compatible con los siguientes formatos de archivo rasterizados:

De todos ellos, normalmente terminarás usando PNG porque ofrece una compatibilidad completa, usando una huella muy pequeña en cuanto a tamaño. Esto significa que básicamente puede ser usado en cualquier lugar, ya sea un sitio web, una aplicación de escritorio, una aplicación móvil, un documento de Word, etc.

El SVG se está convirtiendo en otro formato popular para la web porque es un formato escalable que se puede ajustar sobre la marcha y cambiar el tamaño sin pérdida de calidad.

Guárdalos individualmente

Cuando se trata del proceso en sí, varía de una herramienta a otra. Algunos vienen con herramientas de exportación dedicadas, mientras que otros todavía dependen de métodos más tradicionales.

Independientemente del software que se utilice, el objetivo clave es asegurarse siempre de guardar todos y cada uno de los iconos como su propio archivo individual, dándole un nombre cuando sea posible.

¡Amplía tus habilidades de construcción de iconos!

Ahora que hemos llegado al final del artículo, quiero dejarles con unos cuantos tutoriales cuidadosamente seleccionados que deberían ponerte en marcha en poco tiempo.