image slicing : 

building complex imagery for web sites

Many web designers develop their page layouts in Photoshop (or Illustrator) 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 (e.g. some parts will be GIF while others will be JPEG), and leaving some parts of the layout for live HTML. To do this, it's usually necessary to cut the original Photoshop image into smaller pieces. This is called image slicing.

Fortunately, the image slicing application ImageReady is shipped along with Photoshop, and the two programs are tightly integrated. ImageReady is a program specifically designed for image slicing, and contains many tools for this process. Macromedia Fireworks is another program designed for image slicing.

Here's an example web page that demonstrates the image slicing approach. Below is a diagram showing how the Photoshop image is sliced up to make the files that make up this web page.

By slicing the page into smaller graphics, the designer can:

• Compose the page in Photoshop - rather than Dreamweaver. Photoshop is a better design environment, and it allows imagery to be composited together into an integrated composition.
• Optimize the page - 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 3 bit GIF for a black and white logo, and use "no_image" for a flat area of color where the page background color shows through.
• Use live text - leave parts of the page available for "live" HTML text which requires very little download time compared to graphic text. HTML text can also be updated more easily than graphic text.
• Make graphic elements individual links - while his effect can be achieved with image maps, usually separate graphics for each link is better: better compatibility when the page is viewed without graphics (using the ALT text), better accessibility for the disabled, the ability to have rollovers for the links, and simpler updating of the page.
• Rollovers - rollover images can be created for each navigational element on the page which would not be possible if the page was one large image.

Page slicing can create numerous problems if the designer is not careful:

• Page size - by letting a program create all of your images, it is easy to let the page size grow too large. Be vigilant about the total page size when image slicing!
• Page complexity - image slicing programs can create a large number of cells in the page. If this happens, the browser will take longer to display the page, and the user feels it is taking longer to download. Keep the number of slices to a minimum so the page is not too complex.
• More complex design process - image slicing creates a more complex process, and may add to the time it takes to develop a web site. In particular, it make take longer to make changes to pages developed with slicing.
• Page payout - If you have a lot of live text in a page, it may cause the slices to change shape and break the layout. The best approach in this case may be to create the page's individual slices in the slicing program, but do the page layout in Dreamweaver.

Be methodical. Creating the numerous image slices for a web page makes the designer's job potentially very complicated. One has to keep track of the page layout, the precise dimensions of each graphic element, rollover highlights, etc. If any changes are made to the page after it's initially constructed, these factors become even more acute. As a consequence, the designer must take a very organized and careful approach to developing web page graphics. Here is one method:

1. Do the initial design and layout in Photoshop
2. Test the design in a web site by exporting a JPEG version of the entire page and use an image map for any links on the page
3. Based on the tests, revise the design in Photoshop and create a final comp
4. Create rollover highlights as separate layers
5. Switch to ImageReady and --
   1. Determine how the page will be sliced up to:
      1. compress each section of the image most efficiently (with JPEG or GIF)
      2. make slices for each rollover
   2. Create the image slices using the minimum number of rectangles for dividing the page. Try to keep the total number of slices under 15. It is better to have fewer, larger slices than many small slices.
   3. Set the image format for each slice (JPEG, GIF, level of compression, etc.)
   4. Set the transparency for the slice, and set the matte color
   5. Associate URLs with any slices that are links (in the Slice palette)
   6. Create the rollovers for the appropriate slices (in the Rollover palette). Set the layers on and off for the "over" state for each rollover, being sure that only the necessary layers are affected.
   7. Export all the slices along with an HTML page (ImageReady automatically creates a table that arranges the slices properly on the page). Save the image slices in a separate folder for each web page.
6. Modify the ImageReady generated HTML in Dreamweaver to finalize the page

ImageReady can be used in close tandem with Photoshop. An image is created and edited in Photoshop, and then the user switches to ImageReady by selecting the "Jump" button at the bottom of the tool palette. In ImageReady, the user can create image slices, animations, and even make changes to the image itself with the ImageReady editing tools.

Open the Photoshop file in ImageReady and:

• Choose VIEW>SHOW RULERS, and create any guides you may need to make your slices consistent
• Choose FILE>FILE INFO... and set the page title (where it says "Document Title " )
• Eye dropper the background color of your page or note the HTML color (e.g. #ffffff)
• Choose FILE>OUTPUT SETTINGS>BACKGROUND... to set the image background color or image
• Select the slice tool
• Draw a slice by clicking and dragging to create a rectangle for your slice
• In the optimize palette, set the appropriate image coding for this slice. Don't forget transparency and matte if they are appropriate. Use the slice select tool (the alternate for the slice tool) to select different slices.
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
• In the slice palette, set the following attributes for the following sections:
  • Type: select whether there should be a graphic or not in this slice
  • Name: set the name of the file to be created for this slice (ImageReady creates a default file name, which you can use)
  • URL: if this slice is to be a link, put the web page or site to be linked to
  • Target: Used in tandem with URL (and normally empty), this section can be used to open the link in a different window or frame
  • Alt: Used for the ALT text
  • Background: Sets the background color for this table cell
  • Status Bar Message: Creates JavaScript code to show a message in the status area at the bottom of the browser
    

To make rollovers in ImageReady, you create the highlighted version of a rollover in a separate layer, in the same place as the un-highlighted section of the main image. Once you've done this, follow these instructions to create the rollover:

• Select the slice you want to work on
• Open the Web Content palette
  
  
• Initially, there will only be a "Normal" image shown
• To create the "Over" state, click on the "new" icon at the bottom of the palette (the one that looks like a piece of paper with the edge folded up)
• With the Over state selected, turn on and off any layers you want for the rollover. Normally, you should only turn layers on and off that have pixels inside the area of the slice. By default, if you change pixels away from the current slice, nothing will happen unless you link the over state to the other slice you want to change. This is called a REMOTE SLICE. Remote slices use the "@" symbol in the Web Content palette. Drag this symbol to the slice you want to make a remote slice for the state. Search on "remote slice" in the ImageReady help system for more information about them.
  
  
• Be very careful to only make rollover changes to your layers when the "Over" state is selected in the rollover palette--not when the normal frame is selected. Otherwise, your rollover effects will be visible in the normal view, or may turn on at unexpected times.
• Similarly, when you are making general changes to the page (vs. rollovers), be sure to select the NORMAL box at the top of the Web Content palette. This will prevent you from making changes that are only visible in a particular rollover.
• Be sure to view your page in a browser to check if the rollovers are working correctly.

When you are ready to save your sliced images, you can create image files only, or create an HTML file with all of the images inserted in a table in the correct layout. This second option will also put in any JavaScript for rollovers. When saving, be sure to set the following items:

• Create HTML or not
• The directory for the images

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. For example, for the products.html page, put the images in a directory called products_images; for about_us.html page, put the images in a directory called about_us_images; etc. Set the image directory by selecting FILE>OUTPUT SETTNGS >SAVING FILES. Or, in the Save Optimized As... dialog, under SETTINGS, select OTHER... and then select SAVING FILES from the pulldown in the new dialog.

There are many other options, especially for the naming of the images. You can access these options FILE>OUTPUT SETTINGS or from the SETTINGS>OTHER... in the Save Optimized AS... dialog.

It's best to always use Save Optimized As... (rather than the simpler Save Optimized) when saving the sliced page. This is because you may use the same Photoshop file to generate several different web pages, and you will need to change the name of the HTML file and the image directory for each web page. By using the "As..." version, you will always have the option of making these settings.

From scratch, slice the Photoshop file contained in the download: image_slicing.zip

Keep the following in mind as you slice this image:

• Set the page title and background color
• Slice neatly!
  • make a minimum number of slices
  • match up the edges of slices to produce the simplest table
  • don't leave any spaces between slices
• Set blank slices to no_image
• Set the optimization for each slice
• Make the rollovers, being careful to turn layers on and off appropriately
• Set the URLs and ALTs for each slice that's a link
• Make the animation
• Export the HTML and sliced images

Slice efficiently. It's very easy to generate a large number of files in ImageReady when slicing. To prevent this, follow these guidelines:

• Wherever possible, set your slices to "No Image" so that ImageReady does not generate an image for that slice. Do this by selecting the SLICE palette, and setting the "type" to No Image. "No image" slices will be empty, and the background color of the page will show through.
• Layout your slices so that the page will have the minimum number of slices. Some techniques for doing this are:
  • Match up the edges of as many slices as possible, even if it makes your slices a little larger. This will eliminate extra slices used to create small tables to position each individual slice.
  • Only slice areas that need to be rollovers or links. Otherwise, combine slices (SLICES>COMBINE SLICES) and make your slices as large as possible.
• Use rollovers sparingly. They generate extra files
• Make sure the layers you change for a rollover only affect that slice. Otherwise, you will generate rollovers for other slices that change with those layers.

Use transparency to avoid seams. It is best to knockout the background of a slice where possible (i.e. when it's the color of the background of the web page). By creating a mask and using the MATTE setting of the OPTIMIZE palette, the slice's background will be made transparent and the rectangular edges of the slice will be invisible. Otherwise, the seams of the slices may be visible due to different levels of compression for adjacent slices.

Use separate image directories for each web page. Sliced pages often have many images, and the pages are frequently regenerated with different slices. This process can leave many unused "orphaned" images that should be deleted. If several sliced pages have their images saved in the same directory, it is difficult to find the orphaned image slices. On the other hand, if the image slices are saved in a separate directory for each sliced web page, then after significant changes to the slicing, the entire directory can be deleted and a new set of images can be optimized and saved into a clean directory.

Live text in a slice. If you want to make a slice that will have live HTML text, set the slice type to NO_IMAGE, and then put some text in the TEXT field in the slice palette. Once you do these steps, you can put different or more text in the slice cell once you edit the file in Dreamweaver.

Updating individual slices. It is common to make changes to the graphics or compression in an individual slice in a page. For example, changing how an individual rollover looks. Rather than re-saving all the page slices and HTML, it is more efficient to just save the individual slice, leaving the HTML and the rest of the page untouched. To do this:

• select the modified slice(s) with the slice select tool
• select FILE>SAVE OPTIMIZED AS...
• set FORMAT to IMAGES ONLY
• change ALL SLICES to SELECTED SLICES
• SAVE

Animated GIFs. Contrary to what it might seem, ImageReady is designed to only make one animation per Photoshop file. So if you want several animations on a page, you'll have to make them separately and compose them together in Dreamweaver.

all materials on this web site © copyright 2005, Philip van Allen