Hilo original: http://www.pixeljoint.com/forum/forum_posts.asp?TID=11299 Autor: cure Traducción: Nucklear PROPÓSITO Este tutorial está diseñado para explicar que es pixel art, que no lo es, como empezar y como hacer mejor pixel art. Este tutorial es un intento de juntar la información sacada de otros tutoriales más pequeños. Para información mas avanzada se recomienda leer esta guía., que ofrece un análisis mas detallado de lo que es pixel clusters, banding, anti-aliasing e información ampliada de lo tratado en este tutorial. TABLA DE CONTENIDOS I. ¿Qué es pixel art? 1. Por qué no todo el arte digital es pixel art 2. Por qué no todo gira en torno a las herramientas II. ¿Por dónde empiezo? 1. Trucos 2. Programas 3. Tipos de archivos 4. Empezando la imagen III. Terminología 1. Anti-aliasing (AA) 2. Dithering 3. Pixel clusters IV. Cosas a evitar 1. Mal Anti-Aliasing 2. Bordes dentados/Jaggies 3. Dithering incorrecto 4. Banding 5. Pillow-shading 6. Ruido 7. Sel-out V. Creando una paleta 1. ¿Cuándo debo preocuparme por los colores? 2. Cantidad de colores 3. Saturación, matiz, luminosidad 4. Rampas de color 5. Variación de tono I. ¿QUÈ ES EL PIXEL ART? A juzgar por el nombre podríamos asumir que pixel art es todo arte compuesto por pixels. Pero no todas las imágenes digitales concuerdan con la descripción de pixel art. Por ejemplo, esta fotografía está hecha de pixels, pero no es pixel art: Bien, entonces las fotografías no lo son, pero ¿si yo hago arte con mi ordenador, estoy haciendo pixel art? No. El Pixel art es una sub-categoría específica del arte digital. Más que de que está hecho, la pregunta sería "¿Cómo está hecho?". Por ejemplo, este dibujo es arte compuesto con un ordenador, y está hecho de pixels, pero no es pixel art: “Si el pixel art pierde el sentido de la importancia de los pixels que lo construyen, entonces no creo que pueda ser llamado pixel art. Cuando los pixels mantienen importancia en la naturaleza del trabajo se define pixel art.” - Alex HW Por qué no todo el arte digital es Pixel Art El Pixel Art se aparta de otras formas de arte digital debido a que se enfoca en el control y la precisión. El artista tiene que tener el control de la imagen al nivel de pixels individuales, y cada uno de ellos debe ser colocado en su lugar correspondiente. Cuando el Pixel Art es hecho correctamente, modificar un puñado de pixels puede tener un efecto dramático en la imagen: Otras formas de arte digital utilizan herramientas que no encontrarás en pixel art. La razón por la que los artistas del pixel art no usan esas herramientas es porque éstas colocan los pixels de manera que el artista no puede predecir. Estas son herramientas como el desenfoque, la distorsión o la fusión. Cualquier herramienta que coloque píxels automáticamente es normalmente eliminada en Pixel Art. Recuerda, debemos tenerlo todo bajo control. Muchas veces habrás escuchado a gente diciendo "Esto no es pixel art, ¡tiene muchos colores!". Esto no es porque haya una regla no escrita que dice "Solo es pixel art si tiene [X] numero de colores", puedes utilizar tantos colores como te plazca. La principal razón por lo que la gente se queja es que el uso de gran cantidad de colores puede ser indicativo del uso de herramientas "no permitidas". Estas herramientas crean muchos colores nuevos para conseguir desenfoques o efectos de transparencia. Por qué no todo gira en torno a las herramientas Entonces, ¿si no utilizo desenfoques o herramientas complejas, es pixel art, no? ¿Cualquier cosa hecha con MS Paint será pixel art? No. No es el programa el que determina que es y que no es pixel art, es como está hecho. Por ejemplo, esta imagen está hecha con MS Paint, sin herramientas complejas: Pero no es pixel art. Esto es lo que llamamos Oekaki. Si puedes crear una imagen sin hacer zoom sobre ella ésta no es pixel art. Si estas utilizando la herramienta de línea o el cubo de relleno la mayor parte del tiempo, no estás prestando atención a los pixels individuales, solo a las líneas y formas que los pixels crean. Lo mismo para bocetos rápidos hechos con el lápiz o el pincel de MS Paint... todos estos métodos ignoran la importancia de la colocación intencionada de cada uno de los pixels. Todas estas normas son flexibles, por lo que llevar una definición demasiado estricta sobre lo que es y no es o que herramientas se pueden o no utilizar. Por ejemplo: No hay por qué colocar a mano cada píxel. El trabajo del artista no consiste en hacerlo todo a mano y no se espera que te comportes como un robot, rellenando amplias áreas a base de clicks de ratón con el pincel. El cubo de relleno está bien, al igual que las herramientas para líneas. Lo realmente importante es que el artista tenga el control de la imagen al nivel de pixels individuales, sin significar esto dibujar todo pixel a pixel. II. ¿POR DONDE EMPIEZO? Como hemos dicho antes el pixel art se basa en los pixels así que los siguientes consejos tratarán de hacer que te centres en ellos. Empieza por algo pequeño - Cuanto más grande sea la imagen, más tiempo y trabajo necesitarás para terminarla. Si dominas los pixels te darás cuenta de toda la información que cabe en un lienzo pequeño. Usa una paleta limitada - Si no puedes hacer un buen sprite con 4 colores, usar 40 no te va a ayudar. Utilizar una paleta pequeña es bueno para los principiantes porque te obliga a centrarte en la colocación de cada pixel y la relación entre grupos. La paleta de 4 colores de GameBoy es una buena elección para principiantes ya que solo te tendrás que centrar en el valor sin importar el tono y la saturación. Programas - Hay una buena cantidad de programas dedicados al pixel art, muchos de los cuales son gratuitos. Yo uso Grafx2 porque es gratuito, pero GraphicsGale, Pro Motion, Photoshop, Pixen y MS Paint son elecciones habituales. Algunos son más amigables que otros, y esa es la razón por la que elegí algo con atajos de teclado como Grafx2, lo que me ha ahorrado muchos viajes a la barra de herramientas y ayuda con la gestión de la paleta. Formato - Un error muy común es guardar tus imágenes en JPEG/JPG. Debido a la compresión de este formato, la calidad de tu pixel art se puede destruir. Por lo tanto, nunca guardes en JPG. Los formatos aconsejables son PNG o GIF. Además debes de tener cuidado de que el programa que utilices soporte correctamente el formato que vas a utilizar y utilizar un conversor si es necesario (como Giffy). Pero ¿cómo empiezo la imagen? Eso depende de tus gustos. Algunos artistas prefieren crear el Line Art primero y luego profundizar en el color: Otros artistas prefieren crear bloques de color de la mayoría de las formas y más tarde refinar la imagen hasta lograr el resultado deseado: Ambos métodos están bien, todo depende de con cual te sientas mejor, o de cada proyecto específico. Definir las líneas puede ayudarte cuando estés trabajando con una imagen escaneada (Como en el caso del monstruo anterior). Sin embargo, si estas empezando una imagen en tu programa de pixelado y no es un sprite minúsculo, crear bloques de color mas grandes puede ser útil. III. TERMINOLOGÍA Anti-Aliasing El Anti-Aliasing es un método para suavizar bordes vivos. Este término debe ser familiar para muchos de nosotros ya que es ampliamente utilizado en juegos o programas de edición de fotografía. En el caso del pixel art sin embargo cuando hablamos de anti-aliasing nos referimos a anti-aliasing manual. El AA manual significa suavizar los bordes vivos colocando pixels de diferente color para igualar las transiciones. Por ejemplo: A la hora de aplicar AA manual nos encontramos con diversos obstáculos, que trataremos en la sección de "Cosas a evitar". Dithering El dithering se compone de diversos patrones de pixels. Es utilizado normalmente para normalizar la transición entre dos colores sin añadir nuevos colores a la paleta. También es usado para crear texturas. En la época de los monitores CRT, el dithering era especialmente útil debido a que el monitor difuminaba las áreas con dithering. Ahora que los monitores de alta definición son más comunes, los patrones de dithering no son fáciles de ocultar, causando que el dithering no sea tan versátil como antaño. De todas formas, esta técnica sigue teniendo su utilidad. La forma más común de dithering es un patrón 50/50, también conocido como 50% o patrón de damero. Como se muestra en el ejemplo anterior, puedes crear diferentes patrones para llenar el hueco entre un color plano y un patrón 50%. Estos patrones son normalmente fáciles de detectar así que ten cuidado. El dithering estilizado es otra técnica y se caracteriza por el añadido de pequeñas formas en un patrón. El dithering entrelazado permite unir dos áreas con un dithering previo. Se llama entrelazado porque ambos patrones se entrelazan entre ellos en los bordes. Este tipo de dithering permite la fusión para crear degradados. El dithering aleatorio es el tipo menos común, y no es recomendado normalmente, ya que añade ruido a la imagen. A pesar de que tiene algunos usos en pequeñas dosis, es algo que normalmente deberás evitar. A pesar de lo útil que es el dithering, normalmente está mal usado por artistas inexpertos. El mal dithering lo trataremos en la parte de "Cosas a evitar". Pixel Clusters “El cluster de pixels está compuesto de pixels únicos. Sin embargo, un único pixel es normalmente inútil y sin significado si no está en contacto con pixels del mismo color. El artista debe tener en cuenta las formas que se crean cuando pixels similares entran en contacto y crean formas opacas, planas o con forma. La mayoría de las derrotas y posibles triunfos se dan en el momento que el artista crea un cluster” - Ramblethread Anteriormente se recalcó la importancia de los pixels individuales, pero éstos son raramente independientes. Un único pixel aislado es una mancha en la pantalla - es ruido -. Pero normalmente no se encuentran solos, sino que aparecen como parte de un cluster. Los grupos de pixels del mismo color crean áreas de color solido. Mientras que un pixel es nuestra unidad de construcción básica, el cluster es la unidad en la que se basarán muchas de nuestras decisiones en cuanto a colocación de pixels. Por lo tanto de la misma manera que es importante entender que los píxels individualmente no son independientes, es importante entender que los clusters tampoco son independientes. Como si se tratase de piezas de puzzle, los bordes de un cluster determinan la forma de una estructura. Aquí un ejemplo de cómo reordenando la forma de un cluster de pixels puede tener efectos dramáticos en los clusters contiguos: Mientras que los pixels aislados son normalmente entendidos como ruido, un pixel aislado de un color diferente al área que toca es entendido como parte de ese cluster, cosa que es un problema: IV. COSAS A EVITAR AA Incorrecto Demasiado AA - Solo necesitas utilizar AA para suavizar lo suficiente la imagen. Si utilizas demasiado los bordes se pueden ver borrosos, y perderás la nitidez de la línea. Poco AA - En este caso el artista ha utilizado un único pixel para suavizar la transición, pero solamente ha conseguido normalizar el borde un poco. Podría haberlo hecho mucho más suave utilizando líneas más largas para crear una transición más gradual: AA banding - Cuando los segmentos del Anti-Aliasing se alinean con las líneas que están suavizando. Para entender mejor lo que es AA banding, lee la sección de banding. Dientes, bordes dentados Los dientes se producen cuando un pixel o un grupo de pixels están fuera de lugar, interrumpiendo el flujo de una línea. Los dientes pueden aparecer también cuando una línea carece de anti-aliasing, estos dientes son el resultado de cualquier técnica de pixelado mal aplicada. Este tema es tratado más en profundidad en la sección de line art. ¿Cómo arreglar los bordes dentados? Modificando la longitud de las líneas. A menudo el problema es que un segmento de la línea es muy corto o muy largo, y eso crea un salto feo. Usar una longitud más uniforme para la transición es la solución en estos casos. Anti-aliasing Salvo que tu línea sea perfectamente horizontal, vertical o de 45 grados, los bordes de tu línea van a ser dentados. Esto es debido a la naturaleza cuadrada del pixel y el patrón de rejilla al que estamos restringidos para hacer líneas con ángulos y curvas que queremos dibujar. El anti-aliasing es la contramedida correcta en estos casos. Ditering incorrecto Hay muchas situaciones en las que el dithering está mal usado. El error más común es el sobre uso de éste. Si el dithering cubre la mitad de tu sprite, probablemente sería mejor que añadieses un nuevo color a tu paleta. El dithering es ideal para disminuir el final y los bordes de un area opaca de pixels. Cuando se usa mucho dithering, el área se convierte en un campo en sí mismo, dando una sensación contraria a la deseada: En este caso el dithering ya no sirve como unión entre colores y crea una textura no deseada. Crear una textura puede ser un uso deseado del dithering, pero solo cuando es usado correctamente. Si estás interesado en unir colores en lugar de crear una textura entonces el ditherinf no está funcionando. La pregunta entonces sería "¿Cuánto dithering usar?". Bueno, depende del tamaño de tu paleta o más concretamente del contraste entre los dos colores que estás tratando de unir. A menor contraste menor dureza debe tener el dithering: Banding El Banding, se produce cuando los pixels se alinean. Cuando un pixel vecino termina en la misma coordenada -x o y- de la rejilla subyacente, ésta unión se hace más evidente, los pixels resaltan mas a la vista, y la resolución se hace menos fina. A continuación se detallan varios tipos de banding, todas ellas se producen porque los pixels se han alineado: Hugging: Aquí un área opaca de color se ha contorneado con una fila de pixels. Está bien utilizar contornos, pero hay que asegurarse de que el contorno y la forma interna no se alinean provocando un efecto indeseado. Pixels gordos: Esto puede ocurrir en pequeños cuadrados, juntos en gruesas líneas o multiplicado en franjas grandes. Skip-one banding: Incluso si hay un espacio vacío entre dos franjas, la mente llenará el espacio y el banding seguirá apareciendo. Banding a 45 grados: A través de las filas de pixels alineadas hay solo 1 pixel de grosor y el banding sigue apareciendo. Pillow-Shading Consiste en sombrear rodeando un área central con franjas oscuras incrementales. El PillowShading es malo debido a que no presta atención a la fuente de luz, y se ajusta a la forma del área en lugar de a la forma que crearía la luz que afecta sobre el modelo. El Pillow-shading se usa a menudo -aunque no siempre- combinado con banding debido a la alineación de sombras y reflejos. Para solucionarlo simplemente presta atención a la dirección de la luz que incide sobre el modelo. La razón por la que está mal no es porque la luz sea frontal - desde la posición del espectador . No tienes por qué poner la luz en un lateral, el problema es debido a que el sombreado actúa como si el modelo fuese una forma plana y no un modelo tridimensional. Por lo tanto es posible utilizar luz frontal siempre y cuando prestes atención a las formas: Ruido La mayor parte de las veces, los pixeles independientes son incapaces de proporcionar suficiente información por si solos, y su inclusión solo crea ruido. El ruido es cualquier tipo de información que no contribuye al conjunto y solamente interrumpe un área y distrae al espectador. En pixel art, el ruido está compuesto habitualmente de pixels sueltos. A lo largo del tutorial, cuando hablo de "ruido" hablo de pixels independientes. La razón por la que alguien debe ser cauteloso al utilizar dithering del 25% o aleatorio es por todo el ruido que se puede generar. Los pixels independientes hacen ver la rejilla sobre la que se crea la imagen y revelan la resolución real de la imagen. Recuerda, los pixels viajan juntos. Por este motivo, los pixels sueltos deben usarse de manera muy específica. Estas situaciones son: Uso como reflejos especulares: Los detalles independientes llaman mucho la atención, pero a veces eso es justamente lo que quieres. Para los reflejos especulares, un único pixel puede funcionar bien. Por ejemplo, fíjate en el pixel blanco usado en la nariz del monstruo en los ejemplos posteriores. Dibujando pequeños detalles esenciales: Normalmente esto se aplica solo a imágenes muy pequeñas, como los ojos de un sprite pequeño, el pico de un pequeño pájaro o pequeñas burbujas. Sel-out/Rompiendo el contorno Sel-out - diminutivo de selective outlining - consiste en aplicar anti-aliasing al contorno para suavizarlo del color de fondo. Esto significa que el sel-out es un tipo de AA incorrecto, pero el término es suficientemente popular para tratarlo en su propia sección. La idea es básicamente oscurecer el contorno para aproximarse a un color más oscuro, para que el sprite se pueda visualizar bien en cualquier fondo, en lugar de fusionarse en fondos con un color similar. El sel-out no consiste en sombrear el contorno de acuerdo a una fuente de luz. Un contorno completo con variaciones de luz no creará dientes tan evidentes como el sel-out: Quizás este sea un ejemplo más simple. El semicírculo de la izquierda está sombreado de acuerdo a una fuente de luz sin embargo la parte superior del semicírculo de la derecha tiene sel-out aplicado: El sel-out funciona si es creado para escenarios específicos, como cuando en un juego el fondo va a ser consistentemente oscuro. V. CREANDO UNA PALETA ¿Cuándo debo preocuparme por los colores? Bueno esencialmente la pregunta es, ¿qué colores necesita tener el modelo? y a continuación, ¿Como de lejos puedo llegar con estos (hasta que necesite más tonos)?. Ahí es cuando ocurre la mezcla - Adarias Este es un método común para crear una paleta para un modelo. Aquí hay un ejemplo de lo que Adarias está hablando: Cuanta más complejidad tenga el modelo, se crea la necesidad de añadir colores a la paleta para conseguir una tonalidad más avanzada, o para colorear nuevos elementos o detalles. Otro método es crear una base en escala de grises y posteriormente añadir color. Esto es posible porque el valor relativo de color es mucho más importante que el tono y éste puede ser modificado a posteriori tras haber establecido las relaciones del valor del color. Personalmente me parece más fácil añadir el color durante el proceso de creación, por lo que prefiero el primer método. Cantidad de colores Algunas veces verás que algunos artistas abogan por utilizar pocos colores. Debemos asumir que esto se debe a una tradición importada de los videojuegos antiguos cuando las consolas solo podían mostrar una cantidad limitada de colores, pero para nada es una obligación en la actualidad. Si los sistemas modernos pueden mostrar cientos o miles de colores, ¿Por qué no íbamos a usarlos? Aunque a decir verdad, utilizar paletas pequeñas no es una tradición pasada de moda, y hay unas razones lógicas en ello: Cohesión - Cuando utilizas pocos colores, los colores aparecerán en repetidas ocasiones a lo largo del sprite más frecuentemente. Por lo que diferentes áreas compartirán color haciendo que la paleta mantenga una consistencia que unifique el trabajo. Control - Cuanto más pequeña sea la paleta, más fácil será gestionarla. Probablemente querrás ajustar un color más tarde. Si tienes 200 colores, te va a llevar mucho tiempo ajustar todos los colores, porque modificando un color provoca que modifiques su valor y relación con los colores contiguos. Con una paleta pequeña el efecto de cambiar un solo color es más sustancial y existen menos micro-relaciones de las que preocuparse. Tono, Saturación y Luminiscencia Tono: El tono se refiere a la identidad de un color. Si un color se define como azul, rojo, naranja, etc. depende de su tono: Tal y como tú puedes cambiar la claridad u oscuridad de un color rodeándolo de píxels claros u oscuros, el tono percibido de un color depende de su entorno. En este caso tenemos un gris medio completamente neutro: En esta imagen el verde de los árboles en realidad no es verde, sino el gris de la imagen anterior: Debido al violeta del fondo (Que es el opuesto en la rueda de color), el gris se ve más verde de lo que en realidad es. El tono va a ser un concepto importante para cuando tratemos la variación de tono más adelante. Saturación: La saturación es la intensidad de un color. Cuanto más baja sea la saturación, más cerca estará ese color del gris: El mayor problema con el que se encuentra la gente que está empezando con respecto a la saturación es escoger colores demasiado saturados. Cuando esto ocurre, los colores comienzan a quemar el ojo. Esto puede ser un problema grave en pixel art ya que los colores están hechos de luz, en lugar de pigmentos de pintura, por lo que el potencial de que los colores sean demasiado fuertes e irritantes es mucho más grande. Fíjate como los colores de la segunda imagen son mucho más amigables al ojo que los de la primera: Luminiscencia: La luminiscencia (también conocida como calor o brillo) se define con como de oscuro o claro es un color. Cuanta más alta sea la luminiscencia, más parecido al blanco es el color. Si la luminiscencia es igual a 0 el color es negro. A continuación puedes ver una paleta con una escala de luminiscencia: En una paleta, te gustará tener un buen rango de valores. Si solo tienes colores del mismo rango de luminiscencia, entonces no serás capaz de crear contrastes entre sombras, reflejos, tonos medios, etc. La diferencia entre el brillo de dos colores es conocido como contraste. Un problema común para la gente nueva es no tener suficiente contraste en sus imágenes. Puedes ver un ejemplo de poco contraste en la siguiente imagen: Y la misma imagen, con dos valores ajustados para conseguir un mejor contraste: El valor de un color es un número, pero los colores pueden aparecer más claros u oscuros dependiendo del fondo. Por este motivo, no deberás utilizar siempre el color más claro para los reflejos. Un color que crea un buen efecto de reflejo en un objeto claro puede no hacerlo en uno oscuro. La luminiscencia es especialmente relevante en pixel art: El brillo de un pixel o una línea determina como de nítida aparecerá esta: El primer ejemplo es una simple línea blanca. La nitidez de la línea es consistente. EN el caso de debajo la línea varía su brillo. Date cuenta de cómo la línea aparece más nítida hacia el centro en 1x. Rampas de color Una rampa de color es un grupo de colores que pueden ser usados de manera conjunta, ordenados por luminosidad. Una paleta puede constar de una sola rampa de muchas rampas. Esta es una paleta: Y aquí está la misma paleta ordenada de acuerdo a sus rampas de color (de las cuales hay dos): No es necesario que crees un modelo como el de arriba (aunque algunos lo encuentran más cómodo). Lo que es importante es que entiendas como son tus relaciones de color, y estas son tus rampas. No es necesario que un color se restrinja a una única rampa y además las rampas compartirán colores a menudo. Frecuentemente, el color más oscuro y el más claro pertenecerán a la misma paleta de rampas, como en ejemplo anterior que los colores más claros y oscuros comparten el mismo tono. También es posible que los tonos medios estén en múltiples rampas. En estos casos, el color más versátil acaba ocupando el lugar de dos o más colores diferentes, ayudando en el mantenimiento de la paleta. En el caso de sombras y reflejos en varias rampas, los extremos en luminiscencia permiten al color ser más flexible (porque se aproximan al blanco y al negro). Los tonos medios al no poder aprovecharse de esto, son normalmente colores más neutros, significando esto que son más cercanos al gris. Aquí hay una paleta que utiliza un tono de gris para puentear los huecos en varias rampas: Además debes de ser cauteloso de no tener colores en una rampa que no sean apropiados. Si un color no cuadra en una rampa, tiene el potencial de estropear la imagen que estás creando, lo que debe convertir la elección de color en una prioridad. Un color incorrecto puede dar la sensación de que no pertenece a la imagen como se puede apreciar en el siguiente ejemplo: Variación de tono Cuando hablamos de variación de tono hablamos de la transición tonal en una rampa de color. Una rampa de color sin variación de tono es una rampa recta. En las rampas rectas solamente varía la luminiscencia, mientras que en las rampas con variación tonal tanto el tono como la luminiscencia varían. La primera rampa es una rampa recta verde. La segunda imagen es una rampa verde con variación tonal. Cuando usemos la variación tonal, debemos llevar los tonos más claros hacia cierto color (amarillo en el caso anterior), y mover los colores oscuros hacia un segundo color (azul en el ejemplo). La variación de color se usa debido a que las rampas de color rectas son normalmente aburridas y no reflejan la variedad de tonos que nosotros realmente vemos, con esta variación podemos añadir un sutil contraste de color en la rampa.
