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

@Rivera951

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


Grids and Guides, that goes for Illustrator and Photoshop. Set up a grid that matches either the lagest size you'll be using or half the lagest size.


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


In theory, InDesign, as it has the best grid control. In practice, Illustrator and Photoshop, depending on where your files are.


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?


As far as I know there is no advantage really. Having done a 3000px sprite before I know its convenient for the developer as the coordinates change in fixed steps. So he wouldn't even have to look at the sprite if I added an item, he just fixed the coordinates in one dimension (e.g. +32px).

Vote Up Vote Down

@Becky351

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.

Vote Up Vote Down