: Create a sprite using a sequence of images photoshop I would like to create a horizontal image sprite for use in a jQuery animation, how would i create a sprite from 190 images in a folder

@Murphy569

Although not directly related to Photoshop, I'd like to recommend TexturePacker.

I've used it in the past I'm pretty happy with it:
light, fast, easy to use, affordable and it generates clean code for most targets/frameworks out there(including css sprites).

The full version also offers command line access which makes it super easy to automate workflows.

Vote Up Vote Down

@Megan533

Well the obvious answer is to create a batch process to do it for you so you don't have to do it 190 times.

But maybe you can use one of Photoshop's automated processes to do it for you. In the old version of photoshop I use there's a Contact Sheet II process available. Perhaps you could set it up to include all the images you want to turn into a sprite, and then set the width to be the total width you expect all of the images to be, the height to be the max height of the individual images (so for example it'd be something crazy like 15,000 px X 200 px)

And then you'd set the "thumbnails" to be 190 columns and 1 row. Then turn off "Use Filename as Caption".

Oh and playing around with the spacing may help.

Vote Up Vote Down

@Jessie844

You have to open all images in your photohshop then you have to place them in one file which will be containing your horizontal image. next to each other this will be a big task and pain,

if you found any another way(rather than your mentioned script) of this please let us know


Tips for making css sprites
how to create css sprites

Vote Up Vote Down

@Hamm6457569

As I write code a lot too, I know your pain with this task. Luckily there are dozens of


Sprite Generators


out there. I don't even save the link, as you always find a fitting one soon. The above linked generator takes a ZIP file. Luckily they don't only give you the resulting sprite image/sprite, but write the CSS for you as well.

Sidenote/Hint: Pay attention how you name stuff. They normally order stuff by names. So if you got :active and :hover states, you should name them accordingly:


layer_active.ext,
layeractive.ext or
layer-active.ext.


The only thing that's now left is to write the (pretty intense) mark-up :)

Vote Up Vote Down