Take the 2-minute tour ×
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.

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?

share|improve this question
1  
Recently I've been using this: draeton.github.io/stitches I just like the visual aspect of it.. –  Joonas Jun 13 '13 at 9:08
add comment

2 Answers

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.

share|improve this answer
1  
Great answer. Adding to it, I usually draw a grid with Guides, just to keep all sprites distributed regularly. This helps a lot when you have to start writing your css positions, because you know the numbers will always follow a pattern. –  Yisela Jun 13 '13 at 2:31
    
Indeed a good answer, thanks. One small part I have issue with is 'however you see fit', see I prefer to take a methodical, reusable approach that I can apply generally across many projects that require this. –  Dominic Jun 13 '13 at 16:55
    
Your coordinates are going to vary depending on the size of the images. If your purpose for a methodical approach is to simplify the CSS coding, then you can align all your images left and create a vertical sprite image. Then your background-scale coordinate will start with the image width and end with zero so: background-scale: Xpx 0px. OR, you can set up your images horizontally, then your background-scale property will start with 0, background-scale: 0px Xpx –  ckpepper02 Jun 14 '13 at 0:33
    
Yeah sticking to one axis is a good option, I still wonder if there is an optimum way to arrange the sprite for browser rendering, because I can actually watch some browsers load the image north to south/downwards so maybe arranging them vertically will help it load faster.. –  Dominic Jul 6 '13 at 11:59
add comment

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

share|improve this answer
add comment

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.