Image Editing Information

by Sheila Bourgoin

Image Ready Essential Information

Basics

Creating a new image:

The New command lets you create a blank, untitled ImageReady image.

To create a new image:

1. Choose File > New.

2. Type a name for the image and set the width and height.

3. For Contents of First Layer, select one of the following:

White to fill the background with white, the default background color.

Background Color to fill the image with the current background color.

Transparent to create an image containing a single layer with no color values.

4. Click OK.

Opening a file

To open a file:

1. Choose File > Open.

2. Select the file.

3. Click Open.

To open a recently used file:

Choose File > Recent Files, and select a file from the submenu.

Layers:

Think of layers as sheets of acetate stacked one on top of the other. Where there is no image on a layer, you can see through to the layers below. In the illustration below, each animal and the map are on separate layers. The dark texture is the bottom layer. All layers in a file share the same number of pixels.

ImageReady lets you create multiple layers in an image, each with its own blending mode and opacity. However, the amount of memory in your system may limit the number of layers possible in a single image.

You can add layers to an image in various ways--by creating new layers or turning selections into layers. Newly added layers appear above the selected layer in the Layers palette.

1. Do one of the following:

Choose Layer > New Layer.

Choose New Layer from the Layers palette menu.

Alt-click (Windows) or Option-click (Mac OS) the New Layer button at the bottom of the Layers palette.

You can duplicate any layer within the same image. And you can copy any layer from one image (the source) to another image (the destination).

Moving layers:

1. In the Layers palette, select the layer that you want to move. (Make sure nothing is selected on the layer.)

2. Select the move tool (). To activate the move tool when any other tool is selected, hold down Ctrl (Windows) or Command (Mac OS).

3. Drag anywhere in the image to move the selected layer into the desired position. To constrain the direction of movement to a multiple of 4. 5. °, hold down Shift as you drag.

To reposition the layer in 1. -pixel increments when the move tool is selected, press the arrow keys on the keyboard. To move the layer in 1. 0-pixel increments, press Shift and an arrow key.

To Delete a Layer:

1. Select the layer in the Layers palette.

2. Choose a method to delete the layer:

Click the Trash button at the bottom of the Layers palette, and click Yes.
Drag the layer onto the Trash button.
Choose Layer > Delete Layer.
Choose Delete Layer from the Layers palette menu.

To delete a selected layer automatically, Alt-click (Windows) or Option-click (Mac OS) the Trash button at the bottom of the Layers palette.

Merging layers combines several layers into one and keeps file size manageable. When you've finalized the characteristics and positioning of a layer's contents, you can merge the layer with one or more layers to create partial versions of your composite image. When transparent areas intersect in all the merged layers, the areas remain transparent.

1. Hide any layers you do not want to merge.

2. Merge the layers:

Choose Layer > Merge Visible.
Choose Merge Visible from the Layers palette menu.

Flattening Layers:

In a flattened image, all visible layers are merged into one, greatly reducing file size. Flattening an image discards all hidden layers. In most cases, you won't want to flatten a file until you have finished editing individual layers. Layers in original images are flattened automatically in optimized images.

To flatten an image:

1. Make sure that all the layers you want to keep are visible.

2. Flatten the image:

Choose Layer > Flatten Image.
Choose Flatten Image from the Layers palette menu.

3. Click OK to discard hidden layers, if the image contains them.

Editing Layers:

A newly created layer is transparent (except when you create a new document and designate the contents as white or the background color.) You can add color values to the layer using the painting and editing tools, and then apply filters or use special effects to modify the layer. All painting and editing occurs on the active layer.

Preserving Transparency:

You can confine your painting and editing to only those areas of a layer that are not transparent (that is, to only those pixels in a layer that already contain color). For example, you may want to change the color of a shape without adding pixels to the transparent area outside the shape.

To confine editing to the opaque portions of a layer:

1. Select the layer in the Layers palette.

2. Select Preserve Transparency in the Layers palette.

Opacity

You can change the opacity of each layer using the Opacity option in the Layer Options dialog box, the Layer Options palette, or in the Layers palette. A layer with 1. % opacity appears completely transparent; one with 1. 00% opacity appears completely opaque.

To specify opacity for a layer:

In the Layers palette or the Layer Options dialog box, enter a value for Opacity or drag the slider.

Layer Effects:

You add effects to a layer by clicking the Effects button () at the bottom of the Layers palette and choosing an effect from the Effects menu. You can also add effects by using the Layer > Effects menu. You choose options for layer effects using the Layer Effects/Options palette. Choose Window > Show Layer Options/Effects to view the palette.

ImageReady has numerous effects that you can apply in any combination to a layer.

The Drop Shadow effect adds a shadow that falls behind the contents on the layer.
The Inner Shadow effect adds a shadow that falls just inside the edges of the layer contents, giving the layer a recessed appearance.
The Outer Glow and Inner Glow effects add glows that emanate from the outside or inside edges of the layer contents.
The Bevel and Emboss effects add various combinations of highlights and shadows to a layer.
The Color Fill effect applies a solid fill color to a layer.
The Gradient/Pattern effect applies a pattern or color gradient fill to a layer.

Note: Gradient and Pattern layer effects that you apply in ImageReady are not displayed when you view the file in Photoshop. However, the effects are preserved in the image. An alert icon ()in Photoshop indicates that the effects are present on the layer. The pattern and gradient effects are not altered in Photoshop, unless you rasterize the layer on which the effects are applied.

Adding a drop Shadow:

1. Select the layer you want to use.

2. In the Layers palette, click the Effects button (), and select Drop Shadow or Inner Shadow from the Effects menu.

3. In the Layer Options/Effects palette, specify blending mode, opacity, color, lighting angle, blur, and intensity options as described in Specifying options for layer effects.

4. For Distance, enter a value to specify the displacement of the shadow from the layer contents.

5. Select Use Global Angle to define a lighting angle that applies to all layer effects in the image.

With the Layers palette, you can control whether a layer is visible, whether a preview or thumbnail of its contents is displayed, and also how transparency is displayed. Turning off thumbnails or reducing their size can speed performance and save monitor space.

Do one of the following:

In the Layers palette, click the eye icon next to a layer to hide that layer. Click in the column again to redisplay the layer.
Drag through the eye column to show or hide multiple layers.
Alt-click (Windows) or Option-click (Mac OS) the eye icon for a layer to display just that layer. Alt/Option-click in the eye column again to redisplay all the layers.

Only the layers visible in the original image are visible in the optimized image. Making layers temporarily invisible can speed performance.

Note: You can make the active layer invisible. Keep in mind, however, that changes still affect the hidden, active layer. When you open a Photoshop image in ImageReady, all existing layers, adjustment layers, and layer effects are preserved. Layer effects (but not adjustment layers) can be edited in ImageReady. When you save the original image in ImageReady and open it in Photoshop, all layers, layer masks, and layer effects are preserved.

You can work with layers in original or optimized views. However, it is usually much faster to work with layers in the original view. When you save an optimized image, layers are merged into a single layer for each image (or for animated GIFs, a single layer for each frame).

Note: ImageReady does not support background layers used in Adobe Photoshop. If you open a Photoshop document containing a background layer in ImageReady, the background layer is converted to a normal layer.

Saving Optimized Images

1. In Photoshop, choose File > Save for Web.

2. In the Save for Web dialog box (Photoshop) or the document window (ImageReady), click a tab at the top of the image display to select a view:

Original to view the image with no optimization.
Optimized to view the image with the current optimization settings applied.
2. -Up to view two versions of the image side by side.
4. -Up to view four versions of the image side by side.

Note: When you choose 2. -Up or 4. -Up view, Photoshop or ImageReady determines a layout for the images, depending on the aspect ratio (width/height ratio) of the image, and whether annotations or rules are shown. Images can appear in vertical layout, horizontal layout, or 2. X 2. layout (two rows and two columns). 2. X 2. layout is available for 4. -Up view only.

By default, 2. -Up view displays the original image and the optimized image with current optimization settings, and 4. -Up view displays the original image, the optimized image with current settings, and two smaller, lower-quality versions of the image based on modifications of the current optimization settings.

You can select a version of the image in 2. -Up or 4. -Up view to apply new optimization settings.

You can automatically repopulate 2. -Up and 4. -Up views-- generate new optimized versions of the image based on the selected version. You can also revert an optimized version to the original version of the image.

About JPEGS

The JPEG format supports 2. 4. -bit color and preserves the broad range and subtle variations in brightness and hue found in photographs and other continuous-toned images. JPEG is supported by most browser. JPEG compresses file size by selectively discarding data. Because it discards data, JPEG compression is referred to as lossy. A higher quality setting results in less data being discarded, but the JPEG compression method can degrade sharp detail in an image, particularly in images containing type or vector art. Note: Artifacts, such as wavelike patterns or blocky areas of banding, are added to a file each time you save the file as a JPEG. You should always save JPEG files from the original image, not from a previously saved JPEG.

The JPEG format does not support transparency. When you save an image as a JPEG, transparent pixels are filled with the Matte color. If you know the background color of the Web page where you will place the image, you can match the Matte color to the Web page background color to simulate the effect of background transparency. If your image contains transparency and you do not know the Web page background color, or if the background will be a pattern, you should use a format that supports transparency (GIF, PNG-8, or PNG-2. 4. ).

GIF FORMAT:

The GIF format uses 8-bit color and efficiently compresses solid areas of color while preserving sharp detail, such as that in line art, logos, or illustrations with type. You also use the GIF format to create animated images. GIF is supported by most browsers.

The GIF format traditionally uses a lossless compression method, in which no data is discarded during compression. You can save a GIF file multiple times without discarding data. However, because GIF files are 8-bit color, optimizing an original 2. 4. -bit image as an 8-bit GIF will generally degrade image quality.

In addition, Photoshop and ImageReady allow you to create a lossy version of a GIF file. The lossy GIF format includes small compression artifacts (similar to those in JPEG files) but yields significantly smaller files.

GIF image with Web color palette with 1. 00% dither and with 0% dither

You can reduce the number of colors in a GIF image and choose options to control the way colors dither in the application or in a browser. GIF supports background transparency and background matting, in which you blend the edges of the image with a Web page background color.

Optimizing Files

In ImageReady, you can use the Optimize palette to create droplets, small applications used for batch processing of multiple images. You can also use a droplet to create an action step in the ImageReady Actions palette for optimizing images.

To save with a named choice

With an optimized image displayed, select a named set of optimization settings from the Settings pop-up menu.

To Optimize as a GIF:

1. Open the original file, and then choose GIF or PNG-8 from the file format menu in the Optimize panel of the Save for Web dialog box (Photoshop) or the Optimize palette (ImageReady).

2. For GIF format only: Drag the Lossy slider or enter a value to allow the compression process to remove pixels from the image (and reduce file size). You can often apply a Lossy value of 5. %1. 0%, and sometimes up to 5. 0%, without degrading the image. File size can often be reduced 5. %4. 0% using the Lossy option. See Previewing and controlling application dither.

Note: You cannot use the Lossy option with the Interlaced option, or with Noise or Pattern Dither algorithms.

3. Select a color palette, as described in Selecting a color table option.

4. To choose a specific number of colors, select a number from the Colors pop-up menu, enter a value in the number field, or use the arrows to change the number of colors.

This option specifies the maximum number of colors. If the image contains fewer colors than the number specified, the color palette will contain only the number of colors in the image.

5. Select Interlaced to create an image that displays as low-resolution versions in a browser while the full image file is downloading. Interlacing can make downloading time seem shorter and assures viewers that downloading is in progress. However, interlacing also increases file size.

6. Select a Dither option and amount. For information on dither, see Previewing and controlling dithering.

7. If the image contains transparency, choose an option for preserving or filling transparent pixels:

Select Transparency (the default setting) to preserve fully transparent pixels as transparent. (Partially transparent pixels are filled with the Matte color or converted to fully transparent or fully opaque pixels, depending on the Matte option you choose.)
Deselect Transparency to fill fully and partially transparent pixels with the Matte color.

Note: The original image must contain transparent pixels in order for you to create transparency in the optimized image. You can use the magic eraser tool () to easily create transparency in a document. In Photoshop, you can also use the background eraser tool ().

Dithering:

You can preview application dither in GIF and PNG-8 images. The Dither Algorithm pop-up menu lets you choose a dithering method for the image. The Dither percentage slider lets you control the range of colors simulated by dithering. A higher dithering percentage creates the appearance of more colors and more detail in an image, but can also increase the file size. For optimal compression, use the lowest percentage of application dither that provides the color detail you require.

Images with primarily solid colors may work well with Dither set to none. Images with continuous-tone color (especially color gradients) may require dithering to prevent color banding.

Select an option from the Dithering Algorithm pop-up menu:

No Dither applies no application dither to the image.
Pattern applies a halftone-like square pattern to simulate any colors not in the color table.
Diffusion applies a random pattern that is usually less noticeable than Pattern dither. The dither effects are diffused across adjacent pixels. In ImageReady, Diffusion dither may cause detectable seams to appear across slice boundaries. Linking slices diffuses the dither pattern across all linked slices, and eliminates the seams.
Noise applies a random pattern similar to the Diffusion dither method, but without diffusing the pattern across adjacent pixels. No seams appear with the Noise dither method.

To Optimize as a JPEG:

1. Open the original file, and then choose JPEG from the file format menu in the Optimize panel of the Save for Web dialog box (Photoshop) or the Optimize palette (ImageReady).

2. Choose an option for specifying image quality:

Drag the Quality pop-up slider.
Enter a value in the Quality box.
Choose an option from the Quality menu.

A higher quality setting preserves more color information but results in larger file sizes. View the JPEG at several quality settings to determine the best balance of quality and file size.

3. To create an enhanced JPEG with a slightly smaller file size, select Optimized.

Note: The Optimized JPEG format is recommended for maximum file compression. However, some older browsers do not support this feature.

4. Select Progressive to create an image that displays progressively in a Web browser. The image will display as a series of overlays, enabling viewers to see a low-resolution version of the image before it downloads completely. The Progressive option requires use of the Optimized JPEG format. Selecting Progressive automatically selects Optimized.

Progressive JPEGs require more RAM for viewing, and are not supported by some browsers.

Progressive JPEG partially downloaded, and fully downloaded

5. To apply a blur to the image to smooth rough edges, enter a value for Blur or drag the pop-up slider.

This option blurs pattern artifacts created along sharp edges in the image and creates a smaller file size, but may also reduce image detail. A setting of 0.1. To 0.5. Is recommended.
The Blur option applies an effect identical to that of the Gaussian Blur filter.

6. To preserve the ICC profile of the image

Colors in Image Ready:

Hexadecimal colors:

In Photoshop and ImageReady, you can view colors as hexadecimal values in the Info palette. In addition, you can copy colors as hexadecimal values to the Clipboard and paste the colors into an HTML document.

In Photoshop, hexadecimal values for colors are displayed in the Info palette when you select Web Color Mode for one or both color readouts. In ImageReady, hexadecimal values for colors are displayed automatically in the right side of the Info palette, next to RGB color values. The Photoshop and ImageReady Info palettes also display other information, depending on the tool being used.

Creating Transparent and Matted Images:

Transparency makes it possible to place a non-rectangular graphic object against the background of a Web page. Background transparency, supported by GIF and PNG formats, preserves transparent pixels in the image. These pixels blend with the Web page background in a browser.

Background matting, supported by GIF, PNG, and JPEG formats, simulates transparency by filling or blending transparent pixels with a matte color which you choose to match the Web page background on which the image will be placed. Background matting works only if the Web page background will be a solid color, and if you know what that color will be.

The original image must contain transparent pixels in order for you to create background transparency or background matting in the optimized image. You can create transparency when you create a new layer.

Note: You can use the magic eraser tool to easily create transparency in a document. In Photoshop, you can also use the background eraser tool.

To create background transparency in a GIF or PNG image:

In the Optimize panel in the Save for Web dialog box (Photoshop) or the Optimize palette (ImageReady), select Transparency. The option is selected by default.

Fully transparent pixels in the image are preserved as transparent. If the image is anti-aliased, you can matte partially transparent pixels to blend with a Web page background color. You can also create hard-edged transparency to prevent the halo effect that results if an anti-aliased image is matted on a color that differs from the image's original background color. If the image contains alpha transparency, you can create multilevel transparency to preserve up to 2. 5. 6. levels of transparency (in PNG-2. 4. format only).

When you know the Web page background color on which an image will be displayed, you can use the matting feature to fill or blend transparent pixels with a matte color that matches the Web page background. The Web page background must be a solid color, not a pattern.

You can matte GIF and PNG images in two ways. You can choose to preserve fully transparent pixels as transparent, and matte only the partially transparent pixels, such as those at the edge of an anti-aliased image. When the image is placed on a Web page, the Web background shows through the transparent pixels, and the edges of the image blend with the background. This feature prevents the halo effect that results when an anti-aliased image is placed on a background color that differs from the image's original background. This feature also prevents the jagged edges that result with GIF hard-edged transparency.

When you apply background matting to images that include anti-aliasing, a halo effect can result when the matte color is different from the original background color of the image. Anti-aliasing creates partially transparent pixels around the edges of the image to blend the image with the original background color.

When working with GIF or PNG-8 files, you can create hard-edged transparency, in which all pixels that are more than 5. 0% transparent in the original image are fully transparent in the optimized image, and all pixels that are more than 5. 0% opaque in the original image are fully opaque in the optimized image. Hard-edged transparency prevents the halo effect. However, hard-edged transparency can cause jagged edges in the image. To prevent jagged edges, apply background matting to the image. To create hard-edged transparency in a GIF or PNG-8:

1. Open or create an image that contains transparency.

2. In the Optimize panel in the Save for Web dialog box (Photoshop) or the Optimize palette (ImageReady), select GIF or PNG-8 from the file format menu.

3. Select Transparency.

4. Select None from the Matte pop-up menu to make all pixels with greater than 5. 0% transparency into fully transparent pixels, and all pixels with 5. 0% or less transparency into fully opaque pixels.

Type:

Is used by paint and image-editing programs such as Adobe Photoshop to create type composed of pixels. The sharpness of bitmap type depends on the type size and the resolution of the image. Zooming in or scaling up bitmap type will show jagged edges on the type.

When you save an optimized file in ImageReady, the type is saved as bitmap type. When you open a vector image (such as an Adobe Illustrator file) that contains outline type, ImageReady rasterizes the type into pixels or bitmap type (except for an image in Photoshop file format, in which outline type is preserved as outlines).

You enter text by selecting a type tool and clicking in the image to set an insertion point. The type tool lets you enter the text directly onto a new type layer created by ImageReady when you click the type insertion point. ImageReady uses the current foreground color for new type. You can change the color of type using the color picker.

To enter text:

1. Select the type () or vertical type () tool. The pointer changes to an I-beam pointer.

The small line through the I-beam marks the position of the type baseline. For horizontal type, the baseline marks the line on which the type rests; for vertical type, the baseline marks the center axis of the type characters.

2. Click in the image to set an insertion point for the type. A new type layer appears in the Layers palette, with a type icon next to the layer name.

3. Specify type attributes as described in Setting type attributes.

4. To change the color of the type, choose a method for selecting a new color:

Click the foreground color selection box in the toolbox, choose a color from the color picker, and then click OK.
Choose a color from the Color palette or the Swatches palette.

5. Enter your text. To create a line break, press Enter (Windows) or Return (Mac OS) while the cursor is in the text area.

The type appears in the image on the new type layer.

Once you have created type, you can edit the contents, attributes, color, and orientation at any time by using its type layer. When you save an image in Photoshop file format, type layers are saved with the image. You can move, restack, copy, and change the layer options of a type layer as for a regular layer. You can also make the following changes to a type layer and still edit the text:

Apply transformation commands from the Edit menu, except for Perspective and Distort.
To apply the Perspective or Distort commands, or to transform just part of the type layer, you must convert the type layer to a regular layer.
Use layer effects.
Use fill shortcuts

A selected type layer is indicated with a blue underline below the type in the document window.

To apply the full range of ImageReady effects (such as filters) to a type layer, convert the type layer to a regular layer. Converting a type layer makes its contents uneditable as text.

ImageReady provides several ways to change the color of type on a type layer. All type on a layer is the same color; you cannot apply different colors to different selections on a type layer.

To change the color of type on a layer:

Select the type layer, and choose a method for changing the color:

Click the foreground color selection box in the tool palette, and choose a color from the color picker.
Click a color in the Color palette, the Color Table palette, or the Swatches palette.
Drag a color from the tool palette foreground or background color selection box or from the Color palette, the Color Table palette, or the Swatches palette, and drop the color on the type layer.
Apply a color fill layer effect to the type layer. See Using layer effects.
Press Alt+Delete (Windows) or Option+Delete (Mac OS) to fill the text with the foreground color, or press Control+Delete (Windows) or Command+Delete (Mac OS) to fill the text with the background color.