Tutorial de Pixel Art

Nota: Este tutorial fue creado en 2007 para mi sitio web personal. Algunos pequeños ajustes se han hecho desde entonces, pero nada demasiado significativo. 

En este tutorial de 10 pasos, le enseñaré cómo crear un "sprite", que es un personaje u objeto bidimensional independiente. El término viene de los videojuegos, por supuesto.

Crear pixel art es una habilidad que adquirí porque necesitaba gráficos para mis juegos. Después de mucha práctica, me volví un poco práctico y comencé a verlo más como un arte real en lugar de una herramienta. En estos días, Pixel Art es bastante popular en el desarrollo de juegos e ilustración.

Este tutorial de píxeles se creó hace muchos años para enseñar a las personas los conceptos básicos detrás del arte de píxeles, pero lo he optimizado mucho desde su primera encarnación. Hay otros tutoriales de píxeles, pero me parecen demasiado complicados y demasiado complejos. El pixel art no es una ciencia. Nunca deberías tener que calcular un vector al hacer pixel art.

1. HERRAMIENTAS

Una de las cosas buenas de pixel art es que realmente no necesita ninguna herramienta sofisticada, ¡el programa de pintura incorporado de su computadora es probablemente lo suficientemente bueno! Dicho esto, hay programas creados específicamente para el empuje de píxeles, como Pro Motion o, para usuarios de Mac, Pixen. No puedo decir que los haya probado, pero he oído cosas buenas. Para este tutorial, voy a usar Photoshop, que es una bestia cara, pero es bueno para todo tipo de arte y sus numerosas funciones son bastante útiles para hacer pixeles.

UTILIZANDO PHOTOSHOP PARA PIXEL ART

Cuando uses Photoshop, tu arma principal será la herramienta de lápiz (acceso directo "B"), que es la alternativa para la herramienta de pincel. El lápiz le permite colorear píxeles individuales, sin ningún suavizado.

Otras dos herramientas que serán útiles son la herramienta de marquesina   (acceso directo "M") y la varita mágica   (acceso directo "W") para seleccionar y arrastrar o copiar y pegar. Recuerde que al mantener presionada la tecla "Mayús" o "Alt" mientras realiza su selección, puede agregar o restar de su selección actual. Esto es útil cuando se trata de agarrar áreas que no son perfectamente cuadradas.

También usarás el cuentagotas   (atajo "I") para capturar colores. La conservación del color es importante en el arte de píxeles por varias razones, por lo que querrá tomar los mismos colores y reutilizarlos.

Finalmente, asegúrate de aprender los atajos. Te pueden ahorrar mucho tiempo y energía. Una buena idea es "X", que cambia los colores primarios y secundarios.

2. LINEAS

Los píxeles son esencialmente pequeños bloques de color. Lo primero que debe aprender es cómo usar estos bloques de manera efectiva para hacer cualquier tipo de línea que desee. Discutiremos los dos tipos de líneas más básicas, rectas y curvas.

LINEAS RECTAS

Sé lo que estás pensando, ¡esto parece demasiado fácil de molestar! Pero con los píxeles, incluso las líneas rectas pueden ser problemáticas. Lo que queremos evitar son los "jaggies", pequeñas pausas en la línea que hacen que la línea se vea desigual. Los jaggies surgen cuando una parte de la línea es más grande o más pequeña que las piezas circundantes.

LINEAS CURVAS

Para la curvatura, asegúrese de que el descenso o la inclinación sea consistente en todo el recorrido. En este siguiente ejemplo, la curva de aspecto limpio va 6> 3> 2> 1, mientras que la curva con el jaggy va 3> 1 <3.

CONCLUSIÓN

Estar cómodo haciendo cualquier línea en píxeles es crucial para hacer pixel art. Más adelante, aprenderemos cómo usar el suavizado para hacer que nuestras líneas se vean realmente suaves.

3. CONCEPTUALIZANDO

Lo primero que necesitas es una buena idea! Intente visualizar lo que desea pixelear, ya sea en su cabeza o en papel. Un poco de trabajo en el departamento de planificación previa puede permitirle concentrarse en el pixel real.

Cosas para pensar acerca de

1. ¿Para qué se utilizará el sprite?  ¿Esto es para un sitio web, o un juego? ¿Tendré que animar esto más tarde, o es esto? Si el sprite se animará más adelante, es posible que desee mantenerlo más pequeño y menos detallado. A la inversa, puede incluir tantos detalles en un sprite estático con el que nunca tendrá que lidiar de nuevo. Pero piense en dónde irá el sprite y qué funcionará mejor.

2. ¿Qué restricciones me imponen?  Antes, había dicho que la conservación del color es importante. Una de las razones es que su paleta de colores puede ser limitada, ya sea por hardware (menos probable en estos días) o por coherencia. O precisión, si está emulando un estilo específico (C64, NES, etc.) Además, considere las dimensiones de su sprite y cómo se ajustará a su entorno.

¡Vamos a luchar!

Para este tutorial, realmente no tuve ninguna restricción, pero quería asegurarme de que el sprite fuera grande para que pudiera ver claramente lo que estaba sucediendo con cada paso. Para ese fin, decidí usar a Lucha Lawyer, ¡el abogado de lucha libre más popular, como mi modelo! Podría estar en un juego de lucha, o algo así, con movimientos como el "Habeus Corpse Blaster".

4. El esbozo

Un contorno negro proporcionará una buena estructura básica a tu sprite, por lo que es el lugar perfecto para comenzar. La razón por la que elegimos el negro es que es bonito y oscuro. Más adelante, te mostraré cómo puedes cambiar el color del contorno para obtener más realismo.

DOS ENFOQUES

Hay dos formas de acercarse al contorno. Puede dibujar el contorno a mano alzada y luego limpiarlo, o puede comenzar colocando los píxeles como desee desde el principio. Usted sabe, como, "haga clic, haga clic, haga clic".

Creo que el enfoque que debes usar depende del tamaño del sprite y tu habilidad para hacer pixeles. Si un sprite es muy grande, es mucho más fácil dibujar el contorno a mano alzada para obtener la forma general y luego limpiarlo más tarde que tratar de hacerlo correctamente la primera vez.

En este tutorial, estamos creando un sprite bastante grande, así que demostraré el primer método. También es más fácil de ilustrar con texto e imágenes.

PASO 1: ESQUEMA DE CRUDO

Usando su mouse o tableta, dibuje un esquema en bruto para su sprite. Sin embargo, asegúrese de que no sea TAMBIÉN crudo, debe parecerse más o menos al producto final que desea.

En este caso, baso mi esquema casi por completo en mi boceto.

PASO 2: LIMPIAR EL ESQUEMA

Primero, suba el zoom a aproximadamente 6x u 8x aumentos para que podamos ver cada píxel claramente. Entonces limpia ese contorno! En particular, desea recortar los píxeles perdidos (el contorno solo debe tener un píxel de grosor), deshacerse de cualquier irregularidad y agregar cualquier pequeño detalle que se haya pasado en el Paso 1.

Incluso los sprites grandes nunca superan los 200 por 200 píxeles. La frase "hacer más con menos" nunca suena más verdadera que cuando se hace un pixel. Y pronto descubrirás que un píxel puede marcar la diferencia.

Mantenga su esquema simple. Los detalles emergerán más adelante, pero por ahora, concéntrate en definir las "piezas grandes", como la segmentación muscular, por ejemplo. Puede que no parezca mucho ahora, pero se paciente.

5. COLOR

Una vez hecho el esquema, tenemos un libro de colorear que podemos rellenar. Pintar cubos y otras herramientas de relleno nos lo facilitarán aún más. Sin embargo, escoger colores puede ser un poco más difícil, y la teoría del color es un tema que está fuera del alcance del tutorial. Sin embargo, aquí hay algunos conceptos básicos que es bueno saber.

MODELO HSB COLOR

HSB significa (H) ue, (S) aturation y (B) rectitud. Es uno de una serie de modelos de color de computadora (es decir, representaciones numéricas del color). Otros ejemplos son RGB y CMYK, de los que probablemente haya oído hablar. La mayoría de los programas de pintura utilizan HSB para seleccionar el color, así que vamos a desglosarlo:

Hue  - Lo que entiendes por "color". Ya sabes, como "rojo", "naranja", "azul", etc.

Saturación  : qué tan intenso es el color, o qué tan intenso es el color. La saturación al 100% le proporciona el color más brillante y, a medida que disminuye la saturación, el color se vuelve más gris.

Brillo  (o “luminosidad”): luminosidad de un color. 0% de brillo es negro.

ELECCIÓN DE COLORES

Los colores que elija dependen de usted, pero aquí hay algunas cosas que debe tener en cuenta:

1.  Los colores menos saturados y menos brillantes tienden a verse más "terrenales" y menos caricaturescos.

2.  Piense en la rueda de colores: cuanto más alejados estén los dos colores, más se separarán. Por otro lado, los colores como el rojo y el naranja, que están muy cerca de la rueda de colores, se ven bien juntos.

3.  Cuantos más colores uses, más distraído se verá tu sprite. Para hacer que un sprite se destaque, use solo dos o tres colores principales. (¡Piensa en lo que hicieron rojo y marrón para Super Mario en su día!)

Aplicando colores

La aplicación real de color es bastante fácil. Si está utilizando Photoshop, primero debe seleccionar el área que va a rellenar con la varita mágica   (acceso directo “W”) y luego rellenar presionando “Alt-F” (color primario) o “Ctrl-F” (color secundario).

6. SHADING

El sombreado es un paso crucial en nuestra búsqueda del estado de pixel demi-dios. Aquí es donde el sprite obtiene un pop, o se convierte en un desastre horrible. Sin embargo, presta atención a mis palabras y estás seguro de tener éxito.

PASO 1: ELEGIR UNA FUENTE DE LUZ

Primero, tenemos que escoger una fuente de luz. Si su sprite es parte de una escena más grande, puede haber todo tipo de fuentes de luz locales (como lámparas, fuego, lámparas en fuego, etc.) brillando en él. Estos pueden mezclarse en formas muy complejas en el sprite. Para la mayoría de los casos, sin embargo, elegir una fuente de luz distante (como el sol) es una mejor idea. Para los juegos, querrá crear un sprite que esté lo más iluminado posible para que pueda usarse en cualquier lugar.

Por lo general, elijo una fuente de luz distante que está en algún lugar por encima del sprite y ligeramente delante de él, de modo que cualquier cosa que esté en la parte superior o delantera esté bien iluminada y el resto esté sombreado. Esta iluminación parece la más natural para un sprite.

PASO 2: SHADING

Una vez que hemos definido una fuente de luz, comenzamos a sombrear las áreas que están más alejadas de la fuente de luz con un color más oscuro. Nuestro modelo de iluminación "hacia arriba y hacia el frente" dicta que los lados inferiores de la cabeza, los brazos, las piernas, etc., deben estar sombreados.

Recuerda que el juego entre la luz y la sombra define cosas que no son planas. Arrugue un trozo de papel blanco en una bola, luego desenróllelo y colóquelo en una mesa. ¿Cómo puede saber que ya no es plano? Es porque puedes ver las pequeñas sombras alrededor de las arrugas. Use el sombreado para resaltar los pliegues de la ropa y para definir la musculatura, el cabello, el pelaje, las grietas, etc.

PASO 3: SOMBRAS SUAVES

Un segundo tono, más claro que el primero, debe usarse para sombras suaves. Estas son áreas que están iluminadas indirectamente. También se puede utilizar para pasar de la oscuridad a la luz, especialmente en superficies curvas.

PASO 4: DESTACADOS

Los lugares que son golpeados directamente por la fuente de luz pueden tener puntos destacados aplicados en ellos. Los puntos destacados deben usarse con moderación (mucho menos que las sombras), porque distraen.

Siempre aplique luces tras sombras, y se ahorrará un poco de dolor de cabeza. Sin las sombras ya colocadas, estarás inclinado a hacer que los reflejos sean demasiado grandes.

NORMAS

Sombrear es donde la mayoría de los principiantes se hacen tropezar. Aquí hay algunas reglas que siempre debe seguir al sombrear:

1. No uses gradientes.  El último error de sombreado de newb. Los gradientes se ven terribles, y ni siquiera comienzan a aproximarse a la forma en que la luz realmente se reproduce en una superficie.

2. No utilice "sombrilla de almohada".  El sombreado de la almohada es cuando una sombra del contorno interior. Se llama "sombrilla de almohada" porque se ve acolchada e indefinida.

3. No uses demasiados tonos.  Es fácil pensar que “más colores es más realista”. En el mundo real, sin embargo, tendemos a ver las cosas en grandes parches de luz y oscuridad; nuestros cerebros filtran todo lo que hay en medio. Use como máximo dos tonos de oscuro (oscuro y muy oscuro), y dos tonos de luz (claro y muy claro) sobre el color de la base.

4. No uses colores que sean muy similares.  No hay razón para usar dos colores que sean muy similares entre sí. A menos que quieras sprites realmente borrosos!

7. DITHERING

La conservación del color es algo de lo que los artistas de píxeles deben preocuparse mucho. Una forma de obtener más tonos sin usar más colores es usar una técnica llamada "dithering". Similar al "rayado cruzado" o "punteado" en el mundo del arte tradicional, toma dos colores y los entrelaza para obtener, para todos los efectos, un promedio de los dos colores.

Ejemplo simple

Aquí hay un ejemplo simple de usar dos colores para crear cuatro tonos diferentes usando el dithering:

EJEMPLO AVANZADO

Compare la imagen superior, que se hizo con la herramienta de degradado de Photoshop, y la parte inferior, que se creó con solo tres colores utilizando el dithering. Observe los diferentes patrones que se utilizaron para crear los colores intermedios. Intenta experimentar con diferentes patrones para crear nuevas texturas.

SOLICITUD

Dithering puede darle a tu espíritu ese agradable toque retro, ya que muchos de los videojuegos antiguos confiaban mucho en el dithering para obtener el máximo provecho de sus limitadas paletas (mira Sega Genesis para ver muchos ejemplos de dithering). No es algo que use muy a menudo, pero para aprender, aquí se aplica (posiblemente se aplica en exceso) a nuestro sprite.

Puedes usar el dithering tanto o tan poco como quieras. Honestamente, es una técnica que solo he visto a algunas personas usar muy bien.

8. DESCRIPCIÓN SELECTIVA

Esquema selectivo, o "selout", es algo así como sombrear el contorno. En lugar de utilizar el negro en todos los sentidos, aplicamos un color más cercano al color del propio sprite. Además, variaremos el brillo de este contorno a lo largo del borde del sprite, dejando que la fuente de luz dicte qué colores aplicamos.

Hasta este punto, hemos mantenido el contorno negro. Y no hay nada de malo en eso, realmente, ya que se ve bastante bien y mantiene el sprite bien separado de su entorno. Pero al usar negro, estamos sacrificando más realismo del que nos gustaría, ya que le da al sprite un aspecto "caricaturesco". Selout es una gran manera de evitar eso:

Notarás que también usé el selout para suavizar los pliegues de sus músculos. Finalmente, el sprite comienza a parecer un todo coherente en lugar de un montón de piezas separadas.

Compara esto con el original:

9. ANTI-ALIASING

El suavizado funciona bajo una premisa simple: agregue colores intermedios a los pliegues de la línea para suavizarlos. Por ejemplo, si tiene una línea negra sobre un fondo blanco, entonces agregaría píxeles grises al borde de la línea para suavizarla.

TÉCNICA 1: CURVAS SUAVES

En general, usted desea agregar sus colores intermedios en las torceduras, ya que ahí es donde la línea se rompe y se ve desigual. Si aún parece demasiado desigual, agregue otra capa de píxeles más clara. Haga que sus capas intermedias fluyan en la dirección de la curva.

No creo que pueda explicarlo mejor que eso sin complicar las cosas. Solo mira las fotos, y creo que entenderás lo que quiero decir:

TÉCNICA 2: REDUCIR HUMPS

TÉCNICA 3: DESAPARECIDOS DE LAS LÍNEAS

SOLICITUD

Ahora vamos a anti-alias nuestro sprite. Tenga en cuenta que si desea que su sprite se vea bien en cualquier fondo de color, no aplique anti-alias en su borde exterior. De lo contrario, verás un "halo" de aspecto desafortunado de tus colores intermedios alrededor de tu sprite y se verá desagradable como el infierno.

El efecto, como puede ver, es sutil, pero hace una gran diferencia.

¿POR QUÉ HACERLO A MANO?

Puede preguntar por qué no solo aplicamos un filtro de nuestro programa de pintura al sprite si queremos que se vea más suave. La respuesta es que ningún filtro hará que tu sprite tenga un aspecto tan limpio como si lo hicieras a mano. Usted tiene control total, no solo sobre la cantidad de colores que usa, sino también dónde se utilizan. Y usted sabe mejor que ningún otro filtro qué áreas deben suavizarse y qué áreas perderán su calidad de píxel si las suaviza.

10. Acabado

Menos mal, es hora de apagar la computadora y tomar una cerveza fría. ¡Pero no del todo! La última parte es lo que separa a un aficionado entusiasta de un profesional endurecido.

Da un paso atrás y echa un buen vistazo a tu sprite. Lo más probable es que todavía sea un poco difícil. Tómese el tiempo para refinarlo y asegúrese de que todo esté perfecto. Da o toma lo cansado que estás, esta puede ser la parte más divertida. Agrega pequeños detalles para hacer tu sprite más interesante. Tu habilidad y experiencia con los pixeles se mostrarán aquí.

Es posible que se haya estado preguntando por qué los ojos del Abogado de Lucha han estado perdidos todo este tiempo, o por qué la chica que sostenía estaba en blanco. Bueno, es porque esos eran pequeños detalles que quería guardar hasta el final. También note el adorno que agregué a sus brazaletes, la mosca que agregué a sus pantalones y ... bueno, ¿qué sería un hombre sin sus pezones? También oscurecí la mitad inferior de su torso para que su mano izquierda se destacara más contra su cuerpo.

¡Por fin has terminado! El abogado de Lucha tiene un peso relativamente ligero de 45 colores (o quizás de peso ultra pesado, según las restricciones de su paleta) y tiene unas dimensiones de aproximadamente 150 por 115 píxeles. Ahora puedes tomarte esa cerveza!

TODO EL PROCESO

Esto siempre es divertido. Aquí hay un .gif animado que muestra la evolución de nuestro sprite:

PENSAMIENTOS DE CIERRE

1.  Aprender los fundamentos del arte y practicar con los medios tradicionales. Todas las habilidades y conocimientos relacionados con el dibujo y la pintura se aplicarán también a los pixeles.

2.  Comience con pequeños sprites. La parte difícil es aprender a agrupar muchos detalles en unos pocos píxeles, no hacer sprites enormes (eso solo lleva tiempo).

3.  Estudia la obra de los artistas a los que admiras y no tengas miedo de no ser original. Morder el trabajo de otras personas es la mejor manera de aprender. Lleva tiempo encontrar tu propio estilo.

4.  Si no tienes una tableta, consigue una. Las lesiones por estrés repetitivo por hacer clic con el ratón no son divertidas y no impresionarán a ninguna mujer o caballero. Estoy usando un pequeño Wacom Graphire2 que me queda bien. Disfruto de lo poco que ocupa mi escritorio y de lo portátil que es. Sin embargo, puede sentirse más cómodo con una tableta más grande. Prueba de conducir primero!

5.  Comparte tu obra de arte con otros y recibe comentarios. ¡Y quién sabe, podrías conocer a algunos nuevos amigos geek!