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:
- 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
- En photoshop CS6 , abrimos la Ventana -> linea de tiempo y creamos una linea de tiempo basada en capas
- 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.
- Podemos comprobar como queda nuestra animación pulsando play.
- Guardaremos nuestro psd y haremos una copia para no destruir el trabajo.
- Trabajaremos sobre la copia , ahora si, cada capa debera corresponder a un único fotograma.
- Nos descargamos Sprite Sheet Generator que es un archivo de comandos de photoshop que nos permitirá automatizar la tarea.
- 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.
- Pulsamos en Generate Document, para comprobar que nos genera lo que queremos.
- 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
Find solutions in the manual
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
Ad | wp_the_query | |
---|---|---|
term_id | 0 | |
taxonomy | 0 | |
is_main_query | 1 | 1 |
is_rest_api | 0 | |
page | 0 | 1 |
numpages | 0 | 1 |
is_archive | 1 | |
is_search | 1 | |
is_home | 1 | |
is_404 | 1 | |
is_attachment | 1 | |
is_singular | 1 | 1 |
is_front_page | 1 | |
is_feed | 1 |
Find solutions in the manual