How can I manually create a pixel perfect image sprite?

I want to use one of the Adobe Creative Suite 5 programs to create an image sprite of all the small icons and images on my webpages.

I’ve done it a number of times before in Photoshop but can’t quite get every icon to be at the exact coordinates I intend them to be at.

The last method I used was to explicitly define the correct size of each as a shape, and use snap-to and line guides to line them all up where I want each image, and then insert the images and hide the shapes.

This takes a little while and to my dismay, there always seems to be something that’s a pixel or two out of place, messing with my beautiful site designs.

What method can I use to set up a grid of images with varying sizes to be at specific coordinates?

Which of the Adobe CS5 Programs has the best functionality for this?

and a loosely relevant side question..

For the purpose of rendering in a browser as fast as possible, should the images be lined up vertically, horizontally or in a roughly equal sided rectangle?

Answer

Which of the Adobe CS5 Programs has the best functionality for this?

Depends on which you are designing your sprites in. I created UI buttons in Photoshop, so that’s what I used to create my sprite file. I used a JPG because it gave me the lowest file weight with all the different colors for my button.

What method can I use to set up a grid of images with varying sizes to
be at specific coordinates?

You may be over-thinking this process. You can simply lay your graphics out however you need them and with CSS point to the correct sprite through the background-scale property. I DO however, keep buttons that are generally the same size pretty close to one another for grouping purposes.

Essentially, it’s purely up to how you and the programmer work together. If you ARE the programmer, then align them however you see fit.

Attribution
Source : Link , Question Author : Dom , Answer Author : ckpepper02

Leave a Comment