Cómo Crear Obras de Arte de Píxeles Perfectos Usando Adobe Illustrator

Como principiante, la creación de obras de arte digitales destinadas a uso web a veces puede ser un poco frustrante, especialmente cuando se pone mucho tiempo en una pieza (ya sea una ilustración, o tal vez un icono), y de repente te das cuenta de que por alguna razón el resultado final no salió del todo limpio.

Esto es algo que todos nosotros tratamos cuando empezamos a usar Adobe Illustrator, por lo que decidí crear este breve artículo para ayudarte si estás buscando soluciones a este problema.

1. Vector vs. Bitmap

Antes de comenzar, me gustaría arrojar algo de luz sobre las diferentes normas que usted, yo y todos los demás que trabajamos como diseñador debe ser consciente de cuando asumimos esta línea de trabajo.

Hay dos tipos principales de imágenes que uno encontrará mientras trabaja como un pensador creativo. Uno es Vector y el otro es Bitmap.

Una imagen vectorial está compuesta por uno o varios objetos formados por un número variable de anclajes y trazos que son prácticamente escalables en cualquier grado que el usuario desee necesite, un proceso que se produce sin pérdida de calidad.

Una imagen de mapa de bits, por otro lado, está compuesta por una serie de píxeles individuales fijos alineados a una cuadrícula, lo que significa que una vez que una imagen es tomada o creada con una determinada resolución, perderá calidad si su tamaño se modifica de alguna manera (Ya sea aumentada o reducida). Esto ocurre cuando la cantidad de información de píxeles (el número real de píxeles) se reduce o amplía forzadamente, ya que algunos proyectos requerirán tamaños diferentes para diferentes usos.

Aunque la reducción de una imagen no tendrá un efecto tan poderoso en su calidad, la ampliación la mayoría de las veces resultará en un archivo borroso y pixelado. Hay algunos programas como Perfect Resize que usan algoritmos especiales para optimizar la claridad y el nivel de detalle de las imágenes que necesitan ser ampliadas, pero para mí esto enfatiza aún más la falta de una propiedad importante que Bitmap tiene en comparación con Vector: escalabilidad agnóstica de la calidad .

Tanto Vector como Bitmap dependen del medio en el que se usan. Como probablemente ya sepa, un archivo se puede mostrar digitalmente o imprimirse, la diferencia clave es la forma en que se reproduce la imagen. Mientras que las impresoras son píxel agnóstico, las pantallas digitales (monitores de PC, pantallas de teléfono y tabletas, etc.) se basan en la resolución para componer y emitir cualquier tipo de imágenes, ya sea un archivo de mapa de bits o un vector.

Esto plantea un delicado problema en la forma en que las imágenes vectoriales se relacionan con la cuadrícula de píxeles sobre la que están expuestas, de ahí la división entre las ilustraciones perfectas de píxeles y las de tipo picado.

Por suerte hay soluciones que en mi opinión deben convertirse en normas estándares para ir de una vez a que usted empiece a trabajar en cualquier proyecto, ya sea que se destina a ser puesto en la web o impreso.

2. Descripción de Cómo Funciona Adobe Illustrator

Antes de empezar a arreglar algo, primero debe entender cómo funciona ese "algo". Illustrator es una pieza de software basado en vectores que utiliza algoritmos matemáticos para crear y mostrar los trazos (si están cerrados o abiertos) que vemos, usando puntos de anclaje. Estos puntos de anclaje son puntos simples que se pueden manipular para modificar el tamaño y la forma de un objeto.

Las anclas en sí no son tan importantes, pero la forma en que las posicionas y el objeto que forman en tu Mesa de Trabajo (encajado o desencajado) y por eso en los siguientes pasos hablaré de todas las pequeñas cosas que nos ayudan a crear un Pixel-limpio que parezca obra de arte.

3. Ajuste de la Configuración de Illustrator

De forma predeterminada, Illustrator viene con un montón de opciones y configuraciones, la mayoría de las cuales están predefinidas, para que pueda empezar a trabajar tan pronto como lo tenga instalado en su máquina. Para la mayoría de la gente por ahí esto trabaja muy bien, pero una vez que su flujo de trabajo se vuelve más orientado a los detalles usted encontrará que necesita ajustar algunos de ellos para sacar lo mejor de sus diseños. En los pasos siguientes, te llevaré a través de algunas de las cosas básicas que me gusta ajustar cada vez que tengo una nueva instalación de Illustrator.

Antes de comenzar, quisiera señalar que se trata de preferencias personales desarrolladas a través de un proceso de ensayo y error, y de ninguna manera las nombro como "perfectas" o "correctas" --más como "adecuadas" a un proyecto previsto de Píxel-Perfecto. Ninguna situación se ajustará al mismo patrón, pero la mayoría de las veces esto le dará soluciones confiables para ajustar y adaptar su flujo de trabajo.

Paso 1

Antes de empezar a ajustar nuestras unidades, quiero tomar un segundo y comparar el valor por defecto con el que Illustrator viene con (puntos) con el valor de ajuste que vamos a elegir (píxeles) para ver lo que los diferencia.

Punto

Desde una perspectiva tipográfica, un punto (pt) es la unidad más pequeña utilizada para medir el tamaño de la fuente, el encabezado, el sangrado y el espaciado antes de un párrafo.

Píxel

Según Wikipedia, desde un punto de vista de imágenes digitales, un píxel (px) es el "elemento direccionable más pequeño" de una imagen representada en una pantalla digital. Como los monitores y otras pantallas de dispositivos están destinados a mostrar imágenes, también podemos definir un píxel como la unidad de medida básica por la cual definimos la resolución del dispositivo y el tamaño de los elementos que se muestran en él.

Por lo tanto, tenemos dos unidades, pero ¿cómo son diferentes? Muchos artículos describen a los dos como iguales (1 pt = 1 px) pero sola en una pantalla de 72 ppi como 1 pt = 1/72 pulgadas que significa que una vez que usted tenga un dispositivo de más ppi, la proporción entre los dos comienza a cambiar. Si nos fijamos en los dos desde una perspectiva CSS, la W3 Org establece que 0,75 pt = 1 px.

Apple escribió una entrada completa sobre esto en su página de la Biblioteca de desarrolladores de iOS, tratando de explicar por qué el uso de puntos en comparación con los píxeles ayuda a la hora de mostrar las imágenes que se representarán en dispositivos de resolución más baja y superior.

"Por ejemplo, en un dispositivo con una pantalla de alta resolución, una línea de un punto de ancho puede resultar en una línea que tiene dos píxeles físicos de ancho. El resultado es que si dibuja el mismo contenido en dos dispositivos similares, con sólo uno de ellos con una pantalla de alta resolución, el contenido parece ser aproximadamente del mismo tamaño en ambos dispositivos ".

Lo que se olvidó de mencionar es que hoy en día, tenemos un número significativo de fabricantes que tienen pantallas con diferentes densidades, lo que hace que todo el ejemplo sea un poco difuso.

Ahora puede ser que usted se pregunte, ¿cuál debe elegir? Tiendo a inclinarme hacia píxeles. ¿Por qué? Digamos que es una preferencia personal, y como he estado creando principalmente obras de arte ilustrativas, nunca he oído a la gente quejarse de que una ilustración terminó teniendo un esquema más grueso en su iPhone que en su PC.

Además, los píxeles no dependen de ppi y usted puede servir archivos apropiados a dispositivos de mayor resolución ajustando el nivel de ppi al crear un nuevo documento. Además, debido a la amplia gama de resoluciones entre diferentes dispositivos, tiendo a creer que ya que 1 pt podría ser igual a 2 px en uno de los dispositivos de Apple, podría tener un valor diferente en un dispositivo de un fabricante diferente que utiliza pantallas de mayor densidad.

La decisión es tuya. Si encuentra que los píxeles funcionan para usted, vaya a la sección Unidades del menú Preferencias (Edición> Preferencias> Unidades) y establezca los valores General y Trazo en Píxeles. Dado que el tipo es basado en puntos, recomiendo dejarlo en su valor predeterminado, ya que establecerlo en píxeles no mejorará la claridad o la nitidez del texto.

Paso 2

Una vez que hayas ajustado tus unidades, es hora de modificar la configuración de la Cuadrícula. No voy a hablar demasiado sobre lo que es una cuadrícula, ya que tengo otro artículo que explica todo lo que necesita saber acerca de ella. Lo que voy a decir es que si quieres crear ilustraciones nítidas entonces debes enfocarte en configurar una cuadrícula super precisa y trabajar en ella en colaboración con el modo de vista Previa de Píxeles (lo cual discutiré más en un par de minutos).

Para cambiar la configuración predeterminada, vaya a Edición> Preferencias> Guías y Cuadrícula donde encontrará dos opciones que debe tener en cuenta: la opción Línea de Cuadrícula y la Subdivisión. He estado usando 1 para ambos valores desde hace algún tiempo y descubrí que era el mejor ajuste para mi proceso sin importar el proyecto en el que estuviera trabajando. Sí, tendrás que ser más atento, pero vaya, si eres como yo intentarás y serás tan orientado al detalle como sea posible.

Paso 3

Para todos nosotros la tecla de flecha empuja, Illustrator tiene una característica estupenda que nos permite mover los objetos con una mayor precisión mediante las teclas de flecha direccionales. Puesto que queremos que todo sea lo más preciso posible en píxeles, debemos ajustar el valor de modo que en cada pulsación de una tecla el objeto salte exactamente un píxel en la dirección en que lo dijimos.

El ajuste se puede encontrar en Editar> Preferencias> General> Incremento de Teclado.

Esto es muy útil cuando queremos mover objetos de forma rápida y precisa en distancias cortas.

4. El Proceso

Hasta ahora, he hablado de algunos de los ajustes que puedes usar para hacer que Illustrator sea más preciso, pero como ejemplos suelen enseñar más que simples descripciones de funciones, te mostraré el proceso que normalmente hago una vez que empiezo a crear algo destinado para ser utilizado para la web.

Paso 1

Todo comienza con nuestro Documento. Si prestamos atención a algunos de sus ajustes básicos, podemos asegurarnos de que nuestra ilustración tenga una sólida base pixél-perfecto en la que podamos empezar a construir.

Pulse Control-N (o vaya a Archivo> Nuevo) y echemos un vistazo a algunos de los ajustes, empezando por el Perfil.

Dado que normalmente nos centramos en la creación de elementos de pixél-perfecto para web, el Perfil debe configurarse para Web. Al hacerlo, Illustrator ajustará automáticamente las Unidades a Pixéles y el Modo de Color a RGB (rojo verde azul).

Si observa de cerca el Tamaño de nuestro documento, notará que tanto su Ancho como su Altura tienen valores redondos (960 x 560 px) y no decimales (960,5 x 560,38). ¿Pero por qué? Bueno, si usted crea una Mesa de Trabajo que tiene un Ancho de 960,5 px habrá una sección a la derecha que no ocupa píxeles enteros fuera de la cuadrícula, y en su lugar cubre la mitad de su superficie.

Este es un no-no, ya que queremos que Illustrator Alinee nuevos objetos con la Cuadrícula de Píxel. Esta función es realmente importante ya que instruye a cada objeto recién creado a posicionarse correctamente en la Cuadrícula de Píxeles, haciendo que todo se vea nítido.

Así que si, por ejemplo, tenemos un rectángulo de 960 x 560 px y queremos alinearlo con el centro de nuestra Mesa de Trabajo de tamaños decimales, no será posible hacerlo ya que los lados derecho e inferior no cubrirán la totalidad Superficie de sus píxeles debajo.

Algunos de ustedes podrían pensar que esta opción sólo debería usarse con contenido web, pero creo que usarlo para imprimir puede agregar valor, ya que estará trabajando y colocando sus anclas en un sistema preciso, en lugar de solapar anclas por todo el lugar.

Sugerencia rápida: Si inicia accidentalmente un proyecto basado en una anchura o altura de un valor decimal, puede corregir la situación utilizando la Herramienta de Mesa de Trabajo (Shift-O) para cambiar los valores a los recorridos, pero debe intentar obtener el dimensionamiento desde el principio, para que no le dé un dolor de cabeza más adelante.

Paso 2

Una vez que me he asegurado de que mi documento está configurado correctamente, por lo general comienzo a trabajar en mis elementos, asegurándome de que cada uno de ellos utiliza valores redondos para el ancho y la altura.

Como demostré en el paso anterior, la misma regla de cubrir toda la superficie de los píxeles se aplica también aquí. Si quiero crear una forma de apariencia-afilada, por ejemplo un cuadrado, necesito que tenga valores fijos (por ejemplo, 200 x 200 px), de modo que cada lado termine cubriendo exactamente el mismo número de píxeles de la Mesa de Trabajo. Al hacerlo, puedo crear una forma que puede ser ampliada en cualquier porcentaje y todavía luce claro como el cristal.

Si mi cuadrado hubiera sido de 200,4 x 199,9 px, Illustrator habría comenzado a aplicar un efecto antialiasing en los lados derecho e inferior, ya que estos no cubrirían un píxel entero, y al hacerlo, mi elemento habría terminado luciendo borroso.

Por suerte para nosotros, la buena gente de Adobe ofrece una manera de arreglar este tipo de problemas, implementando la función Alinear a la Cuadrícula de Píxeles que se encuentra en la parte inferior del panel Transformar. Si selecciona el objeto de tamaño incorrecto y habilita la opción Alinear a, cambiará automáticamente el Ancho y la Altura del cuadrado a 200 px, ya que este es el valor redondo más cercano identificado por el software.

Sugerencia rápida: Si la opción no está visible, es porque debe activarla haciendo clic en la flecha a la derecha del menú desplegable del panel Transformar y seleccionando Mostrar Opciones.

Paso 3

Estas son, de lejos, las características más importantes que Illustrator tiene para ofrecer cuando se trata de crear diseños con píxeles perfectos. A pesar de que ambos proporcionan una función similar, hay un par de diferencias clave que establecen los dos separados.

Encajar a la Cuadrícula

Como su nombre indica, esta opción está directamente relacionada con la Cuadrícula que usted ha configurado. La función se puede activar en Ver> Ajustar a Cuadrícula (Shift-Control- ") y, básicamente, instruye cada objeto de su Mesa de Trabajo para encajar sus bordes a las intersecciones de la línea de cuadrícula más cercanas.

Ajustar a Pixel

La opción Ajustar a Píxeles se comporta un poco diferente, como lo hace el ajuste de los objetos a la Cuadrícula de Píxeles que no se puede modificar. La función se oculta hasta que cambie a Previsualización de Píxeles (Alt-Control-Y) cuando cambia de Ajustar a Cuadrícula a Ajustar a Pixel.

Aunque es diferente, puedes hacer que Ajustar a Cuadrícula actúe de forma idéntica al Ajustar a Pixel si ajusta en la Línea de Cuadrícula cada 1 px, en una Subdivisión de 1, lo que básicamente significa crear la cuadrícula más pequeña posible, que es de hecho el mismo tamaño que la Cuadrícula de Pixel.

Paso 4

Utilizado en colaboración con la opción Ajustar a Pixel, este modo de vista previa será su mayor ayudante en el proceso de creación de ilustraciones nítidas con píxeles. Le permite hacer zoom en el nivel de píxeles y ver exactamente qué partes de su diseño necesita retocar. Lo uso todo el tiempo, y me ha ayudado mucho. Como ya he mencionado, la herramienta se puede activar en Ver> Vista Previa de Píxeles o mediante el acceso directo Alt-Control-Y.

Paso 5

Una vez que haya terminado con el proceso creativo, tómese un poco de tiempo y asegúrese de que todas las anclas estén correctamente encajadas en la Cuadrícula de Píxeles. Cuando encuentre anclas que han saltado, simplemente agarre la Herramienta de Selección Directa (A), seleccione el punto de anclaje apropiado y luego colóquelo nuevamente en la intersección de la línea de cuadrícula más cercana.

Podrías pensar que el uso de la opción Alinear a Cuadrícula de Píxeles se encarga de este tipo de problemas, pero por mi experiencia, a veces tiende a fallar, y cuando lo hago siempre confío en mi fiable Herramienta de Selección Directa (A) para arreglarlos manualmente.

Paso 6

Los Manejadores de Bezier son una parte importante de cualquier software vectorial, ya que permiten al usuario modificar la forma y la orientación de cualquier vía (ya sea cerrada o abierta). El problema que la mayoría de los principiantes enfrenta cuando se trata de manejadores es que suelen tender a arrastrarlos por todo el lugar, y al hacerlo casi siempre crean formas que parecen entrecortadas.

El secreto es asegurarse de que los manejadores son arrastradas (manteniendo pulsada la tecla Mayús) verticalmente, horizontalmente o en una diagonal perfecta de 45 °, de tal manera que sus terminaciones estén alineadas con una de las intersecciones de la línea de cuadrícula.

También, si la trayectoria que usted está trazando tiene un lado plano, trate de arrastrar el manejador de modo que caiga exactamente en la sección superior de ese lado sin pasarla encima de este.

5. Tratamiento del Redimensionamiento

Cuando se trata de Ilustraciones Pixel Perfecto, el cambio de tamaño puede ser un verdadero dolor. Si intenta seleccionar el objeto y arrastra uno de los lados de la Caja Delimitadora, se ampliará o reducirá, pero en el proceso de hacerlo también romperá las cosas.

Una solución sería utilizar la opción Escalar (clic derecho> Transformar> Escala> Uniforme) y usar incrementos del 50%, así valores como 150%, 200%, 250% para ampliación y -50% para reducir a la mitad de su tamaño original.

Es por eso que siempre debe planear con anticipación, para que conozca los tamaños exactos que necesita diseñar.

Consejo rápido: Incluso con este método verá problemas, especialmente cuando tiene un gran grupo de elementos con esquinas redondeadas y trazados curvos. Cuando eso sucede, tendrá que desagrupar y luego ajustar los diferentes elementos a la vez.

6. Tratamiento de la Rotación

Cuando tiene rectángulos, girarlos es bastante simple, ya que puede ajustar sus puntos de anclaje de nuevo a la línea de cuadrícula de píxeles más cercana. Pero, ¿qué pasa con figuras de esquinas redondeadas o de trazos curvos?

Esta es probablemente la parte más molesta cuando se intenta con objetos de píxeles perfectos, ya que en la mayoría de los casos es casi imposible encajar los anclajes de nuevo a la cuadrícula de píxeles ya que seguramente afectará la forma general del objeto. Normalmente, cuando tengo un rectángulo redondeado que necesita rotación, aplico la rotación y luego dejo el objeto como está.

¡Eso es!

Si sigue estos consejos rápidos, no debería tener problemas en la creación de hermosas ilustraciones nítidas listas para cualquier dispositivo.