lunes, 21 de marzo de 2011

Aprendiendo Pixel Art : Tutorial de introducción

Últimamente me estoy interesando por el mundo del pixel art en vista isométrica. Un arte que aunque laborioso no me parecía demasiado difícil como para aprenderlo en corto plazo, pero como todo, es un mundo y es mucho más complicado de lo que parece.

Este es mi primer dibujo después de seguir varios tutoriales y vídeos extraídos de la red. Me ha llevado unos días acabarlo.




En este caso la transparencia de los cristales no es real sino que he buscado los tonos necesarios para recrear artificialmente ese efecto. Otra opción más rápida es hacer los cristales opacos y con reflejos o usar Photoshop para crear una capa traslúcida real.

Si te apetece aprender los fundamentos básicos (o tienes curiosidad por el asunto), te invito que pases a ver unos sencillos pasos para aprender lo básico y poder empezar a hacer figuras sencillas como esta:





Te animas? 

Continúa después del salto.





Y digo que me parecía sencillo porque hasta que no te pones con ello no te das cuenta de los problemas con los que te vas a encontrar. Pequeños detalles que hay que tenerlos bien claros.

Podemos usar Paint para este tutorial.



Paso1:

Lo primero que haremos es construir un cubo que es la pieza básica y fundamental del pixel art de vista isométrica.

Para ello debemos tener claro de como deben ser la lineas. Técnicamente el ángulo que usaremos es de 26,565º aunque es un dato extra, no tenemos porqué saberlo para poder dibujar.

Las lineas que tracemos estarán formadas por filas de 2 píxeles como se marca en la  ilustración:






Paso 2:

Hay varias maneras de construir un cubo pero la manera más sencilla es la que muestro secuencialmente en la ilustración:


pincha encima para ampliar


En este punto, a la hora de bajar las lineas verticales para cerrar el cubo, nos encontramos con la primera duda. Hay dos maneras de construirlo dependiendo de como cerremos las esquinas:




Utilizaremos el 'tipo 1' ya que dada su simetría queda más agradable a la vista.


Paso 3:

Pintaremos cada una de las caras teniendo como referencia una fuente de luz:







Y para darle un mejor acabado repasaremos las lineas interiores de un color más claro.




En la esquina podemos darle con un poco de blanco puro para resaltarla un poco más.


Paso final:

Para empezar, lo mejor es unir cubos para hacerse con la mecánica. Elige una forma sencilla para intentar recrearla. En mi caso he elegido al icónico marciano de Space Invaders.





Cuestión de ir probando y seguir aprendiendo.

Si alguien se anima, me puede enviar su dibujo a pixelsmil@gmail.com , espero que os haya gustado!






31 comentarios:

  1. Gran aporte compañero!
    Tus artículos valen su peso en oro :D

    ResponderEliminar
  2. Gracias por el comentario! Si sirve para que alguien se anime, me habrá valido la pena ;)

    ResponderEliminar
  3. Gracias... partiendo de cero es fácil animarse... A ver si sale algo...

    ResponderEliminar
  4. Cada dia te sales más!! Me encanta ;)

    Gracias ;)

    ResponderEliminar
  5. mucho te lo estas currando. igual le presento a la jefa los informes así, como son de su época igual así los entiende ;-)

    ResponderEliminar
  6. Estupendo tutorial. Parece hasta fácil y todo xD

    ResponderEliminar
  7. @miguel.txt
    Si te animas ya sabes, envíamelo por mail ;)

    @ L@ur@
    Muchas gracias!

    @darthtxelos
    Lo que es seguro es que su cara no tendría desperdicio XD

    @Zervio:
    El cubo en realidad si que lo es, lo complicado es todo lo demás XDD

    ResponderEliminar
  8. Bien! Aprendí por fin lo de los cubitos! :)

    Quedó bonito?

    http://s3.subirimagenes.com:81/imagen/7039977picachu.png

    Forever Paint. Subes mas tutoriales?

    ResponderEliminar
  9. Ha quedado chulísimo Marron91! Me alegra que te haya servido de ayuda y hayas logrado hacer un pichachu tan molón.
    Sobre los turoriales voy haciendo, debajo del banner en la sección de tutoriales los encontrarás pero puede que tarde en seguir con el pixelart isométrico.
    Te invito a seguir con el tema y me puedes enviar tus dibujos a pixelsmil@gmail.com donde te podré ayudar en lo que pueda.

    Gracias por comentar ;)

    ResponderEliminar
  10. una pregunta con que herramienta trazas en photoshop? usas el brush? o trabajas a una resolucion o medidas para que se vea pixeleado?

    ResponderEliminar
    Respuestas
    1. Hola! Te recomiendo el tutorial que hice para configurar Photoshop para el pixel art. Hay que desactivar todo lo que produzca antialiasing y usar el pencil con el tamaño de un pixel.

      http://www.pixelsmil.com/2011/08/configurar-photoshop-para-pixel-art.html

      Eliminar
  11. Hola! Toni esta genial el tutorial, eres un crack!

    ResponderEliminar
    Respuestas
    1. Gracias Jorge! Espero que te animes a probar algo :)

      Eliminar
  12. Heey muy buen tuto :)

    Ya lo revise (en el editor de sprites de Game Maker)

    Me gusto jeje lastima que soy un poco impaciente :P

    Saludos!

    ResponderEliminar
    Respuestas
    1. La verdad es que no hay que ser impaciente para estas cosas, pero como todo, con la experiencia cada vez se va tardando menos. Solo queda practicar ;) Gracias por comentar!

      Eliminar
  13. Me ha salido!!!!!!! Acabo de empezar con todo esto del pixel art, y creo que es una actividad muy entretenida y original.
    Además, me está sirviendo para hacer mi propio ideojuego :P

    Muchas gracias, me he puesto a hacer cubos verdes y de todos los colores, me ha servido de mucho :D

    Gracias!!!

    ResponderEliminar
    Respuestas
    1. Me alegra mucho oír eso! Ahora que ya le has perdido el 'miedo' a los píxeles ya estás lista para ir probando nuevas cosas. Ya verás como no puedes parar ;)

      Gracias por dejar tu comentario y si avanza ese videojuego, no dudes en mostrarlo!

      Eliminar
  14. Muy buen tutorial! Muchas gracias, me has enseñado algo muy importante, haré un proyecto grande con esto, me asegurare de enseñártelo cuando termine ^^

    ResponderEliminar
  15. Buen tutorial para los que comienzan pero había algo que me dolía a la vista viendo la imagen de la casa y por fin lo he encontrado jaja

    El tejado no sigue la perspectiva, si te sigues la línea de arriba del todo del tejado, verás que se inclina hacia arriba demasiado, en realidad tendría que ir acorde con la línea de los muros.

    Un saludo y espero que puedas llegar a crear verdaderas obras de arte en pixel art. ;)

    ResponderEliminar
    Respuestas
    1. Hola Carlos!

      Tienes toda la razón. En los diversos post que he ido haciendo durante estos años, he ido aprendiendo al mismo ritmo que escribía. Sin ir más lejos, éste dibujo es del 2011 (hace dos años ya :D) He pensado algunas veces de retocar éste y otros fallos que he ido viendo en artículos pasados (como por ejemplo, el poco contraste de los cubos que forman el invader en el ejemplo que firma el artículo) pero al final lo dejo tal y como está un poco por pereza y otro poco por que me gusta volver al cabo del tiempo, como en esta ocasión, y ver como surgió de forma original y como ha evolucionado mi técnica.

      Un saludo y gracias por animarte a comentar! :)

      Eliminar
  16. Una duda. ¿La imagen del marciano del Space Invaders está hecha poco a poco o has creado un cubo y lo has ido copiando y pegando convenientemente?

    PD: ¡Geniales los tutoriales, ojalá sigas con ellos!

    ResponderEliminar
    Respuestas
    1. Esa en cuestión está creada con un solo cubo y copiándolo en las distintas posiciones. De esa forma he ido a lo rápido para no tener que estar pendiente de las dimensiones.

      Gracias por comentar!

      Eliminar
  17. Hola, acabo de descubrir tu pagina hoy y permiteme decirte que esta increíble!!, empezaré a hacer varios de tus tutoriales, saludos desde Aguascalientes, México =)

    ResponderEliminar
    Respuestas
    1. Gracias! Ahora toca ponerlos en práctica. Si te animas, no dudes en mandarme tus resultados. Un abrazo!

      Eliminar
  18. Hola Toni Mi Nombre Es MAIKEL.
    Estoy especializado en videojuegos de plataforma y pensé q alomejor te interesaría que tu y yo cremos uno de pixel art.
    Por supuesto obtendríamos beneficios al 50% . Si Te Interesa Escribeme Gmail :workercrafter@gmail.com

    ResponderEliminar
  19. Hola Toni Soy Maikel He Cambiado de Correo
    Si estas interesado en la oferta q esta encima de esta Escribeme a :
    maikel2000IP@gmail.com

    ResponderEliminar
  20. Cuando te hayas pensado Lo de tu propio videojuego al 50% los Beneficios llama a. 684 30 07 68 o Escribeme a gmail maikel2000IP@gmail.com

    ResponderEliminar
  21. La verdad muy buen tutorial, esto me va a ayudar a la hora de hacer mis proyectos y una pregunta si es que no perdiste la cuenta después de 7 años, ¿Tienes algún tutorial para hacer fondos?

    ResponderEliminar
    Respuestas
    1. Digo después de 10 años xD, no vi bien la fecha en qué se publicó el blog

      Eliminar

Gracias por comentar!

Quizás también te interese...