How to create sprites easy using Photoshop

There are a few different methods of doing this. For the first method, I am going to guess that all of the images are the same size. For a tutorial on how to do it otherwise please view the end of this post.

 

I will create 11 images as an example in 3Ds max and each image will be the same size. Once the images are created, Open photoshop if it is not already opened(CS3 and above). Then go to File > Scripts > Load files into stack.

This window will pop up, This will let you choose a "folder" or "Files". This means you can either just use all of the images in the designated folder, or select each image using ctrl and click individually. This is handy if the folder contains other images.

Once you have found you files by clicking the Browse.. button, click ok and the images are getting converted into different ps layers.

 

Now, the resalution width of your seperate sprite images should by multiplied by how many images you have.

For example. I have 11 images at 200px width.

200 x 11 = 2200px.

Now you need to adjust the canvas size.    Image > Canvas Size…

Or shortcut keys ALT+CTRL+C

Now, all of the images are in the middle, so you need to change the position. To do this, I strongly recommend using the “Layer Edges”, to enable this

 

View > Show > Layer Edges

 

This will make your job a lot easier.

By holding down left shift while moving the images (to move press v) you can "snap" the image to the 1 axis. Also It will show you the exact location the image is moving into.

This should snap the images into position. After doing this, you can remove the background (if its green or if you want it transparent), but selecting colour range and deleting the background layer.

This is an example of what the sprite should look like.

 

 

Now, if the images you have are different resalutions its going to be difficult to make sprites for it. What I mean by this is, if you have an animation of an object moving with a transparent background photoshop will detect the transparent background as being “nothing”. So, to fix this can be quite simple. But sadly time consuming.

 

You will need to find the image in the animation where the resalution is at its greatest. You should use this as you height of the sprite. Now import the same way I said above. By making the width if the longest animation the “size” of each image. Once you know this, you will need to move each image using CTRL T and manually adding the PX of the image.

If I find an easier way of doing this I will update this blog. But there are some handy online sprite creators which might be easier for animations with many frames. Also Script auto sprites for photoshop are available for download but some of them may cost/not work with your current version of photoshop.

One thought on “How to create sprites easy using Photoshop

Leave a Reply

Your email address will not be published.


*