In this lesson, I learned about the importance of using an image sprite and how to create one.
Websites that have a lot of images in them can take a really long time to load, especially if those images are individually loaded one at a time from your server. Designers have found a way around this by using image sprites. Basically, a sprite is a collection of images that are put together into one single image and when a developer codes those images into the site, they use the x and y coordinates of each image to show only the portion that they need at any given place in the site. This reduces the number of server requests and saves you serious bandwidth and time in the long run.
Below, is an image of a very basic image sprite:
Now, I’m going to develop this image sprite, but before I can begin building an image sprite, I have to first open a new document with a grid that will allow me to easily position the sprites and give a clean x and y coordinate for the CSS.
I’ll start by going to the File menu and choose New and I’ll change the width to 160 pixels and the height to 64 pixels. To set the gird, I’ll start with cutting the document in half lengthwise by clicking and dragging from the horizontal ruler to 32 pixels down. I’ll then go to the View menu and click New Guide. With Vertical checked I’ll type in 32 pixels and I’ll increase the increments by 32 pixels until the grid is filled.
I’ll then open the psd file with all the icons and select all the icons in the Layers panel then click and drag to the document I just created.
Starting from the top left, I’ll select each individual icon in the Layers panel and move them to the separate grid boxes.
With all icons selected in the Layers panel, I’ll group them together by pressing Command+G and name the folder “normal”. I’ll then copy this group by pressing Command+J and naming that second folder “hover.” with the “hover” folder selected, I’ll click and drag it to fill the bottom grids.
I want the hover icons to be in gray, so to do this, I’ll select each icon in the “hover” group and press Shift+Command+U (Shift+Control+U for PC) to turn these icons to grayscale.
Finally, I need to save these for web. I’ll go to the File menu, scroll to Export and click on Save For Web. The only thing I’ll change here is the file format from JPEG to PNG-8. It’s important to choose the format that has a good quality at the lowest file size, so it won’t take forever to load on the webpage.
Leslie Nation 