Photoshop 6.0 / Part -2

Workspace

This chapter details the Photoshop workspace. Tools, menus, Palettes and accessing Preferences are summarized. Each aspect of the Photoshop interface is examined in depth in later chapters as you learn to use the application. At this point, it’s essential that you familiarize yourself with the workspace so you can begin to learn Photoshop.

OBJECTIVES

Upon completing this section, you should be able to:
Upon completing this section, you should be able to:Understand the main elements of the Photoshop interfaceDock, resize, and customize the Photoshop workspaceRestore default Palette layoutsAccess Preferences

The Photoshop Workspace

The Photoshop workspace consists of four main components: the Menu , the Toolbox , the Options Bar, and the Palettes.

The Toolbox

The Toolbox contains a collection of tools for creating, selecting, and manipulating images. Each tool is detailed as you progress through the manual.

The Toolbox functions by selecting a tool, and when appropriate, selecting a color or setting options for the tool. For example, when the Move Tool is selected, a set of particular options appear in the Options Bar. When the Airbrush Tool is selected, options for the Airbrush Tool appear.

The Options Bar

The Options Bar, by default, runs just below the Menu Bar. Whenever a Tool is selected in the Toolbox , the Options Bar displays the available options for the currently selected Tool (note, see previous example).

Palettes

Palettes contain additional controls for other features in Photoshop , such as the use of Layers , Colors, Styles , and other features that you will learn as you progress through the manual. As you learn Photoshop, you’ll find that you can manipulate the content you create in many ways. By default, there are four Palette sets, each containing a collection of multiple Palettes in each set. There is one additional Palette set that can be accessed by way of the Window Menu .

Preferences

Preferences in Photoshop are used to further customize the Photoshop workspace and how it behaves. To access Preferences select Edit/Preferences. The Preferences dialog box appears. Preferences are divided into 8 categories. At this point, some of the Preferences may not be clear to you because they relate to concepts covered later in the book. At this point, we’ll briefly discuss a few of the more important settings.

Customize or change your Preferences by selecting the Preference type from the drop-down menu. Photoshop currently has a number of preferences unrelated to web development that we will not explore. What follows is a list of Photoshop’s preferences and recommendations to optimize Photoshop for web development. We begin with Units & Rulers to ensure that you use pixels rather than inches as your standard unit of measurement. You may want to return to the other Preferences settings as you proceed through the material. Until you familiarize yourself with Photoshop’s environment and some of it functions and features, the purpose of some of the Preferences might not be readily apparent. Feel free to proceed to the next chapter.

ImageReady

ImageReady is Photoshop ’s web-specific companion Program. You can launch ImageReady by {Clicking} the “Jump to Default Graphics Editor” button on the Toolbar from within Photoshop. ImageReady’s workspace, made up of a Toolbox , Menus, and Palettes is very similar to Photoshop’s. There are however important differences. Before covering these differences however, it is important to learn to use Photoshop and learn about Image Fundamentals. ImageReady’s web-specific features are introduced in later chapters.

Photoshop and ImageReady work in tandem. You can edit an image in either application and switch or move to the other. For instance, you can edit an image in Photoshop and switch to ImageReady to prepare it for the Internet. Photoshop will automatically open the image you have been editing in ImageReady. If you need to go back to Photoshop to make some changes using Photoshop’s features the image will move back to Photoshop with all the changes you have made to it in ImageReady intact.

Review Questions
What are the main areas of the Photoshop workspace?How is the Option Bar related to the Toolbox ?How do you undock and dock the Palettes?Which Menu Item will give you access to Photoshop ’s Preferences ?How do you reset your Palette arrangement back to its default setting?

New Images

This chapter covers the process of creating new images, loading images, and using images in Photoshop .

OBJECTIVES

Upon completing this section, you should be able to:
Create and import images to edit in PhotoshopUse a scanner to acquire imagesUse the Navigator and History Palettes

Creating New Images

If you haven’t already started Photoshop start it now. Creating a new image involves five key decisions: Image Name, Image Width and Height, Image Resolution , Image Mode , and Image Contents. To create a new image, select File/New by {Clicking} on File on the Menu Bar and selecting New. The New dialog box appears.

Scanning Images into Photoshop

To scan images into computers requires a scanner. Scanners are similar to photocopiers, where light passes over a photograph or some other type of physical object and makes a copy of it. With computers, rather than burning toner onto another page, the scanned image is converted into a bitmap, which you can manipulate and modify in Photoshop .

Connecting a scanner to your computer is beyond the scope of this course. Follow your manufacturer’s instructions. Once the scanner is installed and working you can access it within Photoshop if the scanner is TWAIN compliant. TWAIN is a format that permits your computer to interface with imaging devices such as scanners. To select the TWAIN device select File/Import /Select TWAIN_32 Source. Select your scanning software.

To scan an image directly into Photoshop , select File/Import /TWAIN_32. The scanning software is launched. Because scanning hardware and software vary considerably, we cannot cover how to use your scanning software. Follow the manufacturer’s instructions. It is paramount, however, that you keep bit-depth in mind (24bit is optimal), image dimensions, and image resolution (72ppi or higher if developing for other media).

Once you have successfully scanned the image into Photoshop , close the scanning software and save the image in Photoshop format. You can manipulate as you can any other image.

Importing Existing Images into Photoshop

Very often you will work with images that have all ready been created, such as images of company logos, scanned images, and images taken with a digital camera. Furthermore, you might need to make further changes to an image you have already created and edited. To import or load existing images into Photoshop select File/Open. The Open dialog box appears.

Review Questions
What are the five key decisions involved in creating a new image?Why edit images in 24-bit color depth if ultimately they will be 8-bit images on the Internet?Why would you use the Magnification /Navigation controls?What is a Snapshot in the History Palette ?If you delete a History State with other States below it what happens to those States?

Introduction

Channels for digital image editing.

OBJECTIVES

Upon completing this section, you should be able to:
Upon completing this section, you should be able to:Understand and create SelectionsUnderstand ChannelsUse the Channels Palette to save Selections

Selections and Channels

One of the primary features you use when editing and manipulating images are Selections . Selections are areas of an image you choose to isolate from the rest of the image to make modifications to or to copy and paste into other images or even the same image again. For instance, you might want to re-color someone’s eyes. To do so, you would use one of Photoshop ’s numerous Selection Tools and methods to isolate the area around the pupils on both eyes and make color adjustments accordingly. If you do not create a Selection then the entire image is affected by your color adjustments.

Selections are not saved by Photoshop automatically. For instance, having used the Selection Tools to isolate or select the color around the pupils of the eyes, and having made appropriate color adjustments, your client requests yet another change to the color. When you import or load your image into Photoshop again, you have to re-select the color around the pupils unless you tell Photoshop to save the Selection you have created. Photoshop saves Selections in Channels. Channels are part of the Layers Palette group. Be patient. We will get into Channels and how they operate further on in this chapter.

The Selection Tools

The Marquee , the Move, the Lasso, the Magic Wand , the Pen Tool , and the Painting Tools in Quick Mask mode make up Photoshop ’s Selection Tools. A Marquee, a dotted line in constant motion, represents the shape of your selection. The Marquee is also known as a Selection path and informally as an “ant trail”. At any time, select Select/Deselect to remove a selection. We will examine how to use the Selection Tools and related Palettes.

Selection Tool Options

As you know, the Options Bar displays a number of different options depending on the Tool you are currently using. All of the Selection Tools have a set of options, but some differ from others. The Magnetic Lasso has the most.

Creating Selections in Quick Mask Mode

Photoshop also permits you to use the various Painting Tools to create Selections . We won’t be covering the Painting Tools just yet. However, an introduction to how the Painting Tools function in Quick Mask Mode is essential.

Restore the fudog image to its original state by using the History Palette or by reloading the image. {Click} the Edit in Quick Mask Mode button on the Toolbox . Make sure the Background and Foreground colors are at default.

Select the Airbrush Tool and begin painting over one of the statue’s legs by {Clicking} and holding. You’ll notice that instead of painting with Black, a very light Red color results. In effect, you are painting the area you wish to make into a Selection. Black adds to the selection, white subtracts from the selection. If you {Click} the Swatches Tab in the Color Palette Group you’ll notice that all of the Swatches are different shades of gray. Selecting different shades adds transparency to your selection, similar to the Feather effect, the darker the color the greater the transparency. Once you are familiar with the Painting Tools, you can use them to make very complex Selections .

{Click} Edit in Standard Mode to exit Quick Mask Mode. You’ll notice that the Marquee or Selection area is outside the area you painted. To reverse the Selection select Select/Inverse. To force Photoshop to make the area you painted the Selection area you have to set the Quick Mask Options .

Creating a Selection with Color Range

Recall how the Magic Wand works. The Selection is created by analyzing a base color (which you designate by {Clicking} on it) and a range of related colors you determine by setting Tolerance. You can also use the Select by Color Range function by selecting Select/Color Range. The Color Range dialog-box appears.

Saving Selections with the Channels Palette

You might want to save your selections for future use as well. To do so you use the Channels Palette .

Exercises
Open the window image from the chapter004 folder. Use the Magnetic Lasso Tool or the Magic Wand to create a Selection around the window.Use the Channels Palette to convert the Selection into an Alpha Channel.Open the landscape image from the chapter004 folder.Experiment with the History Palette by painting on the image with the Airbrush Tool . Try to select different colors by {Double-Clicking} the Foreground Color Swatch in the Toolbox .Use the History Palette to remove your modifications and make new Snapshots.

Review Questions
What is the primary function of a Selection?What key do you press and hold to constrain the shape of Selections ?What Tool or type of Tool must you use to move the Selection Marquee and not the image data currently within the Marquee?How does the Magnetic Lasso Tool determine what part of the image to create a Selection path around?What effect does Contiguous and Discontiguous have on color based Selections ?Where are Selections saved too?There are two types of Channels in Photoshop , they are?

Introduction

This chapter introduces you to Photoshop ’s Layers , a powerful feature essential in digital image editing.

OBJECTIVES

Upon completing this section, you should be able to:
Understand the Concept of LayersUse all the Options in the Layers PaletteManage and Organize Layers
Use Layers to create digital images

Layers

Each Layer contains a Layer Name, Thumbnail, Paint or Linking Toggle, and Visibility Toggle.

Layer Name

It’s a good idea to name your Layers for easy reference and organization. By default Photoshop names each new Layer “Layer x” where x represents a number, starting at 1. If you import a flat image (meaning an image with only one Layer, such as fudog, Photoshop defaults to naming the Layer “Background” in italics. The Italics indicate that no other Layer can be placed beneath it, in effect locking the Layer as the bottom Layer. To change the name of the “Background” Layer simply {Double-Click} the Layer and enter a new Name in the Name field. When you rename the “Background” Layer it is no longer fixed to the bottom of the stack. To rename any other Layer, select it in the Palette and then select Layer Properties from the Palette’s fly-out menu. You can also {Double-Click} a Layer while pressing the [ALT] key to rename a Layer.

Using Layers

Make sure you have both priests and gates open and that you have changed the Image Mode of gates to RGB. Make priests active.

Make a Selection around the Priests in the orange and green robes in priests. Their shapes are somewhat irregular so a selection has been saved with the image for your convenience. Try to make the selection on your own or load the selection included. Once loaded, select Edit/Copy to copy the contents of your Selection to the clipboard. The clipboard is Photoshop ’s storage area for image data you copy and paste.

Make gates active. Select Edit/Paste. Your Selection (the Priests) is pasted into gates in a new Layer . Photoshop automatically titles the Layer “Layer 1.” Select the new Layer and rename it “Priest.” Alternately, you can use the Move Tool to {Click}, drag, and drop your selection from priests to gates.

Managing Layers

Changing the Stacking Order
To change the stacking order of Layers simply {Click} and drag the Layer above or below other Layers. A solid black line indicates the Layer is ready to be dropped. {Release} the mouse button.

Duplicating Layers

Use the Options Triangle and select Duplicate Layer to make a copy of the Layer. You can title the Layer and choose to copy it to the same image, another image you have opened, or create a new image with the contents of the Layer.

Exercises
Open layersexercise.psd from the chapter005 folder. A composite layout for a mock-up website will open in the workspace.Examine the Layers in the Layers Palette . Toggle visibility on and off and watch the effects in the Image Window . Take note that we have a variety of different types of Layers. Our main aim for this exercise is to organize these Layers into color-coded sets.Create four new Layer Sets by {Clicking} on the New Layer Set button at the bottom of the Layer Palette . Rename them as “Photos,” “Text,” “Design Elements,” and “Navigation Elements”. Color-code each set differently.If you place the “Text” set folder at the top of the Palette listing and then follow it with “Navigation Elements,” “Photos” and “Design Elements” respectively you should be able to organize all content and still maintain its stacking order.Select the various Layers to check their content and place them, logically, in the various folders. Refer to layersfinished.psd to see one way in which the Layers content can be organized.Select the Text Layer for the “Kyushu – Miyamoto” banner and add a Drop Shadow to it by {Clicking} on the Layers Style Button at the bottom of the Palette. Do the same to the “Nav Backdrop” shape in the “Navigation Elements” folder.Link the five navigation buttons together (Famous Gardens, etc…) using the Link Toggle in the Layers Palette . Use the Move Tool to reposition them so they are situated in the top-left half of the gray navigation bar. Refer to layersfinished.psd for exact positioning.The “duotone” photograph in the “Photos” folder drowns out the map of Japan that has been placed on top of it. Decrease the opacity of the “duotone” Layer by moving the Opacity Slider at the top of the Layers Palette to 15. You should now be able to see the map of Japan clearly.

Review Questions
What are the main advantages of Layers ?If a Layer is titled Background what does this indicate?If two Layers are linked together and you reposition or move one of the linked Layers, does the position of the other Layer change as well?What does Locking a Layer ’s pixels do to a Layer?What are Layer Styles ?How do you place a Layer inside a Layer Set?What dialog box allows you to change the color of a Layer or Layer Set?How do you expand and collapse Layer Sets and Layer Styles in the Layers Palette ?

Using the Painting and Drawing Tools

Photoshop ’s Drawing Tools are very powerful. For each Tool, there are sets of options (on the Options Bar) you use to define how the Tool operates. To use Photoshop effectively you should be familiar with all the fundamentals and use them in combination to create images for the Internet.

As we progress through the Drawing Tools we’re going to use the image you created earlier we named FirstImage. Open Photoshop and load FirstImage. If you didn’t save FirstImage create a new image at 300x250, 72ppi, RGB, transparent background. As you read this section, try the tools and options out on your image. You might want to make a separate Layer for each brush you experiment with.

Brushes

When you use any of the Painting Tools, it’s a good idea to select a brush size and shape immediately. {Click} the BrushesTab in the Options Bar.

The Brushes Palette consists of a series of circular and irregular shaped brushes of various sizes. The edges of the brush shapes vary from solid to soft. Select a brush by {Clicking} on it. If you set Painting Cursors to Brush Size under Preferences /Painting Cursors the mouse pointer will change to an outline of the brush shape you selected at the size you selected when you pass it over the Image Window .

Gradient Editor

The Gradient Editor consists of the Gradient Preset Menu , controls to create New Gradients , Rename Gradients, Remove Gradients, Duplicate Gradients, Load and Save Gradients, Adjust color or transparency, Color Stops to build Gradients, and the Gradient Bar.

Typographic Terminology

Before you begin to create and manipulate text in Photoshop , you should know some of the basic typographic terminology that some of the options in Photoshop use. Examine the following example.

Using

Filters are a set of pre-set special effects that you apply to entire images, individual Layers , or selections. Images must be in RGB mode to access Photoshop ’s full range of Filters.

Applying Filters

To apply a Filter, isolate the area of the image you wish to apply it too. For instance, if you want to apply a Filter, such as Blur , to an entire Layer you would select the Layer in the Layers Palette . If you wanted to apply the Blur Filter to a part of the image data on a Layer, you would make a selection on that Layer and apply the Filter.

Adjusting Images

In addition to modifying or adjusting images with Selections , Filters , Layers , using Blend Mode s , and using Painting and Drawing Tools, Photoshop also allows you to adjust a wide variety of color properties, such as tone, saturation, balance, and contrast. Controls for adjusting these image qualities are located under Image/Adjust. Adjustment controls include Levels , Auto-Levels, Auto-Contrast , Curves , Color Balance , Brightness /Contrast, Hue /Saturation, Desaturate , Replace Color, Selective Color, Channel Mixer , Invert , Equalize, Threshold, Posterize, and Variations. Before using these controls however, you should examine the image’s Histogram.

Using Guides and the Grid for Alignment

Often you will want elements within your image positioned relative to each other. To align elements, such as a series of buttons or type you have two options, using Guides or using the Grid .

Exercises
Open the gate image from the chapter006 folder.Use the Selection Tool or Selection Tools of your choice to select the red fence. (Hint: Use Select Color Range and adjust the Fuzziness control. Use Quick Mask Mode and the Airbrush Tool to erase any Selections outside of the gate.)In Quick Mask Mode the Red Fence is clearly selected.The Quick Mask has been made blue in the Options dialog boxChange the color of the Fence using the Hue /Saturation control. If you drag the Hue slider to 34 and the Saturation slider to -11 the fence turns yellow.

Review Questions
What is the Brushes Palette used for?As you {Click} and hold the mouse button when using the Airbrush Tool what happens?What does the Rubber Stamp Tool do?How do you create Custom Gradients ?What are Filters ?What is the Histogram?In Photoshop , tones are divided into three categories, they are?What advantage do Curves have over Levels when editing image tone?What does the Threshold command do?

Introduction

Creating and editing Vector Shapes is a fundamental part of working with Photoshop  6.  Most of the basic layout and design of your website will, most likely, be created with Vector Shapes.  That being the case, it is important that you not only know how to create vector content but also how to organize it.

OBJECTIVES

Upon completing this section, you should be able to:
Upon completing this section, you should be able to:Use the Pen Tool  Use the Shape  Tools
Apply Styles  to Shapes and Objects

Working with Vector Content

If any one new feature of Photoshop  6 could be classified as “revolutionary” it would have to be the incorporation of vector shapes.  The Pen Tool , a tool that creates vector content, has long been used to create paths and selections, but that was about the extent of vector functionality in Photoshop.   For version 6, Adobe has introduced a range of Shape  Tools that utilize path information to create editable shapes.  The beauty of utilizing the Shape Tools is that vector content in your image remains completely editable at all times just so long as your document remains in the Photoshop native file format.  You can place as many vector shapes on the same Layer  as you wish and they will remain editable.  You can also apply Layer Styles  to Shapes and maintain them as editable. That having been said you must always keep in mind the differences between vector and bitmap image information and the benefits and drawbacks of both.   The vector tools are very useful but they are also limited to the creation of relatively simple illustrations.  You would never use vectors to display the complex color information of a detailed photograph.

Before we begin to discuss the expanded range of vector tools let’s take a look at the more traditional roles of the Pen Tool .

The Shape Tools

Now that you’ve wrapped your mind around Paths , understanding the Shape  Tools should be simple.  A Photoshop  Shape is nothing more than a path that acts as a container for a fill.   It can be edited in exactly the same way as a Path  in that it also contains Lines Segments which are connected by Anchor Points which can be modified by adjusting Direction Lines.   Shapes can also be used to add or subtract from other Shapes or create entirely new Custom Shapes.  Shapes can also utilize any of the Layer  Styles  settings available in the Layers  Palette .

Generic Shape Tool Options

Shape Tool Mode

These options allow you to use the Shape Tools to create a Shape Layer , a new Work Path , or a rasterized Shape. If you create a rasterized Shape you cannot go back and edit it after you’ve created it.

Blend Mode

The Blend Mode s that you can apply to individual Shapes are exactly the same as those that you can apply to a Layer . Refer to the chapter on Layers if you’d like further information.

Creating and Applying Layer Styles

Layer Styles are a major addition to Photoshop 6. Photoshop 5.5 incorporated Layer Effects but they were nowhere near the level of complexity found in the latest version of the program. Layer Styles are a combination of Layer Effects, Fills, Strokes, Blend Mode s , and Overlays. The wide range of options available gives the designer the freedom to create some unique styles.

Review Questions
What does an Anchor Point do?What does a Direction Line do?Can the Pen Tool be used to draw Shapes? If so, How?How do you subtract one Shape from another?What is the difference between a collection of Shapes on a Shape Layer and a Combined Shape?How do you the increase the number of sides for a Polygonal Shape ?What type of effects can be used to make up a Layer Style ?How do add a Drop Shadow to a Shape ?How do you create a New Style and how would you access it if you needed to use it sometime in the future?

Introduction

In this chapter, we will create a logo for a make-believe company. We will also examine when to use the GIF or JPEG image types and Photoshop ’s Optimization options.

OBJECTIVES

Upon completing this section, you should be able to:
Create a logo in PhotoshopCreate an Internet ready still imageUnderstand appropriate use of GIF or JPEG file typesUnderstand Photoshop ’s Image Optimization option

Creating a Logo in Photoshop

Most logos are actually created in vector-based programs such as Adobe Illustrator because vector-based artwork is scalable and suitable for print. In most cases, you are given a copy of a company’s logo in either .eps or .ai format. However, since we are working exclusively in Photoshop we will create a logo from scratch. Before doing so however, we will review importing vector-based files such as .eps or .ai into Photoshop and optimizing it for the Internet.

Preparing the Logo for the Internet

The client, in this case, has asked that a drop shadow be added to the logo and that the logo sits on a white background on the website. What follows is the typical process for making a logo web-ready.

Save for Web

The Save for Web dialog box consists of Tabs (Original, Optimized, 2-Up, 4-Up) to control how many Optimization Previews of the image you can see (from 1 to 4 Previews at a time). A set of Hand, Slice, Magnification , and Eyedropper Tool s, and Image Compression Options (Image Type, Palette, Dither Type, Compression, Colors, Dither Percentage, Transparency , Matte , Interlaced, and Web Snap ) are included. Output Settings, a Color Table, Color Table Options , Image Size, Magnification Level, Info Bar, and Info Bars at the bottom of each Preview Window are also included. We will cover the Slice Tool and Output Settings later in the manual so focus your attention on the other features of this dialog box for the time being.

Creating a Custom Logo

Producing images for the Internet follows a particular process. You produce the source images in RGB color and always keep an original version or copy of the source file in case of future modifications. To prepare the file for the Internet you analyze the nature of the image. If it’s made up of sharp edges and continuous color the GIF format is usually the preferred Compression and file Type method. If the image is a photograph or an image consisting of a multitude of colors with no or little pattern, JPEG is usually the preferred Compression and file Type method.

Having selected the method of Compression you have to decide on an applicable color palette, usually Web, when using GIF Compression, and the minimum amount of colors you can use to produce an acceptable image and file size. When using JPEG you have to decide how much Compression (Quality) you can apply to the image to produce an acceptable image and file size.

Finally, you can adjust the image size to reduce file size by {Clicking} on the Image Size Tab and inputting lower resolution values. Place them in your HTML documents accordingly.

Review Questions
When would you use JPEG Compression instead of GIF Compression?Why is it a good idea to save a native Photoshop version of your image?Company Logos are usually created as bitmaps or vectors?Why is would you want to use the Web Palette for 8-bit images?

Introduction

In this chapter, we create a static and animated banner for our mock travel company.

OBJECTIVES

Upon completing this section, you should be able to:
Create a static banner using PhotoshopCreate an animated GIF banner using Photoshop and ImageReadyUnderstand standard banner dimensions and restrictions

Banner Dimensions and Restrictions

Banners are usually a means of advertising on web sites placed at the top of web pages. Companies pay other companies to place their banner on their web site and make it link to their own home page. For instance, Travel Japan wants to draw users to their web site by advertising on Yahoo, most specifically the section listing Travel-based web sites. Your job, as a designer, is to create a banner that encourages users to visit the Travel Japan site within particular dimensions and color and file size restrictions. The standard banner specifications are as follows:

468 x 60 GIF: Web Color Palette Animation : Permitted/Not Permitted 8K to 14K

Dimensions, palette, and file size can, and often do, vary depending on restrictions dictated by the company that displays your banner. Before developing a banner, it is essential that you acquire and confirm the Banner specifications.

Creating a Static Banner

Creating a static Banner is simply a matter of creating an image with the specified pixel dimensions and compressing it so that the file size does not exceed the specified limit and uses the specified color palette. Let’s create a static banner for Travel Japan.

The Finished Product
Create a new image: dimensions 468 x 60, resolution 72 ppi, mode: RGB, contents: transparent. Save it as staticbanner.Because the vertical resolution is so low (60 pixels), the shape of banners forces us to design almost exclusively within a horizontal direction. However, we can use our logo so open travelogo.psd.Select the “Kimono Girl” Layer in the Layers Palette and link the remaining Layers to it by {Clicking} each one separately, or {Clicking}, holding, and running the mouse pointer over the Link boxes. Note that the Text Layer Set has been compressed.

Creating an Animated GIF Banner

Creating an animated banner involves building a static version, as we have just done and then adding animation. By doing so you always have a static version to fall back too when required. Animation doesn’t occur in Photoshop , rather it occurs in ImageReady. Close all Image Window s except for “staticbanner.” {Click} the Jump to ImageReady button at the bottom of the Toolbox to launch ImageReady. ImageReady opens and “staticbanner” is transferred from Photoshop to ImageReady.

The ImageReady Environment

ImageReady’s environment or workspace should be immediately familiar to you because there are many similarities to Photoshop . The first thing you’ll notice is the Image Window contains Save for Web controls in the form of Original, Optimized, 2-Up, and 4-Up Tabs. Because ImageReady is dedicated exclusively to web output, you can think of ImageReady as always being in Save for Web mode. Though of course, you can still save native Photoshop files.

Animating in ImageReady

Animating in ImageReady involves adding new frames in the Animation Palette and then changing the image data within the image accordingly using the Layers Palette . Each frame holds the current state of the image. For instance, if you want a graphic to fade away you would reduce the opacity of the Layer containing the graphic in steps through a series of frames. After you’ve created each frame of your animation you manipulate and adjust timing by adding time to each frame or particular frames. Finally, you decide if you want the animation to loop continuously, loop a set number of times, or play once. Let’s animate our “staticbanner” image in ImageReady.

Review Questions
What are the typical dimensions of a standard Banner?What bit depth is most common to standard Banners?When previewing your GIF animation why should you look at it in a browser?How do you modify the contents of a Frame in your GIF animation?

"Introduction

In this chapter, we create buttons, the key to interactive web sites, and use ImageReady to generate Rollovers, where the button changes when users pass or roll the mouse pointer over the button.

OBJECTIVES

Upon completing this section, you should be able to:
Create a button with ImageReadyCreate Rollovers in ImageReadyIntegrate Rollovers into your HTML documents

Creating Buttons with ImageReady

Creating buttons involves creating an image just as you would any other image. However, there are certain predominant elements common to buttons designed for the Internet, such as shapes (rectangular or elliptical), content (text or symbols), appearance (bevel and/or drop shadow), and size.

Creating Rollovers

Rollovers are changes in the appearance of buttons depending on the current mouse state. For instance, when you pass the mouse point over a button you are rolling over it. To highlight the fact that you are rolling over it you can have the button change, such as the color of the text. When you {Click} on the button another version or change in appearance can occur. ImageReady automatically generates the HTML file, with JavaScript , to make this happen. You use the Rollover Palette to create different Rollover States or Thumbnails , modifying the look of the buttons in their various states, just like GIF animation, by making changes with the Layers Palette . Changes you make with the Layers Palette are reflected in the currently selected Rollover State. Once you have completed making different Rollover States, you optimize the image accordingly. Keep in mind that each Rollover State is actually an individual image so you have to add the file size of each State to determine final file size for the Rollover effect you build.

HTML Options

Set HTML options to your preferences for the HTML file that ImageReady automatically generates. Options include Tags Case, Indent, Attribs Case, Line endings, Always Quote Attributes, Coding, Generate CSS, TD W,H, Spacer Cells, Empty Cells. Include Comments, Image Maps , and Code.

Saving Files Options

Select Saving Files from the Options drop-down menu. You can build the file-naming format for the web images ImageReady automatically generates by selecting from a variety of options in each of three drop-down lists. You can build your file names from three parts as well as input custom names into each field. A preview of the file name appears below the drop-down boxes. In addition, you can set Compatibility, Background Image, Image Folder, and Copyright options.

Review Questions
What ImageReady Tool is best suited to creating common button shapes?In addition to generating HTML, what other scripting language does ImageReady generate when you create Rollovers?How do you modify the image content in a Rollover State?What purpose does the Styles Palette serve?

"