Home arrow Photoshop arrow Page 2 - Slicing and Saving Graphics in Photoshop for Use on the Web

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.

Author Info:
By: James Murray
Rating: 4 stars4 stars4 stars4 stars4 stars / 33
July 27, 2004
  1. · Slicing and Saving Graphics in Photoshop for Use on the Web
  2. · Butcher your Graphics
  3. · I Like my Graphics Sliced Thin
  4. · Functional Formats
  5. · Please, Save Me!
  6. · Last Words

print this article

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:

Slicing in Photoshop

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.

Slicing in Photoshop

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.

blog comments powered by Disqus

- Photoshop Text Techniques: Transformers
- 3D Text in Photoshop
- Photoshop Text Tutorial: Creating Indy Text
- Photoshop Productivity Tips and Tricks
- Photoshop Keyboard Shortcuts
- The Critically Important Color and Gamma Cal...
- Using Adobe Photoshop CS, Part 2
- Using Adobe Photoshop CS, Part 1
- 20 Things About Photoshop You Have to Know
- Photoshop Tricks, Part 2
- Photoshop Tricks, Part 1
- Keeping Up Appearances: Techniques for Retou...
- Navigation Menus in Photoshop
- Slicing and Saving Graphics in Photoshop for...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials