Join Justin Seeley for an in-depth discussion in this video Creating a sprite grid, part of Photoshop CS6 for Web Design (2012).
- View Offline
Before we can begin building image sprites in Photoshop, we have to first put together a document with a precise grid that will allow us to easily position our sprites and give us a clean X and Y coordinate for our CSS. I'll start off by going to the File menu and choosing New. Once I'm inside of the New Document dialog box, I need to create a document that will accommodate the full width of every icon in my set, as well as a height of double whatever the icons are, so that I can have both a normal and a hover state for each different button that I'm creating. So in this case each one of my icons is 32 pixels x 32 pixels, so I've got five icons in my set.
That equals 160 pixels across. And then each one is 32 pixels tall, so I need that to be double. That will be 64 pixels tall. And I'll hit OK. Once I do that, I need to go in and set up some preferences for my grid. So I use Command+K or Ctrl+K to open up my Preferences. I'll go into Guides, Grids & Slices. And inside of my Grid section by default it should say something like 1 inch over here on the right. I'm going to change this to say 32 pixels. So I want one gridline every 32 pixels, making it easy for me to assemble each 32 pixel x 32 pixel square into its own little slot.
I'll hit OK. And now I need to turn on the grid, so I'll go to View > Show, and I'll select Grid. There we go. Each one has its own little 32 pixel x 32 pixel square. Now as you work, you may find that the grid is a little bit distracting. It kind of takes away from the colors and it might not give you a good representation of what your artwork is actually looking like. So if you don't like these little gridlines all over your artwork, you can simply draw out guides to replace them. That's what I'm going to do now. So I'll draw out some horizontal guides. And if you can't see your rulers, hit Command+R or Ctrl+R to bring those up.
And I'll just drag out a ruler guide here, drag one out there, and they should snap right to these gridlines. And I'll draw out some vertical lines as well, just so we have some boundaries. And there we go. So now that I have all of those lines, I can actually go up to the View menu, choose Show, and turn off the Grid, and now I have a nice clean white canvas right there in the middle. Notice when I mouse over these I no longer get that small little control handle anymore. I can't do anything with them because the guides are locked.
So now I'm simply going to save this out and then I'm going to be able to use that to assemble my image sprites going forward. So anytime I have a 32 pixel x 32 pixel icon sprite that I need to create, this is what I would do. Now depending on how many icons in my set that I have, I might have a wider document or if I need more than one state, I might have a taller document. But this is the basic setup for every time I create a 32 pixels x 32 pixels sprite. Now if you have 64 pixels x 64 pixel sprites, you do the same thing; 512 x 512, whatever it might be.
It would always depend on what type of images you're working with, what type of icons you're designing, but this is the basic way that I set up my sprites each and every time.
- Customizing a web workspace
- Decoding the mysteries behind screen size and resolution
- Coloring web graphics
- Using layers and layer comps effectively
- Working with transparency
- Creating wireframes on a grid
- Styling text
- Creating image sprites
- Optimizing images as JPEG, GIF, or PNG files
- Integrating with the rest of the Adobe Creative Suite