Page 322 - Enhancing CAD Drawings with Photoshop

4386.book Page 306 Monday, November 15, 2004 3:27 PM

306 CHAPTER 9 SHOWING WORK TO YOUR CLIENTS

NOTE The logo in Figure 9.17 was customized. You can change it and much more in the template’s
HTML code. HTML coding—and therefore web gallery customization—is beyond the scope of this
book. Refer to HTML Complete (Sybex, 2003) for more in-depth information about the Hypertext
Markup Language.

8. Use an FTP program to upload the files and subfolders Photoshop generated for the gallery to
your web server. Look in the destination folder you selected in step 5 to locate the relevant files
and folders.

TIP Check out filezilla.sourceforge.net for a full-featured open-source FTP client and FTP
server for Windows.
9. Use an Internet browser and surf to the URL of the gallery to verify that it is online. E-mail the
URL of the new gallery to its intended audience.
10. Close the File Browser and web browser.

Creating Optimized Web Pages with ImageReady

You can reap marketing benefits for your project by making an interactive gallery with rollover
effects. When it comes to displaying work online, Adobe ImageReady is the tool of choice for pro-
ducing optimized graphics. ImageReady is Photoshop’s sister product designed to produce web
graphics at screen resolution (72 pixels/inch). You used ImageReady briefly in Chapter 7 and will
use more of its features in this section to create optimized web pages. The process begins by cutting
a sample file into slices—rectangular areas that divide an overall image into parts. You’ll optimize
each slice and then create rollovers using the slices, adjusted layers, and layer style effects. Rollovers
control the web page’s behavior when a visitor finally interacts with it in a web browser.

Creating and Optimizing Slices
Dividing an image into slices has many advantages when displaying visual information in a web
page. Each slice can have different compression settings, so better overall optimization can be
achieved (quality level versus file size). Slices can host rollovers and advanced animation effects. Fur-
thermore, transmitting multiple smaller images rather than one large image is more efficient. Let’s
start by editing a sample file in ImageReady.
1. Open the sample file Slices.psd in Photoshop from the companion CD (see Figure 9.18). The
file shows imagery from many of the chapters in this book.
2. Click the Edit In ImageReady button at the bottom of the Photoshop toolbox or press
Shift+Ctrl+M.
Wait a few moments for ImageReady to launch. Four tabs are at the top of the document win-
dow: Original, Optimized, 2-Up, and 4-Up. These are the same tabs seen in the Photoshop Save
For Web dialog box. (See the section “E-Mailing Images” earlier in this chapter.)