Monday, 29 November 2021

Create Spritesheets in Photoshop

How to create spritesheets for a Street Fighter type game.
You can view the game live at
and you can download the code from

You will need to create 8 spritesheets to represent 8 different fighting moves

Each movement will have 
  • at least two frames, 
  • it can be no more than 30 frames (7680 pixels wide)
  • a starting point and an endpoint.
The starting point for movement is the same for every movement. 
You can view these sprites in the DLE







Designing images for screen based media such as websites and games require all measurements to be done in pixels and the resolution set to 72dpi (dots per inch, which is the same as pixels per inch)

Open up photoshop and change the units of measurement to pixels

Create a new photoshop file for each movement

Place each frame on a new layer

Open time line palette Window > Timeline

Click Create Frame Animation button

Click hamburger, top right in palette and choose Make Frames From Layers

Shift select the frames and 0.1seconds
You can now test your animation to see if it works.

Download the Sprite sheet generator
This script generates a single row spritesheet for Conflict of Character used for the ILLGA400 Illustration module.
Unzip the the zipped folder
Load the script into photoshop

Specify the height and number of frames

Save the file as a png