Slicing and Saving Graphics in Photoshop for Use on the Web
Images are the number one leader of average bandwidth usage. Usually it’s because the images that load on every single page are typically between a total of 60k and a total of 500k. That can easily make your bandwidth usage add up to beyond your limit per month. So what I’m going to be showing you is how you can cut your image’s file sizes in half, if not more.
Slicing and Saving Graphics in Photoshop for Use on the Web - Butcher your Graphics (Page 2 of 6 )
Since Photoshop 5.5, there have been tools that you can use to help you make your images ready for use with the web. The first one we’ll go over is the slice tool. This tool is the button on the right in the third row of tools in Photoshop’s toolbox. This is the tool that you’d use to slice your image into smaller parts so that they load faster in a browser. Before you begin to use this tool, you may want to section off your layout into a few different parts. Such as the logo image, the background, and then the content “block” as I call it.
Here’s the image I’ll be using:
As you can see, I have all three of the parts I described, the logo, the medium blue background, and the lighter blue content block. So the first thing I’m going to want to do is get the logo image ready. I use the slice tool to draw a box around the logo so that all of the logo is in the box I draw. This is what it looks like after I’ve sliced the logo.
As you can see, Photoshop will create a few more boxes around the rest of the image, these are called Non-User slices, and are denoted with gray tags. The ones you make are called User Slices, and are denoted with a blue tags. If you right click a Non-User slice you have the option to promote it to a User Slice, which will then give it the blue tag just as the regular User Slices have.
After you’ve slice your logo, you can go to the file menu then to “Save for web” option.