Diseño gráfico: Crea iconos con precisión

By Freepik Academy 2 weeks ago

¡Hola! El tutorial de hoy es un poco distinto de los demás, incluso especial, ya que vamos a enfrentarnos a un tema que ha sido motivo de frustración de muchas personas que trabajan con iconos día a día.

Por si el título no era lo suficientemente explícito, digamos que, a lo largo de este rato, voy a tratar de ser lo más técnico posible, y te voy a enseñar lo que necesitas saber para poder acostumbrarte a trabajar píxel a píxel. De esta manera, podrás mejorar habilidades cuando quieras crear iconos con el más mínimo detalle.

Dicho esto, siéntate y abróchate el cinturón, que la cosa se va a poner movidita.

Entender el concepto de trabajar al píxel

Antes de meternos en el meollo de la cuestión, quiero hablar de unas cuantas nociones que tendrás que tener en cuenta para poder comprender mejor por qué deberías intentar acostumbrarte a trabajar píxel a píxel.

El píxel

Voy a comenzar con la noción más básica, la del píxel. Como probablemente ya sabrás, cada pantalla, ya sea la de un monitor o la de un teléfono móvil, se compone de un número inmenso de puntos muy pequeñitos, llamados píxeles. Son el elemento reconocible más pequeño, y forman una imagen todos juntos.

Desde un punto de vista técnico, el píxel es la unidad que mide la resolución, la cual se suele representar en una medida de Anchura Altura (por ejemplo, 1920×1080 px). Esto funciona de una manera muy sencilla: cuanto mayor sea la resolución, mayor es el número de píxeles empleados para mostrar las imágenes y, por consiguiente, más nítidas serán. Cuanto menor sea la resolución, pues lo contrario.

Actualmente, el concepto de resolución es algo ambiguo, ya que a veces se usa para describir el tamaño (y, por lo tanto, el nivel de detalle) de una imagen y, otras veces, la cantidad máxima que puede mostrar una pantalla. Aun así, no te preocupes mucho. Al menos, no por ahora.

En definitiva, el píxel es algo insignificante por sí mismo, ya que, sinceramente, va a ser muy difícil que veas en tu vida una imagen compuesta de un único punto. Bueno, quizás, pero ¿para qué querrías eso? El píxel se convierte en un medio más interesante cuando se usa en una cuadrícula de píxeles, algo de lo que hablaré a continuación.

La cuadrícula de píxeles

La cuadrícula de píxeles es lo que un monitor emplea en realidad para poder mostrar una imagen, y se compone de un gran número de píxeles amontonados unos junto a otros, tanto vertical como horizontalmente.

0---example-of-an-image-pixel-grid

Al igual que con la resolución, la cuadrícula de píxeles tiene una naturaleza doble, ya que puede usarse para describir la resolución de un dispositivo (la cantidad máxima) o la resolución de la propia imagen (el tamaño de la imagen).

Funciona de una manera muy sencilla: cuando creas una imagen, ya sea con vectores o con mapa de bits, ocupa un número específico de píxeles de la cuadrícula, que puede ser independiente de la cuadrícula de píxeles finita del propio monitor. Esto quiere decir que no tienes por qué limitar tus diseños a las especificaciones (resolución máxima) del dispositivo, pero, por otra parte, cuando quieras que se muestren, sufrirán algo de remuestreo para que quepan en esa pantalla.

Illustrator te ofrece la posibilidad de previsualizar y hacer zoom en la cuadrícula de píxeles, pero ya daré más detalles luego.

El concepto de trabajar al píxel

Ahora que he hablado brevemente sobre algunas de las nociones clave sobre cómo las imágenes se crean y se muestran en pantalla, es el momento de aclarar el concepto de trabajar al píxel y ver en qué consiste exactamente.

Pero, antes, retrocedamos en el tiempo hasta una época en la que la tecnología era precaria y la resolución de 4K era impensable. Hablo de los 80, cuando nació la Xerox 8010 Star, junto con la primera interfaz de usuario.

Este periodo de tiempo es importante, ya que fue la primera vez en la que los humanos nos replanteamos la manera en la que comunicarse con las máquinas, y acabamos creando unos símbolos visuales lo suficientemente sólidos para romper las barreras comunicacionales entre humanos y máquinas.

Estos símbolos los crearon David Smith y Norm Cox, y fueron los primeros iconos de todos, los cuales aún siguen siendo la base del diseño de iconos en la actualidad.

Por supuesto, aquellos iconos tenían un aspecto mucho más simple que los de ahora, ya que el suavizado de bordes espacial aún no se había desarrollado, lo que quiere decir que los monitores no podían mostrar líneas ni vértices definidos usando canales alfa.

Esto obligó a Smith y a Cox a tener que lidiar con las limitaciones de aquel entonces, las cuales superaron confiando ciegamente en la cuadrícula de píxeles.

Lo hicieron de una forma no muy complicada, ya que crearon cada icono usando una cuadrícula sobre la que seleccionaban y pintaban de negro las formas píxel a píxel (aún no había monitores en color).

A estas alturas, ya verás la conexión entre esta historia y el tema que nos concierne, ya que trabajar al píxel refleja la decisión de los diseñadores de seguir esta técnica antigua de la cuadrícula de píxeles para crear la forma y composición de un icono ajustándolo en la cuadrícula.

Como resultado, los iconos tienen un aspecto muy nítido, pues los elementos que los componen usan valores numéricos precisos, los cuales se posicionan cuidadosamente para ocupar la cuadrícula de píxeles.

Preparar Illustrator para trabajar al píxel

Ahora que ya tienes una mejor visión del concepto, vamos a ver cómo podemos retocar la configuración de Illustrator para sacarle partido al programa a la hora de crear con el máximo detalle.

Hay tres ajustes principales que tendremos que configurar:

  • Los incrementos de teclado
  • Las unidades
  • La cuadrícula

Ajustar los incrementos de teclado

Comencemos con el primer ajuste de la lista, el cual controla cómo se comportan las formas cuando las mueves usando las teclas de dirección.

Ve a Edición > Preferencias > Generales (o pulsa Control + K). Lo primero de todo que saldrá en el menú es la opción de cambiar el valor de los incrementos de teclado.

1---adjusting-the-keyboard-increments

En las versiones más recientes de Illustrator, este ajuste viene por defecto con un valor de 1 px, pero, si observas un valor distinto, cámbialo.

Si estás acostumbrado a mover las formas usando las teclas de dirección, este ajuste te vendrá de perlas, ya que podrás hacer movimientos superprecisos en esas situaciones en las que el ratón no es la herramienta más rápida.

Consejo: si los incrementos se muestran en puntos en vez de en píxeles, no te preocupes. Lo solucionaremos en el siguiente paso.

Ajustar las unidades

Ahora que sabes que estás usando el menor incremento de teclado posible, puedes continuar con el segundo ajuste, el cual controla las unidades de medida.

Como ves, hay tres opciones distintas, que puedes configurar por separado:

  • Unidades generales
  • Unidades de los trazos
  • Unidades de los tipos (tipografía)

Para cada opción, puedes elegir entre seis unidades de medida distintas (puntos, picas, pulgadas, milímetros, centímetros y píxeles), pero solo nos interesa una: los píxeles, evidentemente.

Quizás te preguntes por qué. La mayoría de las veces, hacemos que los iconos que usamos se muestren en pantallas digitales, las cuales funcionan con píxeles. Es de lógica.

2---adjusting-the-units

Unidades generales

La primera opción es la de las unidades generales. Como su nombre indica, controla las unidades de medida de la mayor parte de las cosas que hay en Illustrator, desde las formas hasta las reglas. En Illustrator, por defecto, vienen en puntos, pero cámbialas a píxeles.

Unidades de los trazos

La segunda opción es la de las unidades de los trazos. Define las unidades de medida de todos los trazos. Elige píxeles, ya que los ajustes de las unidades generales y las de los trazos tienen que coincidir.

Unidades de los tipos (tipografía)

La última opción es la de las unidades de la tipografía. No deberías elegir píxeles, ya que los tipos se crearon ajenos a los medios digitales, y dependen totalmente de los puntos, así que dejaremos esto como está.

Hay quienes intentan elegir píxeles, pero no es buena idea. Tan solo complicará más las cosas a la hora de medir, ya que 12 píxeles no son lo mismo que 12 puntos.

Una vez hayas terminado de ajustar las unidades, pasemos a la cuadrícula.

Configurar una cuadrícula personalizada

Antes de empezar a toquetear los ajustes de la cuadrícula, hay que comprender antes qué es.

Según el Diccionario online Merriam-Webster, una cuadrícula es ‘un conjunto de los cuadrados que resultan de cortarse perpendicularmente dos series de rectas paralelas’.

La definición no explica realmente el funcionamiento, al menos desde el punto de vista de un diseñador.

Para mí, la cuadrícula es la columna vertebral de mi composición, y me permite establecer el orden y la jerarquía del diseño definiendo espacios precisos sobre una estructura bidimensional, que está formada por muchas líneas rectas que se cortan perpendicularmente.

Bueno, así la veo yo, como una especie de herramienta precisa que con la que puedo encajar mis diseños en la cuadrícula de píxeles.

Me explayaré un poco más después, pero, por ahora, configuremos la cuadrícula.

Asumiendo que aún tienes abierta la ventana de Preferencias, ve a la sección de Guías y cuadrícula. Veamos algo más detenidamente las opciones que se nos presentan.

3---setting-up-a-custom-grid

La opción “Línea de cuadrícula cada”

Una línea de cuadrícula es una línea (vertical u horizontal) que Illustrator dibuja para poder crear la cuadrícula. Esta opción controla la distancia a la que el programa dibuja dichas líneas.

Por defecto, Illustrator viene con un valor de línea de cuadrícula cada 1000 px; es decir, cada 1000 px dibuja una línea vertical y otra horizontal. Como queremos la precisión absoluta, vamos a asignarle el menor valor posible: 1 px.

La opción “Subdivisiones”

Si la opción anterior controlaba la distancia a la que Illustrator añadía las líneas, las subdivisiones controlan el número de secciones que quedan entre esas líneas. Por defecto, viene con un valor de 4, pero es mejor asignar un valor de 1.

4---setting-up-a-custom-precise-grid

Con estos ajustes ya deberías tener una cuadrícula muy precisa con una proporción de 1 a 1 respecto de la cuadrícula de píxeles. Esto es importante porque podremos usar la opción Ajustar a cuadrícula, con la que nos aseguraremos de que las formas se ajustan a la cuadrícula, que ya tiene la escala que queremos, para que coincida perfectamente con la cuadrícula de píxeles.

Llegados a este punto, ya hemos terminado con los ajustes de Illustrator, así que ya podemos hablar un poco sobre el flujo de trabajo, que es donde ocurre toda la magia.

El flujo de trabajo

Hasta ahora, hemos estado toqueteando los ajustes de Illustrator para asegurarnos de que tenemos todo en condiciones. A partir de este momento, vamos a entrar en materia, y lo primero que haremos será crear un documento a medida.

Crear un documento a medida

Cuando comienzas a trabajar al píxel, el proceso de crear un nuevo documento es tan importante como cualquier otro paso, ya que hay un par de cosas que debes configurar para que todo vaya bien.

Dicho esto, repasemos los ajustes principales que nos interesan.

El perfil del documento

Antes de nada, debes tener en cuenta el perfil que vas a asignarle al documento. Como ya sabrás, Illustrator sirve para trabajar con proyectos destinados tanto para web como para imprimir, y te da la opción de configurar automáticamente el documento según el perfil que elijas.

Puesto que, en la mayoría de las ocasiones, los iconos que vas a crear serán para uso en web, deberías asegurarte de que el perfil esté configurado para tal fin.

5---setting-up-a-new-document---profile-settings

Consejo: una vez que cambies cualquiera de los otros ajustes disponibles (por ejemplo, la resolución, la orientación, etc.), Illustrator indicará que el perfil es [A medida], pero seguirá manteniendo las propiedades del perfil para web.

La anchura y la altura del documento

Cuando ya hayas elegido el perfil adecuado, asegúrate de que la anchura y la altura del documento tengan valores con números enteros, como, por ejemplo, 800×600 px

5---setting-up-a-new-document---size-settings

… y no con números con decimales, como, por ejemplo, 800,65×600,49 px.

5---setting-up-a-new-document---incorrect-size-example

De lo contrario, la mesa de trabajo no podrá ajustarse correctamente a la cuadrícula de píxeles y habrá imperfecciones.

5---setting-up-a-new-document---artboard-not-snapping-to-the-pixel-grid-example

Este suele ser el motivo por el que, al añadir una forma al fondo del diseño, resulta imposible alinearla al centro de la mesa de trabajo, ya que la propia mesa no está ocupando píxeles completos y, por lo tanto, acaba dejando un pequeño espacio blanco libre.

5---setting-up-a-new-document---background-can’t-align-to-the-artboard

Una solución rápida es usar la herramienta Mesa de trabajo (Mayús + O) para cambiar los valores de la anchura y la altura y asignarles números enteros, y luego arrastrarla con el ratón para que vuelva a ajustarse a la cuadrícula de píxeles.

Las unidades

Esta opción suele indicarse en píxeles cuando configuras el perfil, pero siempre viene bien asegurarse, sobre todo si has estado trabajando en otros proyectos destinados tanto para web como para imprimir, ya que en ellos habrás necesitado otros perfiles distintos.

6---setting-up-a-new-document---the-units

La opción “Alinear nuevos objetos con cuadrícula de píxeles”

Puede que te hayas dado cuenta de que hay una pestaña con opciones avanzadas que no está desplegada (o tal vez sí).

En caso de que no lo esté, haz clic en la pequeña flecha que apunta hacia la derecha para que Illustrator te muestre unas cuantas opciones nuevas.

Nos interesa una en particular, la de “Alinear nuevos objetos con cuadrícula de píxeles”, ya que ordena a cada nuevo objeto creado que alinee sus bordes con la cuadrícula de píxeles, con lo que todo tendrá un aspecto nítido.

Al igual que con las unidades, esta opción debería estar ya activada si elegiste el perfil Web, pero asegúrate, por si acaso.

7---setting-up-a-new-document---align-new-objects-to-pixel-grid

Usar valores con números enteros

Trabajar al píxel consiste en poder crear formas que ocupen píxeles completos dentro de la cuadrícula de píxeles. Por lo general, los diseñadores tendemos a ignorar los valores de anchura altura de las formas, ya que, en la mayor parte de los casos, las creamos usando el viejo método de hacer clic y arrastrar.

Lo que ocurre es que Illustrator crea esos objetos usando valores con decimales, lo que imposibilita que puedan ocupar píxeles completos de la cuadrícula de píxeles.

8---example-of-using-the-transform-panel-to-identify-comma-delimited-values

Para compensarlo, el programa aplica un efecto de suavizado de bordes para rellenar los píxeles que no están ocupados al completo, lo que hace que la forma se vea deficiente cuando se hace zoom en ella.

9---example-of-misaligned-shape

El secreto, o al menos el mío, es el de vigilar los valores de anchura altura en el panel Transformar y tratar de crear formas que ocupen por completo los píxeles.

Usar la opción “Alinear con cuadrícula de píxeles” del panel Transformar

Tal vez te hayas dado cuenta de que mi panel tiene un par de opciones extra, una de las cuales es la de Alinear con cuadrícula de píxeles.

Como su nombre indica, esta función te ayuda a ajustar cualquier objeto creado a la cuadrícula de píxeles redondeando los valores numéricos con decimales de anchura altura a números enteros.

Para usar esta función, selecciona la forma y pulsa sobre ella para que esté activa.

10---using-the-align-to-pixel-grid-option-to-snap-the-objects-to-the-pixel-grid

Funciona de manera algo particular, ya que Illustrator aproxima los valores tomando en cuenta la posición de la forma en relación con la propia cuadrícula de píxeles.

Si hay píxeles desalineados en cada lado (observa las imágenes anteriores), redondeará hacia abajo los valores de anchura altura a los números enteros más próximos, que en este caso son de 16 14 px, con lo cual la forma encogerá hacia el centro.

Si la forma solo tiene píxeles desalineados en dos de los lados, redondeará hacia arriba los valores de anchura altura estirando la superficie de la forma hasta que se ajuste a la cuadrícula de píxeles, que en este caso serán de 17 15 px.

10---using-the-align-to-pixel-grid-option-on-a-partially-misaligned-shape

Consejo: para poder ver todas las opciones del panel Transformar, tienes que hacer clic en la flechita que se encuentra en la parte superior derecha y seleccionar Mostrar opciones.

11---enabling-the-options-for-the-transform-panel

El modo de previsualización de píxeles

El modo de previsualización de píxeles es una de las herramientas más importantes, si no la que más, a la hora de tratar con iconos al más mínimo detalle, ya que te permite ver la estructura sobre la que estás trabajando en tu diseño.

Cuando actives este modo, podrás ver con facilidad qué formas están perfectamente alineadas con la cuadrícula de píxeles y qué formas necesitan ajustarse para que lo estén.

13---using-the-pixel-preview-mode-to-see-the-underlying-pixel-grid

Por defecto, Illustrator lo tiene desactivado, pero puedes volverlo a activar yendo al menú Ver y haciendo clic en Previsualización de píxeles, o bien usando el atajo de teclado Alt + Ctrl + Y.

12---enabling-the-pixel-preview-mode

Consejo rápido: en cuanto actives este modo, Illustrator te indicará que está activado añadiendo una pequeña marca al lado de él en el menú Ver y una breve descripción en la pestaña del nombre de tu documento.

La previsualización de píxeles de por sí no es tan esencial como parece; es tan solo un modo de visualización que te muestra la estructura de píxeles que hay debajo de tu diseño.

La magia ocurre cuando la usas junto con la opción Ajustar al píxel, que veremos a continuación.

La opción “Ajustar al píxel”

Si la previsualización de píxeles te permite ver tu diseño desde una perspectiva a nivel de píxeles, la opción Ajustar al píxel te garantiza que todas las formas que crees se ajustarán perfectamente a la cuadrícula de píxeles.

Por defecto, Illustrator la tiene desactivada, pero puedes volverla a activar yendo al menú Ver y haciendo clic en Ajustar al píxel, o bien usando el atajo Mayús + Ctrl + *.

14---enabling-the-snap-to-pixel-option

La ventaja de usar esta función es que puedes crear las formas que componen el icono haciendo clic y arrastrando, ya que Illustrator se asegurará de que estén perfectamente alineadas con la cuadrícula de píxeles, al contrario que con el modo de previsualización normal, en el cual las formas que crees usando el mismo método tendrán valores con decimales, y ello provocará que las formas se desalineen.

También puedes ajustar la anchura y la altura de la mayoría de las formas usando el mismo método de hacer clic y arrastrar, y seguirán ajustándose perfectamente a la cuadrícula de píxeles, lo que para mí es una funcionalidad impresionante, ya que yo suelo trastear constantemente con los iconos hasta que estoy conforme.

Si ves que el modo de previsualización de píxeles interfiere con tu forma de trabajar, puedes desactivarlo y desmarcar la casilla de Ajustar a cuadrícula.

La opción “Ajustar a cuadrícula”

Si no te llevas muy bien con el modo de previsualización de píxeles, puedes confiar en la cuadrícula personalizada que hemos configurado hace unos cuantos pasos. Es tan precisa que se comportará exactamente igual que la cuadrícula de píxeles, siempre y cuando le indiques a Illustrator que ajuste las formas a ella.

Quizás te hayas dado cuenta de que la opción Ajustar al píxel se convierte en Ajustar a cuadrícula cuando desactivas el modo de previsualización de píxeles.

15---enabling-the-snap-to-grid-option

Por defecto, no está activada, pero, en cuanto lo hagas, se comportará igual que la opción de Ajustar al píxel, lo que permitirá que tu dibujo se alinee perfectamente con la cuadrícula de píxeles.

Recuerda que esto es posible porque configuramos la cuadrícula con los valores mínimos posibles. Si hubiéramos usado la cuadrícula por defecto que ofrece Illustrator, las formas se ajustarían de una manera totalmente distinta a aquella de la opción Ajustar al píxel, ya que las líneas de cuadrícula y las subdivisiones las harían comportarse de tal manera.

Conclusión

Ya tienes toda la información que necesitas para poder asegurarte de que los iconos que crees tendrán todo el detalle posible. Aunque los ejemplos versaban sobre iconos, puedes usar esta información para crear cualquier otro tipo de imagen, desde ilustraciones a proyectos de interfaz de usuario, ya que las herramientas y los principios son los mismos.

Espero que te haya servido este tutorial. Si tienes alguna pregunta, escríbela en la sección de comentarios y responderé lo más pronto posible.

By Freepik Academy

Compartir:

Comments