Home | Gaming | Programming | Play Online | Contact | Keyword Query
Games++ Games & Game Programming

GAMES++
Games++ Home
Games++ Gaming
Games++ Programming
Beta Testing Games
Free Online Games
Hints & Cheats

BROWSER UTILITIES
E-mail This Page
Add to Favorites

SITE SEARCH

Web Games++

AFFILIATES
Cheat Codes
Trickster Wiki
Game Ratings
Gameboy Cheats
PlayStation Cheats
BlackBerry Games
Photoshop Tutorials
Illustrator Tutorials
ImageReady Tutorials

ADVERTISEMENT

ADVERTISEMENT

Lesson 8: Get Ready for the Web with ImageReady

Advanced Adobe Photoshop Tutorials

Table of Contents

Optimizing for the Web

In this lesson, we will discuss Adobe ImageReady 3.0, which is bundled with Photoshop 6. It's Adobe's answer to getting images ready for the Web. ImageReady includes testing color configurations, assigning rollovers, and creating animations -- truly a useful program. Let's begin!

When you're preparing images for Web work, you need to optimize, or reduce the file size as much as possible without deteriorating the image. Different file types are better for different images. We are going to work with four file types: JPEG, GIF, PNG-8, and PNG-24.

I'm going to describe each format and then give you the scoop on the options you have when saving a file in each. Whichever format you plan to work with, start by opening ImageReady (you'll find it in the same folder as the Photoshop application, or you can choose File > Jump to > Adobe ImageReady from within Photoshop.

With an image open in ImageReady, choose File > Save As and choose a file type from the Format pull-down menu (Figure 8-1). Then you'll see your options for optimizing the file.

Figure 8-1: Choose JPEG in the Save As dialog box.

Figure 8-1: Choose JPEG in the Save As dialog box.

JPEG

JPEG stands for Joint Photographic Experts Group. As you can probably figure from the name, this is the file type you want to use for publishing photographic images on the Web. JPEGs support the RGB color mode but don't have any excess channels or layers. Be sure to discard any excess channels or layers before trying to save your image as a JPEG.

When you click Save, the dialog box shown in Figure 8-2 appears. Let's go through the options you can choose from:

Figure 8-2: The JPEG options dialog box.

Figure 8-2: The JPEG options dialog box.

  1. Quality: The JPEG file format compresses the image in order to reduce its file size. The quality setting adjusts the amount of compression -- the greater the compression, the lower the quality of the image. On the other hand, a high-compression setting (12 is the highest) produces the smallest possible file size for your JPEG.
  2. Baseline ("Standard"): This is the format most Web browsers can recognize; it's the Photoshop default.
  3. Baseline Optimized: This optimizes the colors in the JPEG and can create a smaller file size than the standard setting. But be aware that a file compressed this way may not be recognized by all Web browsers.
  4. Progressive: This option renders the image in a series of scans: you've probably seen progressive JPEGs on Web sites. You can choose the number of scans you would like, from three to five, but these have a tendency to have larger file sizes and, again, files compressed this way are not recognized by all Web browsers.
  5. Size: This shows the file size and amount of time required to download it with a 14.4 kbps to a 56 kbps modem.

GIF

GIF (Graphics Interchange Format) is the best file type for images that include a lot of solid color, or that require transparency. The color modes used by GIF images are bitmap, grayscale, and indexed color (Image > Mode > Indexed Color). Indexed Color mode basically makes a palette of only the colors used in the image, which further reduces the file size. The GIF format does not support RGB, layers or alpha channels (a channel that is created when you save a selection by choosing Select > Save Selection).

Earlier I mentioned using GIFs for transparent images. To create a transparent GIF, you have to save the file differently. Choose File> Export> Gif89a. You can export RGB images to GIF89a, unlike with a regular GIF. For the following example, I am going to work with an indexed color image. Let's go step by step through the GIF89a Export dialog box (Figure 8-3). This box shows a preview of the image with a transparent background.

Figure 8-3: The GIF89a Export dialog box.

Figure 8-3: The GIF89a Export dialog box.

  • Interlace: If interlace is checked, a low-resolution version of the image will appear until the whole image is downloaded to a browser. This little trick makes the download seem faster to the viewer.
  • Transparency Preview Color: The default color is gray, a default used by most browsers. You can change this color by clicking on the box and choosing a color. In this case, I chose purple from the Color picker. Whatever color you choose, it will not affect the final image; it's just for preview purposes.
  • The icons below the preview pane are used to navigate inside the preview box.
  • Transparency from pull-down menu: The easiest way to create this transparency is by selecting the image before you have started the export process. To do this, select the background you want to be transparent and save it by choosing Select > Save Selection. The selection will be saved in the Channels palette as Alpha 1. You can then choose Alpha 1 from the Transparency From drop-down menu.

If you decide not to use the alpha channel, you can pick the colors you would like to be transparent from the palette (number 6) using the Eyedropper tool in number 4.

  • Colors in Palette: This shows the number of colors the image contains. This number refers to the point you changed the image to Indexed Color mode.

PNG-8 and PNG-24

PNG, like GIF, produces a lossless compression, meaning that information will not be discarded in order to reduce file size. PNG-8 uses 8-bit color, which can produce a small file size. PNG-24 uses 24-bit color, which can show a wide range of color and detail. Unfortunately PNG-24 files are often larger than a JPEG version of the same image. The problem with these two formats is that they are not always accepted by browsers.

Saving for the Web

To compare your image with an optimized version, choose File > Save For Web. As you can see, the original image on the right in Figure 8-4 has a file size of 104K and the image on the right has been optimized as a medium quality JPEG. The file size has decreased to 11.94 K (a 92 K difference), which will download in five seconds on a 28.8 kpbs modem. Because this image is a photograph, it would probably be best to use a JPEG or PNG-24 setting. Sometimes you have to try out the different settings that are available on the right-hand side of this dialog (not pictured) to find the best optimization settings for your image.

Figure 8-4: Using ImageReady to optimize for the Web.

Figure 8-4: Using ImageReady to optimize for the Web.

Slices and Rollovers

In addition to the obvious benefit of optimizing images, ImageReady can also help you create an interactive heaven on the Web. Like Photoshop, ImageReady includes palettes for Layers, color, options, etc. You'll also find unique palettes: Animation, Slice, and Rollover (Figure 8-5). I want to focus on the Slice and Rollover palettes. A slice is exactly what it sounds like: it's a portion of a picture, often a button or individual word, to which you can attach a link or rollover.

Figure 8-5: The Animation, Slice, and Rollover palettes.

Figure 8-5: The Animation, Slice, and Rollover palettes.

Use the Slice tool (Figure 8-7) to draw a slice around the object you want to rollover. (By the way, a rollover is basically an image that changes when you move your mouse over it. Sometimes it could be something as simple as a word changing color to let you know it's an active link.)

Figure 8-6: The Slice tool is on the ImageReady toolbar.

Figure 8-6: The Slice tool is on the ImageReady toolbar.

I'm going to create a new file in ImageReady by choosing File >New. Since I chose a transparent background in the New dialog box, the bottommost layer in the Layers palette is Layer 1 (just like Photoshop). Now I'm going to draw a rectangle to use as a button (Figure 8-7).

Figure 8-7: The canvas, Layer palette, and Slice palette.

Figure 8-7: The canvas, Layer palette, and Slice palette.

As you can see in Figure 8-7, the rectangle is in Layer 1 and can also be seen in the Slice palette. Now I'm going to draw a slice around the rectangle using the Slice tool (Figure 8-8).

Figure 8-8: A user-slice has been created around the rectangle.

Figure 8-8: A user-slice has been created around the rectangle.

A user-slice is one created by you. Do you see the light blue dotted lines surrounding the user-slice? Those are called auto-slices . Auto-slices are automatically created by ImageReady to fill in gaps in the canvas.

Now we're going to create a rollover from the slice. First I create an image that will appear when the button is rolled over. I'm going to duplicate the rectangle layer and, using Preserve Transparency, fill the rectangle with another color (Figure 8-9).

Figure 8-9: A duplicate of the rectangle has been filled with another color.

Figure 8-9: A duplicate of the rectangle has been filled with another color.

Now I'll turn the duplicate layer off by clicking the eye icon (Figure 8-10). The Rollover palette shows the contents of Layer 1 (the rectangle) in the "Normal" state. A state in ImageReady refers to the individual parts of a rollover. Now, using the drop-down menu or the New State icon in the Rollover palette, create a new state. By default, it's called Over. With the Over state active, turn the duplicate layer back on. Now, the contents of that layer will show up in the Over state (Figure 8-11). I can now check to see if my rollover worked by choosing File > Preview In > (browser of choice). I'm glad to say that it did.

Figure 8-10: The duplicate layer is invisible.

Figure 8-10: The duplicate layer is invisible.

Figure 8-11: The duplicate layer shown in the Over state.

Figure 8-11: The duplicate layer shown in the Over state.

Fun Stuff for the Web

ImageReady has animation capabilities as well as optimization and rollover tools. Although there are a lot of great animation tools out on the Web -- Macromedia Flash being an elegant and popular choice -- ImageReady offers at least one very cool advantage: it allows you to jump to Photoshop with ease.

Creating an animation is easy. Create a layered image that you want to animate. Here is mine (Figure 8-12). Now let's go through the steps:

Figure 8-12: The layered image in Photoshop that will be animated in ImageReady.

Figure 8-12: The layered image in Photoshop that will be animated in ImageReady.

1. Click on the Jump to ImageReady button in the Photoshop toolbar (Figure 8-13), or press Command-Shift-M (Mac) or Control-Shift-M (Windows).

Figure 8-13: The Jump to ImageReady icon.

Figure 8-13: The Jump to ImageReady icon.

2. In ImageReady, choose Window > Show Animation to bring up the Animation palette.

3. Then choose Option-click (Mac) or Alt-click (Windows) on the Eye icon for the layer that you want to be the first frame of your animation. Now click on the name of the layer to activate it. The first frame for my animation is Layer 1 and this is what my Animation palette looks like (Figure 8-14).

Figure 8-14: The Animation palette shows the first frame of my animation.

Figure 8-14: The Animation palette shows the first frame of my animation.

4. Next, click on the Duplicate Current Frame icon (circled in Figure 8-14). True to its name, it will duplicate Frame 1 and create a new, identical frame, Frame 2.

5. Click on Frame 2, then click on the layer that you want to be the next frame in the animation. This makes the contents of the layer appear in Frame 2.

6. Repeat the previous two steps until you've included all layers in your image. Does your Animation palette resemble mine (Figure 8-15)?

Figure 8-15: The Animation palette after all the layers have been added.

Figure 8-15: The Animation palette after all the layers have been added.

7. Set the amount of time you want each frame to be visible by clicking on the time delay located under each frame (circled in Figure 8-15). You can also set the number of times you want your animation to play by clicking on the menu currently labeled Forever.

8. To preview your animation, click the universal symbol for play: the sideways triangle at the bottom of the animation palette.

9. To save your animation, choose Save Optimized As. There you have a choice of saving the images only, the HTML code and images, or the HTML code alone. Here is my animation (Figure 8-16):

Figure 8-16: The final animated GIF.

Figure 8-16: The final animated GIF.

By now, you should be feeling pretty advanced. And why not? We've taken some of what you have learned already and used it with ImageReady to create art for the Web. We covered how to make animated images, how to keep your image size done, and much more. In the next lesson, we will focus on the Print and Page Setup dialog boxes so that you can successfully print all you've created thus far.

Make sure to take the quiz and do the assignment that follows this lesson in order to hone your ImageReady skills. Remember that this lesson is really only an introduction to ImageReady, but I think you'll have a good head start when you begin to play with it.

Other Resources

Try Real World Photoshop 6: Industrial Strength Production Techniques by David Blatner and Bruce Fraser.

If you're looking for something a little less advanced, try Photoshop 6 for Windows and Macintosh: Visual QuickStart Guide, by Elaine Weinmann and Peter Lourekas.

Also, check out these sites:

www.photoshopuser.com -- Become a member!
www.planetphotoshop.com -- Contains resources and tutorials
www.designsbymark.com -- Tutorials and tips gurus.onlinedesignschool.com -- Tutorials and tips

Copyright © 1998-2007, Games++ All rights reserved. | Privacy Policy