Está en la página 1de 23

Me decid a hacer un post de Pixel Art porque es algo simple y hasta se puede hacer con el Paint.

Los tutoriales no son mios, lo que hice fu traducirlos al espaol. Espero que les guste y aprendan algo.

Dithering es el acto de "pixelar" dos colores en ciertos patrones a fin de dar la apariencia de ser mezclado. Suena complicado? Este tutorial detallado y completo le proporcionar una explicacin razonable.

PIXELART
Tcnica de dibujo realizada punto por punto donde se pueden crear dibujos, imgenes, animaciones etc..

Line-Art
Es el dibujo o imagen hecho con lneas en blanco y negro.

Sel-Out
Tcnica aplicada mayoritariamente en sprites de lucha tipo Strets Fighters, pero que puede ser aplicada a cualquier imagen y que como veis en el ejemplo, este donde este el dibujo parece como si estuviera hecho para ese color fondo pero no es as.

Gradient
Efecto que usa las variantes de tono de un color para llenar espacios, etc..

Pillow Shading
es cuando haces lneas consecutivas de color para simular sombras : Efecto que usa las variantes de tono de un color para llenar espacios, etc..

Dithering
Efecto parecido al Gradient con la salvedad de que este alterna los tonos de colores.

OUTLINE
Esto seria el contorno del grafico, a diferencia del Line-art es simplemente la lnea que rodea al dibujo.

Paleta De Colores
Sern todos los colores que usemos para nuestro dibujo. Hay gente que selecciona los colores, hacen sus propias paletas para luego dibujar u otros hacen el dibujo probando colores a 24bits luego reducen etc...

AA/Anti-Alias
Efecto que proporciona a una imagen sensacin de suavidad y se utiliza un color medio entre el color que queremos suavizar y el fondo.

Grficos Isomtricos
Son aquellos grficos hechos en perspectiva isomtrica vistos a 26.565

Sprite
Los sprites son las imgenes de los personajes, bichos, etc. Por ejemplo los personajes del Streets of fighter son Sprites, el mueco que manejas en los rpg es un sprite, se podra decir que todo lo que puedas manejar/controlar es un sprite (un coche en el gta1, un personaje del final fight....). Como ejemplo esto serian los frames del sprite de un juego.

Frames
Los frames son los componentes de la animacin de un "sprite" al andar, correr, saltar... por lo cual gracias a los frames podemos ver al personaje moverse por la pantalla. Tambin decir que cuando mas frames tenga una animacin mejor suavidad le dara a los movimientos y mas realista ser el Sprite.

Este tutorial solo muestra una forma personal de cmo crear un sprite para un juego de pelea estilo Street Fighter Inicialmente cuando creamos un sprite nuevo es mejor dibujarlo en papel, principalmente para as ahorrar tiempo ya que el proceso puede llegar a ser tedioso o frustrante si se dan cuenta que el personaje no est bien o no es lo que queran. Las herramientas que necesitaremos para este tutorial: 1 - Lpiz y papel. 2 - Scanner o una cmara 3- Un programa que funcione en base a bitmaps o pixeles y que tenga capas y una interfaz de animacin cuadro por cuadro. ( PhotoShop, GraphicsGale, ProMotion) 4 - Paciencia y ganas de aprender. Iremos por pasos: Bosquejar un dibujo en papel no tan elaborado, mas que nada con una posicin inicial que queramos o con un estilo en particular, aqu deciden si lo quieren delgado, musculoso, gordo, pequeo o lo que ustedes se les ocurra. Yo decid hacerlo grande y musculoso.

Este dibujo nos servir como base para nuestro Sprite. Seleccionamos nuestro bosquejo y lo importamos o lo abrimos en nuestro programa seleccionado, puede ser graphicsgale, photoshop, promotion o el que les sirva. Luego lo escalamos a un tamao que nosotros deseemos.

Como vemos ya tiene una especie de apariencia de lo que vamos a ver como producto final pero muy a lo lejos. Hay personas que despus de este paso deciden trazar un las lneas o outlines, eso puede

servir para cuando nuestro personaje es esttico o no tiene animacin. Yo en este caso voy a colorear las diferentes partes del cuerpo con un color. En nuestro programa seleccionado creamos una capa nueva, si lo desean pueden ponerle un nombre como esqueleto o base, y empezamos a pintar sobre nuestro bosquejo escalado.

Ahora nos ha quedado la posicin inicial que nosotros queremos para nuestro personaje, adems le arreglamos un par de detalles para que se viese en una posicin ms fluida y cmoda. Ahora es el momento de animar nuestra masa de colores. Para eso en nuestro programa crearemos una capa por cada frame que hagamos. Yo recomiendo utilizar transparencias para entender mejor la fluidez del movimiento como se ve ac.

Si no se entiende la imagen, lo que sucede ac es que hay dos capas, la que esta mas abajo en nuestra capa inicial, a la que le baje la opacidad a un 50%, y arriba de ella se encuentra la segunda capa que no tiene transparencia u opacidad. Para crear nuestra animacin, primero definiremos los keyframes o cuadros clave que nos ayudara a entender el movimiento de nuestro personaje. Esta animacin ser de un golpe de pie. Nuestro primer frame es el inicial:

Nuestro segundo frame es levantando la pierna:

El Tercer frame es el Golpe

Ac podemos ver la unin de los frames:

Algo se entiende de esto. O no? Ahora iremos agregando frames que van entre nuestros key frames para hacer una animacin mucho mas fluida. Por ejemplo uno que va entre el frame inicial y el golpe cuando el pie esta a punto de dejar de tocar el piso:

Para ahorrar tiempo podemos reutilizar frames, en este caso lo podemos ocupar de esta forma: FRAME_INICIAL > frame_1 > FRAME_GOLPE > frame_1 > FRAME_INICIAL Y as quedara nuestra animacin despus de ese combo:

Un poco mas fluida, cierto? Pero aun no lo suficiente. Iremos agregando nuevos cuadros hasta que nuestra sprite quede animado como nosotros queramos.

Cuando tengamos nuestra base lista y animada haremos el delineado de nuestro personaje, esto le dar ms carcter, y definicin a sus rasgos.

Definimos el primer frame bsico, y luego continuamos con cada uno de los cuadros hasta que estn todos delineados, no tiene que ser perfecto, luego limpiaremos las lneas y definiremos ropa y cara. As queda nuestro sprite despus de terminada esta fase, como vemos aun no esta 100% definido:

Ahora empezamos a definir ms los rasgos de este sprite, comenzamos por darle un rostro y definiendo la musculatura:

Ciertos rasgos en esta etapa no tienen que ser necesariamente definitivos, pueden servir como guas para futuros cambios. Ahora le pondremos pantalones y bototos, es simplemente hacer una lnea en la cintura y otra en las canillas.

Ahora llego el momento de pintar a nuestro personaje, le daremos un aspecto algo militar:

Ahora destaca mas y esta agarrando buena pinta, pero los pantalones no parecen mucho

pantalones, sino pantys. Le agregaremos algo de textura:

Ahora si, pero quiero darle un rostro mas de malo, el actual parece un nio o huevo, as que le hago una frente mas prominente y unas cejas.

Ahora toca darle volumen, esto lo haremos con sombras. La luz vendr desde un punto arriba de el, como si fuese la luz de un ring de pelea. Esto nos ayudara a definir mucho ms las facciones y msculos.

Ahora no se ve tan plano como antes, al menos no el torso. Ahora toca darle sombras a los pantalones, recuerden que para dar un buen efecto traten de calcular una sombra proyectada, por ejemplo ac la sombra de sus brazos se proyectan en sus pantalones:

Esta casi completo pero falta algo, el color de piel se ve muy poco vivo, aplicaremos una transicin de color con un tono ms saturado que el resto del cuerpo:

Esto le da un poco mas de vida, adems borre el delineado para quitar la sensacin de imagen plana, como si de verdad le llegase luz. Hacemos el mismo paso con los pantalones:

Nuestro personaje esta listo para salir a patear cabezas. Aunque si tienen tiempo pueden seguir agregndole detalles y mas colores, arreglando cosas que no les guste, etc. Yo decid para el producto final agregarle dos colores para suavizarlo aun mas:

Mis intentos de Pixel Art