Learning To Use Adobe Image Ready In A Single Day Tut

Ukio · (#1 (**permalink**))

Page 2 — Digging into the Interface
________________________________________
Like its functionality, the overall look 'n' feel of ImageReady's interface is similar to Photoshop's. Differences, on the other hand, include the Tools palette, which contains the stuff you need to create and select images and text. The small triangle in the corner of some of the tool icons indicates different options for that tool: Just click on the tool and hold down the mouse to reveal the other choices. At the bottom of this palette, you'll find two squares indicating the foreground and background colors.
Unlike the fixed sets in Fireworks, all of the other tool palettes in ImageReady can be grouped in any combination. Drag any individual tool palette by the tab to either make a separate palette or combine it with other tool palettes to suit your working style. You may want to combine tool palettes into fewer groups to save space, separate a few of them to reveal more options at once, or just group the tools differently.
The Info palette indicates the position, size, and color of a selection. The Brushes palette affects the size of various drawing tools. The Type palette allows for editing type settings, and the Color and Swatches tool palettes allows for editing colors. The Optimize palette controls how an image will be exported for the Web.
The Layers palette, much like the Layers palette in Photoshop, allows you to separate and overlap elements. The Actions palette is for automating your work, and the History palette is a unique interface that allows multiple undos or lets you create Actions.

The ImageReady preview function is a lot different than that of Fireworks. If you create an animation, the Animation palette (where you add and edit frames) displays the various frames of the animation, kind of like a storyboard. The document window has two tabs for viewing the original or optimized versions of the artwork. The optimized view is always available, whether you are drawing shapes or adjusting the color table.
To save your optimized settings, choose Create droplet from the palette's options. This will save a little icon onto your desktop for processing other images using the same settings. You can also create a more sophisticated droplet from the Actions palette.
Several other ImageReady functions are accessible through the menus. The Filter menu gives you access to Photoshop or ImageReady-specific filters. Other menu functions are for adjusting, transforming, and cropping images. You can also simulate browser dithering from the View menu or toggle between Windows and Macintosh Gamma previews. These convenient viewing options help make your images look right to most, if not all, of your widely varied Web audience.
Page 3 — Drawing and Painting with ImageReady
________________________________________
P>If you followed the Fireworks tutorial, you should now have a simple GIF animation. Today I'll guide you through the creation of a similar animation in ImageReady. For the purposes of comparison, I'll try to keep the animations as similar as possible, but there will be a few deviations that reflect the different capabilities of each application.
To start, create a new document (File:New). Make it 300 pixels wide by 200 pixels high with a transparent background.

To choose a foreground color, select a yellow-orange from the small rainbow of colors at the bottom of the Color tool palette. You'll notice that there are three color swatches. The two overlapping colors indicate the current foreground and background colors. The third swatch is flanked by a small cube, which informs you if a selected color isn't browser-safe. When this happens, click on the adjoining swatch to get the closest browser-safe match. If you don't like that match, but still want to pick a browser-safe color, click and drag around the cube swatch to reveal other close matches. Release the mouse button when you find the foreground color you want.

Like Fireworks, there are several ways to select a color in ImageReady. You can double-click on either the foreground or background color swatch to open a color picker window. By default you should see a color picker unique to ImageReady, which uses the Web-color cube. To access the color pickers that you used in Fireworks, select File Preferences:General.
First, enlarge the document window to give yourself ample working space. If you want to specify a color by its Hexadecimal value, make sure that you select Web Color Sliders from the Color palette's preferences (via the triangle pulldown in the upper-right corner). For now, choose FF for red, CC for green, and 33 for blue. Click on the marquee tool until the ellipse icon pops up. Using the ellipse tool, hold down the shift key and click and drag to select a circle about one inch in diameter.
In Fireworks, you select colors that apply to objects; in ImageReady, you select colors that apply to tools. Fill the selection with Edit:Fill. Choose Foreground Color under Contents and click OK. Alternatively, Option-Delete on Macintosh or Alt-Delete on Windows will fill any selection with the current foreground color. Double-click on the current layer in the layers palette to rename it Small Circle. De-select the circle by clicking outside the selection or by choosing Select:None. Click on the move tool (left) and reposition the circle near the upper-right corner of the document window.
When you work with ImageReady, it's important to create separate layers for separate elements. If you don't, anything you add to a layer will merge with whatever it overlaps. So choose Duplicate Layer from the Layers tool palette and rename the new layer Large Circle.
Choose Edit:Free Transform, and a selection with eight handles appears. These handles allow you to resize and distort the selection. If you need to rotate the selection, just click and drag between the handles. Move the selection by dragging anywhere inside the selected area. While holding down the shift key, drag a corner handle to make the circle nearly twice as large as the document area. After it's large enough, hit the Enter key. If you need to cancel the Free Transform mode, hit the Escape key. Drag that circle so that only part of it is visible in the bottom-left corner of the document window.
Since ImageReady is primarily a pixel-based tool, it doesn't enlarge simple elements as smoothly as Fireworks does. You'll notice that the outline of the larger circle is not as smooth as that of the smaller one, but don't worry about that right now. To change the color of the smaller circle, select the Small Circle layer, and choose the menu item Select:Load Selection:Small Circle Transparency. Fill the selection with the color FF,33,00.

Next, you'll add the text. Select the text tool, and two things happen: A new text layer is created and a text-dialog box pops open. Select your favorite font and set it to a size of 40 points. Type "A happy monkey." An ImageReady text is treated differently than regular bitmap layers: You can apply kerning and other refinements to it, even specify different modes of anti-aliasing, and it's editable at all times. However, you can only assign one font to a text block and only one text block to a layer. Also, if you want to apply filters to the text block, you may have to convert it to a bitmap first.
In the Layers tool palette, drag the text layer you just created to the top position so that it appears in front of the other layers. In the document window, center the text and place it near the bottom.
ImageReady's Layer Effects aren't as graceful as Fireworks' Live Effects. To see what I mean, click on the Action tool palette and select F/X - Drop Shadow. With the text layer active, click on the play button. The color and position of this drop-shadow effect are fixed, and trying to eliminate the effect later can be a royal pain (the drop-shadow effect in Fireworks is a lot more versatile). But you can edit the text or its color at any time. All in all, the Layer Effect is hardly the showcase feature of ImageReady.
Save the file (File:Save Original As), and you'll notice that ImageReady adds a .psd extension to the file name. These files are completely editable in Photoshop, although you can only edit text if you have Photoshop 5.
Spend a few minutes messing around with the different tools in the Toolbox. Just remember to create a new layer for each element so that you can easily move or undo anything that you add.
And now let's do some pixel pushing.

Page 4 — Pushing Pixels
________________________________________
Using the same background image that we used in the Fireworks tutorial, choose File:Place Image. Click on Choose Image in the dialog box, find clouds.jpg, and click OK. The background image is now in a new layer in the Layers palette - drag it to the bottom position.
Want to make this graphic really unique? Bitmap images may not be as easy to edit as vector images, but the possibilities for what you can create with them are as numerous as the pixels in the image. For example, choose the Large Circle layer, which has that crude edge anyway. Select Filteristort:Zig Zag to make a totally new shape.
ImageReady actually has many utilitarian filters. Gaussian Blur softens images, and the Unsharp mask sharpens them. Ditherbox is another really cool filter. Usually, we're restricted to the paltry 216 colors of the browser-safe palette since other colors don't tend to dither that smoothly. If you need to fill a solid shape with a particular color that isn't in the Web palette, use the Ditherbox filter. Here, let's try it.
Load the selection for the Large Circle layer (Select:Load Selection:Large Circle Transparency). Using the color palette, change the foreground color to 40AD60, and choose Filter:Otheritherbox. Click on the yellow arrow to preview a smooth dither based on two or more browser-safe colors. Click Fill to complete the process. Choose View:Hide Edges to get a better look at the results. Neat, huh? But use this feature sparingly, because it makes for a larger file size.
There may be a rough edge to trim, so choose Select:Inverse, and hit the Delete key. Alternatively, you could simply hide that edge by applying a Layer mask from the Layer menu.
ImageReady has several other controls for creating or adjusting bitmap images, including the paintbrush and eraser tools, as well as several image-adjustment controls; sadly, the Levels or Curves of Photoshop are missing here. Go ahead, and try everything out on our clouds image. Check out the History palette to see how it follows what you do. If you have Photoshop, try editing the document there. When you're finished playing, it's time to get animated.
Page 5 — Creating an Animation
________________________________________
Although both Fireworks and ImageReady have animation tools, they work very differently. In ImageReady, all animating functions are controlled by the Animation tool palette (Window:Show Animation). You don't define elements as symbols (as you did with Fireworks), because the layers already act like symbols. Within the confines of individual frames, you can reposition layers, change their transparency, or turn them off, but any other change you make will be reflected in all the other frames.
Duplicate the first frame by clicking on the icon. Click on the first frame in the animation palette and shift-drag the smaller circle to the left edge of the window until it's nearly off screen. In the Layers palette, set that frame's opacity to 20 percent. From the pulldown menu (in the upper-left corner of the animation palette), choose Tween. In the dialog box that opens, type "4" as the number of frames to add, and select Next Frame from the Tween pulldown. Make sure Position and Opacity are checked, then click OK.
Choose Set Delay for all frames from the Animation pulldown and enter "0.5" seconds. For Play Options, specify that you want the animation to play once. Click the play button to preview the animation. Save your work. Now you're in the home stretch.

Page 6 — Getting Your Image Ready
________________________________________
At this point, you could simply select File:Save Optimized, and you'd have a pretty good GIF animation. But by taking that extra step with the Optimize and Optimize Colors tool palettes, you can create something just right, á la Goldilocks.
In the document window, click on the Optimized tab. See what the file would look like if you created the GIF now? See how big it would be? (My version said it would be over 35 KB.) I bet we can cut that down to less than half the size.
The great thing about ImageReady's Optimized view is that it's available even when you're not optimizing the image. The downside is that it's a lot slower than the Original view and it's not that easy to preview different settings simultaneously. The easiest way to do this is to hold down the Option key (Macintosh) or Alt key (Windows), and drag the Optimized tag to an open area in your workspace. While this creates an instant copy of the original file, it can make things a bit confusing. For this tutorial you might just want to stick to the single view.

The first thing I do with every image is slide the dither all the way to "0" in the Optimized tool palette. You'll notice that the only thing that changes significantly is the file size - it becomes smaller. I almost never use dither. You can get better quality and smaller files simply by using more colors. Too bad you can't set the dither to default to "0," so you wouldn't have to reset it for each image. Sigh.
Use the transparency checkbox to indicate whether you want certain parts of your GIF transparent. If your transparent areas have anti-aliased edges, you can use the Matte option to blend the edges with a color that matches the background you'll be using. Leave the transparency option unchecked for this tutorial.
Notice there's an Image Type pulldown menu. (For this exercise, the example will be a GIF; if you're saving a JPEG or PNG, other options will be available.) ImageReady allows you to use ye olde adaptive palette to map the colors of the image. You can also use Perceptual and Selective palettes, which use different algorithms. Try them all to see which one you prefer.
Select Show options from the pulldown menu in the upper-right corner of the Optimized tool palette. This will reveal a Web slider, which lets you create a tolerance level for applying browser-safe (Web palette) colors. In this case, set the slider to "5." For most graphics, this is a preferable alternative to just mapping everything to the Web palette.

Next, change the number of colors to 32. I try to get my GIF files below 32 colors, but we can go a bit higher. Life, after all, is a celebration. See how that affects the preview. Because this is an "all-in-one" tool, you have quite a few more optimization options than just adjusting the color table. At this point you may decide to simplify something in the artwork or animation to reduce the size or improve the quality. You can, of course, try various color settings. Then preview the results of whatever you do almost instantly.
You could save the file now with excellent results, but we can optimize our graphic even further. Really! If you think you might want to optimize a bunch of images to the current settings, save a droplet by clicking the Create button.
In the Optimized Colors palette, you'll notice that there are dots in the center of some of the swatches - this indicates a browser-safe color. Click on a swatch - and wait a second. That color should invert in the preview so that you can see where it's used. If it's used in areas where it doesn't matter or is so close to another color that you don't need it, you can remove it from the palette by dragging it down to the trash-can icon. Conversely, if you need more colors in a specific area, click on the Original view and use the eyedropper tool to select the color you want to add to the Optimized Colors. Then click on the add-color icon .
While still in the Optimized view, select the eyedropper tool and click on a color in the drawing. This will select a corresponding swatch in the Optimized Colors tool palette. If you just want to quickly map a selected swatch to the nearest Web color, simply click on the cube icon below. If you want more control, double-click on its swatch to open the Color Picker window. Clicking on the padlock icon while a swatch is highlighted will lock that color so that it will not shift while you make other adjustments.
You can also preview your file in a few different ways to help you estimate how it will look in the real world. Choose View:Browser Dither to simulate the way the browser will dither the non-Web colors. There's détente for the platform wars: Choose either View:Windows Gamma (on Macintosh) or View:Mac Gamma (on Windows) to see a simulation of how your image will appear on the other platform.
You don't need to use all of these features for every image, but they are there for the times you need a lot of control over the color palette. This is why ImageReady has made me totally forget DeBabelizer.
Save your original file, then choose File:Save Optimized to save the GIF.
But wait! It's time for that last-minute headline change. Double-click on the type layer and change "A happy monkey" to "A happy Monday." Resave the original file and the optimized GIF.
Page 7 — Of Course There's More
________________________________________
There are a few more ImageReady features that can help your workflow. Like Fireworks, ImageReady has slicing and image-map support. However, its slicing is limited to cutting along guidelines, plus it has no way to specify different settings for each slice, like Fireworks does. Rather than provide a dedicated image-map tool, ImageReady handles image maps with layers (see Layer Options).
ImageReady's Actions tool palette allows you to automate some of your more tedious tasks. ImageReady comes with several actions already built in (e.g., adding Layer Effects). But if you want to create your own Action, just press the record button in the Actions tool palette, and it will keep track of what you do. After you've stopped the recording, go back and fine-tune if necessary. You can apply an Action from within ImageReady or create a Droplet. Just drag a batch of images on the Droplet to apply the Action to all of them.
Let's say you applied a few filters, made an adjustment here and there, and really like the results. But when you go to recreate those results with another image, you can't remember what the f%&# you did. No problem. The History palette has recorded all the steps you took, which you can use to create an action by simply dragging the list of steps to the Actions palette. A shortcut: The slider on the History palette offers a quick way to undo your work, as opposed to selecting File:Undo over and over.
These features are just the whipped cream and cherry of a serious Web-graphics tool. Both Fireworks and ImageReady have inherited the fruit of the trials and errors of previous applications like GifBuilder, DeBabelizer, and Photoshop. To supplement these hand-me-down features, both Fireworks and ImageReady include innovations of their own. If you've got a work flow that you're accustomed to, you will probably be frustrated with either application at first; I certainly was. But force yourself to use one, and soon you'll swear by it.
Both ImageReady and Fireworks represent a vast improvement to the way we create graphics for the Web. Thanks to the healthy competition between the two, the next versions will only be better. I can see either application serving as a jumping-off point to a whole future of superior Web graphics.