Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Once you've got a sprite grid created, you're ready to start assembling your image sprite. I have open here a series of icons that I want to put into an image sprite, and I am going to utilize my sprite grid that I've created over here in order to do that. So I will go back over into my icons document and I will just select all of those different layers. You see here I have twitter, facebook, dribble, forrst, and g+. And I'm simply going to move all those over to the other document by clicking and dragging them over, and then I will release right there. Now I can select them individually and position them in the correct slots in my grid. So I will select twitter first and I will just drag twitter up and snap it right into place.
If you find that your icons aren't snapping, just go up to the View menu and choose Snap To, making sure that they snap to the gridlines that you have created. Do facebook next, snap that up; dribble goes right there in the middle; forrst and finally, g+. There we go! And so once I have those done, I'm ready to now add the hover state down here at the bottom. So I'm going to select all of these, and I'm simply going to hit Command+J or Ctrl+J on my keyboard.
And once I do that, I get copies of all of those. And now I am going to come out with my Move tool and I am just going to move them down until they snap to the bottom, like so. I've still got all of these selected over here and I am going to group them together with Command+G or Ctrl+G. Then I'll select the bottom layers by Shift+Clicking and Command+G or Ctrl+G to group those as well. So this top row here, I am going to name that Grayscale, and the bottom row, I am going to name that Color. And I will drag the Color beneath the Grayscale so we know which one is which.
And so now, for the Grayscale group what I want is for this top row, I want that to be in gray and then the bottom row, I want that to be in color. So basically what's going to happen when the developer gets a hold of this, it's going to display either the twitter, facebook, dribble, forrst, or g+ icon as gray at first, and then when someone hovers over that icon, it's going to shift upward to actually show the colored version of it. To the end user it looks like the image is just simply changing, but in fact all it's doing is shifting the position of the sprite inside of a little window.
So I will go ahead and come up to the Grayscale, click on the g+ icon right here, and then I'm simply going to add an adjustment layer of Black & White. And it really doesn't matter what this looks like. I can just collapse this. And then I'll collapse this group, just like that. Now since the Grayscale group is actually on top of the Color group, the Black & White layer is going all the way through. If you want to change that, just drag the Color group back on top of the Grayscale and now everything is good to go. So once we have the sprite assembled, let me show you exactly how this is going to work.
I will create a brand-new document, 32 pixels x 32 pixels. Hit OK. So when I am trying to display this somewhere on the web, this is the window in which I'm giving it to display, 32 pixels x 32 pixels. If I have my image sprite here displayed in this little window, I can only have room for one icon at a time. So let me create a flattened copy of this and then move it over there so I can show you exactly what it's going to do. So I am going to go to my keyboard here and I am going to hold down, it seems like the entire left-hand side of the keyboard, but it's not really.
Shift+Option+Command on a Mac, Shift+Alt+Ctrl on a PC, and then press the letter E on your keyboard. And you see that it gives me this new layer 1. And so now I am just going to take this layer 1 and I am going to move it over into this document here. And I'll zoom in so you can kind of see what it's doing. And I will move that in and snap it just like that. So if I was displaying the Twitter icon like this, this is what the user would see initially. All the rest of that image is hidden by a box that the CSS is controlling.
Now, when the user hovers over this, the actual image will shift upward like this to reveal the colored portion of the icon, and it's doing that through CSS positioning. It looks instantaneous to the user. They don't actually see this sliding up and down necessarily, but that's how it works. Same holds true if I had the Facebook icon in a window like this. The user hovers over it, the position merely shifts, and the colored icon is revealed.
When they mouse away from that, the original icon comes back, and that's all controlled through the CSS properties. The best part about this is though, all of these images are loaded already, so it's instantaneous whenever we display them anywhere else on the site. Pretty neat! So I will go ahead and hit Don't Save there, come back into my document, and I will throw away this layer 1. I just wanted to show you that for demonstration purposes. And so now we've essentially got our sprite completely created and we are ready to take it out and put it on the web.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.