ImageReady7.0

Module 3 WEB DESIGNING OCT - 2010 / BLY

ADCPM IMAGEREADY 7.0 Page - 1

~ ~ ~ INDEX ~ ~ ~

TOPIC PAGE

INTRODUCTION to IMAGEREADY 7.0 ………………. ..................... 02

WORKSPACE …………………………………………... ..................... 02 ~ 03

MENUBAR ……………………………………………… ..................... 03

TOOLBOX ……………………………………………… ……………. 03~ 04

TOOLBAR ………………………………………………. ……………. 04

WORKING with TOOLS ………………………………... ……………. 04 ~ 08

CREATING a NEW IMAGE FILE ...……………………. .....................

SAVING a FILE ………………………………………… .....................

OPENING IMAGE FILE ……………………………….. .....................

IMPORTING FILES ……………………………………. .....................

OPTIMIZING IMAGE ………………………………….. .....................

FILE TYPES …………………………………………….. .....................

IMAGE MAPS …………………………………………... .....................

CREATING BUTTONS …………………………………. ..................... 11 ~ 12

WORKING with LAYERS ………………………………. ..................... 12 ~ 13

WORKING with ANIMATION PALETTE ……………… ..................... 13 ~ 15

Note: If you find any typing or printing error/s, inform immediately to your branch office.



Introduction to IMAGEREADY 7.0

ImageReady delivers a comprehensive environment for professional designers and graphics producers to create sophisticated images for print, the Web, wireless, and other media. It is similar to devices Adobe Photoshop in look and use, but was developed with Web graphics editing in mind. ImageReady was first released in 1998 as a standalone application, but was discontinued in 2007. Most of its features are now available in Adobe Photoshop and Adobe Fireworks. ImageReady can be used for intergrading photos or images with a Website. The program provides several features that help us determine what kind of compression will look the best on a Web site. ImageReady is also used for GIF generating, image slice creation, rollover buttons, state of the art banners, and more.

Adobe ImageReady Interface

Workspace: You can customize working environment by creating a palette layout and then saving the layout as a workspace. If you share a computer, saving a workspace lets you instantly access your personalized desktop each time you sit down to work. You can also create workspaces for specific tasks one for painting and another for photo retouching or Web work. The workspace consists of four main components: the menu bar, the toolbar, a toolbox, and palettes.

Menu bar: The menu bar contains menus for performing tasks. It contains controls for common functions such as opening and saving files, as well as specific functions, such as copying and pasting, calling up specific windows or palettes, and controlling the ImageReady workspace. For example, the Layers menu contains commands for working with layers.



Toolbox: When you start the application, the toolbox appears on the left side of the screen. Some tools in the toolbox have options that appear in the context-sensitive tool options bar. These include the tools used to type, select, paint, draw, sample, edit, move, annotate, and view images. Other tools in the toolbox allow you to change foreground/background colors, go to Adobe Online, work in different modes, and jump to Photoshop applications.

USING TOOLS

Rectangular Marquee tool (M)

To include a rectangular marquee for square and rectangular selection.

Rounded Rectangle Marquee tool (M)

To include a rounded rectangle marquee for rectangular selection with rounded corners.

Elliptical Marquee tool (M)

To include elliptical marquee for circular or oval selection.

Single Row Marquee tool (M)

To include a single row marquee to select single row of pixels.

Single Column Marquee tool (M)

To include single marquee to select single column of pixels.

Move tool (V) To move the selection.

Lasso tool (L) To create irregularly shaped selection.

Polygonal Lasso tool (L)

To make selection by drawing a series of straight lines to make a polygonal shape.

Magic Wand tool (W)

To create the selection based on a range of related colors.

Rectangle Image Map tool (P)

This tool is used to create rectangle image map.

Circle Image Map tool (P)

To create circle shape image map.

Polygon Image Map tool (P)

To create polygonal shape image map.

Image Map Select tool (P)

To select image map.

Slice tool (K) To create the slices.

Slice Select tool (K) To select the slices.

Eraser tool (E) To remove image data.

Magic Eraser (E) Erase entire area of color with a single click.

Clone Stamp tool (S)

To duplicate or clone the desired area.

Blur tool (R) To blur areas of the image by painting over them.

Sharpen tool (R) To sharpen area and edge of the image.



Smudge tool (R) To smudge area of the image by painting over them.

Dodge tool (O) To lighten areas of the image by painting over them.

Burn tool (O) To darken areas of the image by painting over them.

Sponge tool (O) To saturate or desiderate the colors.

Paint Bucket tool (G) Replace color/range of color with foreground/pattern.

Paintbrush tool (B) To use a brush strokes on an image.

Airbrush tool (J) To apply gradual tones (including sprays of color) to

an image.

Pencil tool (N) To paint a solid hard edged stroke.

Rectangle tool (U) To insert the rectangle shape.

Rounded Rectangle tool (U)

To insert the rounded rectangle shape.

Ellipse tool (U) To insert the ellipse shape.

Line tool (U) To draw a line.

Type tool (T) To edit text on the image.

Crop tool (C) To cut the non selected area.

Eyedropper tool (I) To pick/choose the color from the palette/image.

Hand tool (H) To move a magnified image within the image

window.

Zoom tool (Z) To adjust magnification on the actual image.

Toggle Image Maps Visibility (A)

To toggle between image map visibility & invisibility.

Toggle Slices Visibility (Q)

To toggle between the slice visibility & invisibility.

Preview Document (Y) To see the preview of the document.

Preview in Default Browser

To see the preview of document in Internet Explorer. (CTRL + ALT + P)

Standard Screen Mode (F)

To open the image window in Normal Screen mode.

Full Screen Mode (F)

(with Menu Bar) To open the image in full screen with menu bar.

Full Screen Mode (F) To open the image in full screen mode.

Photoshop To Jump to the Photoshop. (CTRL + SHIFT + M)

Toolbar: The options bar is context sensitive and changes as different tools are selected. Some settings in the options bar are common to several tools



(such as opacity), and some are specific to one tool. You can move the options bar anywhere in the work area.

To display the tool options bar:

Choose Window Options.

Working with Tools

Marquee tool: The marquee tools let you select rectangles, ellipses, rounded rectangles (ImageReady), and 1-pixel rows and columns. By default, a selection border is dragged from its corner.

Use of different Marquee tools:

Rectangle marquee to make a rectangular selection.

Rounded rectangle marquee is used to select a rounded rectangle such as a Web-page button.

Elliptical marquee is used to make an elliptical selection.

Single row or Single column marquee is used to

define the border as a 1-pixel-wide row or column.

Lasso tool: The lasso and polygonal lasso tools let you draw both straight-

edged and freehand segments of a selection border.

To use the lasso tool:

Select the Lasso tool , and select options.

Drag to draw a freehand selection border.

To draw a straight-edged selection border, hold down ALT and click where segments should begin and end.

To erase recently drawn segments, hold down the Delete key until you have erased the fastening points for the desired segment.

To close the selection border, release the mouse without holding down ALT.

To use the polygonal lasso tool:

Select the Polygonal Lasso tool , and select options.

Click in the image to set the starting point.

Do one or more of the following:

To draw a straight segment, position the pointer where you want the first straight segment to end, and click. Continue clicking to set endpoints for subsequent segments.

To draw a freehand segment, hold down ALT and drag. When finished, release ALT and the mouse button.

To erase recently drawn straight segments, press the Delete key.

Close the selection border:

Position the polygonal lasso tool pointer over the starting point and click.

If the pointer is not over the starting point, double-click the polygonal lasso tool pointer.



Magic Wand tool: The magic wand tool lets you select a consistently colored area (for example, a red flower) without having to trace its outline. You specify the color range, or tolerance, for the magic wand tool's selection.

To use the Magic Wand tool:

Select the magic wand tool .

For Tolerance, enter a value in pixels, ranging from 0 to 255. Enter a low value to select colors very similar to the pixel you click, or enter a higher value to select a broader range of colors.

To define a smooth edge, select Anti-aliased. To select only adjacent areas using the same colors, select Contiguous. Otherwise, all pixels

using the same colors will be selected.

To select colors using data from all the visible layers, select Use All Layers. Otherwise, the magic wand tool selects colors from the active

layer only.

In the image, click the color you want to select. If Contiguous is selected, all adjacent pixels within the tolerance range are selected. Otherwise, all pixels in the tolerance range are selected.

Move Tool: This tool allows you to move image map areas by dragging and easily place the selected area to a new position.

To use the Move tool:

Select one or more image map areas you want to move by using select tool (rectangular, elliptical, single row, single column marquee tool etc.)

Click the Move tool from the toolbox.

Position the pointer inside the image map area, and drag it to a new position.

Crop tool: Cropping is the process of removing portions of an image to create focus or strengthen the composition. You can crop an image using the crop tool.

To use the Crop tool:

Select the crop tool .

Define the cropping marquee by dragging over the part of the image you want to keep. You can adjust it.

After précising, press ENTER. Slice tool: You can create user slices with the slice tool or from guides, and

in ImageReady, from a selection.

To create a slice with the slice tool:

Select the slice tool . Any existing slices automatically display in the document window.

Choose a style setting in the options bar:

Normal to determine slice proportions by dragging.

Fixed Aspect Ratio is used to set a height-to-width ratio. Enter whole numbers or decimals for the aspect ratio. Example: To create a slice twice as wide as it is high, enter 2 for the width and 1 for the height.



Fixed Size to specify the slice's height and width. Enter pixel values in whole numbers.

Drag over the area where you want to create a slice.

Eraser tool: The eraser tool changes pixels in the image as you drag through them. If you're working in the background or in a layer with transparency locked, the pixels change to the background color; otherwise, the pixels are erased to transparency.

To use the eraser tool:

Select the eraser tool .

Do the following in the options bar:

Choose a preset brush.

Choose a mode for the eraser Paintbrush, Airbrush, Pencil, or Block.

Specify opacity to define the strength of the erasure. Opacity of 100% erases pixels completely. A lower opacity erases pixels partially.

Drag through the area you want to erase.

Magic Eraser tool: When you click in a layer with the magic eraser tool, the tool automatically changes all similar pixels. If you're working in the background or in a layer with locked transparency, the pixels change to the background color; otherwise, the pixels are erased to transparency. You can choose to erase contiguous pixels only or all similar pixels on the current layer.

To use the magic eraser tool:

Select the magic eraser tool .


Enter a tolerance value to define the range of colors that can be erased. A low tolerance erases pixels within a range of color values very similar to the pixel you click. A high tolerance erases pixels within a broader range.

Select Anti-aliased to smooth the edges of the area you erase.

Select Contiguous to erase only pixels contiguous to the one you click, or deselect to erase all similar pixels in the image.

Select Use All Layers to sample the erased color using combined data from all visible layers.

Specify opacity to define the strength of the erasure. Opacity of 100% erases pixels completely. A lower opacity erases pixels partially.

Click in the part of the layer you want to erase.

Paintbrush, Airbrush & Pencil tool: ImageReady provides the paintbrush tool, pencil tool, and airbrush tool to let you paint the current foreground color on an image. The three tools create different effects:

The paintbrush tool creates soft strokes of color.



The pencil tool creates hard-edged freehand lines.

The airbrush tool applies gradual tones (including sprays of color) to an image, simulating traditional airbrush techniques. The edges of the stroke are more diffused than those created with the paintbrush tool.

To use the paintbrush tool, pencil tool, or airbrush tool:

Specify a foreground color. Select the paintbrush tool , pencil tool ,

or airbrush tool .


Choose a preset brush.

Specify a blending mode.

For the paintbrush tool and pencil tool, specify opacity.

For the airbrush tool, specify a paint flow.

For the pencil tool, select Auto Erase to paint the background color over areas containing the foreground color.

Do one or more of the following:

Drag in the image to paint.

To draw a straight line, click a starting point in the image. Then hold down SHIFT, and click an ending point.

When using the brush tool as an airbrush, hold down the mouse button without dragging to build up color.

Working with Images

Creating a New Image file: To begin working on ImageReady, you need one of two things: a new image or an existing one that you opened. To open an image, select File Open and open the image you want to work with. To create a new image, select File New .The New command lets you create a blank image.

To create a new image file:

Choose File New. If the Clipboard does not contain image data, the image dimensions and resolution are based on the last image you created.

Now a dialog box will appear with name New Document.

Type the name of new image in the Name.

Choose the Size, Width and Height in the Image size.

Select an option for the Contents of the First Layer of the image.

White: To fill the background or first layer with white, the default background color.

Background Color: To fill the background or first layer with the

current background color.



Transparent: To make the first layer transparent, with no color values. The resulting document will have a single, transparent layer as its contents.

Now you are ready to begin working on your new document.

Saving a File: After working on any project/file, you have to save your file. Saving your files and publishing your files is made easy by ImageReady. Just follow these steps:

To save your document:

If you are working on any project and wish to save it in a .psd format. Go to File Save As

Saving your document as a .psd will insure that you can open the project back up and maintain any layers or other elements you were working on. Saving your file as a .psd is a good back up in case you

need to make any changes later on.

Publishing your document for the Web

To save for the Web go to File Save Optimized As in the format choose HTML and Images. This will save your document a .HTML file and your images in a corresponding folder.

If you wish to change any of the default setting of Publishing go to File Output Settings. in this dialogue box you will find all the elements you may wish to change when publishing your document for the Web.

Opening Image: You can open files using the Open command and Open Recent command.

To open a file using the Open command:

Choose File Open. Select the name of the file you want to open.

Click Open.

To open a recently used file:

Choose File Open Recent.

Select a file from the submenu. Importing Files: Portable Document Format (PDF) is a versatile file format

that can represent both vector and bitmap data and can contain electronic document search and navigation features. PDF is the primary format for Adobe Illustrator and Adobe Acrobat.

Some PDF files contain a single image. Other PDF files (called Generic PDF files) may contain multiple pages and images. If you want to open an image from a PDF file, you can use the File Import PDF Image command.

To import images from a PDF file:

Choose File Import PDF Image. Select the file you want to import. Click Open.

Optimizing Image: An optimized image is really just a modified version of your original image into a compressed format or a different format that is suitable for the web. You use the Optimize palette to select optimization



options. ImageReady was created for the purpose of helping users to get the images they created in Photoshop onto the Web. The optimized view helps you see what your image will look like before you export it out to the web.

To create and view an Optimized Image:

Select the optimized tab in your image window.

Now select the optimized tab in (Info/Optimized/LayerComp) Palette.

Select what you which format to convert your info.

You will notice a few tabs above your image marked Original, Optimized, 2-up, and 4-up. The 2-up and 4-up tabs are there so that you can preview several different formats to see which the best looks for your purposes.

File Types

When you want to post an image on the Internet and want your image to be accessible to all viewers. You would not post a (.psd) or a (.tiff) file onto a webpage because most Web browsers can not display that file type. Different web browsers can support different file formats, but there are three common file types that are supported by all web browsers. These are: .JPG, .GIF, and .PNG.

.JPG: Almost everyone has used or come across this file format before. (.jpg) also known as (.jpeg) stands for Joint Photographic Experts Group,

which was the name of the committee which created the file format.

JPG is a method of compression for photographic images. Because its compression works so well in maintaining the quality of the original photograph, JPG format is most commonly used for storing and transmitting photographs on the Internet. It uses quantization in its compression, reducing the amount of information by approximating small differences in color. Another reason JPGs are so frequently used with photographs is that a JPG images can support 24 bit color information (16 million different colors) and are not limited like GIFs to only 256 colors.

JPG also gives you the option to choose the quality of the compression.

.GIF: Graphics Interchange Format (GIF) files, pronounced “JIF”, are a bitmap image format that can support up to 256 colors. CompuServe introduced the format in 1987 in order to provide a color image format for their file downloading areas. With the use of .GIF files, fairly large images could be downloaded in a reasonable amount of time, even with very slow modems. The most useful function of the GIF formats today is its ability to store multiple images in one file. By showing multiple images sequentially you perceive it as a moving animation.



.PNG: Portable Network Graphics (PNG) files are a bitmap image format similar to the GIF with the exception that they do not require a patent license to use and they can also support millions of colors instead of GIFs 256. However, PNGs do not support animation, and until recently were not as widely supported by web browsers as GIFs. PNG-8 supports both 8 bit color (256 colors) and 24 bit color (millions of colors).

Image Maps

An image map is a list of co-ordinates relating to a specific image, created in order to hyperlink areas of the image to various destinations. This is opposed to a regular link where the entire area of the image links to a single destination.

To create an Image Map:

First you must select what shape you would like your image map to be from the toolbox.

Click and hold your mouse over the Image map tool.

Next click and drag your image map onto the image.

You have now created an image map, now you can turn that area into a clickable area. You can even add hyperlinks to your image map.

To add a hyperlink to image map:

You may use the image map selection tool located in the tool box.

In the image map palette, enter a URL (be sure to include http ://)

Now choose a target for the URL.

To test image map:

Go to File Preview in.

BUTTONS

Creating a Button:

One of the most common uses of ImageReady is to create buttons with rollover effects. A button is a clickable area on a website that provides the user a simple way to trigger an event. In most cases this event is opening a link to another website. For the purpose of this definition a button is any clickable region on a website. Hyperlinks, image maps, slices, text, and anything else that when selected has some event is considered a button.

A rollover effect is when different states are added to a button. These states are named Over and Down. You can keep adding more states but these are the two most commonly used. These different states are reactions your buttons have when something triggers the state.

Creating a Button with rollover effects

You are going to go step by step starting with a blank document. When creating a new button you don't have to start from a new document. Buttons are defined by slices and image maps, so if you add an image map or a slice to an existing image, you have now created a button. However for this demonstration you are starting from scratch.

Create a new document (File New). Set the pixel width to 200 and the pixel height to 50. Set the background to white. Click OK.



By using type tool. Type: "Button" in the middle of the blank document.

You can use your move tool or the arrow keys on the keyboard to center the text.

Next, In the Web content palette, click on the bump out arrow located at the top right of the palette. This will bring up a window. Select New Rollover State.

Now if you look in the web content palette you can see that a slice has been made encompassing your new document. An Over rollover state has been added. Click on the bump out arrow again and add another Rollover State. You should now have two rollover effects in your web

content palette.

Next, Click on the Over state in the web content palette. Then click on Button in the layers palette. Next, click on the Layer Styles button on the bottom of the layers palette. It is the icon of a circle with an f in the middle of it. Select Color Overlay.

When the dialog box comes up. Click ok. If you wish to add more layer styles you can click on the check boxes on the right. You may also manipulate each layer effect you select.

Next, Select the Down state in the web content palette. Then click on Button in your layers palette. Next, click on the Layer Styles button on the bottom of the layers palette. Select Drop Shadow. Click OK when

the dialog box appears.

You are now finished creating button. You can preview your button by going to (File Preview in) just select a web browser and you can test your new rollover effects.

If you wish to add a hyperlink to the button. Select the button in the web content palette. And in the slice palette fill out the appropriate info. click here to learn how to add a hyperlink to a slice:

The last step is to publish your button so that you may add it to your Website. To publish your button go to File Save Optimized As. Make sure that the format is HTML and Images.

Select where you want your files to go, and click save. You have now made a working button.

Working with Layers

Creating a New Layer: You can create empty layers and add content to them, or you can create new layers from existing content. When you create a new layer, it appears either above the selected layer or within the selected layer set in the Layers palette.

Layer sets help you organize and manage layers. You can use layer sets to easily move layers as a group, to apply attributes and masks to groups of layers, and to reduce clutter in the Layers palette. You cannot create a new layer set within an existing layer set.

To add a new layer or layer set using default options:

Click the New Layer button or New Layer Set button in the Layers palette.



To add a new layer or layer set and specify options:

Do one of the following:

Choose Layer New Layer or Layer New Layer Set.

Choose New Layer or New Layer Set from the Layers palette menu.

Set layer options, click OK:

Name to specify a name for the layer or layer set.

Color to assign a color to the layer or layer set.

Mode to specify a blending mode for the layer or layer set.

Opacity to specify opacity for the layer or layer set.

Click Ok.

Duplicating Layers: Duplicating layers is an easy way to copy content within an image or between images. When duplicating layers between images, keep in mind that the layer's content will appear smaller or larger if it is copied to a file with different resolution.

To duplicate a layer or layer set:

Select a layer or layer set in the Layers palette.


Drag the layer to the New Layer button, or drag the layer set to the New Layer Set button.

Choose Duplicate Layer or Duplicate Layer Set from the Layers menu or the Layers palette menu.

Deleting a Layer: Deleting layers that you no longer need reduces the size

of your image file.

To delete a layer or layer set:

Select a layer or layer set in the Layers palette.


To delete the layer or layer set without confirmation, drag it to the Trash button.

To delete the layer or layer set with confirmation, click the Trash button. Alternately, choose Delete Layer or Delete Layer Set from the Layers menu or the Layers palette menu.

Working with Animation palette

The Animation palette lets you create, view, and set options for the frames in an animation. You can change the thumbnail view of frames in the Animation palette, using smaller thumbnails reduces the space required by the palette and displays more frames in a given palette width.

To display the Animation palette

Choose Window Animation. A check mark indicates that the palette is showing.

Inserting a New Frame “Inserting frames” is the first step in creating an animation. Open an image in ImageReady, the Animation palette displays the image as the first frame in a new animation. Each frame you add starts as a duplicate of the preceding

frame. You then make changes to the frame using the Layers palette.



To add a frame to an animation:

In the Rollovers palette, select the state in which you want to display an animation.

Adding an animation to the Normal state will cause the animation to play when the image is loaded in a Web browser. Adding an animation to another type of state will cause the animation to play when a user activates the state.


In the Animation palette, click the Duplicate Current Frame button or choose New Frame from the palette menu.

In the Rollovers palette, click the Create Animation Frame button

or choose New Animation Frame from the palette menu.

Note: If the Create Animation Frame button and the New Animation

Frame command are not visible in the Rollovers palette, select Include Animation Frames in the Palette Options dialog box.

Modify the image for the frame using the Layers palette.

Deleting a Frame

To delete frames:

Do one of the following in the Animation palette or the Rollovers palette: Select Delete Frame from the palette menu.

Click the Trash button , and click yes to confirm the deletion.

Drag the selected frame onto the Trash button. Delete Animation

Select Delete Animation from the Animation palette menu or the Rollovers palette menu.

Copy Frames

When you copy a frame, you copy the configuration of layers (including each layer's visibility setting, position, and other attributes). When you paste a frame, you apply that layer configuration to the destination frame.

To copy and paste layers between frames:

Select the frame you want to copy in the Animation palette or the Rollovers palette.

Choose Copy Frame(s) from the Animation palette menu or the Rollovers palette menu.

Select a destination frame or frames in the current animation or another animation.

Choose Paste Frame(s) from the Animation palette menu or the Rollovers palette menu.

Select a Paste method:

Replace Frames to replace the selected frames with the copied frames. When you paste frames into the same image, no new layers are added to the image; rather, the attributes of each existing layer in the destination frames are replaced by those of each copied layer. When you paste frames between images, new layers are added to



the image; however, only the pasted layers are visible in the destination frames (the existing layers are hidden).

Paste Over Selection to add the contents of the pasted frames as new layers in the image. When you paste frames into the same image, using this option doubles the number of layers in the image. In the destination frames, the newly pasted layers are visible, and the original layers are hidden. In the nondestination frames, the newly pasted layers are hidden.

Paste Before Selection or Paste After Selection to add the copied frames before or after the destination frame. When you paste frames between images, new layers are added to the image; however, only the pasted layers are visible in the new frames (the existing layers are hidden).

Select Link Added Layers if you want to link pasted layers in the Layers palette. Use this option when you need to reposition the pasted layers as a unit.

Click OK.

Note: If you find any typing or printing error/s, inform immediately to your branch office.

Documents

ImageReady7.0