• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Web Design Techniques > ImageReady


ImageReady is a fully functional image-editing program that comes as part of the Photoshop package. It is optimized for Web graphics, but works almost identically to Photoshop. I prefer working in Photoshop and then transferring the design only at the end, which is why most of the techniques in this book are explained for Photoshop. However, if you prefer working in ImageReady, you can easily adapt every technique in this book to ImageReady. In this chapter I’ll focus entirely on ImageReady and walk you through some of the Web features it has that Photoshop lacks, such as the creation of rollover buttons, animations, and image maps.

Photoshop VS. Imageready

Photoshop’s Save For Web dialog box offers virtually all of the same file-optimization capabilities of ImageReady, but I would argue that the Photoshop interface is more familiar to most designers, and Photoshop also has many more color-correcting and image-manipulation features than ImageReady does. Compare Photoshop’s Image > Adjustments commands to ImageReady’s: Photoshop offers Curves, Color Balance, Replace Color, Selective Color, Channel Mixer, Equalize, and many other important commands for working with images and creating photocompositions that ImageReady lacks.

Another benefit of designing images and photo illustrations in Photoshop is that it now offers the Pen and Custom Shape vector tools. But that’s not all! Photoshop also lets you draw multiple paths on one layer, and like the Pathfinder palette in Illustrator, it lets you combine those paths into a more complex shape by adding or subtracting them. ImageReady doesn’t have a Pen or Custom Shape tool, and it allows only one shape in a layer. While it is possible to move and transform those shapes in ImageReady, only in Photoshop can you edit them to add or delete anchor points.

Photoshop has more path and shape tools than ImageReady does, but most importantly, you can edit paths in Photoshop.

But after you’ve designed the images for your Web site—adjusted the colors, composed and colorized images, and received client approval—then you can turn to ImageReady to take your content to the next level of Web design. In ImageReady, you can create rollover buttons and image maps, slice images and animate GIFs, and export the final elements to an HMTL authoring program such as GoLive. These are tasks that you just can’t perform in Photoshop and that are important in the second phase of Web site design. If you don’t intend to use any of these features, you might as well finalize your images using Photoshop’s Save For Web command, since ImageReady offers no actual advantage over Photoshop for optimizing images. And remember, Adobe makes it easy to switch between Photoshop and ImageReady with the Jump to Image-Ready/Photoshop button in each application’s toolbox. Personally, however, I find it cumbersome to deal with two software interfaces, even if the differences between them are only marginal.

Photoshop (top) has more colormanipulation commands than Image-Ready (bottom), so Photoshop is therefore better suited for photo composition and manipulation.

One of the most common misunderstandings about ImageReady is that you can use it as an HTML authoring tool. Here’s my advice: Don’t expect to be able to create slices, click some buttons in ImageReady, and produce an almost-finished Web page that you can use right away in GoLive. Even though ImageReady can generate some HTML code, you should use it only in rare cases. Most of the time it is better to export the images and create the page in GoLive, which reduces mistakes and offers more control over the code.

For example, imagine that you want to design a Web page with a background image, a navigation bar containing rollover button states, and an animated banner ad. If you attempt to create the rollovers and animation in one document in ImageReady, you will most likely end up with rollovers that act strange or an animation with unnecessary frames, because both design elements are based on image layers. Chances are that you will unwittingly record a layer change for a rollover button or in an animation, or vice versa.

So what is the best way to proceed? Ideally, you should open your Photoshop design in ImageReady, crop the individual elements, and save them as separate files. In the scenario just described, this would mean that you crop the banner ad and save it as one file before you start animating it. That way, when you’re opening and creating the banner ad animation, you can focus on the animation alone and even delete the redundant layers, which makes the Layers palette more manageable.

Switching between Photoshop and ImageReady is simple: click on the Jump To button in the toolbox to save the current document and open it in the other application.

One last piece of advice: Don’t start working on the rollover buttons if you still need to make some changes in your design. It’s far too easy to accidentally record one of the changes in the Layers palette as one state of a rollover button. Creating rollover buttons should be the very last step in the process.

Creating Rollover Buttons

After opening the design in ImageReady, you must use the Slice tool to create the rollover buttons. Every time you place a new marquee with the Slice tool, ImageReady optimizes the slices and even creates adjacent slices if necessary (e.g., if you place your first slice in the middle of your document, ImageReady will create five slices in total: the one that you created and one for each side of the marquee). When you export your images together with some HTML code, each slice represents a cell of an HTML table. But ImageReady (and Photoshop) also allow you to export only selected slices.

To create rollover buttons, select the slice with the Slice Select tool and define the rollover effect in the Rollovers palette.

Use the Slice tool to draw a marquee around each button and name the slices in the Slice palette, using an intuitive system: for example “bttn_” along with the button’s text.

To create a rollover state (an action that occurs when a mouse cursor is rolled over the slice), select a slice with the Slice Select tool and then click the Create New Rollover State button in the Rollovers palette. By default the rollover state is “Over,” but the state can be changed by double-clicking the entry in the Rollovers palette.

Double click on a rollover state to pick one.

In this example, I want to change the color of the button text for my rollover effect. The easiest way to do this is to use a color overlay. So I select the text layer in the Layers palette, choose Layer Style > Color Overlay from the Layer menu, and select a different color.

After I create the rollovers, each slice is individually optimized. Use the Slice Select tool to select one slice and then open the Optimize palette (Window > Show Optimize). In this example from the tutorial, 16 colors are plenty, and I chose an Adaptive palette. It is important to not dither here; otherwise, the background of the buttons dithers and will make the buttons noticeable when they are later placed on top of the sidebar. Another important feature is the Use Unified Color Table option at the bottom of the Optimize palette. This option is only visible when double-clicking on the Optimize tab (ImageReady extends or collapses the palette). Using this option will ensure that there is no color shift when the mouse is brought over the rollover. This is mainly necessary if you are expecting that many visitors to your Web site have only 256-color monitors. To preview the rollover buttons, click on the Preview Document button at the bottom of the toolbox.

A nice little feature: if you click on Rollover Preview, the buttons in your design will behave as they will later in the browser. Below: use the Unified Color Table option for rollover buttons.

Before saving the slices you may want to customize the output settings that you find in the File > Output Settings dialog box. ImageReady has a vast number of options for naming slices automatically. I prefer to use the slice name combined with the abbreviated rollover state (over becomes “o”) and the image format extension (which is required). In the Saving Files section of the Output Settings dialog box, you also can specify a subfolder in which to place the images.

Later on, the name of the slice will be used as the basis for the image’s name.

When you then use File > Save Optimized As command, give the HTML document a name (something like “navigation.html” for our example), then select HTML and Images in the Format pop-up menu to save the images along with their HTML code. Since the document is not cropped, choose Selected Slices from the pop-up menu at the bottom of the dialog box. Otherwise you’ll end up with one large HTML table containing all the slices of the entire image.

Rollovers Palette Options can be accessed from the Rollovers palette’s pop-up menu.

Creating Image Maps

For basic image maps—or image maps that use basic geometrical shapes—you can actually use GoLive: Just place an image in an HTML file and check Use Map in the Inspector. Then, with the Shape tools (Rectangle, Circle, and Polygon), create your hot spots and establish their links in the Links tab of the Inspector.

If you need to create a more precise or more complex image map, however, GoLive isn’t the best choice. Let’s say that you’ve created rollover buttons as we just did. In that case, re-creating the shapes of the different states on a map can be tedious. GoLive can’t zoom in, and working at the edge of an image map is almost impossible. The mouse pointer changes when it’s five pixels from the border, because GoLive assumes that you want to move the image.

So ImageReady is your solution. Just use any of the Image Map tools to draw your hot spot shapes, then enter the name and URL of that hot spot in the Image Map palette. Choose File > Save Optimized As, and select HTML and Images from the Format menu. In Output Settings, choose Client-Side as the type of image map you’re creating, and save the image map into your GoLive site folder. (Alternatively, you can simply define your hot spots in ImageReady, save the file, and then open it in GoLive, where you can use the Point and Shoot tool to define the URLs in a snap.)

When you click the Image Map tool in the toolbox, ImageReady reveals a list of shapes. With these shapes, mark the hot spots on your image and set the URL in the Image Map palette.

The image map needs to be saved using the Save Optimized As command. In Output Settings, select the type of image map (usually Client-Side).

Now start GoLive and choose Site > Rescan. Two new files will be listed: your image and the HTML document that defines the image map areas. Move the image to your “Images” folder, open the HTML document, and copy and paste the image map into the target HTML document. Finished! Dispose of the redundant image map HTML document by putting it in the trash in the Site window.

Layer-Based Image Maps

ImageReady offers another particularly helpful feature for creating polygonal image map areas: You can have ImageReady create an area automatically based on a layer. Just choose Layer > New Layer Based Image Map Area to create a rectangular image map area. To change the shape into a polygon, open the Image Map palette and select Polygon from the Shape popup menu. With the Quality pop-up you can specify the accuracy with which ImageReady matches the form of the layer. As you can see in the example with the metallic bird, even the layer effects are taken into account. By the way, Adobe Illustrator can also save polygonal image map areas, which is a great help if your image map consists of complex shapes.

It is possible to create an image map area automatically based on a layer. In the Image Map palette you can specify the accuracy of the tracing.

Optimizing Images With Imageready

The only time you’ll have to optimize images in ImageReady is when you’re using rollover buttons, image maps, or GIF animations; otherwise, you can use Photoshop’s Save For Web command, which is the method I describe most often in this book. ImageReady offers as much control over image optimization and exporting as the Save for Web command—as long as you know where to look. The tools on the left side of the Save For Web dialog box—Hand, Slice Select, Zoom, and Eyedropper—are in the regular ImageReady toolbox. The color values displayed at the bottom of the Save For Web dialog box are available in ImageReady’s Info palette. The optimization settings and Color Table palette on the right side of the Save For Web dialog box are available in ImageReady as their own respective palettes, but there is no Image Size palette—you must choose Image > Image Size to access this information. Finally, the pop-up preview menu in the Save For Web dialog box is split in ImageReady: Color preview commands are available if you choose Image > Preview, and the download rates are available in the Image Information pop-up menu at the bottom of the image window.

Tutorial: Creating Slices And Rollovers

Here is the mock-up of the Web site for a consulting company done entirely in Photoshop, created in the tutorial on page 172. Now we’ll slice and export the design and create the rollover buttons in ImageReady.

Thinking it through: As you design your Web site in Photoshop, you should be thinking about how you will ultimately re-create it in HTML. It isn’t always possible to know this in advance, of course, especially if you want to try something new, but you should ask yourself early on whether your design is better suited to be laid out with frames or just with tables. For this example, we can go either way and create the same slices regardless.

Using Frames: It makes sense to divide this page into three horizontal frames, creating a top that contains the logo, the navigation buttons, and the dark and some of the white background; a middle section that contains the navigation buttons on the left and the body of the page; and a bottom that contains the lower navigation buttons. The middle section needs to be split into two vertical frames to isolate the navigation bar so that it doesn’t scroll out of view along with the body of the page. In the top frame, the navigation buttons and the arched background pattern and logo need to be sliced and put back together in a table, as do all the navigational buttons at the top, on the left, and at the bottom. Since the upper and lower navigational buttons are identical, we need to export them only once, but the backgrounds in the top and bottom frames do need to be sliced and exported separately.

Using Tables: In theory, you could place everything on this page in one large, complex table, but this is not advisable (doing so would be a beginner’s mistake). For one, it is very hard to control and fix such a table, but above all, if the content—maybe because of some user preferences in the browser—expands beyond the cell of the container table, your entire design can break apart. A better HTML table for this design would split the page into one large table (shown with red lines in the screenshot at left) that contains smaller embedded tables for the navigational buttons and other page elements (in blue). You probably noticed that the container table has an extra column on the right side. The only purpose of that column is to display the backgrounds for the top and the bottom part of the design. It is possible to set the table up in such a way that this column will automatically adjust to the browser width (see the tutorial in the GoLive chapter).

The red lines in the screen shot above delineate a frame layout (blue are the embedded tables). The red and blue lines in the image at right show how the design could be laid out with embedded tables. It’s almost the same!

Creating slices and rollover buttons: Create slices and rollovers as described earlier in this chapter, being sure to name each slice before you begin selecting them individually to create the rollover effects. The rollovers for the top navigation buttons were created by deactivating the Inner Shadow effect and activating a Color Overlay for the text instead.

Note that the curved border of the upper background image needs special handling. To avoid an abrupt edge if you’re using frames, the background for the top frame needs to continue the gray of the very top buttons and the black of the arch. You can accomplish this by slicing a piece out of the design at the very upper-right side and using it as a background image in the HTML document, which will later be loaded into the top frame. Do the same thing for the sidebar and the bottom navigation buttons: export a slice of the texture for later use as a background image.

This design requires 16 slices. A, B, and C represent the slices for the background image.

Optimizing: Once the page is sliced, open the Optimize palette (Window > Show Optimize), select one slice, and choose the appropriate settings. It helps to view the slice in the Optimized tab of the image window so that you can see the results as you experiment with settings. Note that you can select several slices at once and change their settings at the same time. Some slices for this tutorial were best as JPEGs, others were better suited to be GIFs. Here are the settings I used:

Slice No.ColorsPalette
10, 17, 18, 20, 228Adaptive

Slice No.Quality

For the GIFs, I did not apply dithering or the Lossy option, but I did use a unified color table for slices 2 through 7, and for slices 12 through 16.The JPEG slices called for different quality settings, but neither needed blurring. Slice 10 was tricky. It had to be saved as GIF so that it matched the color of the slices beneath, but at the same time, it contained part of the arch, which was saved as JPEG. In this case, we had to go with a GIF and check it in a browser[*].

[*] Browsers might dither the JPEG and the GIF differently when viewed with 256 colors. A few years ago this would have been a bigger concern because 256-color monitors were more common then. Today, however, most people have monitors that support at least thousands of colors. And even if they don’t, this difference is probably negligible.

Exporting: Use the Preview Document button in the toolbox, and if everything seems to work as it’s supposed to, select slices 1 through 7 with the Slice Select tool and export them via File > Save Optimized As. Since this is going to be a component (top_navigation.html), use the Save Images and Save Selected Slices Only options. Then select slice 10 and slices 12 to 17 and save them as another component (sidebar.html). Finally, select slices 8, 18, 20 and 22 and export them to the Images folder in your Web site.

After the HTML page is imported into GoLive, it can be broken up into stationery and components (here is the navigation component).

As the last step, export the images that are used for the backgrounds.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint