viernes, 11 de marzo de 2011

Pixels Shots: Tutorial paso a paso

A estas alturas todo el mundo conocerá el trabajo de Aled Lewis por sus imágenes 8 biteras con aspecto añejo y vintage (como me gusta usar esa palabra). Podéis ver unas cuantas aquí.

Un artista con muy buenas ocurrencias, que es lo más importante.

Pues bien, me he puesto manos a la obra para recrear una imagen de características parecidas y explicar paso a paso como construirla.

Aquí esta:


Doom Vs 'The Duke'


Quieres probar? Sigue el tutorial después del salto.




Lo primero es abrir un documento y pintar el fondo de un color suave, en mi caso Beige. Con la herramienta de degradado, oscurece un poco los bordes de manera desigual para que no quede del todo uniforme. Esto servirá como base.



El siguiente paso es dotar al lienzo de textura. Para ello necesitarás una imagen de papel arrugado, suciedad o cualquier cosa que provoque un cierto efecto de viejo o granulado.



Coloca la imagen de manera que te guste el efecto y después dale la opción de mezcla 'luminosidad'. Debería quedarte así:



Ahora viene la parte creativa. Elige los Sprites que necesites para montar tu imagen desde cualquiera de las fuentes que puedes encontrar por internet, y ábrelas en Photoshop.

El sprite en cuestión será muy pequeño y si lo ampliamos de cualquier manera, se aplicará el antialiasing y sólo conseguiremos emborronarla.

La manera es ampliar la imagen con la lupa y cuando la tengamos en el tamaño deseado pulsar 'imprimir pantalla' y abrir la imagen en otra hoja para poder recortarla.




Hacemos lo mismo con los Sprites que queramos en la imagen y con la herramienta de Varita mágica le borramos el fondo y limpiamos la imagen (con el tipo de seleccionador que necesitemos). 

En el caso del marine de Doom, tuve que borrarle la sangre del brazo y de la barriga, y añadí unas gotas de sangre alrededor de la cabeza para simular el impacto de la bota de Duke.

Finalmente, colocamos en el lienzo los Sprites, cambiamos su tamaño, rotamos y lo que sea necesario y una vez hecho jugamos con los tipos de mezcla para integrarlo en la imagen (prueba con luz focal o luz fuerte, dependiendo de la imagen y su colorido) así como con las opacidades.



Listo!

Para el que se anime, estaré encantado de ayudar y si alguien quiere ver algún montaje del mismo estilo, que me lo pida en mi correo pixelsmil@gmail.com

Espero que os haya gustado. 

P.D: Duke Wins!


10 comentarios:

  1. Que grande!!
    Te ha quedado fantástico!!
    Me ha encantado!
    En serio, estás hecho todo un artista del pixel :D
    Puestos a pedir, te atreverías con un montaje de Sonic y Mario, o Link contra Ganondorf, o quizá Snake contra Big Boss...
    Qué se yo, con lo bien que te quedan cualquiera vale =D

    ResponderEliminar
  2. Muchas gracias!!

    Tomo nota para hacer alguno más en el futuro.

    Me alegro que te haya gustado ;)

    ResponderEliminar
  3. No sabía que sería tan fácil. Soy más de ilustraciones curradas, pero para pasar la tarde no está mal ^^

    ResponderEliminar
  4. Esa era la intención, mostrarlo fácil!

    Un saludo

    ResponderEliminar
  5. quedaria de vicio en un cuadro en la habitación.

    ResponderEliminar
  6. Te ha faltado rellenar las zonas que eran blancas de píxeles blancos, los brillos te han quedado transparentes y queda raro. Por lo demás, está muy bien, gracias por el tutorial.

    ResponderEliminar
    Respuestas
    1. En realidad es debido al efecto de tipo de fusión que quedó un aspecto un poco traslúcido y no le dí una capa extra de brillos. Se agradece la crítica constructiva, un saludo!

      Eliminar
  7. Pero... pero, pero, pero.
    No es un verdadero pixelado oldschool en apariencia si somos detallitas. Los pixeles no quedan ajustados a una matriz. Siquiera los pixeles de Duke estan orientados en la misma direccion que los del enemigo. Por supuesto me refiero a los cuadrados gigantes que simulan pixeles, porque en realidad la imágenes esta formada por pixeles reales (además de los que se quieren imitar). Dicho de otra forma, esos pixeles chuecos estan formados por muchos pixeles más pequeños orientados correctamente.
    Eso es un error bastante comun que se puede apreciar en casi todos los juegos indies con graficos con cuadraditos del tamaño de puños. Es más fácil rotar una imagen (quede como queden los pixeles imitados) que tener que dibujar un cuadro o frame nuevo con los pixele simitados en correcta orientacion.

    ResponderEliminar
    Respuestas
    1. Hola!

      Para ser fiel al píxel no hubiéramos empleado ni siquiera un fondo texturizado. La intención del tutorial era la de dar ideas para hacer composiciones al estilo de Aled Lewis o como en el caso, probar nuestras propias composiciones.

      Aunque me gusta mucho el estilo pixelart, no creo que haya que dar la espalda a las nuevas técnicas que emplean los juegos actuales. Ver rotar un sprite sin deformarse lo más mínimo es genial! Respeto tu visión purista y de hecho me gusta en ciertos momentos, pero no tiene por que ser el único camino.

      De todas formas, el tutorial ya tiene un par de años y quién sabe como lo hubiera enfocado ahora.

      Gracias por animarte a comentar, un saludo!



      Eliminar

Gracias por comentar!

Quizás también te interese...