Cómo escalar íconos de forma correcta en Adobe Illustrator

Últimamente me he vuelto mucho más técnico y comencé a explorar soluciones a los distintos desafíos que podrías enfrentar en tu viaje creativo. Uno particular que vamos a discutir hoy es el de escalar íconos, que para muchas personas podría resultar complicado.

Toma en consideración que cuando digo íconos, realmente estoy hablando de los creados utilizando un flujo de trabajo pixel-perfect, ya que estos son los más sensibles cuando se trata del proceso de redimensionado.

Ahora, antes de entrar en el proceso, voy a tomar unos minutos para hablar sobre algunas nociones relacionadas con los íconos que deberíamos considerar en la modificación de las dimensiones de nuestro preciosos íconos.

Si estás escalando tus propios íconos o los íconos comprados en Envato Market, el proceso debería ser fácil de comprender y usar después de leer este breve tutorial.

1. Comienza eligiendo un tamaño base para tu ícono

Cuando creas un paquete de íconos, es realmente importante que inicies tomando la decisión correcta cuando se trata de elegir el tamaño base. Se refiere al tamaño más pequeño que crearás y que luego usarás para producir todas las otras variaciones de tamaño en tu paquete.

Más allá de eso, tu tamaño base también actuará como tu cuadrícula personalizada que utilizarás para crear un paquete de íconos coherente, ya que te permitirá crear tus elementos dentro de una superficie delimitada.

Dicho eso, hay un par de cosas que deberías hacer para obtener correctamente el tamaño base.

1.1. Piensa tomando en cuenta futuras acciones

Recomiendo que antes de comenzar a hacer cualquier cosa, deberías tomarte un par de minutos y pensar en cuántos tamaños quieres o necesitas para exponer el paquete de íconos. ¿Crearás dos tamaños, tres, cinco? Siempre trata de pensar en las acciones futuras y planear tus pasos para que el proceso pueda ser tan fluido y previsor como sea posible.

Créeme, es mucho más fácil establecer tus variantes desde el inicio que finalizar tu proyecto y luego darte cuenta que podrías necesitar añadir un tamaño adicional, lo cual como verás posteriormente, podría acarrear algunos problemas.

1.2. Reduce el tamaño

Una vez que tengas una visión clara respecto al número de tamaños que el proyecto necesitará, toma la variante más pequeña de ellos, y usa esa como tu tamaño base. Así por ejemplo si quieres crear tres variantes de tamaño para tu ícono, digamos de 32 x 32 px, 64 x 64 px y 128 x 128 px, querrás establecer tu cuadrícula base usando el tamaño más pequeño, lo cual en este caso es de 32 x 32 px.

Podría parecer ilógico, pero si estás creando usando un flujo de trabajo pixel-perfect, siempre querrás iniciar desde el tamaño más pequeño posible, ya que el proceso de redimensionado está estrechamente conectado con los valores de anchura y altura de los elementos que conforman tu ícono. Ahondaré más sobre esto en las siguientes secciones.

2. Presta atención a los valores numéricos de tu ícono

Los valores de anchura y altura de tus íconos son en verdad importantes ya que están directamente conectados con la manera en que tus íconos se comportan una vez que comienzas a redimensionarlos. Hay un par de cosas que deberías considerar cuando comienzas el proceso de elaboración.

2.1. Siempre usa valores numéricos redondos

Si nunca has prestado atención a los valores de anchura y altura de las secciones que conforman tu ícono, ahora sería el momento adecuado para cambiar eso, ya que los números juegan un papel esencial cuando se trata de crear y redimensionar tus íconos.

La razón por la que es bastante sencillo: los íconos son formas digitales de ilustración que generalmente terminan siendo mostradas en pantallas digitales, las cuales como sabes se basan en pixeles para reproducir cualquier tipo de imágenes. Eso significa que todo lo que creas necesita ocupar una cantidad específica de pixeles de la cuadrícula del monitor, para que la ilustración sea tan nítida como sea posible.

Ahora, no abordaré el proceso de crear una ilustración pixel-perfect, debido a que ya tengo un artículo que explica ese tema, pero hablaré un poco sobre la manera en la que los números se comportan una vez que redimensionas tus íconos, y lo haré dándote un ejemplo básico.

Así que digamos que tenemos una cuadrícula base de 32 x 32 px, en la que creamos un rectángulo de 29.49 x 29.45 px (resaltado en rojo) simplemente arrastrando usando para ello la herramienta Rectángulo, que sería la primera sección de un teórico ícono. Como algunos de ustedes probablemente ya supusieron, la misma forma no está ocupando completamente los pixeles de la cuadrícula subyacente, lo cual significa que si fuéramos a redimensionarla, las cosas se saldrían de control.

¿No me crees? Bueno, seleccionemos la forma y redimensionémosla usando la herramienta Escala duplicando su superficie utilizando un valor de incremento de 200%.

Como puedes ver, la forma resultante tiene ahora una Anchura de 58.98 x 58.9 px lo que significa que Illustrator tiene que aplicar un efecto de suavizado para añadir canales alfa a los pixeles que no están siendo completamente ocupados por la superficie del rectángulo, lo cual al final se le quitarán al enfoque de la forma.

Si no estás creando pensando en la perfección de los pixeles, ello podría no representar un problema, pero para todos los que somos adictos a los pixeles es algo que tiene que arreglarse, ya que solo generará nuevos problemas a lo largo del proceso.

La solución es realmente sencilla: solo tienes que seleccionar la forma y luego obligarla a ajustarse correctamente a la cuadrícula de pixeles al habilitar la opción Alinear con cuadrícula de pixeles ubicada en el panel Transformar.

Luego solo tienes que asegurarte de que cada pequeña siguiente sección del ícono que vas a crear utilice valores numéricos redondos. Para ello, podrías querer usar la opción Ajustar a cuadrícula encontrada en el menú Ver, en combinación con el modo Previsualización de pixeles, que deberá darte control total sobre el tamaño de tus objetos.

2.2. Usa números pares tan frecuentemente como puedas

Este principio está estrechamente relacionado con la cuadrícula del tamaño base del ícono que elijas para trabajar. Si recuerdas, un hace un momento te dije que siempre deberías tratar de definir el tamaño más pequeño que necesitarás para tus íconos, y elaborar las variantes más grandes usando ese tamaño como un bloque de construcción.

Al hacer eso siempre asegurarás que tus íconos estén "correctos anatómicamente", ya que tu ilustración se escalará correctamente sin estar sujeta a deformaciones.

Ahora, como sabes, los números pares e impares se escalan correctamente ya que cuando se duplican, los números impares siempre se vuelven pares. El problema de usar valores de número impar surge cuando debes poner tus recursos en una escala menor, ya que reducirlos a la mitad el resultado siempre será un valor decimal, lo que inevitablemente romperá tu diseño.

Si has realizado tu investigación y has elegido la cuadrícula base correcta, esto no debería representar un problema, pero si por alguna razón necesitas añadir una variante más pequeña, entonces tendrás que ponerla en una escala menor y luego ajustar las diferentes secciones como sea necesario.

3. El proceso de redimensionado

Así que, hasta este punto hemos hablado sobre un par de nociones de preescalar que deberías tener en mente cada vez que inicies la creación de variaciones de tamaño para tus íconos.

En esta sección voy a guiarte por el proceso de redimensionar tus íconos correctamente utilizando la herramienta Escala, pero primero quiero hablar brevemente sobre un método en particular que es ampliamente usado pero en mi opinión debería evitarse.

3.1. Cómo NO redimensionar tus íconos usando el método seleccionar y arrastrar

Últimamente me he dado cuenta de que muchas personas, incluyendo algunos de mis compañeros, tienden a redimensionar sus íconos usando el método seleccionar y arrastrar.

Permíteme mantener las cosas sencillas y claras: nunca redimensiones un ícono seleccionando y luego arrastrando uno de sus lados o vértices. Esto siempre romperá tu ícono si lo has creado usando la base pixel-perfect, ya que tus formas se ajustarán a la cuadrícula de pixeles debido al hecho de que sus valores numéricos terminarán siendo decimales, los cuales no podrán ocupar correctamente la cuadrícula subyacente.

La razón es bastante simple: cuando arrastras, Illustrator tiene que expandir la superficie de tu ilustración, añadiendo pixeles al total de Anchura y Altura de tus formas, trazados e incluso los espacios vacíos. Pero no siempre puede hacer esto correctamente, ya que algunos objetos podrían escalarse perfectamente pero otros no debido al proceso de estirar y añadir pixeles.

Ya que me gusta enseñar dando ejemplos, digamos que tenemos un pequeño ícono que creamos usando una cuadrícula base de 48 x 48 px, con un relleno en todos los lados de 2 px. El ícono fue elaborado usando un flujo de trabajo pixel-perfect, teniendo todas y cada una de las formas perfectamente ajustadas a la cuadrícula de pixeles subyacente, pero usa valores numéricos pares e impares en todos los elementos que lo componen.

Ahora, habilitemos el modo Previsualización de pixeles (Ver > Previsualización de pixeles o la combinación de teclas Alt-Control-Y) y seleccionemos la esquina inferior derecha del cuadro delimitador del ícono, y la arrastramos diagonalmente hacia el exterior 2 px.

Como puedes ver, algunas de las formas (las líneas de texto, el marco de la ventana interior, la línea delimitadora inferior de la ventana, etc.) han logrado escalarse sin salirse de la cuadrícula, mientras que otros no (los botones circulares de la ventana, el contorno del ícono, la barra de desplazamiento, etc.).

Eso es porque durante el proceso de arrastre, Illustrator trató de añadir ese valor de 2 px a cada uno de los objetos seleccionados, pero debido a la organización y el espacio entre cada forma, no logró hacerlo adecuadamente. Ello dio como resultado formas que se incrementaron en anchura y altura, otras únicamente en la anchura (las líneas de texto) mientras que otras no se incrementaron en absoluto (la línea vertical debajo del delimitador horizontal la parte inferior).

Ahora lo importante a tener en cuenta es que pasamos el proceso de redimensionado con el modo de Previsualización de pixeles habilitado, lo cual nos permitió ver y aplicar un incremento de valor numérico preciso. Si fuéramos a repetir el mismo proceso pero esta vez en el modo de previsualización normal, como puedes ver los resultados serían catastróficos.

Ya que en este punto la explicación debería de haber sido muy clara, continuemos y echemos un vistazo a la manera correcta de redimensionar un ícono usando la poderosa herramienta Escala.

3.2. Cómo escalar adecuadamente un ícono usando el método de la herramienta Escala

Así que redimensiona tus íconos que quieres, joven Jedi. Bueno después de que termines de leer esta breve sección, serás todo un maestro en el tema.

Entendiendo la herramienta

Tengo que ser honesto: cuando comencé a elaborar íconos, básicamente los hacía sin ningún método, ya que no sabía mucho de los diferentes aspectos del proceso, especialmente la parte del redimensionado. Siempre hice un buen trabajo en la creación del lote del primer tamaño, pero cuando tuve que hacer el redimensionado, digamos que las cosas comenzaron a volverse frustrantes ya que la mayoría de ellas se desconfiguraron

Bueno, como probablemente supusiste, eso significó que tenía que arreglarlas manualmente, lo cual al final condujo a un proceso que consumió mucho tiempo, y que a la postre me desgastó. Por suerte me gusta aprender de mis errores, así que comencé a explorar y no pasó mucho tiempo hasta que encontré que la solución estaba justo frente a mí: la todopoderosa herramienta Escala.

Si alguna vez has utilizado la herramienta, no te preocupes ya que cuando se trata de usar la herramienta Escala, las cosas son muy sencillas.

Primero tenemos que seleccionar el objeto o grupo de objetos que queremos redimensionar, y luego hacer clic derecho e ir a Transformar > Escalar.

Illustrator hará aparecer una pequeña ventana con diversas opciones.

Como puedes ver del ejemplo anterior, tenemos dos métodos diferentes para escalar.

El  primero es Uniforme, el cual como su nombre lo indica, escalará tus formas tanto Horizontalmente como Verticalmente, lo que significa que añadirá pixeles a la Anchura y Altura de tu selección.

El segundo es no-uniforme, lo que te permite escalar individualmente la Anchura y la Altura de tu objeto usando diferentes valores o incluso escalar solo uno de los dos. Ahora, no usaría esta particular opción cuando redimensiono un ícono, pero podría demostrar ser útil en situaciones donde quieres ajustar rápidamente la Anchura o la Altura de un objeto usando porcentajes simples.

Así que hemos hablado sobre las dos diferentes opciones disponibles dentro de la herramienta, pero la magia real ocurre solo cuando sabes qué porcentajes aplicar a tus objetos.

Eligiendo los valores correctos del porcentaje

Como ya lo mencioné, la herramienta Escala es un aliado realmente poderoso pero únicamente cuando sabes exactamente cómo usarla, ya que no todos los valores del porcentaje darán como resultado un ícono de apariencia nítida. Créeme, aprendí esto de la manera difícil.

La razón para eso tiene que ver con los valores de Anchura y Altura de los elementos que conforman el ícono. Bueno, otra vez regresamos al mismo lugar. Como lo he destacado, los números impares se comportan de manera diferente a los pares cuando se multiplican por dos. Sucede lo mismo cuando los multiplicas con valores decimales como 1.5.

Esto es importante porque cuando trabajas con el redimensionado, tendremos que elegir los porcentajes correctos dependiendo de los valores que tienen nuestras formas, ya que los porcentajes de hecho son multiplicadores. ¿No me crees? Bueno, pensemos un poco sobre la manera en que Illustrator los utiliza desde un punto de vista matemático.

Pues como todos los saben, 100% es 100 dividido entre 100 lo cual nos da 1. Illustrator utiliza este valor y lo multiplica con los valores de Anchura y Altura de cada forma seleccionada. Ahora ya que si multiplicas 1 por cualquier valor (a excepción del 0) obtendrás el mismo número, este no es el mejor ejemplo.

Pero, si vemos un valor como 200%, lo cual es 200 dividido entre 100, tenemos un multiplicador 2x, lo cual duplicará el número de pixeles de cualquier objeto seleccionado.

Por otro lado, si fuéramos a redimensionar un ícono usando un valor de 50%, lo cual es 50 dividido entre 100, así que un multiplicador 0.5x, que reducirá a la mitad las dimensiones de nuestro objeto seleccionado.

Ahora el truco es saber qué multiplicadores usar cuando se trabaja con íconos que tienen únicamente valores numéricos pares y los que tienen pares e impares.

Si tenemos un ícono que fue elaborado usando únicamente números pares, entonces puedes aplicar cualquier porcentaje mientras sean incrementos de 100% del valor 100% predeterminado.  También los multiplicadores como 200%, 300%, 400%, 500%, 600%... tú entiendes. Por eso los números pares (2,4,6,8) siempre convierten estos incrementos del multiplicador en valores pares (2 x 2=4, 2 x 3=6, 2 x 4=8, 2 x 5= 10, 2 x 6=12, etc.).

También puedes usar multiplicadores como 150%, 250%, 350%, 450% etc., pero deberías limitar su uso a únicamente una vez, ya que de otra manera estos valores convertirán un número par en un impar.

Para entender por qué, digamos que tenemos un cuadrado de 20 x 20 px.

Queremos escalarlo usando un multiplicador de 150%.

Si lo usamos una vez, obtendremos una forma que es de 30 x 30 px.

Úsalo dos veces y luego finalizarás con uno de 45 x 45 px.

Si fuéramos a usar en cambio un multiplicador de 300%, entonces la forma resultante sería de 60 x 60 px.

Si te preguntas por qué, bueno es porque 20 x 1.5 = 30 lo cual multiplicado otra vez por 150% (1.5) es 45. Mientras que 150% + 150% = 300%, los resultados de usar el mismo multiplicador dos veces comparado con su valor añadido son bastante diferentes, ya que 20 x 3 = 60.

Otra cosa a tener en cuenta es que algunos números pares convierten los impares en pares si aplicas los multiplicadores solo una vez, por ejemplo 2 x 1.5 =3; 6 x 1.5 =9; 2 x 2.5 =5; 6 x 2.5 = 15; etc. mientras que 4 x 1.5 = 6; 8 x 1.5= 12; 4 x 2.5 = 10; 8 x 2.5= 20; etc.

Dependiendo de la complejidad de tus íconos, podrías querer intentar esta suerte de multiplicadores, pero siempre deberías revisar dos veces si las cosas se redimensionaron como querías.

Ahora, cuando se trata de íconos que tienen valores de Anchura y Altura pares e impares, siempre deberías usar incrementos de 200%, esto es valores como 200%, 400%, 600%, 800%, etc., ya que de esta manera tus íconos se redimensionarán exactamente cómo quieres.

Nunca uses el multiplicador de 50%, ya que esto romperá cualquier ícono pixel-perfect, porque reducir números impares a la mitad resultará en valores decimales, lo cual no se ajustará a la cuadrícula de pixeles.

Ahora que hemos visto qué multiplicadores funcionan mejor dependiendo de cada escenario, veamos un breve ejemplo y veamos el proceso de redimensionar un ícono de principio a fin.

El proceso

Así que tenemos el mismo ícono que hemos usado como ejemplo hace unos minutos, lo cual como sabes tiene valores tanto impares como pares en todas las formas que lo conforman. Ello significa que únicamente podemos usar incrementos de 200% cuando decides el valor del multiplicador, pero eso es totalmente correcto ya que para este ejemplo vamos a querer duplicar el tamaño de nuestro recurso de 48 x 48 px hasta 96 x 96 px.

Para hacer eso, simplemente voy a seleccionar mi ícono y luego hacer clic derecho e ir a Transformar > Escalar. En cuestión de segundos, aparece la ventana de la herramienta Escala donde elijo Uniforme e introduzco 200 en el campo de valor, el cual por defecto está establecido en 100%.

Tan pronto como hago clic en el botón OK, Illustrator hará cálculos matemáticos y redimensionará mi ícono duplicando su número de pixeles, manteniendo todo perfectamente ajustado a la Cuadrícula de pixeles.

Es así de fácil.

Consejo rápido: aunque Illustrator generalmente tiene las opciones marcadas de  Escalar vértices y Cambiar escala de trazos y efectos, siempre deberías volver a verificar para asegurarte de que las cosas marchan bien.

3.3. Limitaciones de usar el método de la herramienta Escala

Como probablemente ya lo has visto, la herramienta Escala es una opción que realmente vale la pena cuando se trata de redimensionar tus íconos. Si sabes cómo y cuándo usar tus multiplicadores, deberías poder crear variaciones de tamaño para tu paquete de íconos en muy poco tiempo.

Pero, existe una pequeña limitación cuando se trata de crear esas variantes de tamaño de la que deberías percatarte, especialmente si quieres crear íconos con incrementos de tamaño pequeños (por ejemplo 16 x 16 px: 24 x 24 px; 32 x 32 px; 48 x 48 px; 64 x 64 px; 72 x 72 px; 96 x 96 px; 128 x 128 px; etc.)

El punto es, para obtener esa pequeña variación en el tamaño (por ejemplo 24 x 24 px; 48 x 48 px; 72 x 72 px; 96 x 96 px), tendrás que usar el multiplicador 150% (ya que 16 x 1.5 = 24; 32 x 1.5 = 48; 48 x 1.5 = 72; 64 x 1.5 = 96; etc.), lo cual como sabes podría causar problemas, especialmente cuando tienes valores numéricos impares en todas las formas que conforman tu ícono.

Eso significa que probablemente tendrás que realizar ajustes en algunas formas para tener consistencia en los íconos. Eso podría no ser demasiado difícil cuando se trabaja con un pequeño paquete de íconos pero si estás trabajando en algo más grande entonces las dificultades aumentarán.

Una buena manera de hacer esto sería crear el primer incremento de tamaño de ícono de 150% (por ejemplo, 24 x 24 px), ajústalo donde sea necesario, y luego usa incrementos de 200% para obtener el resto cuando puedas (48 x 48 px; 96 x 96 px).

Dependiendo de las necesidades de tu proyecto, podrías necesitar experimentar con tus íconos y buscar la solución correcta para ti, pero ¿no es lo que hace primero un diseñador, resolver problemas?

Conclusión

Ahí lo tienes: una presentación exhaustiva de cómo podrías redimensionar un ícono usando un método muy sencillo. Como siempre, trata de experimentar con la herramienta después de que hayas leído este tutorial, y estoy seguro de que sabrás cómo manejarla prolijamente en muy poco tiempo.