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.

Next: I Like my Graphics Sliced Thin >>
 

More Photoshop Articles
More By James Murray

Comments On: Slicing and Saving Graphics in Photoshop for Use on the Web

· Why are the 1 pixel tall/wide slices created in the tutorial?    · because they can be tiled to fill in large areas of the image that are the same. ...    ·  How do you do that? Good artical. I followed it pretty well.    · the article was excellent written, it clearly explains the types of images, but it...   >>> Post your comment now!