Tell me more ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.
up vote 5 down vote favorite
1

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 (around 220kb each file) into a single horizontal sprite?

share|improve this question
in the end i found a script for Photoshop that did what i needed it too, asouza.com/blog/?p=119 – Xavier Sep 8 '11 at 11:35

4 Answers

up vote 5 down vote

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 :)

share|improve this answer
1  
+1 for a good link – tepkenvannkorn Feb 12 at 5:34
1  
That sounds pretty slick. – Anonymous Feb 12 at 10:15
up vote 1 down vote

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

  1. Tips for making css sprites
  2. how to create css sprites
share|improve this answer
I dont want to be a pain in the ass.. but I couldnt help but commenting as this is the kind of stuff that happens to me. But if you check out Xavier's comment to his own question.. – Joonas Oct 5 '11 at 7:41
lol seems you dont like my posts, i answered this question coz i wanted to and that's it. – Jack Oct 5 '11 at 9:14
I know. Relatively rarely people posts things online on against their own will, but you said in your answer "if you found another way of this please let us know" and that is what he has already done in his comment to his own question... Just wanted to point that out. – Joonas Oct 5 '11 at 9:25
lollero you are awesome :) – Jack Oct 5 '11 at 9:33
up vote 2 down vote

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.

share|improve this answer
up vote 0 down vote

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.