lunes, 29 de agosto de 2011

Configurar Photoshop para Pixel Art : Tutorial

Varias personas se han puesto en contacto conmigo a través de pixelsmil@gmail.com para pedir algunos consejos y embarcarse en este mundo fantástico de baja resolución.  Animo a los que lean esto para invitarles a hacer lo mismo, y a los que ya estén en ello, a seguir investigando sobre el tema.

Antes de nada, aclarar que no llevo demasiado tiempo en este mundillo y probablemente algunas cosas mencionadas o métodos sean más que discutibles. Decir, que estoy abierto a escuchar y a las críticas constructivas.

La primera pregunta siempre es la misma, "Que programa uso?". Y es que en realidad hay un buen puñado de alternativas como Gimp, Photoshop, Paint.net, Cosmigo Pro Motion, Photobie, Rendera ...

Sin duda alguna, el primer programa que se debería utilizar para empezar, a mi parecer, es Ms Paint (el Paint de toda la vida, vamos) ya que es muy sencillo de utilizar y trabaja a nivel pixel y sin antialiasing de por medio. Además no necesita una configuración previa.

Pero vayamos por partes, hoy empezaré por aquellos que quieran utilizar Photoshop para su andadura pixel.





Una vez acabado el tutorial, tendremos el programa enfocado al diseño pixel. Así que si te interesa, te invito a pasar después del salto para ver como hacerlo.




Como bien sabrán los que frecuenten el lugar, yo dibujo con Cosmigo Pro Motion, pero cada vez es más frecuente acabar pasando mis imágenes por Photoshop para acabar de editarlas. Esta bien no cerrarse a un solo programa y averiguar cual es nuestro modo de trabajo.

Pero me estoy desviando del tema. Empecemos creando un nuevo documento.

Vamos a trabajar a nivel de pixel por lo que nuestro documento no necesita ser muy grande, pero lo importante de verdad es la resolución. Para ello la fijaremos en 72 dpi como se muestra en la imagen.



El fondo podemos dejarlo trasparente, pero en este ejemplo lo haremos en blanco (luego podemos cambiarle el color) para apreciar mejor los detalles.

Cuando lleves un tiempo dibujando probablemente no necesitarás una cuadrícula, pero para empezar te lo recomiendo, sobretodo, si quieres practicar copiando sprites ajenos (que es una muy buena manera de habituarse con el tema).

Para ello iremos a Edit > Preferences > Grides, grid & slices. Y veremos una pantalla como esta.




En el apartado Grid (o rejilla), lo configuraremos como se muestra en la imagen. De esta forma, la rejilla se ajustará correctamente y tendremos una guía para dibujar.

Tenemos la rejilla configurada pero para mostrarla en pantalla la activaremos en el menú View > Show > Grid.

Se nos mostrará en pantalla un lienzo cuadriculado como éste. (está ampliado con el Zoom)



Uno de los pasos más importantes es cambiar el tipo de interpolación de imagen que por defecto estará en "Bicubic".

Al cambiar el tamaño de una imagen Photoshop intentará reescalarla utilizando distintos métodos. El modo Bicubic intentará suavizar la pérdida de información de la imagen pero nos dará un aspecto emborronado, mientras que el método Nearest Neighbor nos dejará la imagen pixelada con las aristas sin disimular.

Para entenderlo mejor, una muestra gráfica:




Para el Pixel Art necesitamos que no se nos suavicen los bordes y que cuando utilicemos las herramientas de selección, el antialiasing no nos juegue malas pasadas por lo que iremos al menú Edit > Preferences > General y cambiaremos la interpolación a  Nearest Neighbor.








Ahora estamos listos para comenzar a dibujar, seleccionaremos la herramienta lápiz a tamaño 1, y nos dispondremos a dibujar lo que queramos, en mi caso al dragón verde de Bubble Bobble tomando como referencia el sprite original.



Al aumentar el tamaño del lápiz, nos encontraremos que por defecto crece en cursor en forma de círculo, para cambiarlo, es tan fácil como desplegar el menú de la herramienta lápiz y escoger la librería de los brushes cuadrados.



La herramienta nos quedará asi:





En el dibujo de muestra estamos pintando pixel a pixel, pero si queremos hacer círculos o líneas, deberemos desactivar la opción de "Antialiasing" de la misma herramienta.

Seguimos dibujando pixel a pixel hasta quedar satisfechos con el resultado.




Al guardar el proyecto (en formato .PNG para no sufrir pérdidas de calidad) nos quedará el dibujo a su tamaño original y sin las rejillas como a continuación:




Para guardarlo a un mayor tamaño iremos al menú Image > Image size y cambiaremos el tamaño de la imagen. Sobretodo asegurarse que la interpolación esté en Nearest Neighbor.


Ya tenemos nuestra imagen guardada a un tamaño mayor y nuestro Photoshop configurado para este menester.




Espero que os haya gustado y que a alguien le haya resultado de ayuda. He intentado ser claro y explicar lo más importante para poder utilizar el programa lo más cómodamente posible.


Para cualquier duda, estaré encantado de ayudar en pixelmil@gmail.com.



22 comentarios:

  1. que buen tutorial me viene perfecto ahora que me esta empezando a interesar el mundillo del diseño, ahora solo falta que todo lo que he leído aquí ahora pueda conseguirlo hacer en gimp que es el programa que yo utilizo.

    ResponderEliminar
  2. Por lo que tengo entendido son muy parecidos. Básicamente lo que debes hacer es desactivar todas las opciones de antialiasing (es el enemigo) y si quieres, descubrir como activar la rejilla.
    Si te animas ya sabes quien quiere verlo ;)

    ResponderEliminar
  3. Vas a hacer uno de gimp? Por cierto, me falta poco para acabar el pixel art, solo me falta acabar el suelo y el fondo y algunos detalles :D

    ResponderEliminar
  4. Como siempre, tus tutoriales son de lo mejorcito.
    Me encantan :)

    ResponderEliminar
  5. @Sir Balsameda
    No he tocado mucho Gimp, pero básicamente se pueden llevar los mismo pasos citados a este programa.
    Estoy deseando ver acabado ese dibujo :D

    @Old school Generation
    Gracias por tus palabras, asi da gusto embarcarse en estos tutoriales ;)

    ResponderEliminar
  6. Sería buena idea hacer un tutorial con el Gimp.

    ResponderEliminar
  7. Pues por demanda popular, trataré de hacer un tutorial para los usuarios de Gimp, que al ser un progama tan potente y gratis, es para considerarlo como una opción más que razonable.

    Gracias Curetro por pasarte y comentar ;)

    ResponderEliminar
  8. Pues si vas a hacer el tutorial del gimp una cosa que me ahorro xD

    ResponderEliminar
  9. Gran tutorial.
    Lo que si te pediria, si no lo tienes ya y no lo he visto, es uno de animacion con spritesheets. Que estoy volviendome loco para hacerlos y que me reconozcan.
    :)

    ResponderEliminar
  10. Tengo uno para animar sprites. El resultado lo puedes guardar en imagenes sueltas, en una tira para utilizarlo en juegos o como gif animado.

    http://www.pixelsmil.com/2010/12/tutorial-aprendiendo-animar-en-2d-en-10.html

    Espero que te ayude!

    ResponderEliminar
  11. Excelente Tutorial, lo andaba buscando desde hace mucho en español, gracias por compartirlo :)

    ResponderEliminar
  12. y esta es la última pieza que me faltaba para dedicarme a esto a lo bestia. Muchas Gracias. Os debo una cerveza a todos.

    ResponderEliminar
  13. en donde esta el antialising?

    ResponderEliminar
  14. lo hice todo y incuso hice varios pixel arts pero como reincio la cnfiguraciones del phtoshop

    ResponderEliminar
    Respuestas
    1. Pues tan fácil como desactivar el grid, cambiar la interpolación a la que tu quieras y cambiar el brush con el antialiasing puesto. Realmente no hemos cambiado tantas cosas. Echa un ojo paso por paso y vuelve a dejarlo como estaba. Saludos!

      Eliminar
  15. Hola Toni! Muchas gracias por esta web ya que todo lo que pones me atrae, sin duda es algo que me gusta.

    Me descargué el Pyxel Editor que pusiste en la web, la versión gratuita aunque no dudo en comprarla algún día. Quería saber si tengo más ventajas configurando el Photoshop o con el Pyxel Editor en versión Free tengo lo suficiente.

    Y una cosa mas. ¿Estos sprites los puedo pasar a Game Maker Studio para posteriormente realizar un videojuego? ¿Si, verdad?

    ¡Un saludo y sigue así!

    ResponderEliminar
    Respuestas
    1. Hola y gracias por comentar!

      Pues el programa es lo de menos. Te vas a encontrar cientos de artistas que usarán programas distintos. Eso es lo de menos. Uno muy usado es Graphics Gale y yo, por poner otro ejemplo, uso Cosmigo Promotion.

      Elije uno y dibuja mucho hasta dominarlo y sentirte cómodo. Todo lo que dibujes te servirá para tus proyectos.

      Espero escribir otro Tutorial sobre el paso del diseño al Spritesheet.

      Eliminar
  16. sos un genio, muchas gracias, de verdad. más claro imposible

    ResponderEliminar

Gracias por comentar!

Quizás también te interese...