Photoshop tutorial: How to create a sprite grid |

Uploaded by lynda on 23.07.2012

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.