Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

  • Print
  • + Share This
This chapter is from the book

This chapter is from the book

Slicing and Optimization

After reviewing your information (the Prepping part of this phase) and making sure your redesign project is on track, you are ready to start HTML production in earnest and begin Building. At this point in production, the graphic templates [6.6] are processed (sliced and optimized) into HTML elements (graphics) so that they can be put back together (spliced and coded).


Expert optimization should be a high priority. For an excellent how-to resource, we recommend Lynda Weinman's Designing Web Graphics.3 (New Riders, 1999).

Figure 6.6. The graphic template for is delivered to production from design as a layered Photoshop or Fireworks file. This file contains all the elements of the page, including all rollover states, each in their own layers. Shown here are the pull-down menu bar graphics shown in their "on" state.

Prior to production, during the design phase, before any visual design directions are finalized and approved, they must get checked by the production team to ensure that the files are, in fact, sliceable and optimizable under target-audience download requirements. Visual designers need to work closely with the HTML production team to determine the best way to slice the graphic templates so that the HTML tables — the rudimentary basis for HTML layout — can be constructed.


> Slicing and Optimization

> Creating HTML Templates and Pages

> Implementing Light Scripting

> Populating Pages

> Integrating Backend Development (If Applicable)

After the Photoshop/Fireworks files are actually handed off in a state that is producible, production does the actual slicing [6.7] and optimization [6.8] of the pieces. Note that sometimes, when budget and resources dictate, one designer may fulfill both visual design and production roles.

Figure 6.7. Graphic templates are divided into sections and sliced in either Fireworks or Photoshop. Clearly identified layers indicate on/off/over states or DHTML callouts.

Figure 6.8. Before and after shots of a background image being optimized in Fireworks. The file size is reduced to 16K by reducing colors in GIF format.

  • + Share This
  • 🔖 Save To Your Account