Slicing and Optimizing Web Graphics


► Slice Web Designs According to Page Layout 357

► Customize Output Settings 360

► Select the Best File Format for the Job 362

► Optimize GIFs 364

► Optimize JPEGs 368

► Optimize PNGs 370

► Optimize WBMPs 373

► Use Dithering to Smooth Edges in GIF and PNG-8 Files 374

► Manipulate the Colors in GIF and PNG-8 Files 376

► Optimize Transparent Web Graphics 378

► Use Transparency Dithering When Placing a Transparent GIF

or PNG-8 on a Patterned Background 378

► Use Weighted Optimization 380

► Optimize by File Size 382

► Link Slices to Optimize Multipl e Slices at Once 382

► Use Photoshop/ImageReady to Preview in a Browser 383

► Use Photoshop/ImageReady to Build HTML Code

► Import Sliced Photoshop Files into GoLive to Build HTML Code

► Import Layered Photoshop Files into GoLive to Build DHTML Code

► Use Photoshop Mockups as Tracing Images When Building Pages in GoLive

In the first part of this chapter, I discuss the general process used in designing web graphics as well as some terminology and details related to web image file formats. Then, I move on to tips identifying how to define each piece of your mockup and save each in the best file format for the job.

In Chapter 4, I discussed using Photoshop as a web page layout tool. For professional web designers, this typically involves creating mockups that clients will review before the page is actually "built" and coded. After those mockups have been approved and are ready to be produced, it's time to slice and dice your files—literally. This means you have to translate the various pieces of your mockups into web-readable formats that can be rendered by a web browser.

When slicing and optimizing web graphics, it's important to know which features are available in Photoshop and which are only available in ImageReady (Photoshop's web-specific sister application). In its Help file for Photoshop, Adobe lists the primary differences between Photoshop and ImageReady as the following:

• Photoshop provides tools for creating and manipulating static images for use on the Web. You can divide an image into slices, add links and HTML text, optimize the slices, and save the image as a web page.

• ImageReady provides many of the same image-editing tools as Photoshop. In addition, it includes tools and palettes for advanced web processing and creating dynamic web images like animations and rollovers.

So, when it comes to designing my web pages, I typically use Photoshop. However, when I'm ready to process the web designs and save each piece as a compressed file capable of being displayed in a web browser, I usually switch to ImageReady. Ultimately, the decision is your own, and the only thing for which you definitely have to switch to ImageReady is the creation of animation and interactivity like rollovers.

Web Design Process

Automatically Generating HTML

When you save web graphics in Photoshop or ImageReady, you have the option to allow the program to automatically generate HTML code according to the design layout. If you don't know HTML, this can be a particularly useful tool. And even if you do know HTML, having Photoshop generate it for you on the fly can save valuable time in getting files on the Web.

As a die-hard HTML coder, I must advise that you use a bit of caution when allowing any application—be it Photoshop, Image Ready, Microsoft Word, or another—to automatically generate HTML for you. Applications that automatically generate code must be programmed to do so, and as such are generally not as flexible as you might be if you were coding the HTML yourself. For example, such applications often overcompensate for the amount of code needed to render a particular page, and can therefore generate significantly larger HTML files than are necessary. This can translate into longer downloads for your users.

My point is that you should inspect any HTML code output by Photoshop to confirm that it serves the needs of your users as well as it can. In addition, I recommend you familiarize yourself with what you can and can't do using HTML (if you haven't already). In fact, I wrote HTML: A Beginner's Guide (McGraw-Hill/Osborne) for just that purpose.

When it comes to actually coding your web pages with references to each of the optimized graphics, you have the following options:

• Write your own HTML using a plain-text HTML editor such as Barebones BBEdit ( or Macromedia HomeSite (

• Let Photoshop or ImageReady output the HTML for you based on your design layout and defined slices.

• Integrate the development process with a What You See Is What You Get (WYSIWYG) HTML editor such as Adobe GoLive or Macromedia Dreamweaver.

Was this article helpful?

0 0

Post a comment