Entrá al mundo del Pixel Art - Megapost
paint

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 español. Espero que les guste y aprendan algo.

pixel

Ilustrator

tutorial

imagenes

arte

photoshop

megapost

art

Entrá al mundo del Pixel Art - Megapost

paint

pixel

Ilustrator

tutorial

imagenes

arte

photoshop

megapost

art

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 explicación razonable.

Entrá al mundo del Pixel Art - Megapost

paint

pixel

PIXELART

Técnica de dibujo realizada punto por punto donde se pueden crear dibujos, imágenes, animaciones etc..

Ilustrator

Line-Art

Es el dibujo o imagen hecho con líneas en blanco y negro.

tutorial

Sel-Out

Técnica 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í.

imagenes

Gradient

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

arte

Pillow Shading

es cuando haces líneas consecutivas de color para simular sombras : Efecto que usa las variantes de tono de un color para llenar espacios, etc..

photoshop

Dithering

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

megapost

OUTLINE

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

art

Paleta De Colores

Serán 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...

Entrá al mundo del Pixel Art - Megapost

AA/Anti-Alias

Efecto que proporciona a una imagen sensación de suavidad y se utiliza un color medio entre el color que queremos suavizar y el fondo.

paint

Gráficos Isométricos

Son aquellos gráficos hechos en perspectiva isométrica vistos a 26.565

pixel

Sprite

Los sprites son las imágenes de los personajes, bichos, etc. Por ejemplo los personajes del Streets of fighter son Sprites, el muñeco que manejas en los rpg es un sprite, se podría 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.

Ilustrator

Frames

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

tutorial

imagenes

arte

Este tutorial solo muestra una forma personal de cómo 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 querían.

Las herramientas que necesitaremos para este tutorial:

1 - Lápiz y papel.
2 - Scanner o una cámara
3- Un programa que funcione en base a bitmaps o pixeles y que tenga capas y una interfaz de animación 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 posición inicial que queramos o con un estilo en particular, aquí deciden si lo quieren delgado, musculoso, gordo, pequeño o lo que ustedes se les ocurra.
Yo decidí hacerlo grande y musculoso.

photoshop

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 tamaño que nosotros deseemos.

megapost

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 después de este paso deciden trazar un las líneas o outlines, eso puede servir para cuando nuestro personaje es estático o no tiene animación.
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.

art

Entrá al mundo del Pixel Art - Megapost

paint

pixel

Ahora nos ha quedado la posición inicial que nosotros queremos para nuestro personaje, además le arreglamos un par de detalles para que se viese en una posición más fluida y cómoda.

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á.

Ilustrator

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 animación, primero definiremos los keyframes o cuadros clave que nos ayudara a entender el movimiento de nuestro personaje. Esta animación será de un golpe de pie.
Nuestro primer frame es el inicial:

tutorial

Nuestro segundo frame es levantando la pierna:

imagenes

El Tercer frame es el Golpe

arte

Acá podemos ver la unión de los frames:

photoshop

Algo se entiende de esto. ¿O no?

Ahora iremos agregando frames que van entre nuestros key frames para hacer una animación 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:

megapost

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í quedaría nuestra animación después de ese combo:

art

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

Entrá al mundo del Pixel Art - Megapost

Cuando tengamos nuestra base lista y animada haremos el delineado de nuestro personaje, esto le dará más carácter, y definición a sus rasgos.

paint

Definimos el primer frame básico, y luego continuamos con cada uno de los cuadros hasta que estén todos delineados, no tiene que ser perfecto, luego limpiaremos las líneas y definiremos ropa y cara.

Así queda nuestro sprite después de terminada esta fase, como vemos aun no esta 100% definido:

pixel

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

Ilustrator

Ciertos rasgos en esta etapa no tienen que ser necesariamente definitivos, pueden servir como guías para futuros cambios.

Ahora le pondremos pantalones y bototos, es simplemente hacer una línea en la cintura y otra en las canillas.

tutorial

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

imagenes

Ahora destaca mas y esta agarrando buena pinta, pero los pantalones no parecen mucho pantalones, sino pantys. Le agregaremos algo de textura:

arte

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

photoshop

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 más las facciones y músculos.

megapost

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:

art

Esta casi completo pero falta algo, el color de piel se ve muy poco vivo, aplicaremos una transición de color con un tono más saturado que el resto del cuerpo:

Entrá al mundo del Pixel Art - Megapost

Esto le da un poco mas de vida, además borre el delineado para quitar la sensación de imagen plana, como si de verdad le llegase luz.
Hacemos el mismo paso con los pantalones:

paint

Nuestro personaje esta listo para salir a patear cabezas.
Aunque si tienen tiempo pueden seguir agregándole detalles y mas colores, arreglando cosas que no les guste, etc.

Yo decidí para el producto final agregarle dos colores para suavizarlo aun mas:

pixel


Ilustrator

tutorial

Mis intentos de Pixel Art

imagenes
arte

photoshop

Bueno, espero que les haya servido o gustado. Dejen su comentario.