GD 65 Class 06B

Topics

Image Slicing
  • Advantages of Image Slicing
  • Slicing in Photoshop
  • Save Optimized Images

Image slicing

What do you do when you have all of your final design comps ready in Photoshop and you want to optimize all of the images you’ll need to build your web site? Saving each image one-by-one can be very inefficient. Slicing allows you to “cut out,” name, and optimize all of your images at the same time. This can save you a great deal of time and is easy to do.

Here’s an example web page that demonstrates the image slicing approach. This is the file I’m using in this exercise. (Control right-click to download file)


Overview

Many web designers develop their page layouts in Photoshop before they use an application such as Dreamweaver to assemble the page in HTML. This approach allows the designer to use all of the powerful layout and design capabilities of Photoshop to work on the creative aspects of laying out the page. Once a design is solidified, the designer must translate their Photoshop layout into the realities of HTML and limited download time. This involves compressing different parts of the layout in different ways– some parts will be GIF while others will be JPEG. To do this, it’s usually necessary to cut the original Photoshop image into smaller pieces. This is called image slicing.

Advantages of image slicing

By slicing the page into smaller graphics, the designer can optimize the page and compress parts of the web page individually, and leave parts of the page “transparent” so the background color or background image shows through. For example, use JPEG for a photograph in one part of the page, use GIF for a logo with a transparent background where the page background color shows through.

Example of sliced page:
Below is a diagram showing how the Photoshop image is sliced up to make the files that make up this web page.

(Please note that we will not create navigation or text that is image-based in our final projects except for a company logo.)

Slicing in Photoshop

An image is created and edited in Photoshop.

Open the Photoshop file and:

  • Choose VIEW > SHOW RULERS, and create any guides you may need to make your slices consistent.
  • Select the slice tool
  • Draw a slice by clicking and dragging to create a rectangle for your slice
  • Double click on the image to open the slice option palette, In the slice option palette, set the following attributes for the following sections:
    • Name: set the name of the file to be created for this slice (Photoshop creates a default file name, which I suggest you change)
  • After you have named all of your slices, select FILE > SAVE FOR WEB to individually optimize every image. In the save for web palette, set the appropriate image coding for every slice. Don’t forget transparency and matte if they are appropriate. Use the slice select tool (the alternate for theslice tool) to select different slices.
  • An easy way to remember the slicing process is as a 3 step process:
    Step 1- slice
    Step 2- name

    Step 3- optimize

Save Optimized Images

When you are ready to save your sliced images, you can should create image files only. When saving, be sure to set the following items:

  • The directory for the images
  • After you have completed steps 1-3 (slice, name, optimize) for every slice, you can save the files as images only. You do not need to change the name of the file. Save to a folder called “Photoshop.” Photoshop will create an images folder and will place your optimized images there. Note that image slicing often generates many images. In general, it’s recommended that you create separate image directories for each sliced page so you can keep track of the images better.Notice also the following settings:
  • Settings : Default Settings
  • Slices: User slices

WATCH: Optimizing photos as JPEGs

Leave a comment