Crear un sprite sheet desde photoshop

Existen muchas herramientas especificas para crear sprites, casi todos los programas de animación permiten exportar la secuencia de imágenes como un sprite sheet , es decir , una imagen con todos los sprites.

Sin embargo puede que queramos trabajar con photoshop directamente para crear nuestros sprites, afortunadamente el proceso para crear el sprite sheet es sencillo, aunque requiere de ayuda externa.
El workflow de exportación de animación en photoshop a sprite sheet seria el siguiente:

  1. En  photoshop CS6, crearemos un archivo nuevo, tendremos en cuenta que el tamaño que le demos sera la base para crear el sprite sheet
  2. En photoshop CS6 , abrimos la Ventana -> linea de tiempo y creamos una linea de tiempo basada en capas
  3. Cada fotograma se crea añadiendo un nuevo cuadro, los cuadros son visualizadores de capas las capas que estén visibles se verán en el cuadro y el resto no, por lo que es común trabajar con una sola capa por cuadro, para animaciones sencillas.
  4. Podemos comprobar como queda nuestra animación pulsando play.
  5. Guardaremos nuestro psd y haremos una copia para no destruir el trabajo.
  6. Trabajaremos sobre la copia , ahora si, cada capa debera corresponder a un único fotograma.
  7. Nos descargamos Sprite Sheet Generator que es un archivo de comandos de photoshop que nos permitirá automatizar la tarea.
  8. En photoshop CS6 vamos a Archivo-> Secuencia de comandos-> Explorar cargamos el Sprite Sheet Generator jsx , nos saldra una ventanita donde elegir columnas, filas y fotogramas a exportar.
  9. Pulsamos en Generate Document, para comprobar que nos genera lo que queremos.
  10. Guardamos como PNG.
Ad debug output

The ad is displayed on the page

current post: Crear un sprite sheet desde photoshop, ID: 2173

Ad: Anuncio2 (2573)
Placement: After Content 2 (after-content_2)

Display Conditions
general conditions
Adwp_the_query
term_id0
taxonomy0
is_main_query11
is_rest_api0
page01
numpages01
is_archive1
is_search1
is_home1
is_4041
is_attachment1
is_singular11
is_front_page1
is_feed1




Find solutions in the manual

Leave a Reply

Your email address will not be published. Required fields are marked *