Chapter 2: The Photoshop Workspace This Chapter Details The Photoshop

Chapter 2: The Photoshop 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 After completing this chapter you should be able to: 1. Understand the main elements of the Photoshop interface 2. Customize the Photoshop workspace 3. Restore default Palette layouts 4. Access Preferences 5. Set Key Preferences 6. Set Color Settings The Photoshop Workspace consists of four main components: the Menu, the Toolbox, the Options Bar, and the Palettes. The Menu 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 Photoshop workspace. As you progress through each lesson, the Menu and Menu Items are detailed. 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 Horizontal Text Tool is selected, Options for the Horizontal Text Tool appear. With Options and possibly a Color selected (depending on the Tool), you use the Tool to manipulate image data. Creating and using images is covered later. The Options Bar, by default, is placed just below the Menu. Whenever a Tool is selected in the Toolbox, the Options Bar displays the available Options for the currently selected Tool (see example above). Select an option by {Clicking} on the option. Some Options are buttons; others include drop-down menus or input fields. {Clicking} the drop down for Font Style presents the user with the various styles available to a particular font. The Options for each Tool are discussed later in the manual. Palettes Palettes contain additional controls for other features in Photoshop, such as the use of Layers, Colors, Layer Styles, and other features that you will learn about and use 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 (the Character and Paragraph Palettes) that can be accessed with the Window Menu. The Default Palette Set To select a different Palette in the Palette Set, {Click} the Palette Tab to activate it. For example, by default the History Palette is displayed in the third Palette Set; if you {Click} the Actions Tab, the Actions Palette is displayed.

{Clicking} the Actions Tab enables the Actions Palette in this Palette Well. Palettes come in Palette Sets, where multiple Palettes are docked together. To undock a Palette from a Palette Set, {Click}, hold and drag the Palette Tab away from the Palette Set. When it has been removed from the Palette Set {Release} the mouse button. Now you’ll have a seperate Palette. For example, you could drag the Actions Palette out of the second Palette Set. Dragging the Actions Palette from the second Palette Well and dropping it outside creates a seperate Actions Palette. You can dock a Palette into another Palette Set by dragging it into the other For example, if you wish, you could make a single Palette Set with each of the standard Palettes inside it. Each of the default Palettes have been placed or docked into a single Palette. Currently, the Styles Palette is selected. In the example above, the custom Palette Set was scaled. To change the scale of a Palette, {Click}, hold, and drag the bottom corners, the bottom, and the sides of any Palette. Palettes (con't) Note To restore the Palette Sets to the default configuration, select Window/Workspace/Reset Palette Locations. To save a customized Palette layout, select Save Workspace from the same Menu. If you'd prefer to start each Photoshop session with the various Palettes in their default positions then you'll have to indicate this in the Preferences dialog box. Select Edit/Preferences and remove the check from the Save Palette Locations checkbox. With the box checked, Photoshop will start each new session with the Palettes in the position that they were in at the close of the last session. We'll be using the default workspace layout throughout this book. Preferences Preferences in Photoshop are used to further customize the Photoshop workspace and how it behaves. To access Preferences select Edit/Preferences/General. 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 while ignoring some of the print specific and other Options. Customize or change your Preferences by selecting the Preference type from the dropdown menu (or press the Prev and Next buttons.) 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 after exploring Units and Rulers. Customize or change your Preferences by selecting the Preference type from the dropdown menu (or press the Prev and Next buttons.) 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 after exploring Units and Rulers. Preferences: Units and Rulers Units Select pixels. Pixels are the recommended measurement as they are the standard unit for web site development. Other Options relate to images created for Print. Column Size and Point/Pica Size control Font attributes. Leave them at the default settings. New Document Preset Resolutions These settings refer to the density of an image in relation to the number of pixels per inch, referred to as ppi. The default for Screen Resolution, 72 ppi, is the standard pixel density for screen-based images. Leave it at default. Point/Pica Size is Print related settings. Leave it a default, Postscript (72 points/inch). Preferences: There are numerous Preferences you can set in General Preferences. At this point we’ll look at two key Options, the Color Picker and Interpolation. Color Picker Color Picker is set to Adobe by default. You can set it to Mac OS or Windows to use your system’s built in color picker, but this limits Photoshop’s Color Options. Keep it at default. Interpolation Interpolation calculates intermediate Color values applied to newly created pixels when translating or changing image resolution and dimensions. There are three Options: Nearest Neighbor (Faster), Bilinear, and Bicubic (Better). Each method uses different methods to generate new Color values for newly created pixels. The method with the highest quality is Bicubic, its recommened that you keep it at Bicubic. Preferences: File Handling Image Previews To save previews or thumbnails of your images select Always Save in the Image Previews drop-down menu. You will see these thumbnails when you open and {SingleClick} images stored in a directory using Photoshop's Open command. To save disk space select Never Save. Select Ask When Saving if you want Photoshop to ask if you desire a thumbnail or not whenever you save an image. File Extension Select Use Lower Case to force Photoshop to save files with lower case file type extensions. Lower case extensions have become the de-facto standard for web-based images and are recommended. File Compatibility Check Always Maximize Compatibility in Photoshop (PSD) files under File Compatibility to ensure previous versions of Photoshop or other programs that can use native Photoshop documents can load the image. Features that have been introduced to the PSD file format with newer versions of Photoshop are not available should you edit the image with an older version of Photoshop.

The Ask Before Saving Layered TIFF Files option does not affect web development. Preferences: Display and Cursor Painting Cursors Select Standard, Precise or Brush Size. Standard displays an icon of the Tool, such as the Paint Brush when you paint on the image. Precise displays a cross hair and Brush Size represents the size and shape of the brush. We recommend selecting Brush Size so you can see the area and size your brush will be covering. Other Cursors Select Standard or Precise. Standard displays an icon of the Tool, such as the Eye Dropper, and Precise displays a cross hair. For increased accuracy in editing, we recommend selecting Precise. Preferences: Plug-Ins & Scratch Disks Plug-Ins Folder By default, Plug-Ins are stored under the Photoshop\Plug-Ins directory. To change the path select Choose and enter the new path. However, we recommend you keep the path at default. Plug-ins, also referred to as Filters, are covered later in the manual. Scratch Disks Scratch Disks are areas of your hard drive Photoshop uses for memory when physical memory (your RAM) is full. An image in Photoshop takes approximately 3-5 times its file size. For instance, if your file takes up 10 Megabytes on your hard drive, Photoshop requires approximately 40 Megabytes of RAM when working with it. As you work on multiple images RAM requirements increase and Photoshop will begin to use your hard drive for virtual (rather than physical) RAM. It is recommended that free space on your hard drive for the Scratch Disk equals at least the amount of physical RAM in your system. If you have 512 Megabytes of RAM for instance, you should have at least 512 Megabytes of storage space on your hard drive for the Scratch Disk. The greater the physical RAM and free hard drive space the better Photoshop performs. If you have more than one hard drive, we recommend installing Photoshop on one and designating your Scratch Disk space on another. Photoshop can have up to four Scratch Disks. To designate what hard drive will act as your Scratch Disk select the drive letter or volume from the drop down list. By default, Photoshop uses your Startup hard drive. Preferences: Memory & Image Cache Cache Settings The Cache is an area of memory Photoshop uses to store low-resolution versions of your images to help with screen updates or refreshes. Recall that typical computer monitors can display no more than 72 ppi. If you are working on an image with a high ppi setting Photoshop makes all the editing and modifications in the selected resolution, but does not need to use the higher ppi to display your image on screen. For web development, you can work with an image density of 72 ppi but we recommend you keep the Cache settings at default. The Cache Level ranges from 1 8, the higher the setting the larger the Cache. If you are running out of memory, you might want to decrease the Cache value. Memory Usage Memory Usage is a setting unique to Photoshop on the Windows platform. By default, the amount of physical RAM designated for use by Photoshop is 50%. If you are editing many images simultaneously, you may want to increase memory use so that Photoshop does not use the Scratch Disk as much. Physical RAM is much faster than the Scratch Disk's virtual memory. To modify the amount of RAM designated to Photoshop {Click} the drop-down arrow and move the Slider back and forth to increase or decrease RAM use, or input a value manually. We recommend keeping the RAM level at default. If you do need to increase the amount, do not increase it to more than 70%. The File Browser

Beside the Options Bar, in the Palette Well, are two additional Palettes, the File Browser Palette and the Brushes Palette. The Brushes Palette is covered in a later chapter. You can use the File Browser to navigate or explore image files on your computer and open them within Photoshop. Like the other Palettes, the File Browser Palette can be docked and undocked. To use the File Browser, simply {Click} the File Browser tab or remove the File Browser Palette from the Palette Well. The File Browser (con't) Use the File Explorer of your choice to navigate your system or network for images in a specific folder. When you navigate to a folder with images the images appear in the Visual Explorer. If you {Click} on one of the images, the information for the image appears in the File Information area and a larger thumbnail appears in the Image Preview area. The File Browser (con't) {Double-Click} the image to open it in Photoshop. To redock the File Browser Palette, {Click} the Options Menu and select Dock to Palette Well. Note Any Palette can be docked in the Palette Well. Simply drag the Palette of your choice into the Well. The contents of the Palette will be hidden until you {Click} on the Palette Tab, which then reveals the contents. ImageReady ImageReady is Photoshop's web-specific companion Program. You can launch ImageReady by {Clicking} the Jump to Photoshop/ImageReady button on the Toolbox 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, 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. 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. Foreground and Background Colors Before we continue with the rest of the manual, its essential to cover two fundamentals Options referred to often in the book, that of Foreground and Background Colors and the Move Tool. When you are asked to restore the Foreground and Background Colors to default you do so by {Clicking} the Default Foreground and Background Colors Icon in the Toolbox. This restores the current Foreground Color to Black and the current Background Color to White. To swap or switch or swap the Foreground Color and Background Color, {Click} the Switch Foreground and Background Colors Icon. The Move Tool The Move Tool is primarily used for moving image data within a Photoshop Document. Simply select the Move Tool and {Click}, hold, and drag to move an object. {Release} the mouse button to stop the move. Color Settings

Color is an advanced topic that is a course in itself. Photoshop permits you to set up a color profile. The very simple explanation is that color profiles are intended to act as a means of communicating accurate color information to a variety of devices such as printers, monitors, televisions, and so forth. Usually, you should calibrate your monitor and very often monitors come with .icc drivers which contain the color profile for a particular brand and model. Using the following color settings is optional. If there seem to be discrepancies within the manual in regards to describing color and brightness it is mostly likely due to different color settings. The images produced and referred to throughout this manual were produced with the following color settings selected (select Edit/Color Settings): • Settings: Custom • Advanced Mode: Checked • Working Spaces - RGB: ColorMatchRGB • Working Spaces - CMYK: U.S. Web Coated (SWOP) v2 • Working Spaces - Gray: Gray Gamma 2.2 • Working Spaces - Spot: Dot Gain 20% • Color Management Policies - RGB: Convert to Working RGB • Color Management Policies - CMYK: Preserve Embedded Profiles • Color Management Policies - Gray: Preserve Embedded Profiles • Profile Mismatches - Ask When Opening: Checked • Profile Mismatches - Ask When Pasting: Checked • Missing Profiles - Ask When Opening: Checked • Engine: Adobe (ACE) • Intent: Relative Colormetric • Use Black Point Compensation: Checked • Use Dither (8-bit/channel images): Checked • Desaturate Monitor Colors By: Unchecked/Blank • Blend RGB Colors Using Gamma: Unchecked/1.00 Mac users can use the Apple calibration utility to calibrate their monitors. Windows users can use the Adobe Gamma utility (in the Control Panel.) For more information consult your Photoshop manual or use Photoshop’s Help system and input “color management” in the search section.

Chapter 3: Photoshop Fundamentals:Photoshop Documents Creating New Images

If you haven't already started Photoshop start it now. Creating a new image involves five (5) key decisions: 1. Image Name 2. Dimensions 3. Resolution 4. Mode 5. Contents To create a new image, select File/New. The New dialog box appears. Creating New Images (con't) Name Enter the name of your image file in the Name field. It's a good idea to name all of your files appropriately so that you can remain organized and productive. Web sites can consist of many images and easily identifying images by name can be a significant benefit. Note that you do not have to enter the name of the file at this point; you can name it when you save it if you wish. Input firstImage. Dimensions (Preset Sizes/Width and Height) You can set the image dimensions by selecting from a list of preset sizes using the Preset Sizes drop-down menu or specify the Width (horizontal size) and Height (vertical size) in pixels, yourself (Preset Sizes is set to Custom.) If a unit other than pixels is listed, you should set the default unit type in Preferences (see “Preferences: Units and Rulers” on page 21.). Recall the basic unit of your screen's display is the pixel and because web pages are screen based it is essential to work in pixels rather than inches or any of the other 35 unit Options. Input a width of 300 pixels and a height of 250 pixels (300 x 250). Recall that most web sites are developed with a maximum width of 640 or 720 pixels. Because of scroll bars and other screen-space or "real-estate" taken up by the browser a maximum width of 600 pixels is recommended for a target resolution of 640 x 480 and a maximum width of 720 pixels for a target resolution of 800 x 600. Resolution Set Resolution to 72 ppi for images designed for the Internet. Again, recall that currently, the maximum resolution of monitors ranges from 72 to 96 ppi (some monitors have a slightly larger range), making higher resolutions, which create larger file sizes, inefficient. You may choose to design and edit in a higher ppi if you are developing images to fulfill multiple objectives, such as print, video, and Internet. Appropriate ppi settings can be determined by consulting your service bureau for Print. For now, select a resolution of 72 ppi. Creating New Images (con't) Mode Select RGB Color for Mode. Because your images are destined for the screen, which uses the RGB Color space, RBG Color is the appropriate mode to create and edit your images. Recall that in addition to the RGB Color space, digital images have different Color or bitdepths. By default, RGB mode in Photoshop operates in a 24bit Color depth. Contents Contents determine the initial background Color of your image. Options include White, Background Color, and Transparent. Selecting White creates an image with a white background. Selecting Background Color creates an image with the current Color of the Background Color Swatch in the Toolbox. By default, this Color is white, but in the process of editing you will almost certainly change it. Selecting Transparent creates a background without any Color, similar to glass or acetate. Photoshop, by default, represents transparency by a gray and whitecheckered pattern. You can customize the pattern by selecting File/Preferences/Transparency & Gamut. Use the Grid Size and Grid Colors drop-down menus to make changes. You can customize the transparency colors by {Clicking} on the swatches and selecting the Color you desire. Changes are immediate. Most

Photoshop users leave the Transparency Preferences at default. Select Transparent and {Click} OK in the New dialog box. You should have a new Photoshop Document or Image Window in the Photoshop workspace. Why select a transparent background? You'll find out as we progress through this chapter and the next. Note that the checkered pattern in the image is only an indicator of transparency, it is not image data. Creating New Images (con't) Image Window At the top of the Image Window is the name of your document, the current level of magnification (firstImage @ 100%), the current Layer you are working on (at this point the image has only one Layer), and the Image Mode, in this case RGB with a bit depth of 24. Standard controls for minimizing, maximizing, and closing the document appear at the top right corner. You can {Click} and drag the top of the Image Window to move it anywhere within the workspace. If you drag the Image Window to areas occupied by the Toolbox and the Palettes the Image Window is covered by them. To resize the Image Window {Click} and drag the top, bottom, left, or right sides to increase or decrease the size in any of these directions. To resize the Image Window proportionately {Click} and drag at any of the corners. We will be using and modifying images from the photoshop7xfiles folder that accompany this manual. Take the time now to copy those files into a new directory (also referred to as folder) on your hard drive or network so you can save the changes that you make them. Save "firstImage" in a new folder inside the photoshop7xfiles folder that you just copied. Creating New Images (con't) Document Status When you have an Image Window open in Photoshop you can view information about it by {Clicking} the arrow at the bottom of the Image Window (Macintosh) or the bottom of the Photoshop workspace (Windows). Select from seven (7) possible Options. 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 or supports a Photoshop compatible plug-in module. TWAIN is a cross-platform format that permits your computer to interface with imaging devices such as scanners. To select the TWAIN device select File/Import and select your scanning device or software. 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 the new document as you can any other image. Importing Existing Images into Photoshop Very often you will work with images that have already 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 or use the File Browser (see “The File Browser” on page 27.) Since we’ve already explored the File Browser we’ll explore the File/Open method. The Open dialog box appears. Open dialog box The Open dialog box contains standard file opening Options such as controls to navigate to particular directories, create new directories, etc. For the purpose of this course, navigate to the photoshop7xfiles folder you've copied to your system or network. For Files of type: with Windows, or Format with Macintosh select All Formats to make the Open dialog box show files of all types. {Click} the drop-down arrow and have a look at the list of file types or formats Photoshop supports. Recall that file types are different 38 kinds of bitmap or vector files that have developed and evolved since the birth of digital imaging. Because Photoshop supports so many file formats your editing Options are almost limitless. Importing Existing Images into Photoshop (con't) monkey.psd Navigate your way to the chapter003 folder and{Double-Click} monkey.psd (the file extension .psd may or may not be visible depending on particular settings for your OS) or {Click} monkey.psd once and then {Click} Open. The Monkey Image Window opens. You now have an imported image file. Let's examine some of the key things we can do and certain things that happen when you create or import an image into Photoshop. Image Mode Just as with a document you have created, a document you have imported contains the name or title of the image, the current magnification level, and the Image Mode in the Image Window Title Bar. Image Mode refers to the Color space the image is operating within. RGB is the Color space of choice for Internet images because RGB is also the native Color space of your computer and monitor. It is important to realize that an image designated by Photoshop as being in RGB mode has a 24-bit Color depth. Recall that the higher the bit depth of an image, the larger the file size. Why edit and manipulate your images with a 24-bit Color depth if ultimately you might only export the image with a bit-depth of 8? If you work in a bit-depth of 8, many of Photoshop's advanced features, such as using Filters, resizing images, and re-coloring images are either not available or do not operate as effectively. By editing or manipulating your images in RGB mode, you give yourself the greatest range of creative Options and the greatest level of accuracy. Of course, ensuring that your display is currently set to 24-bit depth is also essential. You can always reduce the bit-depth for the version of the image you will publish to internet. Image Mode (con't) Select the Filter Menu and drag the mouse over the available items. As you rest the mouse pointer over each item a pop-up box appears with a list of sub-items. You'll notice that currently, all the Filters are available. Select Filter/Distort/Glass. Image Mode (con't) Input "5" for Distortion, "3" for Smoothness and select Frosted from the Texture drop down menu. {Click} OK. The image of the Monkey now appears as though you are looking at it through Frosted Glass. Remove the distortion. Select Edit/Undo Glass. Filters are covered in depth later. Next, select Image/Mode/Indexed Color. Accept the default values of the Indexed Color dialog box and {Click} OK. Notice that the Image Window no longer indicates or displays Image Mode. Any bit-depth below 24, except for Grayscale (which displays Black), is indicated by the absence of an Image Mode indicator. Now attempt to apply the Glass Filter to the image as you just did.

You'll notice that none of the Filters are available, hence the need to edit your images in RGB Mode. Close the Monkey image by {Clicking} the Close box at the top right corner of the Image Window. When prompted if you desire to save changes to the document {Click} "No." Open the monkey image again to explore Photoshop's Magnification controls. Magnification/Navigation Controls To modify, edit, and create images you will need to increase and decrease magnification for accuracy. Navigator Palette {Click} the Navigator tab in the Navigator Palette Set. You will notice a red box surrounding a thumbnail of the Monkey image. The image in the Image Window you have currently selected is displayed in the Navigator Palette. When the box surrounds the entire image it signifies the current magnification level is at 100%. At the bottom of the Navigator Palette, you can see a box that displays the current magnification level. {Double-Click} to manually input a different magnification level. Beside the input box is the Zoom Out, Zoom Slider, and Zoom In controls. {Click} the Zoom Out or Zoom In buttons to decrease and increase magnification in preset increments. {Click} and drag the Zoom Slider back and forth to decrease or increase magnification. As you use the Navigator controls, you'll notice the View Box (red box) on the thumbnail decreases and increases in size depending on the current magnification level. When you pass the mouse pointer over the View Box you'll notice the cursor changes to a Hand icon. {Click} and drag inside the View Box to move the View Box around the thumbnail. As you do so, watch the Image Window. The image moves around within the Window as you move the View Box. When passing the mouse pointer outside of the View Box but over the thumbnail, the pointer changes into a Pointing Hand Icon. {Clicking} on the thumbnail moves the red box to the area you just clicked. The image adjusts in the Image Window accordingly. The Zoom Tool Alternately you can use the Zoom Tool on the actual image to adjust magnification. {Click} on the Zoom Tool to select it. {Click} and drag over the area you desire to magnify. Pressing the [ALT] key changes the Zoom Tool to a Zoom Out Tool. Notice the "+" sign that appears in the center of the magnifying glass icon by default. Pressing the [ALT] key changes the "+" sign to a "-" sign. {Click} on the image to Zoom Out to predetermined levels. {Double-Clicking} the Zoom Tool restores magnification to 100%. The Hand Tool As an alternative to using the Navigator Palette to move a magnified image within the Image Window you can use the Hand Tool. Magnify the Monkey's face. Select the Hand Tool. {Click}, hold, and drag over the image to move the image within the Window, effectively moving other parts of the image under the virtual magnifying glass. Note You can use the keyboard to zoom in, zoom out, and automatically enable the Hand Tool at any time. Press [CTRL] + to zoom in, [CTRL] - to zoom out, and press the [SPACEBAR] when using any tool (other than a type related tool) to convert it to the Hand Tool on the fly. The History Palette The History Palette is effectively Photoshop's Undo manager. Many applications or programs feature multiple levels of Undo, meaning you can discard or erase a series of modifications or changes you have performed. For instance, in a Word Processor you can repeatedly {Click} the Undo button until you're left

without any content at all after having input a few paragraphs. Similarly in Photoshop, you can use the History Palette to Undo a series of modifications you have made to an image. If you’ve made any changes to monkey.psd close it without saving changes and then open it again. Examine the History Palette. The Snapshot Like the Navigator Palette, a thumbnail of your image also appears in the History Palette. This thumbnail is called a Snapshot. The Snapshot is a record of the image complete with all the modifications you have performed on it. Initially of course, upon opening, the image has not yet been modified. Having performed a number of modifications, you can create new Snapshots to effectively create a record of the latest version of your image. The History State and History Options Below the Snapshot, Photoshop records or logs each of the modifications you make to an image. Each record is called a History State. By default, the number of History States is set to 20. You can increase or decrease this number by adjusting the History States field in General Preferences (see “Preferences: General” on page 22.). {Click} on the Options Menu at the top left hand corner of the Palette to access the Menu. Each Palette has a number of Options you can access by {Clicking} on the Options Menu triangle. In this case, select History Options. Automatically Create First Snapshot Checking Automatically Create First Snapshot creates a record of the image before any modifications have been performed. That way, at any point in the editing process, you can easily return to the image in its original form. This option is checked by default. Automatically Create New Snapshot When Saving Selecting this option will automatically create a Snapshot of your image when you save it.Allow Non-Linear History As you make modifications to the image, the History Palette makes a record of each modification building from the bottom up. The last History State, or the History State at the bottom of the History Palette therefore represents the last modification you made. Each modification or History State is related, meaning if you discard or erase a History State with other History States following it in the list, all the History States that follow are also erased. Check Allow Non-Linear History to keep History States that follow deleted or modified History States in the stacking order intact. You can use these History States with the Art History Brush Tool detailed in further chapters. Show New Snapshot Dialog by Default Selecting this option will automatically prompt you to input a name for your new Snapshot, even if you create it using the buttons at the bottom of the panel. Using the History Palette 1. Select the Brush Tool from the Toolbox. 2. {Click} and drag over the monkey image and paint over it as you wish. 3. Switch or swap the Foreground and Background colors by {Clicking} on the Switch Colors Icon in the Toolbox (see “Foreground and Background Colors”.) 4. Paint on the monkey image as you wish. Using the History Palette (con't) Now examine the History Palette. You'll notice that below the thumbnail of the monkey image are three History States: Open, Brush Tool, and Brush Tool. If you don't like the modifications you have made you can get rid of them by {Clicking} and dragging the History State over the Trashcan icon, then {Release}, or you can {Click} the History State you want to erase and {Click} the Trashcan icon. Alternately you can {Click} on any of the History States to make the History States that come after it

inactive. For instance, if you {Click} the first Brush Tool History State the second Brush Tool History State becomes inactive, indicated by the inactive History State becoming ghosted (less visible.) Discarding or erasing a History State that has other History States below it in the History Palette will erase those History States as well. Using the History Palette (con't) If you don't like the modifications you have made you can get rid of them by {Clicking} and dragging the History State over the Trashcan icon, then {Release}, or you can {Click} the History State you want to erase and {Click} the Trashcan icon. Alternately you can {Click} on any of the History States to make the History States that come after it inactive. For instance, if you {Click} the first Brush Tool History State the second Brush Tool History State becomes inactive, indicated by the inactive History State becoming ghosted (less visible.) Discarding or erasing a History State that has other History States below it in the History Palette will erase those History States as well. If you have discarded your Brush Tool modifications, make them again. Having made your modifications {Click} the New Snapshot icon at the bottom of the History Palette. A new Snapshot appears. Using the History Palette (con't) The new Snapshot is automatically named Snapshot x, where x is the number of Snapshots you have made. To rename it, {Double-Click} the name of the Snapshot and input a name. Alternately, you could set Photoshop to automatically display the New Snapshot dialog box (see “The History State and History Options” on page 43.) Now you have two Snapshots, one of the image as it was when opened and one of the image after your modifications. You can use these Snapshots as starting points to make more modifications by simply {Clicking} on the desired thumbnail and making your modifications as you normally would. At any point, you can also create a new document or a new Image Window with the latest modifications you have made. Simply {Click} the New Document from Current State icon in the History Palette. A new Image Window is created. By default, the name of the new Image Window is identical to the name of the Snapshot. Close all images by {Clicking} the Close Box at the top right corner of the Image Window. Do not save changes to the monkey image.

Chapter 4 - Photoshop Fundamentals:Using Selections and Channels 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 change the Color of someone's eyes. To do so, one technique you could you is employing one of Photoshop's numerous Selection Tools and methods to isolate the area around the pupils on both eyes and make Color adjustments accordingly. 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 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 Set. Be patient. We will get into Channels and how they operate further on in this chapter. The Selection Tools The Marquee, the Crop Tool, the Move Tool, the Lasso Tool, the Magic Wand Tool, 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. The Marquee Tools The Marquee Tools are used to create regular shaped Selections. The shape of your Selection is represented by a Marquee; a line of cycling black and white squares in constant motion. The Marquee is also known as a Selection Path. Available Marquee Tools include the Rectangular Marquee Tool for square and rectangular Selections, the Eliptical Marquee Tool for circular and oval Selections and the Single Row Marquee Tool and Single Column Marquee Tool to select single rows or columns of pixels. To access the supplementary Marquee Tools you simply {Click} and hold your mouse button on the Rectangular Marquee Button in the Toolbox. A Fly-Out Menu appears giving you access to the rest of the Tools. Constraining, Moving and Removing Selections To constrain the shape of the Selection hold the [SHIFT] key as you {Click} and drag to create your Selection. Perfectly square and circular Selections result. To create a Selection from the center point, hold the [ALT] key as you create the Selection (you can use[SHIFT] and [ALT] simultaneously). Use the [ARROW] keys to nudge or move the Selection, or with with one of the Marquee Tools selected, {Click}, hold and drag inside the Selection Path to move it. To remove a Selection, select Select/Deselect. Open the Photoshop file goldseal.psd. goldseal.psd Constraining, Moving and Removing Selections (con't)

Select the Rectangular Marquee Tool. {Click} and drag a rectangular Selection over the circular emblem in the center of the image. Use the Brush Tool to paint over the image. You'll notice that painting only occurs within the Selection area because the Selection designates that this area, and only this area, is subject to modifications. Use the History other Shapes in Marquee Options Marquee Options from Selection, and Height.

Palette to remove the modifications you've just done. Try out the the Marquee Tools. include Tool Presets, New Selection, Add to Selection, Subtract Intersect with Selection, Feather, Anti-aliased, Style, and Width

Tool Presets A Tool Preset is effectively a library of custom settings for a particular Tool. Each Tool in Photoshop has a set of Options that can be set in the Options Bar. If you find yourself using the same set of Options repeatedly you may wish to make a Tool Preset so that you do not have to input the Options in the future. If you examine the Options for the Marquee Tools for example, among other Options we have Feather and Anti-aliased. We’ll cover each of these Options below, however, if you were to commonly use a the Eliptical Marquee Tool with Anti-aliased checked and a Feather value of 20, you could create a Tool Preset that saves those Options. To create a Tool Preset, select the Tool, in this case the Eliptical Marquee Tool. Input a value of 20 into the Feather field, and check Anti-aliased. Next, {Click} the Tool Preset drop-down menu to view the Tool Preset window. Tool Presets (con't) {Click} the Create New Tool Preset icon. The New Tool Preset dialog box appears. Input the name of your custom Tool Preset. In this case we’ve input Feather:20 | Anti-aliased: checked. Now your custom Tool Preset will appear in the list of Tool Presets for Marquee Tools. Simply select it in future by {Clicking} on the Tool Preset drop-down menu. To view all the Tool Presets for all the Tools uncheck Current Tool Only. Note Tool Preset Options for each Tool remain until you clear them manually. Its a good idea to create a new Tool Preset without any options. Tool Presets you’ve created appear in the Tool Preset drop-down window. We’ve added a second Tool Preset called Elliptical Marquee: No Options. New Selection Select New Selection to create a new Selection when using any of the Marquee Tools. This is the default setting. Add to Selection Select Add to Selection to add additional Selection areas to an existing Selection using any of the Marquee Tools. You can also press and hold the [SHIFT] key when creating Selections to add to an existing Selection. Subtract from Selection Select Subtract from Selection to remove Selection areas from an existing

Selection using any of the Marquee Tools. You can also press and hold the [ALT] key when creating Selections to subtract from an existing Selection. Intersect with Selection Select Intersect with Selection to create a Selection based on the area where two Selections intersect with each other. Feather To Feather a Selection means to soften the edges of a Selection boundary. If you think of a bird’s wing, spread out, the density of the feathers softens towards the edge where individual feathers no longer overlap each other. As a result, you can see through the feather at that point. When you Feather a Selection, the edge of the Selection gradually fades to transparency, depending on the value you input in the Feather field. To produce very gradual transitions from opaque image information to transparent information input high numbers. To make just a little bit of the edge of the Selection soften, input low numbers. For example, open goldseal.psd. golds Feather (con't) Select the Eliptical Marquee Tool and input twenty (20) into the Feather field. Create a Selection around the circular area in the center of the image. Select Edit/Copy. Create a new Image by selecting File/New. Input the following dimensions (in pixels): • Width: 495 • Height: 550 • Resolution: 300 Because the original image, goldseal.psd has a resolution of 300 ppi, we want to match that. If we were to export this image for use on the web we would reduce the resolution for the web version of the file. Next, select the new Image you’ve created and select Edit/Paste. Note how you’ve copied the area within the Selection to a new image. Note also how the edge of the Selection you’ve pasted into the new Image Window is soft. This is the effect of Feather, or Feathering the Selection. Anti-aliased Anti-aliased refers to a procedure used to make the edges of image data appear smooth on screen. This is usually accomplished by adding pixels to the edge of an image that will be of such a Color to make the transition from one Color to the next appear smooth, on screen, to the naked eye. For example, take black text against a white background. Anti-aliased (con't) Note how the edges of the letter consist of black pixels against white pixels (the background.) There is an oblique or sudden contrast of colors, in this case opposite colors. Examine how an Anti-aliased edge is created: Note how Photoshop has added additional colors along the edge to make it appear as if the edge is soft to the naked eye. Now there is a gradual transition from pure black to dark gray, slightly lighter gray, very light gray, to pure white. Check Antialiased if you wish the edges of your Selections to appear smooth to the naked eye. Style Style allows you to accurately constrain the Selection as it is created. Select

from Normal (default), Fixed Aspect Ratio, Fixed Size. Normal: No Constraint Fixed Aspect Ratio: Input numerical value into the Width and Height fields to constrain the aspect ratio of the Selection. For example, values of 1 x 1 will create a perfectly square or circular shaped Selection. Fixed Size: Input the size of your Selection in the Width and Height fields. {Click} in the Image Window. A Selection is created at the size you specified. Note how jagged the aliased letter c appears as opposed to the same letter with Anti-aliasing enabled. If we take a closer look at a part of the edge of each image we can see why one appears jagged and the other smooth. Using the Info Palette with Selections You can use the Info Palette to view the location of your cursor and the size of your Selection as you create it. To view the Info Palette, {Click} the Info Palette tab. Pass or roll the mouse pointer over the image. Notice that the Info Palette immediately returns information to you as you move your mouse around. As your mouse passes over part of the image data the Info Palette gives you RGB and CMYK information, as well as the location of the pointer within the image, expressed in terms of X and Y coordinates in pixels (if you selected "pixels" as your base unit of measurement in File/Preferences/Units & Rulers.) You'll notice a Width (W) and Height (H) indicator in the bottom right corner of the Info Palette. This returns the dimensions of your Selections. Use the Rectangular Marquee Tool to create a Selection anywhere within the goldseal image. You'll notice the Info Palette returns the Width and Height values of the Selection in pixels. You can use the Info Palette when creating Selections for precise measurements and accuracy. The Info Palette displays information about the image at location of your cursor as well as the dimensions of your Selection. Crop Tool Use the Crop Tool to cut all non-selected content from your image. This Tool is very useful for tweaking the composition of a photograph as it allows you to remove extraneous material quickly and easily. When you use the Crop Tool, you'll notice boxes located at the corners of the Marquee as well as in the center of each side. You can {Click} and drag these to resize the Selection path or Marquee (press the [CTRL] key for precise control.) Notice that all material outside of the crop Marquee has been grayed out so as to give you a better idea of how your content will look once it has been cropped. Crop Tool (con't) Press [ENTER] on your keyboard to crop the image. What happens? The image data outside of the Crop Tool's Selection is erased and the image reduces itself to the data within the Selection. You can use the History Palette to restore the image back to its original state. The Crop Tool is used to isolate the seal in the image and produce a new version of the image. Crop Tool Options: Before Use The Options for the Crop Tool change depending on whether you have merely selected

the Crop Tool or have already selected and used the Crop Tool. When you first select without using the Crop Tool on an image you are presented with the following Options: Width, Height, Resolution, Front Image, and Clear. The initial set of Options available to you when you first select the Crop Tool. Width, Height, Resolution The Width, Height, and Resolution Options control the final size of the image after you have selected an area to crop. Whatever appears within the area you’ve designated for cropping will appear within the new image using the specified Width, Height, and Resolution values. For example: 1. Open the goldseal.psd image (or restore it to its original state using the History Palette.) goldseal.psd 2. Input a values of 200 into both the Width and Height fields, and a value of 100 in the Resolution field. 3. Designate an area of the image to be cropped. For this example, make sure the area is larger than 200 pixels wide by 200 pixels high. Note how the shape of the cropped area is constrained to the aspect ratio of the Width and Height values you’ve input, in this case the aspect ratio is 1 to 1. 4. Press [ENTER] to finalize the crop. 5. Note how all the image information in the new image is scaled to fit into an image with dimensions of 200 x 200, and a resolution of 100ppi. Width, Height, Resolution (con't) A Crop Region is created in the original image. When completed, the image information selected for Cropping is reduced in scale to an image that is 200 x 200 / 100 ppi. The reverse of the operation is also true. If you select a region that is smaller in scale then the specified Width and Height, the resulting image from the Crop Region will be increased in scale to match. A small Crop Region is created in the original image. When completed, the resulting image consists of the image information in the Crop Region, increased in scale to match the specified Width, Height, and Resolution. This technique is very useful for creating images of set dimensions and resolution from a variety of source images of different dimensions and resolutions. Front Image {Clicking} the Front Image button automatically populates the Width, Height, and Resolution fields with the Width, Height, and Resolution of the currently selected Image Window. For example, you might wish to make a series of images the same size as a single particular image. Simply select the image with the desired dimensions and resolution and then {Click} the Front Image button. The Crop Tool is now setup to create cropped images that match the size of the selected Image Window. Clear {Click} Clear to remove any values in the Width, Height, and Resolution fields. Crop Tool Options: During Use Once you have begun to draw a Crop Region with the Crop Tool, the Options for the Crop Tool change. Select from Shield, Color, Opacity, Perspective, Cancel, and Commit. Shield, Color, and Opacity

The Shield is the area outside the Crop Region. Shield is selected by default. With Shield selected, the area outside the Crop Region appears in the Color and opacity that you can set in the Crop Tool Options Bar. By default the Shield Region is black with an opacity of 75%. With Shield unselected, the Crop Region is not shaded. Opacity governs how much of the image information covered by the Shield Region is visible to you. Full Opacity (100%) is pure black. To change the Opacity level, you can {Click} the fly-out Arrow and use the pop-up Slider or input a value. To select a different Color, {Click} the Color Swatch and choose a different Color. Perspective Select Perspective to fix the orientation of rectangular shaped object in photographs that are skewed because of the angle at which they were photographed. For example, open window.psd and examine it. window.psd Note how the window has been photographed from below, and furthermore, off center so the window’s frame appears unbalanced or on an angle. You can use the Perspective Option to correct this problem. Perspective (con't) 1. Begin by creating a Crop Region around the window in the image. 2. Next, {Click} the Perspective checkbox and {Click}, hold, and drag the Crop Handles around the edges or boundaries of the window frame. Perspective (con't) 3. Next, press [ENTER] and view the results. Cancel/Commit {Click} on the Cancel or Commit button to cancel the Crop Tool operation or execute it. {Clicking} the Commit button is the same as pressing [ENTER]. {Clicking} the Cancel button will remove the Crop Region from the image. You can press the [ESC] key as an alternative. Lasso Tools The Lasso Tools are used to create irregularly shaped Selections. This set of Tools includes the Lasso, the Polygonal, and the Magnetic Tools. The Lasso Tool Use the Lasso Tool for freehand Selections, similar to drawing with the mouse as you would with a pencil on paper. {Click}, hold and drag to create your Selection. {Release} the mouse button to close the Selection. Polygonal Lasso Tool The Polygonal Lasso Tool is used to make Selections by drawing a series of straight lines to make a polygonal shape. {Click} within the image to start or begin creating your Selection. As you drag the mouse (having released the button) a line extends from your start point. To begin another line {Click} again and continue until you have created the desired Selection shape. To close a Selection either {Click} the start point again or {Double-Click} to make Photoshop draw the final line to the start point for you. Magnetic Lasso Tool The Magnetic Lasso Tool works similarly to the Polygonal Lasso Tool in that you {Click} within the image to start or begin creating your Selection and drag the mouse (having released the button) to create the Selection Path. However, whereas with the other Selection Tools you determined the path or shape of your Selection, the Magnetic Lasso attempts to create the path itself. You act as a guide by directing the Lasso around or close to the area you desire to select. Open the file fudog.psd.

fudog.psd Select the Magnetic Lasso Tool and {Click} on one side of the statue. Begin to guide the mouse pointer along the edge of the statue around the head of the dog. You'll notice that the path automatically snaps to the edge of the statue. The Magnetic Lasso uses Color contrast to decide where to create the Selection Path or shape. To increase the Magnetic Lasso's accuracy {Click} frequently as you guide the Lasso. Click points, represented by small boxes, become visible along the Selection Path. To close the Selection Path {Click} again at the start point or {Double-Click} to make Photoshop close the Selection for you. Presently, just select the head of the statue. If you need to restart press the [ESC] key to remove the Selection Path you’ve been creating. Using the Magnetic Lasso Tool, a Selection is created around the head of the fudog statue. Magnetic Lasso Tool (con't) Use the Move Tool (beside the Marquee Tools in the Toolbox) to move your Selection to the left of the statue. Select Select/Deselect to remove the Marquee or Selection Path that surrounds your Selection. You'll see that an accurate copy of the top of the statue has been made. Notice that the current Background Color fills the Selection area when you move it. To increase accuracy you could use the Magnification Tools or you can modify the behavior and sensitivity of the Magnetic Lasso Tool by modifying the parameters in the Options Bar. Lasso Tool Options The Lasso Tool and the Polygonal Lasso Tool have the same set of Options. Select from Tool Preset, New Selection, Add to Selection, Remove from Selection, Intersect with Selection, Feather, and Anti-aliased (see “Marquee Options”.) Magnetic Lasso Tool Options The Magnetic Lasso Tool has the same Options as the other Lasso Tools (see “Lasso Tool Options” on page 64.) In addition, the Magnetic Lasso Tool has a set of unique Options such as Width, Edge Contrast, Frequency, and Pen Pressure. Width Recall that the Magnetic Lasso searches for edges to attach to. The Lasso Width defines the range of pixels within which the Magnetic Lasso Tool will search for edges from its center- point. The range is limited to values from 1 to 40. Edge Contrast Edge Contrast adjusts the sensitivity of the Magnetic Lasso's edge detection. The range is limited to values from 1% to 100%. Higher values require increased contrast between the edge you desire to select and the image data that surrounds it. Experiment with the Options to see how they affect the behavior of the Magnetic Lasso. Frequency Frequency determines how often the Magnetic Lasso creates anchor points along the Selection Path. Each anchor point acts effectively as a fresh start to edge detection, increasing accuracy. The range is limited to values from 0 to 100. Higher values create more anchor points. Pen Pressure Pen Pressure, when enabled, permits the use of pressure to change the the pen’s width if you are using a pressure sensitive tablet device. Magic Wand Tool The Magic Wand Tool differs from the other Selection Tools in that rather than drawing a path yourself you simply {Click} the Magic Wand Tool in the area you wish to select and the Selection is created for you. It creates the Selection based on a range of related colors. The range of colors is set in the Options Bar

by adjusting the Tolerance setting. Increasing the value increases the color range. Magic Wand Tool Options The Magic Wand Tool has the same Options as the other Selection Tools (see “Marquee Options” on page 51.) In addition, the Magic Wand Tool has a set of unique Options such as Tolerance, Continguous, and Use All Layers. Make sure the fudog.psd image is open and in its original state (you can reload the image or use the History Palette to delete your modifications.) Tolerance Select the Magic Wand Tool. In the Options Bar, set the Tolerance level to 20. Uncheck Contiguous. Now {Click} any area of the background (the treed area) around the statue. A Selection Path is created that surrounds most of the background. The Color of the area that you clicked on becomes the base Color that establishes the related Color range, in this case shades of black. However, it does not surround the entire area. Deselect the Selection. Change the Tolerance to 30 and {Click} the background again. The Selection Path should encompass more of the background that surrounds the statue with the white areas (between the tree branches) excluded because that Color is outside of the Color range determined by the Tolerance value. Press the [DELETE] key. The selected area is replaced by the current Background Color. Deselect the Selection again and use the History Palette to restore the image to its original state. Contiguous Check Contiguous and reselect the background. You'll notice that less of the background is selected. Why? Because the parts of the background that remain unselected are separated by colors currently outside of the range established by the Tolerance level. By checking Contiguous you force the Magic Wand Tool to select a color range that is uninterrupted by colors outside the range. When Contiguous is unchecked, the Magic Wand Tool selects all the areas that fall within its color range within the entire image. Use All Layers When checked, Use All Layers permits the Magic Wand Tool to make a Selection based on image information within all the Layers of an image. Layers are covered in a later chapter. The Pen Tool The Pen Tool can also be used to create Selections. We will be exploring the function of the Pen Tool in depth in a later chapter. For the time being, suffice to say it can also be used to create very accurate Selections. 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. fudog.psd {Click} the Edit in Quick Mask Mode button on the Toolbox. Make sure the Background and Foreground colors are at default. Select the Brush 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. 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. Edit in Standard Mode Edit in Quick Mask Mode Quick Mask Options {Double-Click} either the Edit in Standard Mode or Edit in Quick Mask Mode button to activate the Quick Mask Options dialog-box. Color Indicates Check Selected Areas to force Photoshop to make the area you paint with any of the Painting Tools the Selection area. Select Masked Areas to force Photoshop to make the area outside of your painting area the Selection. Color {Click} the Color Swatch to change the Mask Color from default Red to something else. You'll find this useful when you have to select an area with the same Color as the Mask. Changing it will make your editing easier. Enter a different value in the Opacity field to increase or decrease the opacity of the Mask. This has no effect on the opacity level of the actual Selection, it affects how much of the image you can see while creating the Mask. Creating a Selection with Color Range Recall how the Magic Wand Tool 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. Make sure you have fudog.psd restored to its original state or open it. fudog.psd You can also use the Select by Color Range function by selecting Select/Color Range. The Color Range dialog-box appears. Color Range Dialog-Box The Color Range dialog-box consists of a Select option drop-down menu, Fuzziness controls (for fine tuning the range of your Selections), an Image Box with the current Selection or Image, Selection Preview Options, Load and Save Color Ranges buttons, three (3) Color Pickers, and an Invert checkbox. Select Use the items in this Menu to define how you are going to create your Selection. You can choose by Color Range (from Reds, Yellows, Greens, Cyans, Blues, Magentas), by Sampled Colors (colors you select with the Color Pickers), by Contrast (Highlights, Midtones, Shadows), and Out of Gamut (which applies to images created for Print.) Generally, you'll use Sampled Colors. Fuzziness Use the Fuzziness slider to increase or decrease the selected color range. Selection or Image Check Selection to display Selection data in the Image Box. Check Image to display the image. Selection Preview Select from None, Grayscale, Black Matte, White Matte, and Quick Mask to display the Selection area and control how the Selection is displayed within the Image Window. Color Range Dialog-Box (con't) Load/Save Once you’ve finalized your settings, you can save them as a Color Range file with extension .axt. You can also load Color Range. Color Pickers There are three (3) Color Pickers. Use the Color Picker without a "+" or "-" symbol to select one Color as the basis for creating your Selection and define the range by using the Fuzziness slider. To add additional colors to your Selection use the Color Picker with the "+" sign. To remove colors from your Selection use the Color Picker with the "-" sign.

Invert {Click} Invert to reverse your current Selection. Restore the fudog image to its initial state. Select Select/Color Range. Make sure Selection is checked below the Image Box. Select the Color Picker without any signs. You can use the Color Picker within the Image Box or on the Image itself. {Click} on the tree area of the fudog image until a black Mask covers most of the statue in the Image Box, indicating the unselected area. {Click} and drag the Fuzziness slider to see how the Selection is affected. Adjust the Fuzziness slider so that the statue is almost completely black and the background almost completely white. {Click} Invert to reverse the Selection. {Click} OK. A Selection Marquee surrounds the statue and other aspects of the image. Often, selecting by Color Range is used as a starting point to build or create a Selection. It is especially useful for images that consist of solid colors and high contrast. 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. Restore the fudog.psd image to its original state by using the History Palette or by reloading the image. fudog.psd Create a Selection using any one of the Selection Tools you wish, but make sure Feather is set to 0. {Click} the Channels Tab in the Layers Palette Set. You will see four (4) Channels: RGB, Red, Green, and Blue. The RGB Channel is a composite of the Red, Green, and Blue Channels. Color Channels There are two types of Channels in Photoshop: Alpha and Color. The fudog.psd image is made of a combination of three (3) Color Channels, each containing a range of data relating to the primary colors in digital imaging, Red, Green, and Blue. Recall that combining variations of Red, Green, and Blue can produce over 16 million colors. Photoshop keeps the primary Color information separate for editing purposes, most specifically for modifying Color. We will use Channels further on. For now, {Click} the Visibility Toggle (the eye) beside the Channel thumbnails to toggle the visibility of a Color Channel. Notice how the Color in the image drastically changes. To restore the Channels simply {Click} the Visibility Toggle beside each invisible Channel or {Click} the Visibility Toggle of the RGB Channel to activate all the Channels. Alpha Channels Alpha Channels are used to save our Selections. Alpha Channels do not store Color data, rather they store grayscale data used to define and store Selections. {Click} Save Selection as Channel at the bottom of the Channels Palette. An Alpha Channel is added below the Color Channels titled, "Alpha 1." To rename the Channel simply {Double-Click} the Channel. Rename accordingly. The Visibility Toggle for the other Channels may be changed, restore the visibility of the RGB Channel and make the visibility of the Channel you’ve just created invisible. Alpha Channels (con't) Examine the Alpha Channel thumbnail. You'll notice that the Channel is made up of pure black and white. The black indicates the area of the image not selected and the white the area of the image selected. If you haven't already, deselect the Selection. {Click} the Visibility Toggle beside the Alpha Channel. The resulting composite now has a pinkish hue over the image with regular Color showing through where the Selection was. {Click} the Visibility Toggle of all the color Channels to make them invisible. Only the Alpha Channel is visible. Notice again that the black area represents the area of the image not selected, while the white area represents the area of the image that is selected. In effect, you can look at the Alpha Channel as a Mask. The white area is the hole in the Mask. When active as a Selection we can only manipulate the area of the image we see through that hole.

Recall that we mentioned Alpha Channels store grayscale data to define and store Selections. Our current Alpha Channel has only black and white. Different values or levels of gray indicate transparency when working with Selection Masks, that is, as the Color range shifts from black, which is absolute transparency, to white, which is absolute opacity, various levels of transparency occur. Recall what occurs when we Feather a Selection. The edge of the Selection gradually shifted to complete transparency. Anything below the translucent or partially transparent areas shows through or mixes with the image above. Alpha Channels (con't) To demonstrate lets create an elliptical Selection with a Feather value of 20: 1. Toggle the visibility of the Alpha Channel to off and restore the color Channels by toggling the visibility of the RGB Channel to on. 2. Select the Eliptical Marquee Tool and set Feather to 20 in the Options Bar (if you create the Tool Preset earlier, you can use that.) Create an elliptical Selection around the face of the dog. 3. Now use the Channels Palette to create an Alpha Channel based on your new Selection. 4. Deselect your Selection and examine the new Alpha Channel by toggling the visibility of the other Channels. 5. Notice the elliptical area is pure white at the center and fades close to complete transparency toward the edge as Color shifts to various shades of gray. This is why Alpha Channels work in grayscale, using 256 shades of gray to define transparency. A Feathered Elliptical Selection is created around the head of the dog. Alpha Channels (con't) The Selection is saved with the Channels Palette. The Alpha Channel displays the gradual transition from full opacity to full transparency. Restoring Your Selection We created Alpha Channels based on our Selections so that we can restore the Selections at a later time. When you save an image as a Photoshop native document the Alpha Channels are saved with the file. We'll pretend that we saved the fudog.psd image and have just reloaded it. (You can save it as fudogchannel.psd if you wish, close it and reopen it.) Make sure both Alpha Channels are not visible by toggling visibility in the Channels Palette. Make sure that you toggle the visibility of the RGB Channel to on. To restore your Selection you can use two methods, one using the Menu, the other using the Channels Palette. To use the Menu, select Select/Load Selection. The Load Selection dialog box appears. Restoring Your Selection (con't) Source Indicates the source filename of the Alpha Channels, in this case fudog.psd. Channel Use the drop-down arrow to select which Channel you want to restore the Selection from (if you haven’t named your Alpha Channels they will be named Alpha 1, 2, etc.) Invert {Clicking} Invert reverses the Alpha Channel values, switching black to white, white to black, and any intermediate grays accordingly. As a result, your Selection will be inverted or reversed. Modifications occur in the area of the image you did not initially select. Operation Select New Selection, Add to Selection, Subtract from Selection, and Intersect with Selection as you desire. For the most part, you will select New Selection.

The other Options are only available if the image already has an existing Selection active. Experiment with these settings if you wish. {Click} OK. Your Selection is restored. Using the Channels Palette to Restore A Selection To use the Channels Palette to restore a Selection, select the Channel with the Selection you wish to restore and {Click} the Load Channel as Selection button. The selected Channel will be displayed in the Image Window with the Selection Path. You will have to make the Color Channels visible again using the Visibility Toggle.

Chapter 5 - Photoshop Fundamentals:Using Layers Layers One of Photoshop's most powerful features is Layers. Layers are similar to acetate or transparent paper. Each Layer in a Photoshop document or image can contain image data that adds to the image data placed on the Layers below. Effectively, each Layer is an entire image unto itself within a master image. By combining these images together, you get what is called a composite, meaning an image composed of many different elements, in this case made up of multiple Layers. The best way to understand the concept of Layers, how they work, and why they are so

powerful is to use them. Open priests.psd and gate.psd. priests.psd gate.psd Make gate.psd active by {Clicking} on the Image Window Title Bar. You'll notice the color mode is CMYK rather than RGB. CMYK is a color space suited for Print production, such as magazines or flyers. Examine the Channels Palette. CMYK images are made of a composite of 4 color channels. Because we are developing for the Internet, we need to convert from CMYK to RGB Image Mode. Select Image/Mode/RGB Color. Examine the Channels Palette. You'll see only 3 primary color channels and the composite RGB channel. We're going to use Layers to add text to the gate.psd image and add some content from the priest image. We'll be using some of the Selections Tools as well. We'll begin by examining the Layers Palette. {Click} the Layers Tab in the Layers Palette Set. Layers Palette The Layers Palette consists of many distinct controls, which include Layers themselves, Layer Options, Blend Mode, Opacity, Layer Lock Options, Fill, and the Layer Style, Layer Mask, New Layer, New Layer Set, New Adjustment Layer, and Trash Icon set at the bottom of the Palette. It's important to note that Layers have a stacking order, from the bottom up, meaning the Layer at the very bottom of the Layers Palette is the last or bottom Layer. Layers Each Layer contains a Layer Name, Thumbnail, Paint or Link 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 priests.psd, 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 of the Layer stack. 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. The Lock Icon will disappear. Thumbnail The Thumbnail is a visual representation of the Layer's content. By default, Photoshop uses the smallest Thumbnail size. To change the size or disable the Thumbnail {Click} the Layer Options menu and select Palette Options. Check the Thumbnail size you desire in the Layers Palette Options dialog box. The Layers Palettes pictured in this manual is set to the largest thumbnail size. Select Palette Options and then select from four (4) choices for Thumbnail Size. Paint or Link Toggle When a Layer is active or selected (by {Clicking} on it) a Paintbrush icon appears in the Toggle box beside the Thumbnail, indicating the Layer can be manipulated for editing. When you {Click} in the Toggle box of an inactive or unselected Layer you "Link" that Layer’s content to the current active Layer, no matter where the active Layer is in the stacking order. Changes in position and various effects you apply to the active Layer are also applied to the Linked Layer. A Chain Icon appears to indicate Linking. Visibility Toggle {Clicking} the Visibility Toggle (see above) makes Layers visible or invisible in the Image Window. It's important to note that even though a Layer may be

invisible, if it's the active Layer or is linked to an active Layer any changes you perform still occur. Blend Mode You can select from over twenty different Blend Mode options that affect how the image data in a Layer mixes or blends with other Layers. Usually you'll use Normal mode. Some of the other Blend Modes produce interesting effects. By experimenting and practicing as you compose your images, you will become familiar with the most, if not all the Blend Modes. You must have at least two Layers in your image to use Blend Mode. Lock Transparency, Pixels, Position, and All {Click} the Lock Transparency Icon to limit painting and editing effects to areas of a Layer that are not transparent. You can also lock the pixels information itself, lock the position of the pixels, or lock the entire Layer by {Clicking} the appropriate Icon. A Lock Icon appears beside the Layer Name. To disable a lock, {Click} the appropriate Icon again. Layer Modification Options Along the bottom of the Layers Palette are six (6) key Options. Add Layer Style A Layer Style is a prepackaged set of visual modifications that you can control to modify the content of the selected Layer. Typical Layer Style’s include Drop Shadow, Bevel and Emboss, and Color Overlay among others. We will be using some of these as we progress through the manual. Add Layer Mask A Layer Mask will mask the currently active Layer. We will use a Layer Mask later in the chapter. Create New Set {Clicking} Create New Set creates a new Layer Set above the currently selected Layer or Layer Set. We will create a Layer Set later in the chapter. Create New Fill or Adjustment Layer {Clicking} Create New Fill or Adjustment Layer creates a Layer that allows the designer to apply tonal and color modifications to their image without having to permanently affect the image content. For example, you may wish to make someone’s shirt brighter. Rather than actually modifying the brightness of the pixels that make up the shirt in the image, you create a Layer that makes the shirt appear brighter. If you or your client do not like the change you simply discard or change the Adjustment Layer. The original pixel information will have never been modified. We’ll be using this feature later in the chapter. Create New Layer {Clicking} Create New Layer creates a new Layer above the currently active Layer. Delete Layer {Clicking} Delete Layer deletes the currently selected Layer. You are asked to confirm whether or not you wish to delete the Layer. If you have only a one (1) Layer you cannot delete it. Using Layers Make sure you have both priests.psd and gate.psd open and that you have changed the Image Mode of gate.psd to RGB. priests.psd gate.psd Make priests.psd active. If you haven’t done so already in the previous chapter, make a Selection around the Priests in the orange and green robes in priests.psd (if you have made the Selection, feel free to load priestsChannel.psd (if you called it that) for this exercise.) The shape around the Priests is somewhat irregular so a selection has been saved with the image for your convenience if you do not wish to create your

own. Once the Selection is completed, 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 gate.psd active. Select Edit/Paste. Your Selection (the Priests) is pasted into gate.psd in a new Layer. Photoshop automatically titles the Layer "Layer 1." Select the new Layer and rename it "priests". Another method of moving image data from one image to another is by using the Move Tool. With the Move Tool, {Click}, drag, and drop your selection from priests.psd to gate.psd. Transparency Examine the Layers Palette. The priests Layer sits on top of the Background Layer and in the Image Window the Priests sit on top of the Gate image. The Priests appear on top of the gate, just as the priests Layer is on top of the Background Layer in the Layers Palette. You can see the gate, tree, and landscape around the Priests because, by default, Layers are transparent. Pasting the selection into gate.psd has created a new Layer with a transparent background in which the Priests selection sits. Transparency (con't) Recall when we created a new image we selected a transparent background. Transparency is represented by a gray and white checkerboard. {Click} the Visibility Toggle in the Background Layer. The gate disappears. You see only the Priests and the transparent background that surrounds them. With the visibility of the Background Layer toggled to invisible we can see the transparency surrounding the Priests. Make the Background Layer visible again. Make sure the Priests Layer is active. Layers are active when colored blue. A Paintbrush icon also appears in the Paint/Link Toggle box. {Click} the Opacity control and drag the slider back and forth. You begin to see the Gate and Trees in the background through the Priests as you decrease its opacity. As you create images you'll find Transparency a powerful tool. Moving Layers Select the Move Tool. Make sure the priests Layer is active. {Click} and drag the Priests in the Image Window. You'll notice that you can move the Priests or part of Priests outside the edges of the Image Window. With Layers, you can think of the Image dimensions as the dimensions of a virtual window through which we see the image data. Photoshop permits you to move image data outside of the virtual window. As a result, we can do things like drag the Priests to the bottom right corner of the screen so that only their faces appear. You'll find this flexibility a great creative aid when composing images. Blend Modes Move the Priests to the center of the image. {Click} the drop-down Blend Mode list and explore the different Blend Mode Options. Photoshop examines the color data of the Layer you are blending and the color data of the Layers below and uses the various Blend Mode Options to create particular visual effects. Keep in mind you can also move the Layer around and play with Opacity. Photoshop's flexibility and complexity encourages combining effects and operations for increased creativity. Move the Priests around the image to see how each Blend Mode appears against different parts of the Layer beneath. Make sure you select Normal for the Blend Mode before proceeding. Lock Transparent Pixels Select the Brush Tool. Make sure the Priests Layer is active. {Click} Lock Transparent Pixels. Paint on the Priests Layer. You'll notice that your paint strokes are limited to areas that contain image data, in this case the Priests. The effect is similar to painting a Selection. By selecting Lock Transparent Pixels, you are restricting changes to the image data contained within the Layer.

Use the History Palette to remove your brush strokes and {Click} Lock Transparent Pixels again to disable it. Lock Image Pixels {Click} Lock Image Pixels. Locking the Layer's pixels will allow you to reposition the content of the Layer but not change or modify the pixels themselves. You cannot, for example, use the Brush Tool to change the color of an object on a Layer with locked pixels. {Click} Lock Image Pixels again to disable it. Lock Position {Click} Lock Position. Locking the Position of content on a Layer allows you to paint or edit it but not move it. {Click} Lock Position again to disable it. Lock All {Click} Lock All. Locking the entire Layer disables moving or modifying the Layer whatsoever. {Click} Lock All again to disable it. Layer Masks: Non-Destructive Editing Layer Masks are Alpha Channels attached to a Layer. Black completely masks or covers image data. White reveals image data. Gray values between Black and White reveal image data at various degrees of opacity. Add a Layer Mask to the Priests Layer by {Clicking} the Add Layer Mask button at the bottom of the Layers Palette. A Link Icon and a Mask Thumbnail are added to the Layer. Layer Masks: Non-Destructive Editing (con't) Set the Foreground Color to Black (see “Foreground and Background Colors”.) Select the Brush Tool. {Click} the Enable Airbrush Icon and {Click} on the Brush Preset Picker in the Brush Tool Options (the Brush Tool is covered in a later chapter. Make sure that Mode is set to Normal, Opacity to 100%, and Flow to 100%. Layer Masks: Non-Destructive Editing (con't) Use the Master Diameter Slider or input a Diameter manually in the Master Diameter Field. In this case, select a Diameter of 30 pixels (px). We're going to remove the Priest in the green robe from the picture, or rather we are going to Mask the Priest so that he is not visible. This is a Non-Destructive approach to removing the Priest in the green robe. If we were to take a Destructive approach, such as erasing the Priest from the Layer, we would not have the benefit of easily reversing our decision to remove the Priest. For example, we or one of our clients may want the Priest removed one week and put back in the next. Using a Non-Destructive approach such as a Layer Mask, we could simply load the Photoshop Document and remove the Mask. Let’s try it out. Layer Masks: Non-Destructive Editing (con't) Start painting over the Priest's face by {Clicking},holding, and dragging the mouse over the face. Notice how the face disappears. {Release} the mouse button. If you examine the Thumbnails in the Layer, you'll notice the Mask Thumbnail displays Black where you've applied your paint strokes, making those areas taken up by the Priest’s face transparent. The Priest Thumbnail looks the same because you haven't actually erased the Priest; you're merely hiding or masking him. You can see the Priest’s face in the Layer Thumbnail. You can also see the Mask in the Mask Thumbnail. The Priest’s face is hidden or masked in the Image Window. Layer Masks: Non-Destructive Editing (con't) Continue using the Brush Tool to hide the Priest. You may need to zoom in closer and reduce the Diameter of the Brush Tool as you paint the Mask closer to the edge of the Priest in the yellow robe. You should notice that the longer you hold the mouse button down, the pixel data is erased gradually, this is because we have set the Brush Tool to the Airbrush Option. As you create your Mask, you may wish to look at the Channels Palette as well. Note that a Mask in Photoshop is automatically added to the Channels Palette as an Alpha Channel. Tip

Remember that when the Foreground Color is Black pixels beneath the Mask are covered. When the Foreground Color is White pixels beneaththe Mask are revealed. Various levels of gray colors produce various levels of transparency. As you create the Mask you may need to switch the Foreground Color from Black to White and back again. Adding to the Mask with Black, deleting parts of the Mask with White. It takes time to create an accurate Mask. You may also want to toggle the visbility of other Layers in the Photoshop Document as the image data may be distracting. Layer Masks: Non-Destructive Editing (con't) As you paint the Mask over the Priest in the green robe the pixel data is hidden. When the Mask is complete, it appears that only one Priest is in our image. Because a Layer Mask is Non-Destructive, the Priest is still actually present, and his visibility can be restored by disabling, modifying, or removing the Layer Mask. Modifying a Layer Mask You can mofify a Layer Mask by {Right-Clicking} the Layer Mask in the Layers Palette and selecting from a number of different options. Set Selection to Layer Mask This creates a Selection around the boundaries of the Layer Mask. Add, Subtract, Intersect If you already have a Selection created, use one of these Options to use the boundaries of the Layer Mask in combination with your Selection (see “Add to Selection”.) Layer Mask Options You can set the color and the opacity of the Layer Mask when you toggle its Visiblility in the Channels Palette. Discard Layer Mask Select this Option to delete the Layer Mask. Anything that was covered by the Layer Mask is uncovered. Apply Layer Mask Select this Option to make the Layer Mask permanent. The area in the image that is covered by the Layer Mask is removed and the Layer Mask itself deleted. Disable Layer Mask Select this Option to temporarily disable the Layer Mask. This Option changes to Enable Layer Mask when the Layer Mask is disabled. Link and Unlink a Layer Mask {Click} the Link Icon in between the Thumbnails of the priests Layer. Move the Priests with the Move Tool. Note that the Mask remains in place. To move the Mask with the image data keep the Thumbnails linked. Transforming Layers You may have noticed that the Priest is a bit too large for the image that he has been inserted into. This can be easily corrected. You can Transform the Layer to scale, rotate, and distort image data. Select Edit/Free Transform. A Transformation Box surrounds the image data of the Layer, in this case the Priest. By {Clicking} on the Box's handles, you can resize the image data. Holding the [SHIFT] key constrains the Box as you resize, maintaining proportion. If you hold the mouse pointer just outside of the Box close to one of the Handles you can rotate the image. For precise Transformation control you can input numerical values in the Options Bar. Rotation is based around the Reference Point, which is at the center by default. To move the Reference Point, {Click}, hold, and drag it to the desired location. {Release} the mouse button to place it. What is Skew? When an image is skewed its distorted on an angle. For example, we’ve applied a

skew to the priest. Note how he seems to be leaning to the left. What is Skew (con't)? We don’t want to skew or rotate the Priest, we simply want to reduce his scale. Make the Priest is slightly smaller so that he looks as though he is walking down the path beside the gate. We’ve selected the Maintain Aspect Ratio button between the Width and Height fields and input a value of 80%. We’ve also placed him toward the left side of the image: Creating New Layers To create a new Layer {Click} the Create a New Layer button at the bottom of the Layers Palette. A Layer is added above the currently active Layer. Make the new Layer active and rename it "Garbage Can." Make the Background Layer active. Make a Selection around the White Garbage Can and Sign on the bottom left hand side of the image. The Priest may be obscuring that part of the image, if so, use the Visibility Toggle for the priests Layer. Having made your Selection, copy it to the Clipboard by selecting Edit/Copy. Make the Garbage Can Layer active. Select Edit/Paste. Your Selection, in this case the Garbage Can, is placed into the Layer. You may have to move the content on the Layer to reposition it exactly where it's placed on the original image (the Background Layer.) As an alternate, you can select Edit/Paste Into. A new Layer is created and the image data in the Selection is copied to the precise position it was copied from. In addition, a Layer Mask is automatically created based on the Selection. Creating New Layers (con't) If you toggle the Visibility of the other Layers to off, you can see the items you’ve selected, cut, and pasted into a new Layer. Move the priest Layer by dragging it beneath the Garbage Can Layer (if you used the Paste Into method, delete the Garbage Can Layer you created and rename the automatically created Layer to Garbage Can.) Creating New Layers (con't) The Priest now appears behind the garbage can. We've now added depth to the image. The Priest appears behind the Garbage Can and a measure of realism has been added to the photograph. You've created an image or composite using Layers. By isolating different elements or components of an image in Layers, you have a great deal of creative flexibility. Imagine creating this image without Layers. You would have to make very precise selections and use the History Palette extensively. It would also take up much more time. By using a combination of Layers, Selections, Transforms, and a Layer Mask, a Priest from one image has been placed in another to make a new image. Text and Layers When you add Text to an image by selecting the Type Tool and {Clicking} in the Image Window at the location you want your text to appear, a Layer is automatically created above the currently active Layer. The name of the Layer defaults to the text you input. Photoshop allows you to type text directly into or over the Image Window. Other imageediting programs and previous versions of Photoshop required that you type your text into a specialized dialog box. Now all the user need do is select the Type Tool, place their cursor in the Image Window and begin to type. Make sure the top Layer in the Layers Palette is active and the Foreground Color is white. Select the Type Tool and {Click} toward the top left corner of the image. At this point, we won't go through the Type Tool options in the Options Bar, for now select the following settings: • Arial (a typeface everyone should have) from the Font Family drop-down menu • Bold from the Font Style drop-down menu

• • •

Input or select a value a 12 pt in the Font Size drop-down menu Smooth from the Anti-aliasing Method drop-down menu Left Align from the Justification Options

Text and Layers (con't) Input "Japanese Shrines" and {Click} OK. Your type is created in its own Layer and the name of the Layer is the text you input. This Type Layer is editable and is indicate by a capital "T" in the Layer Thumbnail. Text and Layers (con't) At this point, the type can be re-edited or changed by highlighting the text in the Image Window (make sure the Type Layer is selected in the Layers Palette) with the Type Tool in the Layer. You can position the type as close to the top left corner as you wish using the Move Tool. Looking at the image at this point, the text isn’t particularly visible against the background. We could change the Color, Font Family, or Font Size, or we could use a Layer Style. Layer Styles Layer Styles are pre-defined special effects applied to the image data contained in the Layer. To apply a Layer Style, select the Layer you want to apply the effect to and {Click} on the Add a Layer Style button at the bottom of the Layers Palette. In this instance, apply a Drop Shadow to your Type Layer. From the Styles drop-down, select Drop Shadow. Layer Styles (con't) A rather substantial dialog box appears with options to adjust the appearance of the Drop Shadow. Use the Layer Style dialog box to add, remove, and modify Styles attached to your Layers. {Click} on a Layer Style checkbox to add a Style and {Click} on the Style label to modify its properties. We'll take a closer look at the Styles later in the manual so stick with the Drop Shadow for the time being. Make sure you use the following settings (as seen in the screenshot): • Blend Mode: Multiply • Opacity: 100% • Angle: 140 degrees • Use Global Light: Checked • Distance: 5 px • Spread: 15 px • Size: 5 px • Layer Knocks Out Drop Shadow: Checked Layer Styles (con't) Once you’ve set the Options, {Click} OK to close the Layer Style dialog box. Take a look at your Image Window. There is a shadow behind the type, making it more visible against the background. A lower-case italic "f " appears in the Layer indicating that a Layer Style has been applied. You can {Click} the triangle beside the "f " to expand or collapse the list of Layer Styles you’ve applied to a particular Layer. You can also toggle the visibility of any of the Layer Styles, just as you do a Layer. To edit an existing Layer Style, {Double-Click} it in the Layers Palette. Each Layer Style has a set of properties that change according to the effect. Experiment with properties to customize the effect. Managing Layers As you produce images in Photoshop, some of them can be quite complex, consisting of many Layers. Knowing how to manage Layers can help you and anyone you may collaborate with work efficiently.

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 Layer Options Menu 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. Merge Options Selecting Merge Down merges the contents of the currently active Layer with the Layer below it. Selecting Merge Visible merges the all the currently visible Layers. The bottom Layer must be visible and the currently active Layer. Select Layer/Merge Linked to merge Layers you have linked together. Select Flatten Image to merge all Layers. This removes all the flexibility you have with Layers. Color-coding Layers Photoshop has made managing Layers much easier by allowing the user to color-code them in the Layers Palette. Select Layer Properties from the Layer Options Menu, select a color from the drop down menu and {Click} OK. Layer Sets Photoshop also allows the user to group similar content into a Layer Set. A Layer Set is like a folder into which you place a collection of individual Layers. Create a Layer Set by clicking on the New Layer Set button at the bottom of the Layer's Palette. The Layer Set is created above the currently selected Layer by default. By default the new Layer Set is created above the currently selected Layer. Layer Sets (con't) The new Layer Set is named "Set 1" by default. Rename the Layer Set by {DoubleClicking} on it and inputting an appropriate name. You can also give the Layer Set a color if you wish. It is important to remember that the color settings for your Layer Set override any individual color settings you have given individual Layers. To place a Layer in a Layer Set you {Click} and drag it onto the Set's Folder Icon. You need to place it directly on the Icon or the move won't take place. A successfully relocated Layer will appear below the Layer Set and its Thumbnail will be slightly indented. A Layer Set can be expanded or collapsed by {Clicking} on the small gray rectangle beside the Layer Set name. Both the "priests" and the "Garbage Can" Layers are in the "Priest Set" Layer Set. Layer Sets (con't) Note the default Blend Mode of the Layer Set. It is set to Pass Through. What Pass Through indicates is that the Layer Set itself does not have any Blend Mode properties, it merely passes through the Blend Mode settings of the Layers it contains. You can select another Blend Mode for the Layer Set and it will take all the properites of the Layers it contains and composite them. Once the composite is built, that composite of Layers is treated as single Layer and the Blend Mode for the Layer Set is applied to the composite of Layers and then composisted with any other Layers and/or Layer Sets that the image contains. You have successfully completed assembling your first composite image using Selections, Layers, a Layer Mask, and a Layer Set. Save your image if you wish. You can compare your image to the one referenced in this manual which is called gate.psd, in the completed folder for this chapter.

Chapter 6 - Photoshop Fundamentals:Editing Images Using Photoshop’s Tools Photoshop's Tools are very powerful. For each Tool, there are sets of options (in 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. As we progress through the Drawing Tools we're going to need an image we can use to experiment with. Open blank.psd (we’ll be using other images as well.) blank.psd This image is 600 x 300/72ppi, with two (2) Layers, transparent and white. As you read this section, try the tools and options out on your image. You might want to make a separate Layer for some of the Tools you experiment with. The Brush Tool When you use any of the Brush Tools, it's a good idea to select a Brush Diameter, Brush Shape and Color immediately. Select the Brush Tool and examine Options Bar. Tool Preset Tool Presets function as covered previously (see“Tool Presets”.) Brush Preset Picker {Click} the Brush Preset Picker to set Brush Diameter and Brush Shape. Use the Master Diameter Slider or input box to set the diameter you desire. Select a Brush Shape by {Clicking} on it. You can use the scroll bar to view more shapes or resize the Brush Preset Picker box. The diameter is displayed (which you can change) and a sample stroke is displayed. Brush Preset Picker (con't) In addition to the default Brushes, you can add more Brushes by selecting Options and choosing from a variety of Brush categories. For example, if we select the Special Effect Brushes Category, we are asked if we wish to replace the current Brushes or append them to the current set of Brushes. The additional Brushes will appear below the current set. Its usually good to append so that you do not remove the default set, however, if you do, select Reset Brushes from Options. The defaults will be restored. Painting Mode Painting Mode affects the way the color of the Brush mixes with existing image data in the same manner as the Blend Mode for Layers (see “Blend Mode”.) Stroke Opacity Stroke Opacity affects the level of transparency of the Stroke (0% being fully transparent, 100% being fully opaque.) Stroke Flow Rate The Stroke Flow Rate determines the rate at which paint is applied. For example, even though you might have Stroke Opacity set to 100%, if you’ve set Stroke Flow Rate to 20% and you’ve selected Black as your Color, a grey opaque Color results. By continuing to brush over the same area, the Color will get darker. Enable Airbrush

{Click} Enable Airbrush to switch the Brush Tool to an Airbrush Tool. When an Airbrush, the Brush Tool effectively sprays color onto an image, similar to painting with a can of Spray Paint. Imagine the mouse button is the nozzle you press down and hold as you spray. The longer you spray a particular area the more opaque or dense the color or paint becomes. In other words, as you apply increased or consistent pressure the density of the color increases. Selecting a Color Before we proceed, we should select a Color. In Photoshop, there are a variety of ways to select a Color, including the Color Picker, the Color Palette, and the Swatches Palette. The Color Picker One method of selecting a Color in Photoshop is to {Double-Click} the Foreground Color Swatch (because the current Foreground Color Swatch holds your paint Color) to launch the Color Picker. The Color Picker (con't) There are three Color Modes with which you can select a Color from by using the Color Slider and the Color Field. By default, the HSB Color Field is selected. HSB stands for Hue, Saturation, and Brightness, and is a Color Mode from which you can select a valid RGB Color. To select a Color, simply {Click} anywhere within the Color Field. Note that the numerical values in each Color Mode are displayed. Use the Color Slider to adjust the range of Colors within the Color Field. To get a good idea of how the Color Field works in tandem with the Color Slider select the R in the RGB Color Mode. The Color Slider presents the full range of Red Colors from the darkest to the lightest. With Red selected, the Color Field will consist of a mix the remaining primary colors, Green and Blue. You can select a Red by using the Color Slider or select from the Color Field. Just as with the HSB Color Field, when you adjust the Color Slider, the Color in the Color Field adjusts as well. You can also input numerical values into the Color Mode Fields or the Hex Value Field. To view only Web-Safe Colors (a range of 216 fixed Colors that the major browsers use), check the Web-Safe Colors checkbox. Your chosen Color appears in the Color Swatch. Once you have chosen a Color, {Click} OK. You can begin to paint with your selected Brush. Try a variety of Brushes, Colors, and Brush Shapes. Append other Brush Sets to the Brush Preset Picker and try them. Adjust both Opacity and Flow Rate and note how these settings affect the Brush Stroke. Use the History Palette to remove your changes or make different Layers to experiment with. The Color Palette To create a Color using the Color Palette, select the Foreground Color Swatch or Background Color Swatch and use the Color Sliders, the Color Fields (input values between 0 - 255), or the Color Ramp to select your desired Color. The Color Palette (con't) Select both RGB Sliders and RGB Spectrum (for the Color Ramp) when working with images for the web. If you are limiting yourself to the Web-Safe Color palette, select Web Color Sliders and Make Ramp Web Safe. Web-Safe Color is covered in a later chapter. The Swatches Palette The Swatches Palette defaults to a broad spectrum of available Colors. To choose a Color {Click} on a Color Swatch. The Color you select replaces the current Foreground Color. Creating a Custom Swatch To create your own swatch(es), modify the Foreground Color in the Color Picker or Color Palette and then select the Swatches Palette and {Click} the Create New

Swatch of Foreground Color button. Name your custom swatch accordingly. Viewing Colors by Name To view Colors by name, select Small List from the Options Menu. You can change the scale of the Swatches Palette to view a list of two (2) columns. Saving, Adding, and Restoring Swatches To save swatches you’ve created select Save Swatches from the Options Menu. You can also add swatches by selecting from a variety of included swatch sets listed at the bottom of the Options Menu as well as selecting Load Swatches to load in a custom swatch set. You will have the option to append or replace the existing swatch set. To restore the Swatches Palette back to its default Colors, select Reset Swatches from the Options Menu. The Brushes Palette To customize and modify Brushes to a great degree, you can use the Brushes Palette which, by default, is docked in the Palette Well beside the File Browser. Selecting a Brush Preset To select a Brush Preset, {Click} on the Brush Presets Name in the Brush Modifiers column. The Modifier Options column displays the default Brush Presets that we looked at in the Brush Preset Picker. Use the Master Diameter Slider to set the size of the Brush. Creating a Custom Brush To create a custom Brush, first select a Brush Preset as a starting point and {Click} the Create New Brush button. Give the Brush an appropriate name. Next, you can select from any of the remaining options in the Brush Modifiers column. You usually start by modifying the Brush Tip Shape and then move on to select one of more options to create your custom Brush. Selecting the checkbox beside each Modifier makes it active. To view and modify the options for each Modifier, {Click} on the Modifier Name itself. Modifier Options will vary. Experiment with the options presented to you until you are happy with your custom Brush. Note that not all of the Brush Modifiers have options. Try to create your own custom Brush and experiment with it. Remember to select different Colors, try different Brush Diameters, and change Opacity and Flow Rate. Pencil Tool Options Select from Brush Preset Picker, Painting Mode, Opacity, and Auto Erase. Brush Preset Picker {Click} the Brush Preset Picker to set Brush Diameter and Brush Shape. Use the Master Diameter Slider or input box to set the diameter you desire (see “Brush Preset Picker”.) Painting Mode Painting Mode affects the way the color of the Brush mixes with existing image data in the same manner as the Blend Mode for Layers (see “Blend Modes”.) Opacity Opacity affects the level of transparency of the Stroke (0% being fully transparent, 100% being fully opaque.) Auto Erase Check Auto Erase to make the Pencil Tool paint the currently designated Background Color over the currently designated Foreground Color. Experiment with Pencil Tool with blank.psd. The Clone Stamp Tool The Clone Stamp Tool operates like the Brush Tool except that rather than selecting a color to paint with, you select an area of the image to duplicate or clone by {Alt/Option-Clicking} the area you wish to duplicate. As you paint with the Clone Stamp Tool a cross-hair passes over the area you've selected for your reference. The diameter of the brush you select in the Brushes Palette determines

the size or radius of the cloning area. Usually, you’ll have to reestablish a reference point or area repeatedly and paint over other areas of the image in small parts. Use the Clone Stamp Tool to modify photographs. For example, we wanted to remove the people from the following image: The Clone Stamp Tool (con't) Using the Clone Stamp Tool, we selected reference points close to the people in the image and painted over the people by duplicating the surface of the pillars nearby. The result: The people have been removed. Clone Stamp Tool Options Most of Options for the Clone Stamp Tool are identical to the Brush Tool (see “The Brush Tool”.) However, the Aligned and Use All Layers Options differ. Aligned Check Aligned to force the cross-hair established at the reference point to follow the Clone Stamp Tool regardless of how many times you {Click} and {Re-Click}. When Aligned is unchecked the cross-hair returns to original reference point after you have released the mouse button and {Click} again to resume. Use All Layers Check Use All Layers to duplicate visible image data in all Layers. Uncheck to duplicate the image data from currently active Layer exclusively. The Clone Stamp Tool is not limited to duplicating image data into the same image or a single Layer. You can establish reference points in one Image Window and duplicate the contents into another Image Window or another Layer. Open the landscape.psd image and practice using the Clone Stamp Tool. landscape.psd Try to add and remove trees and rocks. Duplicate elements from landscape.psd into a new Layer of blank.psd. Pattern Stamp Tool The Pattern Stamp Tool paints or repeats a pattern. You use the Rectangular Marquee Tool to define patterns in Photoshop. Defining a Pattern Using the landscape.psd image, create a rectangular Selection around one of the trees. Select Edit/Define Pattern. Name the Pattern accordingly. There are no limits on the size or content of the pattern, but it must be rectangular. Photoshop stores the pattern you've just defined for use by any of the Tools that use patterns, such as the Pattern Stamp Tool in Pattern drop-down menu in the Options Bar. {Click} on the Pattern drop-down to access your defined pattern in addition to a range of preset patterns. The Options menu for the Pattern drop-down will allow you to add to, delete, rename, and reset the Patterns available. Pattern Stamp Tool (con't) Many of the settings in the Options Bar for the Pattern Stamp Tool are similar to the Options for the Brush Tool and the Clone Stamp Tool. You’ll find many of the Tools share many of the same Options. The Pattern of the tree we created is added and made available in the Pattern drop-down menu. Painting with the Pattern Stamp Tool Paint with the Pattern Stamp Tool as you do with the Brush Tool. You'll notice that the Pattern you just defined is painted and repeated (also called tiled.) Check the Impressionist checkbox to give the Pattern a painterly impressionist affect. A pattern is painted in a new Layer in blank.psd.

The Healing Brush Tool The Healing Brush Tool is very similar to the Clone Stamp Tool. Just as with the Clone Stamp Tool, you select a reference point that you wish to duplicate within another area of the image and build a Brush Shape to replicate the reference point. The Healing Brush Tool differs from the Clone Stamp Tool in its purpose. You use the Healing Brush Tool to correct imperfections within an image. You may have to scan flawed source material, such as an old photograph, or modify the complexion of a person in a photograph. For example, examine this image: The print has been cracked and stained. By using the Healing Brush Tool, we can restore this image or correct the imperfections. The Healing Brush Tool (con't) Open restoration.psd. restoration.psd Select the Healing Brush Tool and examine the Options in the Options Bar. Brush Picker You can build the Brush you’ll use to paint with using the Brush Picker. You can modify Diameter, Hardness, Spacing, Angle, Roundness, and Size (for work pressure sensitive tablets.) Experiment with each option to learn how they affect your Brush. Similar options are available when creating a custom Brush using the Brushes Palette (see “Creating a Custom Brush” on page 112.) Effect Mode Select from a variety of Effect Modes. These function like the Blend Mode setting for Layers or the Painting Mode setting for the Brush Tool (see “Blend Modes” on page 86.) Source To specify what the source of the Healing Brush Tool to will be select from either Sampled or Pattern. If you select Sampled, the source is the area at which you [ALT-{Click}] upon, just as with the Clone Stamp Tool. If you select Pattern, choose a Pattern from the drop-down menu. Aligned Check Aligned to force the cross-hair established at the reference point to follow the Clone Stamp Tool regardless of how many times you {Click} and {Re-Click}. When Aligned is unchecked the cross-hair returns to original reference point after you have released the mouse button and {Click} again to resume. The Healing Brush Tool (con't) Thus far the options and use of the Healing Brush Tool do not differ much from the Clone Stamp Tool. However, recall that the Clone Stamp Tool merely duplicates the area you designate as the reference point so that if you reference a red area of an image and paint with the Clone Stamp Tool somewhere else in the image the painting will also be red. With the Healing Brush Tool this is not the case. The lighting, texture, and shading of the referenced area automatically matches (as best it can) the lighting, texture, and shading of the healed area. For example, rather than selecting Sampled for our reference point, lets select Pattern. Select the Bubbles preset Pattern. The Bubbles Pattern is blue in color. With the Healing Brush Tool, paint on the restoration.psd image along the right side. As you paint, the Pattern appears to be painting, in its original Color over the brown Color of the image. However, when you {Release} the mouse button, Photoshop matches the lighting, texture, and shading of the painted area with the Pattern. The Healing Brush Tool (con't) Switch to the Pattern Stamp Tool and select the same Pattern. Paint beside the painting you just completed. Note the difference. With the Pattern Stamp Tool (and the Clone Stamp Tool) the referenced area is replicated (though the options you choose (Opacity, Flow Rate, Airbrush, Brush Shape, etc.) can change how it’s

replicated and applied.) With the Healing Brush Tool, the referenced area is replicated but the lighting, texture, and shading of the painted area is preserved. The Healing Brush Tool (con't) Next let’s try to use the Healing Brush Tool with Sampled selected from the Source Option. First, restore restoration.psd back to its original state using the History Palette. Create a Brush with the following settings: • Diameter: 10 px • Hardness: 70 % • Spacing: 1% • Angle: O degrees • Roundness: 100 % Like the Clone Stamp Tool, you may have to select a reference point repeatedly and modify the size and shape of your Brush for the best results. Begin to reference clean areas of the background and paint over damaged areas. It will take some time, and you may need to zoom into the image. For example, we can start by removing the stains to the left of the woman’s shoulder. Sample (establish a reference point) the areas close to the stains and then paint over the stains. The Healing Brush Tool (con't) As you paint, you may notice that the area appears to be darker or lighter. Once you {Release} the mouse button, Photoshop will adjust the replicated area to match the painted areas lighting, texture, and shading as best it can. Usually, it does a spectacular job. For the spots on the dress, you may have to reduce the Brush Diameter. Using the Healing Brush Tool, the stains/spots are removed from this area. The Healing Brush Tool (con't) Continue to use the Healing Brush Tool to remove the stains, spots, scratches, and so forth from the image. Often you have to use a combination of the Healing Brush Tool and the Clone Stamp Tool. Why the Clone Stamp Tool? Sometimes you may not want to preserve the lighting, texture, and shading of a particular area. Try making some corrections along the edge of the image (where the brown background reaches the white frame of the image) to see why you may need to use the Clone Stamp Tool as well. Don’t worry about correcting the white frame area of image, we’ll not be using that area of the image for the web site. When you’ve done, your image should look something like this: Using a combination of the Healing Brush Tool and the Clone Stamp Tool the stains, spots, and scratches are removed. The image is almost restored. The Healing Brush Tool (con't) Save your image if you like. Do not save over restoration.psd as you will need this image for the next Tool we cover, the Patch Tool. If you like, open restorationStepA.psd to view the changes we’ve made thus far. Compare it to your own to see if you missed some spots or if we’ve missed some spots. The Patch Tool The Patch Tool is similar to the Healing Brush Tool but the method one uses to patch or correct particular areas of an image differs. To use the Patch Tool: 1. Select either Source or Destination from the Options Bar. 2.

If you’ve selected Source, use the Patch Tool to draw a Selection around the

area you wish to correct, such as one of the stains in the restoration.psd image. The Patch Tool (con't) 3. Next, with the Patch Tool still selected, place it within the Selection you’ve just made and drag the Selection to the area you wish to duplicate. {Release} the mouse button. The area you dragged the Selection to is replicated over the area your originally selected, with lighting, texture, and shading preserved. 4. The selection returns to the original area. Deselect. The Patch Tool (con't) Alternately, you could have selected Destination from the Options Bar. In this case, you select the area you wish to replicate first and then drag the replicated Selection over the area you wish to patch. Note You can use the standard Selection Tools first, to make a Selection for your patch and then use the Patch Tool. The Patch Tool will inherit the Selection you’ve already made and use it as the basis with which to make the patch. Using a Pattern with the Patch Tool To use a Pattern with the Patch Tool, make a Selection first. The Pattern Option is now available. Select your Pattern and press the Pattern button to apply it. For example, we’ve used the Magnetic Lasso Tool to create a Selection around the woman. Then we inversed the Selection (Select/Inverse from the Menu), selected the Patch Tool. selected the Bubbles Pattern and applied it to our selected patch area by pressing the Pattern button. The result: Open restoration.psd again (or use the History Palette to restore it to its original state.) Experiment with the Patch Tool. To view the image above, open bubbles.psd. History Brush Tool The History Brush Tool operates like the Brush Tool except that rather than selecting a Color to paint with, you select a History State to restore as you paint. To illustrate how the History Brush Tool works we're going to apply two filters to an image (filters are covered later) and then use the History Brush Tool to restore particular areas of the image to previous States. Open toys.psd. toys.psd toys.psd: A collection of wooden dolls History Brush Tool (con't) From the Menu, select Filter/Artistic/Watercolor. Use the following settings - Brush Detail: 14 / Shadow Intensity: 0 / Texture: 3. {Click} OK. History Brush Tool (con't) Select Filter/Brush Strokes/Crosshatch. Use the following settings - Stroke Length: 25 / Sharpness: 20 / Strength: 1. {Click} OK. The filter is applied, changing the image to a distorted sketch. History Brush Tool (con't) Examine the History Palette. You'll notice that both the Watercolor and Crosshatch filters are listed as History States. To remove the Crosshatch effect on the one of the toys select the History Brush Tool, select a Brush Diameter, and select 100% Opacity. {Click} the Toggle Box in the Watercolor State. A History Brush icon

appears. This indicates that you will painting with the contents of this particular History State. As you paint over the toy of your choice that toy will appear as it did in the Watercolor State, before you applied the Crosshatch Filter. The History Brush Icon beside the Watercolor History State indicates that as you paint, you’ll be restoring the appearance of the image from that particular State. The Art History Brush Tool The Art History Brush Tool operates like the History Brush Tool with additional brush or paint effects. Like the History Brush, the Art History Brush samples data from a History State of your choice. Art History Brush Options You can produce various natural media effects by changing the Painting Mode, Opacity, Painting Style, Painting Area, and Painting Tolerance settings in the Options Bar. The Art History Brush Tool takes some getting used to and practice. Experiment with different settings to learn how they affect your image. The Art History Brush Tool has some unique options. Art History Brush Options (con't) Painting Style Select from a number of different options to define the shape of your brush strokes. Area Area determines how much of the image is covered by your paint strokes and how frequently the stroke effects are applied. Larger numbers increase both the area and the frequency. Tolerance Tolerance determines the limitations of your strokes based on color variations. Increasing the value limits your strokes to area of similar color. Decreasing the value broadens the range of color your strokes affect. The Eraser Tool The Eraser Tool works similarly to Photoshop's other painting Tools except rather than add color you remove image data. Like the other painting Tools, you select the Brush Diameter and other settings from the Options Bar. In addition, you can select Erase to History to make the Eraser Tool operate like the History Brush Tool. Eraser Tool Options Options for the Eraser Tool are similar to the Options for the Brush Tool (see “The Brush Tool”) Additional Options include Erasing Mode and Erase to History. Eraser Tool Options (con't) Erasing Mode Select from Brush, Pencil, or Block to determine how the Eraser Tool behaves. Block produces a square block. Erase to History Toggle a History State or Snapshot in the History Palette and check the Erase to History checkbox if you want to erase to an earlier incarnation of your current image. This functions in the same manner as the History Brush Tool (see “The History Brush Tool”) Open gate.psd. gate.psd This is very similar to the image we worked on previously. Recall that we removed the Priest in the green robe by using a Layer Mask (see “Layer Masks: NonDestructive Editing”.) Using a Layer Mask is a non-destructive approach, using the Eraser Tool to accomplish the same goal is a destructive method. The Layer Mask hid or masked the Priest from view whereas erasing the Priest with the Eraser Tool

will actually remove the image data. Expand the Priest Set Layer Set and select the priests Layer. Use the Eraser Tool (in combination with the Zoom Tool and any other Tools you’ve learned to use, such as the Selection Tools) to remove the Priest in the green robe from the Layer. Once image data is erased, and you have saved the edited image, you will not be able to recover it. This is a perfectly valid method and one you will employ frequently in a number of different situations. Sometimes you will want to use a Layer Mask for maximum flexibility. Keep the differences in mind. The Background Eraser Tool The Background Eraser Tool intelligently erases areas of an image to transparency, most particularly areas of continuous or similar Color. By {Clicking} and dragging close to an edge the Background Eraser Tool will erase the background but not the edge. You can use the Background Eraser Tool to remove the background from around an object, such as a person, rather than making a Selection around the person. Background Eraser Tool Options Options include Brush Preset Picker, Limits (Discontiguous, Contiguous, Find Edges), Tolerance, Protect Foreground Color, and Sampling (Continuous, Once, Background Swatch). Background Eraser Tool Options (con't) Brush Preset Picker You can build the Brush you’ll use to paint with using the Brush Picker. You can modify Diameter, Hardness, Spacing, Angle, Roundness, and Size (for work pressure sensitive tablets.) Experiment with each option to learn how they affect your Brush. Similar options are available when creating a custom Brush using the Brushes Palette (see “Creating a Custom Brush”.) Limits Select Discontiguous to erase the sampled Color wherever it occurs beneath the Brush. The strictness of this setting is affected by the Tolerance value you set. Select Contiguous to erase the sampled Color and surrounding Color in a similar range. The strictness of this setting is affected by the Tolerance value you set. Contiguous is the default value. Select Find Edges to erase areas of the same Color as well as maintaining a sharper definition for the edge. These settings are similar to some of the Selection settings we examined earlier. To set a base sample Color, [ALT-{Click}] over the Color you wish to sample with the Background Eraser Tool. If you do not set a sampled Color yourself, the first Color you {Click} on while using the Background Eraser Tool becomes the sampled Color. The way the sampled Color behaves is affected by what you select for the Sampling Option. Background Eraser Tool Options (con't) Tolerance Tolerance affects the range of Colors erased based on the sampled Color. A low value restricts erasure to Colors similar to the sampled Color. Higher values increase the range of Colors that can be erased. Protect Foreground Color Check Protect Foreground Color to prevent the eraser from erasing colors that match the current Foreground Color. This option is unchecked by default. Sampling Select Continuous to sample as you drag. Contiguous is the default value. Select Once to sample and erase areas containing the initial sample color. Select Background Swatch to erase areas containing the current Background Color. The strictness of this setting is affected by the Tolerance value you set. Use the applicable settings in the Options Bar as required. Usually the default values are fine, though you’ll need to set Tolerance as needed. The Background Eraser Tool Open eraseBackground.psd.

eraseBackground.psd We’ve cropped our restoration.psd image to isolate the face of the woman. We need to remove the background. Let’s do so by using the Background Eraser Tool. Select the following Options: 1. For the Brush: Diameter = 20px; Hardness = 80%; Spacing = 1%; Angle = 0 degree; Roundness = 100% 2. Limits: Contiguous 3. Tolerance: 20% 4. Protect Foreground Color: Unchecked 5. Sampling: Continuous The Background Eraser Tool Start by brushing just outside the hair. Don’t worry if your Brush Shape overlaps the hair a little because the Background Eraser Tool should leave it alone. You may want to increase magnification for accuracy. You may also want to brush or paint small bits of the background at a time. You should see the hair remain in place and the background color turn to transparency. The Background Eraser Tool removes the background image data around the hair with ease. The Background Eraser Tool Continue to remove the background immediately around the woman using the Background Eraser Tool. You will have to reduce the Brush Diameter to something like 5px for the neck area (and even smaller for the earnings.) Around the neck area you may also need to reduce the Tolerance (if you don’t have a steady hand). Note how the background and the flesh color at the neck are very similar, which could confuse the Background Eraser Tool. Don’t bother using the Background Eraser Tool to remove the remainder of the background as you can remove it quickly by using the Magic Wand Tool to select the remaining image data and pressing the [DELETE] key to remove it. Don’t worry if you see a little bit of the background here and there in patches throughout the image, we’ll look at a method of finding and removing them later in the chapter. Save your image for use later (or you can use the image we’ve saved called backgroundErased.psd. Your image should look this: The Magic Eraser Tool The Magic Eraser Tool erases entire areas of color with a single {Click} rather than {Clicking}, holding, and dragging, which we have to do if we’re using the Eraser Tool or the Background Eraser Tool. It operates in a similar manner to the Magic Wand Tool, except that rather than making Selections, it erases pixels (see “Magic Wand Tool”.) Magic Eraser Tool Options You can set Tolerance, Anti-aliased, Contiguous, Use All Layers, and Opacity as required. Magic Eraser Tool Options (con't) Tolerance Tolerance affects the range of Colors removed based upon the Color you {Click} on in the image. A low value restricts erasure to a small range of similar Colors. Higher values increase the range of Colors. Anti-Aliased Check Anti-aliased to ensure that the edges of the areas that remain after erasure are smooth. Contiguous Check Contiguous to erase colors that are uninterrupted by colors outside the range established by the Tolerance level. Uncheck Tolerance to erase all the colors within the entire image established by the Tolerance level (see

“Contiguous”.) Use All Layers When checked, Use All Layers permits the Magic Eraser Tool to erase a range of colors within all the Layers of the image. Opacity If Opacity is set to anything below 100%, the Magic Eraser Tool will not erase the color but merely change the Opacity of the color. Magic Eraser Tool Open eraseBackground.psd. eraseBackground.psd Remove the background from the image again. Experiment with the Magic Eraser Tool. Note how some of the woman’s face may be erased when you {Click} in the area close to her left shoulder. Change the Tolerance level or, as is common when working with Photoshop, use a combination of Tools to achiever your goal. The Gradient Tool The Gradient Tool is used to create gradient colors and patterns. Gradients are gradual shifts from at least one color to another or one color to transparency. The effect is similar to the way the sky shifts from dark blue to a lighter blue as you look toward the horizon. Gradients can also consist of multiple colors, much like a rainbow. Gradient Tool Options Options include Gradient Picker/Editor, Gradient Type, Blend Mode, Opacity, Reverse, Dither, and Transparency. A preview of the gradient appears in the Gradient Picker bar. Gradient Picker/Editor To select a preset Gradient, {Click} on the drop down arrow. All available Gradients are displayed. Select the Gradient you desire by {Clicking} on the Gradient Swatch. A description of the Gradient appears when you hover your mouse pointer over a Gradient Swatch. Note that the first two (2) Gradient Swatches (top row) are Foreground to Background and Foreground to Transparent. The Color of each will change according to your currently selected Foreground and Background Colors. Open blank.psd. blank.psd Select various Gradients and try them out to see how they appear. Try to vary the length and angle of each Gradient. Creating Custom Gradients To create your own Gradient, {Click} on the Gradient Picker/Editor itself. The Gradient Editor appears. To create a new Gradient, select an existing Gradient Preset and modify it. Creating Custom Gradients (con't) To change a color select one of the Color Stops situated at the bottom of the Gradient Bar and {Double-Click} on it. Select a color from the Color Picker. Note To make a Color Stop dynamic, meaning it will pick up whatever your current Foreground or Background Color is, select the Color Stop and then select either Foreground or Background from the Color field in the Stop Settings Area. To add additional Color Stops to the Gradient {Click} on an empty spot beneath the Gradient Bar. To modify the location of Gradient colors drag the Color Stops and Midpoint Markers back and forth as you desire or input specific values into the fields in the Stop Settings Area. To delete a color simply select it's Color Stop and hit the [DEL] key or drag up or down on it and it will disappear.

To add Transparency {Click} and adjust the Stops at the top of the Gradient Bar (which displays Alpha information rather than colors) and adjust the Opacity Slider at the bottom of the dialog box. {Clicking} and dragging the Stops and Midpoint Markers effects the placement of Transparency. Creating Custom Gradients (con't) Adjust the Smoothness Slider to increase or decrease the smoothness of your Gradient. You can also choose a Gradient Type from the Gradient Type drop-down Menu. Solid is the default while Noise creates a Gradient that randomly mixes the color across a selected range. Adjust the various Sliders in the dialog box to find a noisy Gradient that suits your needs. If you wish you can use percentage figures to precisely position the Stops and the Midpoint Markers by adjusting the location fields in the Stop Settings Area. When you have finished creating your custom Gradient, give in an appropriate name and {Click} the New button. Your custom Gradient is added to the Gradient Presets. Note If you wish to use it again you should save the new set of Gradient Presets. {Click} Save. You will save a.grd file. Give it an appropriate name. By default, it is saved in the location you installed Photoshop in under Presets/Gradients. To load a Gradient set, {Click} Load in the Gradient Editor dialog box. {Click} OK to finish. Try out your custom Gradient. Gradient Type Select from Linear, Radial, Angle, Reflected, and Diamond. Linear Gradient Linear (straight line) transition from one point to another. Can contain multiple colors and transparency levels. Can be placed at various angles. Radial Gradient A circular transition from one point to another from one point to another. Can contain multiple colors and transparency levels. Angle Gradient A counter-clockwise transition from one point to another. Can contain multiple colors and transparency levels. Can be placed at various angles. Reflected Gradient Linear gradients are created from the starting point. Each gradient moves away from the starting point. Diamond Gradient A diamond shaped transition from one point to another. Can contain multiple colors and transparency levels. Can be placed at various angles. Blend Mode Set the Blend Mode for the Gradient. This is similar to the same setting for Layers or the Painting Mode setting for the Brush Tool (see “Blend Modes”.) Opacity Set the overall Opacity of the Gradient. Reverse Check Reverse to reverse the Gradient. Dither Check Dither to make the transition from one color to the next as smooth as possible. Transparency Check Transparency to enable any transparency settings in the Gradient patterns. Uncheck to disable Transparency. Experiment with the Gradient Tool. Load other Gradient Presets and see how they function. Try using a black and white Gradient in a Layer Mask.

The Paint Bucket Tool The Paint Bucket Tool replaces a color or range of colors with either the current Foreground Color or a Pattern. It also fills transparent areas and Selections. Simply select a Color and {Click} in the area you wish to fill or replace. You may have to set some options to get the desired effect. Paint Bucket Tool Options Options for the Paint Bucket Tool include Fill Source, Pattern, Fill Mode, Opacity, Tolerance, Anti-aliased, Contiguous, and All Layers. Paint Bucket Tool Options (con't) Fill Source Select either Foreground to fill with the current Foreground Color or Pattern to fill with a Pattern. Pattern If you have selected Pattern from Fill Source you can select your fill Pattern here. Fill Mode This is identical to Blend Mode when using Layers (see “Blend Mode”.) Opacity Set the Opacity of the fill. Paint Bucket Tool Options (con't) Tolerance When you{Click} on a pixel that is any particular color (such as red for example) and you are replacing that color with the current Foreground Color that might be yellow for example, any pixels in the surrounding area that are also red or a similar shade of the red pixel you have {Clicked} on will be filled (or not) depending on the Tolerance level you set. Higher numbers will fill a greater range of colors while lower numbers will limit the range. This is similar to the Tolerance setting for the Magic Wand Tool (see “Tolerance”.) Anti-aliased Check Anti-aliased to make the edge of the fill smooth (see “Anti-aliased”.) Contiguous Check to fill pixels in the immediate color range (affected by your Tolerance level) of the pixel you have {Clicked} on. Uncheck to fill all the colors in the image within the color range you’ve selected (see “Contiguous”.) All Layers Check All Layers to fill colors across all Layers. Paint Bucket Tool Open backgroundErased.psd. backgroundErased.psd Recall earlier in the chapter we used the Background Eraser Tool in combination with the Eraser Tool to remove the background around the woman (see “The Background Eraser Tool”.) When we remove a background from an image with only one (1) Layer, the background is erased to Transparency. Sometimes its difficult to see if you’ve removed all of the background. We’re going to use the Paint Bucket Tool to add a new background color and make sure we’ve removed all of the original background at the same time. Execute the following steps: 1. Create a new Layer. Recall that by default, when you create a new Layer, its created above the currently selected Layer. Drag the new Layer beneath the current Layer (the one with the woman on it) and rename it background. 2. Name the Layer with the woman on it customer. 3. Choose the following Foreground Color with the Color Picker: Red - 222; Green - 0; Blue - 0. 4. Select the Paint Bucket Tool. Paint Bucket Tool 5. Select the background Layer.

6. Fill the background Layer with the Foreground Color. 7. Take a look at the image. You should notice some artifacts or left over elements of the original background we removed earlier. Furthermore, there are areas around the hair that need to be erased as well. 8. Use the Eraser Tool and the Background Eraser Tool to remove the last bits of the original background. You’ll probably have to switch between one and the other Tool frequently, as well as zooming in and out of the image, and using very soft-edged brushes as you erase, particularly around the hair. It will take some time. 9. Save the image if you like. You can view our version by opening customer.psd. customer.psd The Blur Tool Use the Blur Tool to blur areas of the image by painting over them. The Blur Tool behaves very much like the Brush Tool, except rather than paint color you paint blurriness (see “The Brush Tool”.) Blur Tool Options Blur Tool Options include Brush Preset Picker, Effect Mode, Strength, and Use All Layers. Brush Preset Picker Select a Brush with which to blur with (see “Brush Preset Picker”.) Effect Mode Select from a number of different options which will affect the color over which you apply the blur strokes. This is similar to the Blend Mode used for Layers (see “Blend Mode”.) Strength Set the Strength of your stroke. A higher value will increase the degree of blurriness. Use All Layers Check Use All Layers to blur the image data you paint over throughout all Layers. Try using the Blur Tool on an element of the toys image to see the effects. The Sharpen Tool Use the Sharpen Tool to sharpen soft edges in an image. The Sharpen Tool functions similarly to the Blur Tool except of course it sharpens rather than blurs. The Sharpen Tool increases the contrast in colors over the area you stroke. If you’re not careful, color banding or a halo can occur. You’ll have to experiment with it and try out different Effect Modes. The Options for the Sharpen Tool are identical to those of the Blur Tool (see “The Blur Tool”.) The Blur Tool and the Sharpen Tool are referred to as the Focus Tools. Try using the Sharpen Tool on any of the images in this chapter to see how it works. The Smudge Tool Use the Smudge Tool to create a finger painting effect within your image. The Smudge Tool functions like many of the Brush related Tools in that you select a Brush, some options, and paint over areas of an image. Smudge Tool Options The Smudge Tool Options are identical to the Blur Tool Options with one addition(see “Blur Tool Options”.) In addition, the Smudge Tool has a Finger Painting Option. Finger Painting Check Finger Painting to mix the current Foreground Color into the smudge as you paint. The Dodge Tool

Use the Dodge Tool to lighten areas of the image by painting over them. The Dodge Tool works similarly to the other Brush Tools. Grouped together with the Burn Tool, these Tools are referred to as the Toning Tools. Dodge Tool Options Select a Brush Shape from the Brush Preset Picker (see “Brush Preset Picker”.) Select the Range, Exposure, and if you like, you can enable the Airbrush capabilities (see “Enable Airbrush”.) Range Select from Shadows, Midtones, or Highlights to isolate a particular range with the tonal range. Shadows isolates the darkest tones in the image. Midtones isolates pixel data that ranges in tone between the darkest (black) and the brightest (white). Highlights isolates bright tones. We’ll be discussing ranges of tone later in the chapter. Its something you’ll have to try out and view the effects for yourself. Exposure The value you set for Exposure affects the strength of the Dodge Tool effect. The Burn Tool Use the Burn Tool to darken areas of the image by painting over them. This is the second of the Toning Tools. The options for the Burn Tool are identical to those of the Dodge Tool (see “The Dodge Tool”.) Open customer.psd. customer.psd Experiment with the Dodge Tool and Burn Tools, particularly on the hair. The Sponge Tool Use the Sponge Tool to saturate or desaturate the colors you paint over. When a color is saturated it brightens considerably, as if soaked in water or soaked with paint. When a color is desaturated it loses its brightness or luminosity. When working with grayscale images, the contrast is increased or decreased accordingly. Sponge Tool Options Select from Brush Preset Picker, Sponge Mode, Flow, and Airbrush. With the exception of Sponge Mode, these options are identical to the options for the Brush Tool (see “The Brush Tool”.) Sponge Mode Select either Saturate or Desaturate as required. Open customer.psd. The Horizontal Type Tool Use the Horizontal Type Tool (or the other Type related Tools) to create text in Photoshop. For the Internet you'll be using type to label buttons and as elements of typographic design. Select the Horizontal Text Tool and {Click} in the Image Window. Begin to input your text. To make a paragraph, {Click}, hold, and drag a Paragraph Box in the Image Window then input your text into the Paragraph Box. Photoshop creates a new Text Layer (indicated in the Layers Palette by a capital "T" in the Layer Thumbnail. The text you input into a Type Layer appears as the Layer Name. Typographic Terminology Before you begin to create and manipulate type in Photoshop, you should know some of the basic typographic terminology that some of the options in Photoshop use. Examine the following example: Typeface A typeface is a full set of characters (uppercase, lowercase, numerals, special characters, etc.) designed in a specific Style. For example, the same word, presented using different typefaces, can look quite different:

Typefaces are also often referred to as Fonts. The look of your text is very much a key in the design of your images. Kerning Kerning is the space between a particular pair of characters. Each typeface may have particular Kerning values so that some characters are closer to each other than others, depending on their shape. For example, the capital letters A and V, when placed together, have complimentary shapes and are often placed closer together than A and N. Tracking Tracking is the space between characters in a line of text. The space between characters, regardless of the particular characters, is uniform when using Tracking. It can easily be confused with Kerning. Remember that Kerning is a very specific measurement of spacing between particular pairs of characters, whereas Tracking is the measurement of spacing between all characters. Baseline The Baseline in text is an imaginary line that the characters effectively sit upon. Lower case text, such as the "p", has a descender, which descends below the Baseline. Horizontal Type Tool Options In Photoshop you set and adjust Font Family, Font Style, Font Size, Justification, and so forth by selecting options from either the Options Bar or the Character Palette. Let’s examine the Horizontal Type Tool Options. Font Family Select the Font Family (also referred to as Typeface or Font) you wish to use for your text. Photoshop will list all the currently active fonts on your system. Font Style Select the Font Style you wish to use. Common Font Styles include Bold, Italic, Underline, and Regular. Available Font Styles differ depending on the Font Family you've selected. However, the Character Palette has options for apply Font Styles that are normally unavailable to a particular Font Family. Font Size Select or input Font Size to set the size of your text. The Font Size is measured in points, which is the traditional measurement for print and within common computer applications such as word processors. When we get to ImageReady, we can use Font Sizes in pixels, which may be more useful, depending on how you like to work, for web development. If you highlight your text by {Clicking} and dragging over it, any changes you make to the Font Size changes the size of the font. Alternately you can select the Type Layer itself in the Layers Palette, select the Horizontal Text Tool and then make changes to the text without highlighting but modifying the options. Anti-Alias You can select various levels of Anti-aliased text. Choices consist of None, Sharp, Crisp, Strong, and Smooth. You'll find that Sharp and Crisp are particularly useful for small text. Alignment Select from Left Align, Center, and Right Align to set the Alignment of your text. The Alignment of your text, even if it is a single word or line of text, can affect how multiple Type Layers are aligned. You should experiment with Alignment to see how it operates in Photoshop. Font Color Select a Font Color by {Clicking} on the Font Color Swatch. The Color Picker appears (see “The Color Picker”.) Warp Text Warp Text allows the user to customize the appearance of text and still maintain the ability to edit it at all times. With a Type Layer selected or text itself selected, {Click} on the Warp Text button. The Warp Text dialog box appears.

Select a Warp Style from the Style drop-down menu. Warp Text (con't) The Warp Style effectively places an shape or envelope around your type. For example, in this image, the text "warped text" appears without a Warp Style and is repeated with the Fish Warp Style applied to it. Once you’ve applied a Warp Style, you can modify it by changing the options in the Text Warp dialog box. Modify orientation along the Horizontal or Vertical axis and change Bend, Horizontal Distortion, and Vertical Distortion values. You’ll have to experiment with each Warp Style to learn how each affects your type. Note You can still modify your text, changing the text itself, as well as Font Family, Font Size, and so forth. To return the Text Warp settings after you’ve applied them, simply select the appropriate Type Layer and {Click} the Text Warp button again. You can also apply Layer Styles to Type Layers as well. Toggle Character Palette {Clicking} the Toggle Character Palette button launches the Character Palette, which is grouped with the Paragraph Palette. Each of these Palettes gives you identical settings to those found in the Options Bar as well as some additional options. Kerning To modify the Kerning between two specific characters (letters), place your cursor between the two characters, do not highlight any characters. The Kerning field will become active. Select Metrics to set automatic Kerning. You can input your own value or select one of the presets. Negative values move characters closer together. Positive values move characters further apart. Leading Leading is the amount of space between lines of text. If you’ve written papers or produced any sort of documents you may set the spacing to double-spaced then you’ll understand Leading. If you have input text with multiple lines you can set the Leading as you wish. Tracking To modify the Tracking, highlight the text you wish to modify. Select Auto to set automatic Tracking. You can input your own value or select one of the presets. Negative values move characters closer together. Positive values move characters further apart. The Paragraph Palette The Paragraph Palette features enhanced options to control text you’ve input that is more than one line (such as a paragraph or caption.) Alignment Select from Left Align, Center, and Right Align to set the Alignment of your text(see “Alignment”.) Justification Select from Justify Last Left, Justify Last Center, Justify Last Right, and Justify All. Indent Left Margin You can set where the Left Margin is within the Paragraph Box by inputting a value in this field. Indent Right Margin You can set where the Right Margin is within the Paragraph Box by inputting a value in this field. Indent First Line If you want the first line of your paragraph to be indented, set the value here.

Add Space Before Paragraph If you have multiple paragraphs, you may want to area where the paragraph begins. To do so, input Add Space After Paragraph If you have multiple paragraphs, you may want to area where the paragraph begins. To do so, input Hyphenate Check Hyphenate to enable hyphenation. The Vertical Type Tool

add some space just above the a value in this field. add some space just below the a value in this field.

Use the Vertical Type Tool to input text in a vertical orientation. The Notes Tool As you produce images, you may be working in a collaborative environment or you may be working alone. In either case, it can be very helpful to leave notes attached directly to an image so that whenever you edit that image, you can familiarize yourself with any tasks or issues you may have. To create a note, select the Notes Tool and {Click} anywhere within the Image Window. A pop-up Notes Box appears. Input your note. The Notes Tool (con't) Close the Note by {Clicking} the Close Box at the top right of the Note. A small Note icon remains in the Image Window. To open it, {Double-Click} it. To remove it, {Right-Click} and select Delete Note. You may find that keeping Notes in this manner is more efficient than keeping paper notes that can be easily misplaced. Note If you find the Note icon distracting, you can hide it from view by select View/Show/Annotations. Make the Note visible again by selecting the same Menu Item. Alternately, you could expand the size of the Image Window and drag the Note to the gray area of the Image Window. Audio Annotation Tool If you have a microphone, you can attach a sound clip rather than a typed Note using the Audio Annotation Tool. The Eyedropper Tool As you edit and produce images, you may want or need to match colors precisely. Of course photographic images can often consist of millions of colors. Picking one color from millions is simple with the Eyedropper Tool. Simply select the Eyedropper Tool and {Click} on the color you wish to sample in the Image Window. The Foreground Color changes to the color you’ve sampled. Hold or press [ALT] to change the Background Color rather than the Foreground Color. Eyedropper Tool Options By default, the Sample Point is set to Point Sample to sample the color of a single pixel. You can also select a wider range. The average value within the range is sampled. Select from 3 by 3 Average or 5 by 5 Average. 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. Using Guides To create Guides you must make the Rulers visible. Select View/Rulers. The units of the Rulers depend on the setting you selected in File/Preferences/Units & Rulers. Because you're developing for the Internet, it's a good idea to select Pixels as the basic unit. Make a Guide by passing the pointer over either the horizontal or vertical Ruler and {Click}, hold, and drag the Guide over the image. {Release} to drop the Guide at the desired point. By default, the Guide is blue in color. Change the color by selecting Edit/Preferences/Guides, Grid and Slices or

{Double-Click} the Guide itself. Make sure Snap to Guides is enabled by selecting View/Snap To/Guides. Using Guides (con't) Open toys.psd. toys.psd Create a Vertical Guide at approximately 50 pixels from the left of the image. Create two (2) Type Layers, one with the text "Japanese Souvenirs" and one with the text "Children's Toys." Select the "Japanese Souvenirs" Type Layer and drag it toward the Guide. Notice how the edge the letter "J" snaps against the Guide. Guides ignore the transparent areas of a Layer and use image data to snap too. Select the "Children's Toys" Type Layer and drag it toward the Guide, just below "Japanese Souvenirs". Now both Type Layers are perfectly aligned. Tip To place a Guide at a precise point, select View/New Guide. The New Guide dialogbox appears. Select Orientation (Horizontal or Vertical) and input the Position you wish the Guide to be placed at in the Position field. Using Guides (con't) To discard a Guide {Click} and drag the Guide off the image into the Ruler. To move a Guide hold the [CTRL] key over the Guide and drag whenever you are using a tool other than the Move Tool. Holding [CTRL] and [ALT] simultaneously switches the orientation of the Guide. You can use multiple Guides. To discard all Guides select View/Clear Guides. Using the Grid The Grid works in a similar fashion to Guides in that the content of your Layers will snap to the lines of the Grid. Select View/Show/Grid to display the Grid. Make sure that Snap to Grid is also enabled under View/Snap To/Grid. A light gray Grid covers the image. To adjust the Grid setting select Edit/Preferences/Guides, Grid and Slices. By now it should be evident to you that Photoshop is a very powerful and complex program that is easy to use. Because there are numerous image editing options and many different ways to achieve imaging goals first time users might find the program overwhelming. We've reviewed many of the fundamental elements you'll need to put into practice when creating images for the Internet. We're going to use many of these techniques in the chapters ahead to create actual images for the web, including static images, buttons, navigation bars, banners, and animated GIFs.

Chapter 7 - Photoshop Fundamentals:Adjusting Images Filters Filters are a set of pre-built 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. Filters (con't) Select Filter/Artistic/Poster Edges. The Filter dialog box appears with the title of the currently selected Filter. A set of Options accompanies most Filters (not all Filters have Options). Options change depending on the nature of the Filter. In this case, the Options we have are Edge Thickness, Edge Intensity, and Posterization. Filters usually have a Preview Window in the dialog box so you can see the effects of the Filter on your image and the effects that changing the Options cause in real-time. Note that you can change the Magnification of the Preview Window but {Clicking} the positive (+) and negative (-) buttons accordingly. You can alsoe move the image around with the Preview Window. In this case, make sure you have the following settings: • Edge Thickness: 2 • Edge Intensity: 1 • Posterization: 1 {Click} OK. Filters (con't) Photoshop applies the Filter to your image and the History Palette creates a

History State. You've effectively changed a photograph into a painting. A photograph is transformed into a painting. Fine-Tuning Filters with Fade Once you've applied a Filter you can fine-tune it by selecting Edit/Fade Filter Name, where Filter Name is the name of the last Filter you applied. In this case we select Edit/Fade Poster Edges. Fade controls include Opacity, Mode (Blend Mode), and Preview. Input an Opacity value or use the slider to reduce the strength of the Filter’s effect on your image. Experiment with different Blend Modes to affect the manner in which the Filter is applied to the image. Check Preview to display your changes in realtime. {Click} OK to make the changes. Adjustment Filters Filters are not limited to apply effects. There are a wide range of Filters available to you. As you learn and use Photoshop, you’ll become familiar with many of them. Learning and using Filters (also referred to as plug-ins) is largely a process of experimentation to view how particular Filters affect an image and what type of Options you can use for each of them. Let’s take a look at one of the Adjustment Filters. Open statue.psd. statue.psd Examine the image. It’s definitely blurry. Select Filter/Sharpen/Unsharp Mask. You can set the following Options: Amount, Radius, and Threshold. We’ve used the following settings: • Amount: 50% • Radius: 1.0 pixels • Threshold: 0 levels Use these settings are your own. Once you’ve applied the Filter the image should appear sharper. As we progress through the manual, we’ll be creating buttons, navigation bars, and GIF animations, and we’ll put some Filters to use. Recall that Layers have Layer Styles, which are essentially specialized Filters linked to Layers, though of course Layer Styles can be disabled whereas applying Filters is a descructive operation (see “Layer Styles” on page 95.) We'll be using these effects as well. Some of the Layer Styles can be applied to Type Layers, but to apply Filters to Type Layers you'll have to {Right-Click} the "T" icon in the Type Layer and select Rasterize Layer. Effectively you’ll be converting the type to a bitmap so that you won't be able to edit your type after rendering it. However, you’ll be to apply Filters to it. Adjusting Images In addition to modifying or adjusting images with Selections, Filters, Layers, using Blend Modes, and using the various 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/Adjustments. Adjustment controls include Levels, Auto-Levels, Auto-Contrast, Auto-Color, Curves, Color Balance, Brightness/Contrast, Hue/Saturation, Desaturate, Replace Color, Selective Color, Channel Mixer, Gradient Map, Invert, Equalize, Threshold, Posterize, and Variations. Before using these controls however, you should examine the image's Histogram. Histogram The Histogram represents the pixels of an image in graph form. It charts how many pixels an image contains and their distribution in terms of dark tones to bright tones. Dark tones are charted to the left and bright to the right. Dark tone areas are referred to as Shadows. The area in between dark and bright tones is referred to as Midtones. Bright tone areas are referred to as Highlights. Open flower.psd.

flower.psd The image is clear, but the colors are dull. This image could use some adjument. Start by examining the Histogram by selecting Image/Histogram. Histogram (con't) By examining the Histogram of an image, you can instantly see the Tonal balance of the image and use that information as a basis for your adjustments. For this image, most of the pixel information is concentrated left of the middle of the graph (the Midtones area.) As a result, we can see that the image is primarily dark in tone. The images Tonal range is unbalanced. We’ll make adjustments to create a better balance. Histogram (con't) Channel Select from Luminosity, Red, Green, or Blue when working with RGB images. Luminosity is a composite of the Red, Green, and Blue Channels. Mean, Std Dev, Median, Pixels The values listed in the left hand column of the Histogram display the average brightness value of the image (Mean), the range of variance from the mean (Std Dev), the middle brightness value (Median), and the number of pixels used to calculate these numbers. If you're viewing a Histogram for the entire image, all the pixels are used. If you're viewing a Histogram for a Selection, the numbers of pixels within the Selection are used. Level, Count, Percentile, Cache Level {Click} and drag to highlight particular areas of the Histogram to get values for Level (the selected area's brightness level), Count (the number of pixels in the selected area), and Percentile (the percentage of pixels within the selected tonal range.) Cache Level is set in File/Preferences/Memory & Image Cache. If Use cache for histograms is checked, the Histogram is based on the Cache version of the image. For absolute accuracy uncheck Use cache for histograms to force Photoshop to use the real image data. This is less of a concern for web development because you're working on a low resolution (in terms of density as in 72 ppi) image, which matches the resolution of the Cache version. However, if you are working on higher density images the accuracy of the Histogram is affected. Using Levels To adjust the image we can use Levels. Make sure you still have flower.psd open. Select Image/Adjustments/Levels. The Levels dialog box appears. The Levels dialog box contains a Histogram and controls for Channel, Input Levels, Input Level Sliders, Output Levels, Output Level Sliders, Shadows, Midtones, and Highlights Eyedroppers, a Preview option, and options to Load and Save Levels as well as designate Auto Levels. Channel Select from the composite RGB to modify all channels simultaneously or select Red, Green, or Blue and modify channels on an individual basis. Input Levels/Input Levels Sliders Input Levels display the range from the Black Point (Shadows) to the White Point, and the Mid Point in between. By default, the range is 256 possible values, from 0 to 255 with the Mid Point being precisely in between. By adjusting these Levels, you can increase or decrease each of the three primary tonal properties, Shadows, Midtones, and Highlights. The Histogram for this image reveals that very few pixels are actually in the Midtones and fewer still in Highlights. Use the Sliders or input the following values into Input Levels: • Shadows: 7 • Midtones: 1.00 • Highlights: 108

Channel (con't) Make sure that Preview is checked. {Click} OK. The image should look much brighter. Keep in mind that you can make adjustments by Channel. You could adjust each individual Channel or start by adjusting all of them at once (RGB) and then isolate each channel to make finer adjustments. It takes some time to get used to adjusting images in this manner. Output Levels/Output Levels Sliders Reduce the tonal range (at default 0 to 255) by adjusting the Output Levels either by input or using the sliders. Levels Eyedropper Tools Use the Shadows (Black Point), Midtones (Gray Point), and Highlights (White Point) Eyedroppers to designate pure black, pure medium, and pure white manually by selecting the appropriate Eyedropper and {Clicking} on a point within the image. Select Image/Adjustments/Levels again. Note how the Levels Histogram has changed to reflect the changes we’ve already made. If you select the Midtones Eyedropper and {Click} on the red part of the flower the Histogram changes to reflect your selection and the color of the image changes drastically as well. In this case, the image is dominated by blue and green tones. The Eyedroppers are generally more useful when changing the tone of grayscale images. Channel (con't) Auto {Click} this button to let Photoshop adjust the Levels for you automatically (see “Auto Levels” below.) Options {Click} Options to fine tune the manner in which Photoshop automatically balances Levels if you choose to have Photoshop do the adjustment for you. Preview Check Preview to see the affect of your modifications in real-time. Auto Levels Selecting Image/Adjustments/Auto Levels causes Photoshop to automatically balance the tonal range of the image. Depending on the image, this feature can work well or not work particularly well. Restore flower.psd back to its original state and try it out. Auto Contrast Select Image/Adjustments/Auto Contrast to automatically increase the contrast of colors in an image. Colors increase in saturation and edges sharpen. Auto Color Select Image/Adjustments/Auto Color to automatically balance the colors within animage. Curves Use Curves for greater control when adjusting image tone. Curves are very similar to Levels in that you adjust the Shadows (Black Point), Midtones (Medium Point), and Highlights (White Point), except you do so with a curve to which you can add points too for increased accuracy. You manipulate the Curve by {Clicking} and dragging on a point. You add points to the Curve by {Clicking} and dragging on the Curve where there isn't a point or by {Clicking} on the Curve where there isn't a point. Controls for Curves include Channel, Input and Output Fields (visible when you have a Point selected, Edit Curve Button, Custom Curve Button, Black Point, Mid Point, and White Point Eyedroppers, Auto, Smooth, options to Save and Load Curve settings, the Curve Window and the Curve itself. The controls common to the Levels adjustment work precisely the same in Curves (see “Using Levels”.) Curves (con't) The Curve is in a straight line, at 45 degrees, indicating it has not yet been manipulated. The Point at the bottom left of the Curve represents the current Black Point while the point at the top right represents the White Point. There is no point in the middle of the Curve by default because you can add points all along the Curve and {Click} and drag them for very accurate and precise control.

However, by {Clicking} the center of the Curve you can add a Midtone Point. {Click} the center of the Curve to add a Midtone Point. Next {Click}, hold, and drag the Midtone Point up and down the Curve, trying to keep the Curve as straight as possible. By doing this you are mirroring Levels controls where you {Click} and drag the Point sliders back and forth. The distance between the sliders or Points changes the tone of the image. With Curves, you have increased control because you can add multiple points between the Black, Mid, and White Points. {Click} twice at different locations on the Curve between the Midtone Point and the Black Point to add two more points. Now {Click} and drag these points back and forth and watch what happens to the image. By {Clicking} and dragging the points to add variance to the Curve more drastic tonal changes occur. It takes practice to get used to using Curves to adjust tone but as you can see it is a much more powerful option than using Levels. At any time, with a Point selected, you can input values into the Input or Output fields. Curves (con't) Note To change the Grid in the Curves dialog box, press [ALT] and {Click} simultaneously. Curves (con't) In our case, we’ve applied the following Curve to flower.psd. To view our version, load flowerCurves.psd. flowerCurves.psd Keep flowerCurves.psd open and feel free to try the following procedures on your own version as well. Custom Curve Button In addition to using the default Curve, Photoshop permits you to draw your own Curve. Simply {Click} the Custom Curve Button and {Click} and drag inside the Curve Window to create your Curve. Adjust the Curve as you would normally by {Clicking} the Edit Curve Button. Curves (con't) Scale: Vertical/Horizontal The Vertical Scale represents values from 0 - 255 (in RGB Mode) with Shadows at the bottom and Highlights at the top. The Horizontal Scale represents values from 0 - 255 with Shadows at the left and Highlights at the right. You can reverse the orientation by {Clicking} the Arrows in the center of the Horizontal Scale. Eyedroppers Use the Eyedroppers to establish the range of tones. For example, use the Black Point Eyedropper by {Clicking} on the darkest point in your image (or whatever you wish to designate as the darkest point). The rest of the image adjust automatically. Use the other Eyedroppers (Gray Point, White Point) appropriately (see “Levels Eyedropper Tools”.) Like Levels, using Curves can be a litte confusing. Experimentation and practice is the best way to get a solid understanding of how you can use Curves to achieve your goals. Color Balance Adjust the Color Balance of an image, Layer, or Selection with the Color Balance controls. Controls include Color Balance fields and sliders for Cyan to Red, Magenta to Green, and Yellow to Blue, Tone Balance (Shadows, Midtones, and Highlights), Preserve Luminosity, and Preview. Color Balance Fields and Sliders Use the Cyan to Red, Magenta to Green, and Yellow to Blue fields (Color Levels) and sliders to adjust color values. As you experiment with them, notice how the color changes in the image. To isolate particular tones within the image use the

Tone Balance controls. Tone Balance Check Shadows, Midtones, or Highlights to isolate Color Balance changes you wish to make to those particular tonal ranges in the image. Preserve Luminosity Check Preserve Luminosity so that Color Balance changes affect only the color of the pixels and not the brightness. Using flowerCurves.psd, input the following values into the Color Levels fields (in order, left to right): -46, -20, +1. Note how combining the previous adjustments we made with Curves with the Color Balance adjustments has greatly improved the tone of this image (compare it to flower.psd side-by-side.) Brightness/Contrast Use the Brightness and Contrast Sliders or Fields to increase or decrease the brightness and contrast of an image, Layer, or Selection. Using flowerCurves.psd, increase Brightness by 10 and Contrast by 10. Hue/Saturation Use the Hue/Saturation Controls to increase and decrease the Hue, Saturation, and Lightness of an image, Layer, or Selection. From Edit select Master to adjust all the colors or select from a list of color ranges that include Reds, Yellows, Greens, Cyans, Blues, and Magentas. Hue/Saturation (con't) When you select a color range, you can adjust the magnitude of that range using the sliders in between the Color Bars at the bottom of the Hue/Saturation dialog box and by using the Eyedropper Tools. For example, select Red from Edit. Note how the Color Bars at the bottom display the range of Reds that will be affected. You can adjust the Core Range and Fall Off range by sliding the Indicators as needed. Note that you can use the Eyedroppers to adjust the range by {Clicking} on colors within the image to add or remove them from the range. The Fall Off range is used to make your adjustments as smooth and realistic as possible. You can experiment with changing the range if you like. Hue/Saturation (con't) For now, keep the range at default and make adjustments to the Reds in the image. We’ve changed Saturation to +60 and Lightness to -15. Next move to Yellows. We’ve changed Hue to -25. Next move to Greens. We’ve changed Saturation to +40. Next move to Cyans. We’ve changed Hue to -75. We’ve left Blues and Magenta unadjusted as most of these colors are in the background. The background of this image is out of focus (blurry) and color adjustments tend to become blocky or band when adjusting blurry areas. In fact, you should notice some pinish patches in the background that appear unseemly. This is bound to happen when making global adjustments (adjustments to the entire image and therefore all the colors within the image that fall within a particular range.) Remember, you can also isolate aress of the image by creating Selections or by selecting content on a single Layer and then make adjustments to the content accordingly. Hue/Saturation (con't) If you examine the image now, the Reds and Greens should appear much better than they originally did (compare it side-by-side to flower.psd if you like.) You could go back to Hue/Saturation, isolate the Reds and change the color of the flower to a pink (by increasing Brightness) or yellow (by increasing Hue and Saturation and decreasing Brightness.) Open flowerComplete.psd to view the changes as we’ve made them to the image.

Colorize Colorize causes the image, Layer, or Selection to take on a duotone effect, where the image is tinted by one dominant color. Desaturate Selecting Desaturate removes the color from an image. The image will appear to be in Grayscale Mode but actually remains in RGB Mode so that you can still add color to it and use all the Filters. Replace Color Use Replace Color to change the Hue, Saturation, and Lightness of a particular color or particular range of colors. Use the Eyedroppers to select the color(s) you wish to replace. Replace Color is similar to selecting by Color Range, including Fuzziness, Eyedroppers to select one color, select additional colors, or deselect colors, a Preview checkbox, and the ability to choose either Selection or Image in the Image Box (see “Creating a Selection with Color Range” on page 68.) In addition, Replace Color includes Hue, Saturation, and Brightness Sliders and Fields, and the Sample Box that indicates the currently selected color or base color for the currently selected range. Try using Replace Color on the flower or on different colors within the image. Selective Color Use Selective Color to adjust CMYK values for images destined for print. Because you don't use CMYK mode for the Internet you won't have much use for this control. However, feel free to experiment with it. Like other controls, you can isolate a color range and use sliders to modify them. Channel Mixer Use the Channel Mixer to adjust the balance of each individual Color Channel in the image. Select the desired Color Channel with the Output Channel drop-down list. You'll notice that sliders for the Source Channels default to a value of zero, except for the currently selected Color Channel, which defaults to a value of 100%. Use the sliders to increase and decrease the percentage values of each Channel to change the tone of the image. Use the Constant slider to add or subtract black or white to the mix. Check Monochrome to convert the Image to a Gray range of colors (the image itself still remains in RGB Mode.) Gradient Map Use the Gradient Map dialog box to map either a custom or preset Gradient to the grayscale values of an image. The effect is somewhat like that of a Duotone used in print but without the need of converting the image over to a Duotone. The default Gradient consists of the current Foreground and Background Color, with the foreground mapped to black and the background mapped to white (in the Grayscale range.) Choose a Gradient or {Double-Click} on the Gradient Preview itself to edit and create custom Gradients (see “Creating Custom Gradients”.) Check the Dither checkbox to create a smooth Gradient. Check the Reverse checkbox to flip the colors from right to left. In our case we had Red as the Foreground Color and Black as the Background Color, which results in a Gradient from Red to Black. Gradient Map (con't) We’ve selected the Orange, Yellow, Orange Gradient and applied it to the flower image with the following results: Invert Use Invert to reverse the colors of the current image, Layer, or Selection. In effect, you make a photographic negative of your image. Equalize Use Equalize to make Photoshop designate the lightest pixel and the darkest value as absolute black and white and then adjust the pixels between evenly or equally. Threshold Use Threshold on the current image, Layer, or Selection to convert all pixels to

either black or white. Adjust the Threshold Level by input a new value or using the slider. Increasing the value adds more black and decreasing the value adds more white. The range is from 0 to 255. Posterize Use Posterize on the current image, Layer, or Selection to reduce the amount of colors, and therefore tone. For instance, if you enter a value of 5, the image is reduced to five of the most dominant colors. Variations Use Variations to view multiple results of tonal changes for the current image, Layer, or Selection. The Variations dialog box consists of twelve (12) Thumbnails divided into three (3) areas. At the top is the image in its Original form beside which is the image as it appears with modifications. To isolate tones and saturation check Shadows, Midtones, Highlights, or Saturation. Check Show Clipping when adjusting Saturation to ensure you do not over saturate a particular color. Use the Fine and Coarse slider to adjust the amount of each change. Variations (con't) Execute changes by {Clicking} on the Thumbnails in the Color or Brightness areas. The Color Area consists of Thumbnails to add more Green, Yellow, Cyan, Red, Blue, and Magenta. Continue {Clicking} on the Thumbnails to add color. Lighten or darken the image by {Clicking} on the Lighter or Darker Thumbnails in the Brightness area. {Click} OK to make the changes. Adjustment and Fill Layers Photoshop features a powerful Adjustment Layer you can use within the Layers Palette to affect tonal changes to Layers that lie beneath the Adjustment Layer. Thus far, we have been using a destructive method, where the adjustments we make are permanent and are actually applied to the image data on a particular Layer. If we use an Adjustment Layer, we use a non-destructive method of adjusting tone, color, brightness, and so forth. To create an Adjustment Layer select the Layer that you want to affect and {Click}on the New Fill or Adjustment Layer button at the bottom of the Layers Palette. A drop-down menu appears that allows you to choose an Adjustment Type. For Fills select either Solid, Pattern, or Gradient. For Adjustments select either Levels, Curves, Brightness/Contrast, Color Balance, Hue/Saturation, Selective Color, Channel Mixer, Gradient Map, Invert, Threshold, or Posterize. Adjustment and Fill Layers (con't) The Adjustments you choose work just like the do through selecting Image/Adjustments/selected Adjustment (where selected Adjustment is the Adjustment of your choice, such as Curves.) Adjustment and Fill Layers (con't) This is our original, muddy, dark image of the flower that we have been modifying throughout the chapter. Let’s do the modifications again, but this time using a series of Adjustment Layers. Execute the following procedure: 1. Create a new Adjustment Layer and select Curves for the Adjustment Type. The Curves dialog box appears. 2. Create 3 Points along the Curve as we did before (see “Curves” on page 162.). Once you’ve made the Curve (an approximation to the screenshot), you can select each, from the top down, and input the following coordinates: o Input: 136 / Ouput: 182 o Input: 66 / Ouput: 147 o Input: 48 / Ouput: 90 3. {Click} OK. An Adjustment Layer should be added to the Layers Palette just above the Background Layer. 4. Next, add another Adjustment Layer. Select Color Balance. 5. Input the following values into the Color Levels fields (in order, left to right): -46, -20, +1. 6. {Click} OK.

7. Next, add another Adjustment Layer. Select Brightness/Contrast. 8. Increase Brightness by 10 and Contrast by 10. 9. {Click} OK. 10. Next, add another Adjustment Layer. Select Hue/Saturation. 11. Input the following values for the following colors: o Reds: Saturation: +60 / Lightness: -15 o Yellows: Hue: -25 o Greens: Saturation: +40 o Cyans: Hue: -75 12. {Click} OK. Adjustment and Fill Layers (con't) We’ve made all the changes we made earlier, but this time in a non-destructive manner. We should have four (4) Adjustment Layers stacked on top of the Background Layer. The original image has not been modified. We are seeing the modifications through the Adjustment Layers. You can usee the Visibility Toggle at any time to disable an Adjustment Layer or {Double-Click} the Adjustment Layer Thumbnail to change the settings you’ve applied. Futhermore, you can use the Opacity or Fill values for the Adjustment Layer to reduce the effect on the Layers below. Note By default, Adjustment Layers affect all the Layers below them. If you are working with on a file with multiple Layers you may wish to link particular Adjustment Layers with particular image Layers. To do so, select the image Layer you wish the Adjustment Layer to be linked to. Next, place the mouse pointer between the image Layer and the Adjustment Layer and press the [ALT] key. A link icon will appear. Press the mouse button to link the Adjustment Layer to the image Layer.

Chapter 8 - Working With Vectors Working with Vector Content The benefit of utilizing Vector Tools such as Photoshop’s Shape Tools is that vector content remains completely editable and scalable at all times as long as your document remains in the Photoshop native file format (the .psd extension.) You can place as many Vector Shapes on the same Layer as you wish and they each remain individually editable. You can also apply Layer Styles to Vector Shapes and maintain maximum editability. 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 (see “Digital Image Types: Vectors and Bitmaps”.) Before we begin to discuss the range of Shape Tools let's take a look at the more traditional roles of the Pen Tool. The Pen Tool The Pen Tool is used to create Paths and Shapes. Paths can be converted into Selections. Initially, the Pen Tool does not make a Marquee, but rather a fully editable vector based Path. What does this mean? When you create a Path with the Pen Tool, it creates straight lines and curves, called segments, which begin and end in anchor points. At each anchor point the Curvature, Length, and Position of connected segments can be modified by manipulating what are called direction lines. The best way to understand how the Pen Tool functions is to experiment with it. Because we’re familiar with them, first, we’ll look at the Pen Tool as a means of creating Selections. Following that, we’ll look at the Pen Tool as a means of creating Vector Shapes. To begin, let’s look at the Pen Tool’s Options. Pen Tool Options The Pen Tool consists of many Options that can be broken into two distinct parts, those options used to create individual Paths and those used to create Vector Shapes. Shape Layers Shape Layers is enable by default. When enabled, you can use the Pen Tool to draw a custom Shape. The Shape you create is filled with the currently designated Color. We’ll create Shapes later in the chapter so that you’ll get a better understanding of what they are and how they are distinct from Paths. Paths Select Paths to create only a Path. You can create a Path in any shape you wish, but it will not be filled with the currently designated Color. We’ll create Paths later in the chapter so you’ll get a better understanding of what they are and how they differ from Shapes. Pen Tool Options (con't) Pen Tool You have a choice of Pen Tools. You can select the standard Pen Tool or the Freeform Pen Tool, which has an option to make it Magnetic, much like the Magnetic Lasso Tool (see “Magnetic Lasso Tool”.) Shapes If you don’t wish to draw your own Shape, you can use one of the pre-built Shapes. Select from the following Shape Tools: Rectangle Tool, Rounded Rectangle Tool, Ellipse Tool, Polygon Tool, Line Tool, and the Custom Shape Tool. Some of these Tools will have additional options you can select while others will not. We’ll be looking at each Tool later in the chapter. Shape Options Some of the Shape Tools have additional options you can select by {Clicking} on the drop-down arrow. Pen Tool Options (con't) Option Selector The primary option for any given Shape Tool will appear in this area. The option changes depending on which Tool you’ve selected. Shape Area Options When you are creating Shapes, you have a number of methods you can select to create them. Select from Create New Shape Layer, Add to Shape Area, Subtract from Shape Area, Intersect Shape Area, and Exclude Overlapping Shape Area. This is similar to the process of making irregularly shaped Selections (see “New Selection”.) Set/Change Properties When you have created a Shape on a Shape Layer, press this button to unlock or

lock the Shape Layer. When unlocked, you can change its properties. Pen Tool Options (con't) Layer Style When creating Shapes, you can select a Layer Style to apply to the Shape Layer (see “Layer Styles”.) Color {Click} on the Color Swatch to select a Color from the Color Picker. Pen Tool Select the Pen Tool and make sure you’ve enabled Paths in the Options Bar and disabled Shape Layers. We are going to create a Path around the head of the second doll from the right edge of the image. Before we begin to create the Path, we need to look at the components that make up a Path. Paths are composed of segments (also called line segments.) Each segment consists of two anchor points. The nature of each anchor point determines whether the segment will be a curved or straight segment. You can have straight anchor points or curved anchor points. Curved anchor points consist of direction lines that can be manipulated to change the shape of the curved segment by {Clicking} on the direction points that are at the end of each direction line. The best way to understand Paths is to work with them. Do not worry if initially, you find them somewhat unusual as many do when first using them. Like many things in Photoshop, Paths take practice. The key to understanding and creating Paths is the procedure in doing so. Very often you create a rough version of your Path and then tweak it using the Path related Tools. Furthermore, there is a particular technique to creating a straight segment and a curved segment. Creating a Straight Segment To create a single or series of straight segments, select the Pen Tool and then {Click}, {Release}, drag, {Click}, {Release}, drag,{Click}, {Release}, drag, until you have created a series of segments, then press the [ESC] key. If you want to close the Path, {Click} on the original anchor point. As you {Click}, and {Release}, you create anchor points. As you drag, you create segments. The further you drag, the longer the segment. Keep in mind that a Path can consist of a combination of curved and straight segments. Creating a Curved Segment To create a single or series of curved segments, select the Pen Tool and then {Click}, hold, and drag. As you {Click}, hold, and drag, you create an anchor point and the direction lines for the anchor point. {Release} the mouse button. Move the mouse pointer to the location where you’d like to create a new anchor point and follow the same procedure. Keep in mind that a Path can consist of a combination of curved and straight segments. Creating a Curved Segment (con't) Again, the best way to understand how to create Paths is to practice creating them. Let’s begin then by creating a Path around the he head of the second doll from the right edge of the image. Let’s create a series of segments (primarily curved but with straight segments around the top of the apple) around the head. Its highly recommended that you zoom in so you can get a better view of the area around which you need to create a Path. Furthermore, you may want to enable the Rubber Band option under Shape Options in the Options Bar (see “Pen Tool Options”.) If you do not enable the Rubber Band option, you will not be able to see the segments as you draw them (they will only appear after you have created two anchor points in between which a segment can be made.) As you create your curved segments, experiment with the affect that {Clicking}, holding, and dragging the direction lines has on the curvature of the segments. Do not worry about accuracy at this point. Remember. creating Paths is often a process of create a rough version, then fine tune it afterward. A Path is created around the head of the doll. Creating a Curved Segment (con't)

Again, the best way to understand how to create Paths is to practice creating them. Let’s begin then by creating a Path around the he head of the second doll from the right edge of the image. Let’s create a series of segments (primarily curved but with straight segments around the top of the apple) around the head. Its highly recommended that you zoom in so you can get a better view of the area around which you need to create a Path. Furthermore, you may want to enable the Rubber Band option under Shape Options in the Options Bar (see “Pen Tool Options”.) If you do not enable the Rubber Band option, you will not be able to see the segments as you draw them (they will only appear after you have created two anchor points in between which a segment can be made.) As you create your curved segments, experiment with the affect that {Clicking}, holding, and dragging the direction lines has on the curvature of the segments. Do not worry about accuracy at this point. Remember. creating Paths is often a process of create a rough version, then fine tune it afterward. A Path is created around the head of the doll. The Direct Selection Tool The Direct Selection Tool is particularly useful for fine-tuning or editing a Path. To use the Direct Selection Tool, {Click}, hold, and drag on a segment to move it or {Click} and {Release} on an anchor point to select it, and then {Click}, hold, and drag on the selected anchor point to move it, or {Click}, hold, and drag on a direction point to move rotate, reduce, or expand the direction lines. Note that when you move the direction point on one direction line the accompanying direction line on the other side of the anchor point moves with it. To move just one direction line instead of both, press and hold the [ALT] key and drag the selected direction point. {Release} the [ALT] key. Now only one of the direction lines will move. Press and hold [ALT] again to make both direction lines move together again. The Direct Selection Tool (con't) Use the Direct Selection Tool to tweak the Path you created around the head of the doll. Be patient, it may take some time and getting use to manipulating Paths usually takes significant practice. At 200% magnification, you can see that after using the Direct Selection Tool, the Path around the doll’s head is much more accurate in contrast to the initial Path we created. In addition to using the Direct Selection Tool, there are other means of editing, tweaking, and modifying a Path. Let’s take a look at the Tools that will give us even more editing options. The Add Anchor Point Tool As you edit Paths you may find that you need more anchor points. To add another anchor point, select the Add Anchor Point Tool and {Click} on a segment to add an additional anchor point. If the segment is a curved segment, the anchor point will be curved. Likewise, if the segment is a straight segment, the anchor point will be a straight anchor point. Generally, you strive to make the cleanest Paths possible, meaning that you try to create a Path with as little anchor points as possible. Nonetheless, if you are creating complex Paths, more anchor points may be required. The Delete Anchor Point Tool As you edit Paths you may find that you Generally, you strive to have the least an accurate Path. With practice, you’ll For example, there are three (3) anchor bottom right of the doll’s face:

have created too many anchor points. amount of anchor points possible to create be able to create very efficient Paths. points (highlighted by boxes) at the

As a result, we have two (2) segments where we really only need one. We can use the Delete Anchor Point Tool to remove the anchor point in the middle and still create a curved segment that works for us, potentially making editing easier and more efficient: The Paths Palette Use the Paths Palette to manage, save and manipulate your Paths. Paths that you create are automatically placed in the Paths Palette. By default, the Path is called Work Path. Its a good idea to give it an indicative name. In this case, we’re going to call our Path dollFace. To name the Path, {Double-Click} the Path Name in the Paths Palette. The Save Path dialog-box appears. Input the name. To select a Path you have named, simply {Click} it. Fill Path with Foreground Color {Click} this button to fill a closed Path with the current Foreground Color. Stroke Path with Brush {Click} this button to Stroke a Path with the current Foreground Color. The Stroke will follow the outline or shape of the Path and will use your currently selected Brush settings. Load Path as a Selection In the Selections chapter, we mentioned that the Pen Tool could be used to create Selections (see “The Pen Tool”.) Having created a Path with the Pen Tool, you can {Click} this button to create a Selection from the Path. In addition to the other methods we’ve covered for creating Selections, using the Pen Tool to create a Path first and then create a Selection from the Path is a powerful method you can employ to create accurate and oddly-shaped Selections. A Selection is created from the Path we created. Make Work Path from Selection If you have created a Selection, you can create a new Path from that Selection by {Clicking} this button. You should name the Path. Now you can edit the Path to fine tune the shape of your Selection and then create a new Selection from your modified Path. New Path {Click} this button to create a new Path Layer. The new Path that you create will appear in the Paths Palette in this Paths Layer. Delete Path With a Path selected, {Click} this button to delete it. The Freeform Pen Tool Use the Freeform Pen Tool to create Paths or Shapes by drawing in the Image Window freehand. Photoshop will automatically generate anchor points and segments for you. Check Magnetic in the Options Bar to make the Freeform Pen Tool operate in a similar fashion to the Magnetic Lasso Tool (see “Magnetic Lasso Tool”.) Creating Vector Shapes Creating Vector Shapes is very similar to the process of creating a custom Path, except that when you create a Shape, you create a Path with a Fill by selecting Shape Layers rather than Paths as we did earlier in the chapter (see “Shape Layers”.) The Tools you can use include the Pen Tool as well as any one of the collection of Shape Tools. The Shape Tools can be selected from the Pen Tool Options Bar or from the set of Shape Tools themselves in the Toolbox. The Shape Tools can be selected from the Options Bar when using the Pen Tool or from the Toolbox. Each of the Vector Shapes has different Options, let’s take a look at each Tool and how Vector Shapes work in Photoshop. The Shape Tools

The Shape Tools consist of the Rectangle Tool, the Rounded Rectangle Tool, the Ellipse Tool, the Polygon Tool, the Line Tool, and the Custom Shape Tool. To use any of these Tools select the Tool and select your desired Fill Color (the Foreground Color.) That done, draw the Shape in the Image Window. Do not worry about creating a Layer, a Shape Layer is created automatically. The Shape Tools (con't) Select the Rectangle Tool and a Foreground Color of your choice. Draw a rectangular shape in blank.psd. Examine the Layers Palette. Note how a Shape Layer has been created. A Shape Layer consists of a normal Layer filled with a solid Color, a Gradient, or Layer Style which makes up what we are referring to as the Fill. Attached to the Layer is a Vector Mask, which is very similar to a Layer Mask (see “Layer Masks: Non-Destructive Editing”.) A new Shape Layer, together with a Vector Mask is created automatically whenever you use any of the Shape Tools in Shape Layers mode. Like a Layer Mask, you can {Click} on the Vector Mask icon in the Layer itself and then {Right-Click} to Delete, Disable/Enable, or Rasterize the Layer. Disable the Vector Mask temporarily. Note how the entire Layer turns to the color you chose as a Fill Color. Enable the Vector Mask again. You can use any of the procedures we used to edit a Path earlier in the chapter (see “Editing a Path”.) Very often, you will start creating a Shape with one of, or a combination of these basic Shape Tools and then edit them with the Direct Selection Tool and other related Tools. Shape Tool Options Each of the Shape Tools have a similar set of Options. Some of the Shape Tools also have at least one unique option. To review the common options, which are also shared with the Pen Tool (see “Pen Tool Options”.) {Click} on the drop-down arrow to view each Tools’ unique options. The primary option for each Tool appears in the area beside the drop-down for quick access. Feel free to try out each Tool as we proceed and use each of the options to see how they function. Rectangle Tool Options Select from the following options: Unconstrained (default), Square (hold [SHIFT] as you draw to constrain to a square as well), Fixed Size, Proportional, From Center, and Snap to Pixels. Fixed Size Select Fixed Size and then input the Width and Height you desire into the Width and Height fields. {Click} in the Image Window where you desire to place the Rectangle. It will be created to your specifications. Proportional Select Proportional and input the desired ratio into the Width and Height fields. When you create your Rectangle, the proportions are maintained. For examples, values of 2 by 1 make a Rectangle that is twice the width of the height. From Center By default, a Shape is drawn from the top, left edge. Select From Center to draw your Shape from the center. Rounded Rectangle Tool Options The primary option you can modify is the Radius. Increasing the Radius increases the roundedness of the rectangular shape’s edges. The remaining options are identical to the options for the Rectangle Tool. Ellipse Tool Options The Ellipse Tool options are identical to the Rectangle Tool Options. Polygon Tool Options The primary option you can modify is Sides. For example, if you wish to create a

Triangle, you need to have 3 Sides. In addition, you can select from Radius, Smooth Corners, Star, Indent Sides By, and Smooth Indents. Radius The Radius sets the distance from the center point of the Polygon to the points of the outer edges. Smooth Corners Selecting this option will make rounded rather than sharp edges for each corner in the Polygon. Star Select Star to create a Polygon in the shape of a Star. Indent Sides By This option sets how sharp the Star appears. At 50% the typical shape of a Star is created. Increasing the value creates a “fat” Star. Decreasing the value creates a very “thin” Star. Smooth Indents This option is only available if you’ve selected the Star option. Rather than creating a Star with straight sides (edges), the sides appear rounded. Line Tool Options The primary option for the Line Tool is Weight, which sets the thickness of the line. In addition, select from Arrowheads (Start/End), Width, Length, and Concavity. Arrowheads If you wish to put arrowheads at then of your line check either Start or End or both. Input values to control the Width, Length, and Concavity of the arrowheads. These settings take some getting used to so you may wish to experiment with values to see how they affect the shape and scale of the arrowheads. Custom Shape Tool Options The primary option for the Custom Shape Tool is Shape. Select from a variety of prebuilt Shapes. In addition, select from Constrained, Defined Proportions, Defined Size, Fixed Size, and From Center. Defined Proportions Check Defined Proportions to keep a Custom Shape within the proportions that it was created with. Defined Size Check Defined Size to create a Custom Shape at the size at which it was created. Working with Vector Shapes In addition to modifying the Vector Masks that are created on Shape Layers, you can select the Layer and select another Color by {Clicking} on the Color Swatch in the Options Bar for any of the Shape Tools. In addition, you can select any of Photoshop’s default Layer Styles by selecting a Layer Style from the Options Bar or from the Styles Palette. In addition to using a packaged Layer Style you can create your own. Creating a Custom Style To create a custom Layer Style, you do so by combing individual Layer Styles. The wide range of options available gives the designer the freedom to create some unique styles (see “Layer Styles”.) Instead of exploring every detail of every aspect of creating different Layer Styles let's just try creating one and see what the process involves. Our first step is to place a Shape in our Image Window. You cannot create a new Style unless you have a Shape or Layer to apply it to. If you don’t have it open already, open blank.psd. Working with Vector Shapes (con't) Make your Foreground Color the following combination of RGB values: R: 255, G: 179, B: 0. A yellow color should result. Create a capsule-shaped Rounded Rectangle

(if you like make it a fixed size of 310 x 60 with a Radius of 100.) Name the newly created Shape Layer “button”. We're going to create a Layer Style for the buttons in a web site. Tip You may find the outline around the Vector Mask distracting. To disable it, select View/Show/Target Path. With the button Layer selected, select Drop Shadow from the Layer Styles button at the bottom of the Layers Palette (see “Layer Styles” on page 95.) Make sure you use the following values for Drop Shadow: • Blend Mode: Multiply • Color: Black • Opacity: 75 • Angle: 120 • Use Global Light: Checked • Distance: 3 • Spread: 0 • Size: 5 • Contour: Linear (default) • Anti-aliased: Checked • Noise: 0 • Layer Knocks Out Drop Shadow: Checked (default) Working with Vector Shapes (con't) Next, select Inner Glow. Use the following settings: • Blend Mode: Screen • Opacity: 30 • Noise: 0 • Color of Glow: R: 157, G: 158, B: 21 ({Click} the Color Swatch) • Technique: Softer • Source: Edge • Choke: 0 • Size: 250 • Contour: Linear • Anti-aliased: Checked • Range: 50 • Jitter: 0 Working with Vector Shapes (con't) Next, select Bevel and Emboss. Use the following settings: • Style: Inner Bevel • Technique: Smooth • Depth: 200 • Direction: Up • Size: 8 • Soften: 15 • Angle: 120 • Use Global Light: Checked • Attitude: 40 • Glass Contour: Linear • Anti-aliased: Checked • Highlight Mode: Screen • Highlight Mode Color: White • Opacity: 75 • Shadow Mode: Multiply • Shadow Mode Color: Black • Opacity: 75 Working with Vector Shapes (con't) Next, select Color Overlay. Use the following settings: • Blend Mode: Normal

• Color: R: 255, G: 168, B: 0 • Opacity: 100 Finally, {Click} New Style. The New Style dialog-box appears. Name your custom Style “Web Button”. Now it appears in the Styles Palette and the Styles drop-down in the Options Bar for the Shape Tools. Now you can apply your custom Style to other elements in Photoshop.

Chapter 9 - Optimizing Images for the Internet 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 Encapsulated Postscript (.eps) or Illustrator format (.ai.) However, since we are working exclusively in Photoshop we will create a logo within Photoshop, using external media as well as Type and a Vector Shape. Importing Vector Image Files If you are creating a logo, its highly recommended that you do so in a program like Adobe Illustrator or Macromedia Freehand (among others) because it is much easier to repurpose, for print, for video, and in our case, for the Internet. With the exception of Macromedia Flash and the emerging (at the time of publication) SVG format, the browsers still only support bitmap images natively. If you need to publish a logo to the Internet, you’ll most likely be taking a vector file and importing it into Photoshop. To do so, simply select File/Open and select the appropriate file type. In our case, we’re going to import an Adobe Illustrator (.ai) file. Creating a Logo in Photoshop (con't) When you import an Illustrator image, the Rasterize Generic EPS Format dialog box appears. To rasterize means to translate the vector information of a file into a grid of columns and rows filled with pixels, in other words, to take vector information and convert it into bitmap information. Options include Width and Height (in various units), Resolution, Color Mode, Anti-aliased, and Constrain Proportions. Recall that vector images are resolution independent. You are given the opportunity to set your dimensions, resolution, and so forth before the vector data is converted to a bitmap. As a result, you could import it again and again for different projects that require larger versions. In our case, input a width of 120 pixels. If Constrain Proportions is checked, the Height field adjusts automatically. It is very important that proportions, particularly for logos, be maintained. Set Resolution to 72 ppi and Mode to RGB because we will be publishing the image to the Internet. Make sure Anti-aliased is checked to create smooth edges. {Click} OK. The image is converted to a bitmap and appears with a transparent background. You should recognize it from previous exercises.

Creating a Logo in Photoshop (con't) Examine the image. You'll notice that it is composed of solid colors and sharp edges. This type of image is typical of vector-based artwork. Notice also that unlike opening a bitmap image, which defaults to a “Background” Layer, vector images default to “Layer 1" with the image data surrounded by transparency. Rename the Layer “kimonoGirl”. Adding a Vector Shape Our next step involves adding the components that will make up the completed logo. In this case, we’re going to start by making the canvas of the Image Window larger. To so, select Image/Canvas Size. The Canvas Size dialog box appears. Input a Width of 350 and a Height of 300 pixels. Note the Anchor section. By {Clicking} on the various Arrows you can change the orientation that the canvas expands to. We want it to expand evenly on all sides so we accept the default centred orientation. This is a quick way of changing the size of the canvas or Image Window without modifying the size of pixel content. We could have just as easily created a new image and dragged the image of the kimono girl into it. Adding a Vector Shape (con't) You should have an Image Window that looks like this: Next we are going to change the scale of the kimono girl and add a Shape to mimic the rising Sun. If you wish, you can open travelLogo.psd and work with that file. Creating a Logo in Photoshop Select Edit/Free Transform (make sure you have the Layer and Move Tool selected.) {Click} the Maintain Aspect Ratio button and change the scale of the kimono girl to 63% (see “Transforming Layers”.) Select the Ellipse Tool and set a Fixed Size of 145 x 145 (see “Fixed Size” on page 188.) Make sure the color is red (R: 203, G: 37, B: 37.) {Click} in the Image Window. The Ellipse appears. Name the Layer “risingSun” and rearrange the Layers so that the kimono girl appears on top of the rising Sun. Position both elements so they appear in the Image Window as follows (approximately): Creating a Logo in Photoshop Select the “risingSun” Layer. Make sure the Foreground Color is still red and the Background Color is pure white (R: 255, G: 255, B: 255.) Add a Gradient Overlay to the Ellipse (Gradient Overlay is a Layer Style) using the following settings: • Blend Mode: Normal • Opacity: 100 • Gradient: Foreground to Background • Reverse: Checked • Style: Linear • Align with Layer: Checked • Angle: 90 • Scale: 100 • {Click} OK. The image should appear as follows: Creating a Logo in Photoshop Next select the Horizontal Text Tool. Set the font to Verdana, Bold, 90 pt, Smooth, and White for the color. Input a capital “T”. Apply a Stroke (another Layer Style) to the text. Use the following settings: • Size: 3 • Position: Outside • Blend Mode: Normal • Opacity: 100 • Fill Type: Color • Color: Black (R: 0, G: 0, B: 0) Place the Type Layer in between the “kimonoGirl” and “risingSun” Layers. Position

it like this (approximately): Creating a Logo in Photoshop Next, select the Horizontal Text Tool and change the color to black and the size to 60, but keep the same font (if you still have the Type Layer you just created selected, you will change the settings of that Type Layer, make sure to select a standard Layer first.) Input “ravel” and position it accordingly: Next, set the Tracking to - 80 (see “Tracking” on page 141.) Create two new Type Layers, one with the letter “J” with the same settings as the letter “T” except the color will be (R: 204, G: 51, B: 51), and one black, with “apan” (same settings as the “ravel” Type Layer, including the Tracking.) Position them accordingly: Creating a Logo in Photoshop Next, you should Crop the image as tightly as possible. In addition, let’s add a Drop Shadow to the kimono girl with the following settings: • Blend Mode: Multiply • Opacity: 75 • Angle: 120 • Use Global Light: Checked • Distance: 5 • Spread: 0 • Size: 5 • Contour: Linear • Anti-Aliased: Checked • Noise: 0 • Layer Knocks Out Drop Shadow: Checked Go ahead and do so and save your image if you like. For the next section, we’ll all use the same image. Saving for the Internet: Image Optimization Options Once you have created your image as desired, it’s time to save it for the Internet. To do so within Photoshop, select File/Save for Web. The Save for Web dialog-box appears. 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 3 at a time.) A set of Hand, Slice, Magnification, and Eyedropper Tools, and Image Compression Options (Image Type, Color Reduction, 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. Preview Windows Select from Original, Optimized, 2-Up, and 4-Up to see various versions or your image in the Preview Windows. You'll be applying various compression and file-type settings to your image. Photoshop gives you a real-time preview of what the image looks like with a particular set of compression options in contrast to the Original version of the image (the Photoshop native, uncompressed version.) {Click} on the 2-Up Tab. Two (2) Preview Windows result, one titled “Original” in the Info Bar at the bottom, which includes the File Size, and one titled with the currently selected Image Compression options, including File Type, File Size, Projected Download Time, Dither percentage, Palette, and Number of Colors. Depending on your current Image Compression options the new version of the image should be dramatically smaller

than the native Photoshop version. This Preview Window displays the image as a GIF. Note the information in the Info Bar. Compression Options Photoshop has numerous Compression Options you can apply to an image to prepare it for the Internet. Select from a list of pre-set Compression Options by selecting Settings which include GIF, JPEG, and PNG variations. At this point PNG is not fully supported by the browsers. Most of the newer browsers will support displaying PNG files, but may not support the Transparency features. Its highly recommended that you test any use of PNG files before you commit to using the format. There are a few things to consider when selecting an appropriate compression option: • Nature of the Image: Solid Colors, Sharp Edges, Photograph • Target Audience Bit-Depth: 8-bit display or higher? • Target Audience Bandwidth: Low, Medium, or High? If the image is made up of predominantly solid colors and sharp edges, such as the image we are working with, then GIF is the best format because file size will be significantly smaller than using JPEG. JPEGs are 24bit images with over 16 millions colors and are much more suited to photographic images which tend to be made up of a wide variety of colors, tones, and little, if any, patterns. Compression Options (con't) Select each of the pre-set GIF Compression Options and examine the image and the image size. When you can, it's advisable to use the Web-Safe Color Palette to ensure that people using 8-bit displays see the image as you do. More and more users have 24-bit color displays so the Web-Safe Color Palette is becoming less of an issue than they were in the past. We will, however, employ them in this example to see how they work. Select GIF Web Palette from Settings. You'll notice that certain colors shift slightly from the original (the face, the obi (sash), and fan.) In addition if you examine the Gradient, you can see banding (a series of different color stripes) rather than a gradual shift from one color to another. In many cases, when you are creating images of this type that are not logos these color shifts are acceptable. However, your client may not agree to slightly different colors for a logo. At present, if you examine the Color Table you'll notice that there are only 37 (this number may vary slightly) colors in the compressed version of the image. To adjust these settings, such as adding more Web-Safe Colors you'll have to build Compression Options yourself. Building Compression Options for GIF and PNG-8 If none of the pre-set Compression Options is useful to you, you can customize options by using the drop-down settings. The following options are available for GIG and PNG- 8: Optimize Menu, Image Type, Color Reduction, Dithering, Dithering Level, Lossy, Colors, Matte Color, Transparency, Transparency Dithering, Transparency Dithering Amount, Interlaced, and Web Snap. Building Compression Options for GIF and PNG-8 (con't) Image Type Select from GIF, JPEG, PNG-8, and PNG-24 for the Internet. In this case, we would select GIF because of the nature of the image. If you select JPG or PNG-24 the Compression Options will change. Lossy (for GIFs only) Lossy compression discards data from the image to reduce file size. The higher the Lossy value the more data lost. Usually the higher the value the more the image itself degrades. Try it out and examine the results. Note that this option will not be available if you select particular Dithering options or if Interlaced is checked. Color Reduction and Colors Select from the following Color Reduction algorithms: Perceptual, Selective,

Adaptive, Web, Custom, Black & White, Grayscale, Mac OS, and Windows. For the Internet, Perceptual, Selective, Adaptive, Web are the most common. The Colors option works in tandem with Color Reduction. You can select or input the number of colors you wish to use depending on the selected algorithm. The Auto option appears in Colors when the Web algorithm is selected. Both Photoshop and ImageReady will attempt to use the least amount of colors possible to maintain the highest quality. You are free to change the amount of colors yourself. Select each option and examine the results for our image. Note the colors in the Color Table. Building Compression Options for GIF and PNG-8 (con't) Dithering and Dither Level Dithering encompasses a variety of techniques to simulate color that cannot be generated or is not available (GIF can only support a maximum of 256 colors.) You can select from the following Dithering methods: No Dither, Diffusion, Pattern, and Noise. Dithering creates patterns to trick your eye into seeing colors that are not there. The Diffusion method is the least noticeable. You can also modify the level of the Diffusion method by increasing or decreasing the value of the Dither Level. Select each method and examine the effect they have on our image. Our image with No Dithering selected using the Web-Safe Color Palette. Our image with Pattern Dithering selected using the Web-Safe Color Palette. Building Compression Options for GIF and PNG-8 (con't) Transparency and Matte Check Transparency if you wish to generate a Transparent GIF. By default, any transparent area in the Photoshop file will be transparent. The Transparency in GIF images can produce images with rough edges. You can use the Matte options to select a color to which the edges can be Anti-aliased to (with Transparency enabled or not.) Select from None, Eyedropper Color, White, Black, or Other. You can use the Eyedropper Tool in the Save for Web dialog box to sample a color from the image. Selecting Other launches the Color Picker. Transparency Dithering and Amount Use Transparency Dithering to set the Dithering for partially transparent pixels in PNG-8 images. Use Amount to control the level of Dithering. Interlace If you check Interlace the GIF image will appear to download faster as a broken-up or low resolution version of the image is displayed until the full image has been uploaded. Be aware that it does increase file size. Building Compression Options for GIF and PNG-8 (con't) Web Snap Increasing the value of Web Snap will cause colors to shift closer to the Web-Safe Color equivalents. Using Web Snap is not necessary if you’ve selected Web for Image Type. For our image use the following settings: • Image Type: Gif • Color Reduction: Perceptual • Dithering: No Dither • Transparency: Unchecked • Lossy: 0 • Colors: 256 • Matte: White • Web Snap: 0 Building Compression Options for GIF and PNG-8 (con't)

If these are settings you’ll use frequently, {Click} the Optimize Menu and select Save Settings. Name your settings appropriately. Otherwise, {Click} Save. Save your image as studentTravelLogo.gif. Now its ready to be used in a web site. If you like, you can load our version, travelLogo.gif to view it. Note Usually, you save your Internet-ready image to the appropriate folder within your web site. When you are done saving the optimized version of the file, you are returned to Photoshop where you can continue to work on the image. At this point you should save the image because the optimization settings you selected are saved with it as well. Keep a copy of your original Photoshop file, also referred to as the Production file. Make changes to this file and re-optimize the image for the Internet after you’ve made your changes. Building Compression Options using JPEG JPEG or PNG-24 images are usually photographic images, due to the complexity of a photograph and the number of potential colors. You can use GIF or PNG-8 compression methods with photographic images and still get good visual results, but the file size tends to be quite large. Let’s examine compression options for photographic images. Building Compression Options using JPEG (con't) Select GIF for Image Type and try out the various settings you tried with logo image we created. Note the file size of the compressed version of the image and the color banding that can occur. Next, select JPEG from Image Type. The optimization options change from those we had with GIF. Options include Compression Quality, Quality, Progressive, ICC Profile, Optimized, Blur, and Matte. Building Compression Options using JPEG (con't) Compression Quality and Quality Compression Quality and Quality are really the same thing. With Compression Quality you can select from Low, Medium, High, and Maximum. Each setting will change the value of Quality. The value of Quality affects both the file size and visual quality of the image. Lower values reduce both and higher values increase both. You have to test various Quality levels until you strike a balance between file size and appearance. Progressive Check Progressive to force the image to be displayed in steps or progressively in a browser. This will give users the ability to see a low-resolution version of the image as it loads. This feature is not supported by all browsers. Building Compression Options using JPEG (con't) ICC Profile Check ICC Profile to embed the ICC Profile with the file. Some browsers may support color correction and in future perhaps all browsers may support this option. This option will increase the file size slightly. Consult Photoshop Help or your Photoshop manual for more information on setting up color management. Optimized Check Optimized for maximum compression. Older browsers may not support this option. Blur At times, adding a very slight blur to the compressed image helps to reduce the file size and mask compression irregularities or artifacts (the lower the Quality value the more artifacts you may see, such as banding and corrupted areas within the image.) This is identical to apply a Gaussian Blur Filter to the image. Set Quality to 10 and examine the sky around the edge of the structure. You should see compression artifacts. Building Compression Options using JPEG (con't) Matte

Because JPEG does not support Transparency, you’ll need to specify a color to fill any transparent or partially transparent areas with. Use Matte to do so. Go ahead and try various settings and examine the results. Use the Hand Tool in the Save for Web dialog box to move the image around within the Preview Window. When you’re done, select the following settings (but do not press OK yet): • Optimized: Checked • Quality: 30 • Blur: 0 • Matte: None • Progressive: Unchecked • ICC Profile: Checked Building Compression Options using JPEG (con't) Matte (con't) Examine the file size: 56.85k in our case. Still rather large. This is due to the fact that dimensions of the image itself are rather large. Reduce the dimensions, reduce the file size. Recall that you want to keep the original in its original form. Rather than reducing the scale of the original image, simply select the Image Size tab beside the Color Table tab. Our original image is 500 x 668 pixels. Let’s reduce the dimensions by inputting a different Width or Height into the appropriate field in the New Size area. Alternately, you can input a percentage value into the Percent field. By default, the proportions are constrained to maintain the aspect ratio of the image. To disable, uncheck Constrain Proportions. Building Compression Options using JPEG (con't) Matte (con't) You can also select a Quality setting for Image Interpolation (see “Interpolation”.) Input 200 in the Width field or 40 into the Percent field and {Click} Apply. The file size has been reduced from 56.85k to 11.27k. {Click} Save. Save the file as studentMiyajima.jpg. If you like, you can view our version by loading miyajima.jpg. miyajima.jpg There you go! You’ve just created two (2) Internet-ready images. But that is only the beginning. You’ll need to experiment with a number of images to get to know how the compression options operate with different images (differences in colors, content, and so forth.) Try out the images included in the exercises.

Chapter 10 - Basic ImageReady Creating a Banner Banners are usually a means of advertising via web sites. Historically, banners have been positioned in a horizontal orientation at the top of web pages. However, as is often the case with the Internet, things have changed. Designers have begun to position banners in a number of different areas, but predominantly on the right side of web pages in a vertical orientation. Regardless of the orientation and position, companies arrange to have their banners placed on other web sites to promote their product or service. For example, we could say that Travel Japan wants to draw users to their web site by advertising on Yahoo, most specifically the section listing Travel-based web sites. Viewers who visit that section of Yahoo may {Click} on the banner and visit Travel Japan’s site. 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. Banners with a horizontal orientation usually use these standard specifications: • 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. Developing the Banner Creating a static Banner is simply a matter of creating an image within 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. Examine the finished product: Developing the Banner (con't) The first step is to create the banner file itself: 1. Create a new image at 468 x 60, 72 ppi, transparent background. 2. Open logo.psd. logo.psd We need to place a copy of the Travel Japan logo into our banner. There are a few techniques we could use to move the image information from logo.psd to our banner. In this situation its easiest to use the main menu or keyboard shortcuts: 3. Choose Select/All or [CTRL + C] and then Edit/Copy Merged or [CTRL + SHIFT + C]. Copy Merged makes a copy of all the visible image data across all the Layers within the image.

4. Select the banner Image Window. Create a new Layer and call it “logo”. 5. Paste your selection into the banner image. 6. Clearly the logo is too big. You’ll need to reduce the scale and position it accordingly. Reducing the scale by 35% makes for a good size (see “Transforming Layers”.) Developing the Banner (con't) Next we should create the background of the banner. 7. Open miyagate.psd. miyagate.psd 8. 9. Create a selection around the Gate and copy it. For your convenience a selection is saved with the document. Feel free to use it if time is an issue. 10. Create a new image and paste your selection to it. When you make a copy of image data in Photoshop and then create a new image immediately afterward, the dimensions of the new image will automatically match the dimensions of the image data you copied. 11. Make your Foreground Color the same red as that of the Rising Sun in the logo and your Background Color white. Select Image/Adjust/Gradient Map. The Gate should now be two colors. Select Filter/Sketch/Graphic Pen and apply the filter with the default settings. 12. Use the Move Tool to move the Gate into the banner. Name the Layer “gate” and reduce the scale by 50%. Position it according to the example above. 13. Make sure the “gate” Layer is selected. Select Image/Adjustments/Brightness/Contrast. Reduce Brightness by -15 and increase Contrast by +25. Developing the Banner (con't) At this point, the banner image should appear like this: Next, we need to add the Type. 13. Select the Horizontal Text Tool and input “See Tokyo this Summer” Use the following settings: o Font: Verdana o Style: Bold o Size: 23 o Anti-Alias: Crisp o Color: White 14. Use the Stroke Layer Style to add a black, 2-pixel wide (outside) stroke to the text. Position it according to the example above. 15. Repeat steps 13 and 14 using this text “and save”. 16. Create another Type Layer. Input “50%”. Use the following settings: o Font: Verdana o Style: Bold o Size: 30 o Anti-Alias: Crisp o Color: White 17. Use the Stroke Layer Style to add a red (R: 205, G: 51, B: 51), 2-pixel wide (center) stroke to the text. Position it according to the example above. Developing the Banner (con't) That’s it, you’ve created a static banner. Your next step is to save it for the Internet using the techniques we covered previously (see “Saving for the Internet: Image Optimization Options”.) In our case, we’ve chosen to save the banner with the following settings: • Image Type: GIF • Color Reduction: Perceptual • Dithering: No Dither • Transparency: Unchecked • Interlaced: Unchecked

• Lossy: 0 • Colors: 64 • Matte: White • Web Snap: 0 The resulting file size is 8.5k. Developing the Banner (con't) If you like, open staticBanner.psd and travelBanner.gif to view our versions of the images. staticBanner.psd travelBanner.gif Our next step is to use ImageReady to build an animated version of our banner. Load animatedBanner.psd. animatedBanner.psd This is a different banner, with a vertical orientation. It is advertising special rates for travelers who visit particular cities during particular months. We’re going to move the pointer or arrow around to inform users that they should {Click} on a city to select it for more information. Moving from Photoshop to ImageReady and Back As you produce images for the Internet, you may find you prefer to produce them initially in Photoshop before moving to ImageReady to use its unique web-specific features. Conversely, you may find you prefer to use ImageReady to produce your images, shifting to Photoshop to use some of its unique features when necessary. Regardless, moving from one application to another simply involves selecting the Image Window you wish to move from one to the other and then {Clicking} the Jump to Image Ready (from within Photoshop) or Jump to Photoshop (from within ImageReady) button at the bottom of the Toolbox. Select the animatedBanner.psd Image Window and press the Jump to Image Ready button. ImageReady is launched and animatedBanner.psd is opened with it. The ImageReady Environment The ImageReady environment or workspace should be immediately familiar to you because there are many similarities to Photoshop’s. Examine the Image Window. Note how it contains Save for Web tabs in the form of Original, Optimized, 2-Up, and 4Up, just as in the Save for Web dialog box in Photoshop (see “Preview Windows” on page 203.) 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. Color in ImageReady One of the things you may notice is that the colors in the image may have changed. By default, ImageReady works with color that is uncompensated. If you have setup Photoshop to use a particular set of color options then your images and the colors within them will have been using those color settings all along (see “Color Settings”.) Unfortunately, color profile support is not yet a standard within HTML or within all browsers, though that may change in future (support in Mozilla has already begun.) Developers like to keep their options open to repurpose images to other media. As a result, if you do use color profiles, very often within ImageReady you will have to adjust your color again so that you get a solid idea of what your images will actually look like when rendered by a browser on a client machine (see “Adjusting Images”.) To force ImageReady to work with a color profile, select View/Preview/Use Embedded Color Profile. However, at this time this is not recommended. Because of the poor current support for color profiles you may wish to keep ImageReady at its default. To set ImageReady back to its default select View/Preview/Uncompensated Color. Adjustment options for color are similar, though not as robust, as those in Photoshop.

Fundamental ImageReady Features As we continue through the remainder of the manual we will be examining the features unique to ImageReady in depth. You should keep in mind some of these fundamental features: The only Color Modes available are RGB and Grayscale. • You cannot produce images with a ppi value higher than 72 (you can work with images from Photoshop with higher ppi values, but you will not be able to create images within ImageReady with higher values.) • There are significant differences between the ImageReady Toolbox and the Photoshop Toolbox. • The Navigator Palette is replaced by the Optimize Palette. • There is no Channels Palette in ImageReady. • Palettes unique to ImageReady include: Animation Palette, Image Map Palette, Slice Palette, Rollovers Palette, Color Table Palette, Layer Options Palette. • For Type Size, the only available unit is pixels. As you work with ImageReady and Photoshop together, you’ll find that for particular objectives, you’ll have to move back and forth between the two applications. Let’s look at how we can animate elements within our banner. Creating an Animated GIF An animated GIF is a GIF that basically consists of many GIF images in one. Animation is the process of rapidly presenting a sequences of individual frames where the content of each frame changes in some way to create the illusion of motion. To create an animated GIF in ImageReady, we assemble each of the elements required and then work with the Animation Palette. The more frames you use in your animations the smoother the result. However, you’ll quickly see how large animated GIF files can become which is one of the reasons technology like Macromedia’s Flash has become the most popular method of animation on the Internet. The Animation Palette Make sure the animatedBanner.psd Image Window is active and that you have selected the Original tab. You have to work in the Original mode to build your animation. Select the Animation Palette by {Clicking} on the Animation Tab. You should see a single frame (by default) which consists of a thumbnail of your image. Building an Animation In animation, its a good idea to plan out what you want to occur. In this case, we want the cursor to begin beside Kobe and move to Kyoto, then Osaka, and finally off the image itself. Select the “pointer” Layer and move the pointer just below “February” and beside “Kobe”. Next, we need to add another frame. To do so, {Click} the Duplicate Frame button. A new frame is added to the Animation Palette. It is an exact duplicate of our first frame. Building an Animation (con't) You can think of each frame in the Animation Palette as displaying the current status of every element within your image. To change the position of an element such as the cursor, we simply select a frame in the Animation Palette and change our image accordingly. Let’s try it out: 1. Select the second frame and then select the “pointer” Layer. 2. Move the pointer just below the word “March” and beside “Kyoto”. Now {Click} back and forth between the first and second frames. Note how the position of the pointer changes. Building an Animation (con't) In the typical animation process, these frames would be referred to as Key Frames. That is, each frame illustrates a key event or moment in time. In this case, the pointer moves from Kobe to Kyoto. It does not do so smoothly however. At the moment the pointer simply jumps from one position to another. To make the motion smooth we’ll need to add frames between these two Key Frames. The frames between

Key Frames are traditionally referred to as In-between Frames. ImageReady will automatically create the In-between Frames for us. In ImageReady the process of building In-between Frames is referred to as Tweening. Let’s add two In-between Frames between our Key Frames: Select both frames in the Animation Palette (hold [SHIFT] and {Click} on each frame.) 3. {Click} the Tweening button. 4. The Tween dialog box appears. The Tween dialog box consists of the following options: Tween With, Frames to Add, All Layers or Selected Layers, and Parameters (Position, Opacity, and Effects.) Building an Animation (con't) Tween With Select from Selection, Next Frame, or Last Frame to designate which frames you wish to Tween with. Frames to Add Designate how many In-between Frames you wish to add. In our case select 2. Layers Check Layers to Tween all Layers or check Selected Layer to Tween only the currently selected Layer. Parameters Check Position, Opacity, or Effects to Tween any of these parameters. Position will modify Tween changes in the position of an element, such as our cursor. Opacity will Tween changes in opacity of an element, and Effects will Tween changes in Layer Styles. In our case use the following settings: • Tween With: Selection • Frames to Add: 2 • All Layers: Checked • Position: Checked 5. {Click} OK. Building an Animation (con't) Now {Click} through each frame and note how the cursor’s position has automatically been modified for us. You can {Click} the Play button to view the animation. It should loop and move rapidly. We can adjust the speed if we like, and will do so in a moment. First, we should continue to create Key Frames and Inbetween Frames for the remainder of the animation and then tweak the pace. 6. Select frame 4. 7. Duplicate frame 4. 8. Select frame 5. 9. Make sure the “pointer” Layer is selected and move the cursor just below “April” and beside “Osaka”. 10. Select both frame 4 and frame 5. 11. {Click} the Tweening button and use the following settings: o Tween With: Selection o Frames to Add: 2 o All Layers: Checked o Position: Checked Building an Animation (con't) 12. {Click} OK. 13. Select frame 7. 14. Duplicate frame 7. 15. Make sure the “pointer” Layer is selected and change the opacity of the Layer to 0%. 16. Select both frame 7 and frame 8. 17. {Click} the Tweening button and use the following settings: o Tween With: Selection o Frames to Add: 2

o All Layers: Checked o Opacity: Checked 18. {Click} OK. Building an Animation (con't) You should have a total of 10 frames. {Click} the Play button to view the animation. It should be obvious that we will need to tweak the timing of the animation. We want the cursor to stop for a moment as it reaches each city and we want to reduce the pace at which it moves. To do so, we need to select each frame in turn and change the Frame Duration accordingly. {Click} the drop-down arrow and select one of the pre-set durations or input your own (Other.) Building an Animation (con't) 19. Select the following settings for each frame: o Frame 1: 2 seconds o Frame 2: 0.1 second o Frame 3: 0.1 second o Frame 4: 1 second o Frame 5: 0.1 second o Frame 6: 0.1 second o Frame 7: 1 second o Frame 8: 0.1 second o Frame 9: 0.1 second o Frame 10: 2 seconds Building an Animation (con't) View your animation. It’s simple but now the pace should be improved. By default, the animation loops forever. We only want it to play once: 20. Select Once from the Looping Options drop-down. Note that Other allows you to input how many times you want a GIF animation to loop. Viewing the animation within ImageReady does not always give you an accurate representation. You need to view the GIF in a browser. Before doing so, let’s select the Optimized tab and set our Optimization options. In ImageReady, you can set Optimization options just as you do in Photoshop (see “Compression Options”.) With ImageReady, you use the Optimize Palette. Building an Animation (con't) 21. Select the following settings: o Image Type: GIF o Color Algorithm: Perceptual o Dithering: Diffusion o Dither: 100% o Lossy: 0 o Colors: 64 The resulting file size should be approximately 25.8k. Building an Animation (con't) To view the GIF in a browser, {Click} the Preview in Default Browser button on the Toolbox or select File/Preview In and select your default browser or other. Building an Animation (con't) A temporary HTML file is generated and displayed in your default browser, complete with a summary. Building an Animation (con't) At this point, we have completed the animation for this GIF image. It’s always a good idea to save a work in progress. If you wish, save your file (select File/Save As) and call it what you wish (except for animatedBannerFinished.psd.) Using File/Save As, you are saving the native Photoshop document (.psd.) Saving the optimized version of the image in ImageReady is a little different than in Photoshop because we do not use or have the Save for Web option. In ImageReady, to

save the optimized version of the file select File/Save Optimized As. We don’t need to do that just yet because we haven’t completed working with this GIF. For now, after you’ve saved your file (if you did), load animatedBannerFinished.psd. Examine this file if you’d like to see the version we completed. animatedBannerFinished.psd Next, we’re going to make an Image Map in ImageReady so that users will be directed to the correct city when they {Click} on the city of their choice. Image Maps in ImageReady An Image Map is an HTML technique whereby a single image is used to link to or navigate to multiple web pages (or any kind of valid link through the web.) This is accomplished by using the Map tag and its associated attributes and tags to define areas of the image that are referred to as hotspots. As a web developer, it will be up to you if you use ImageReady solely to generate images, to develop images and HTML code, or a combination of both. You may wish to code an Image Map yourself or in an authoring package such as Macromedia’s Dreamweaver MX. The choice is yours. Regardless of the method you prefer, we’ll examine how an Image Map is created from within ImageReady itself. Image Maps in ImageReady (con't) This image is very similar to the banner we just worked on. However, the text “Choose City” has been removed from the bottom of the image and their is no animation. We want to use this image as a jump point to specific pages for each city. We’ll give a potential customer the ability {Click} on the Kobe, Kyoto, or Osaka area and be directed to the specific page for more details. Of course, this type of banner is intended to be hosted on another site and links to the Travel Japan site. However, for this example, we’re going to link to some local pages. It helps to know where, within your site structure, these particular pages are found and where the banner page is relative to these pages if you’re using document relative links. For the purpose of this procedure we are going to link to the following pages in a folder that sits at the root level of the site folder called promotions: • february.htm • march.htm • april.htm Image Maps in ImageReady (con't) The promotional banner will only appear in the example page of the site, called adBanner.htm. Using relative paths, our links within our Image Map would use the following path (in x.htm x refers to the applicable month): promotions/x.htm A site relative path would appear as follows: /promotions/x.htm We’ll use a document relative path to test out the links within our folders on our harddrive. A site relative path requires a server to resolve the link properly. The Rectangle Image Map Tool To create an Image Map in ImageReady we use one of ImageReady’s unique Tools, the Rectangle Image Map Tool (just below the Lasso Tool) and/or the related Tools, the Circle Image Map Tool, the Polygon Image Map Tool, and the Image Map Select Tool in combination with the Image Map Palette. The Image Map Tools The Rectangle Image Map Tool (con't) If you {Click} the Tear Off Bar, ImageReady creates a separate Tear Off Palette that houses the associated files. The Image Map Tools in a tear off. Select the Rectangle Image Map Tool and draw a rectangle around the “February” and “Kobe” area.

A rectangular Image Map is created. The Rectangle Image Map Tool (con't) Enable the Image Map Palette and examine it: The location (x,y) and dimensions of the Map itself (w,h) are displayed. In the Name field you can input a name for Image Map Area. In our case, we’re going to use the city names. For the URL, input “promotions/kobe.htm”. If we we’re using a Frames based page, we could input a target name in the Target field or select the standard HTML target options (such as _blank to launch a new browser window with the page we’re linking too.) In the Alt field we can input content for the alt tag. In this case we’ll input “Kobe: save 30%”. The Rectangle Image Map Tool (con't) Repeat the process for the “March” and “April” areas. The following settings should be used for each area: Kobe • Name: Kobe • URL: promotions/kobe.htm • Target: n/a • Alt: Kobe: save 30% Kyoto • Name: Kyoto • URL: promotions/kyoto.htm • Target: n/a • Alt: Kobe: save 30% Osaka • Name: Osaka • URL: promotions/osaka.htm • Target: n/a • Alt: Kobe: save 30% Before we optimize the image and export it together with an HTML file, let’s make a change to the image and explore moving back and forth between ImageReady and Photoshop. Moving between ImageReady and Photoshop Let’s add the doll’s face we worked on when we explored the Pen Tool (see “The Pen Tool”.) In ImageReady, make sure you still have your Image Map file open and open dollFace.psd as well. dollFace.psd This image comes complete with a Path around the doll’s face, but we cannot access that Path in ImageReady to convert it to a Selection so that we can copy the face into our banner. We need to go to Photoshop to use the Path information. {Click} the Jump to Photoshop button at the bottom of the Toolbox. You will be switched back to Photoshop. Convert the Path into a Selection and then save the Selection (see “Load Path as a Selection”.) Switch back to ImageReady. In ImageReady, load the Selection and cut and paste it into the banner image. Name the Layer “face”. Place the face at the bottom of the banner. Moving between ImageReady and Photoshop The face is a little to large, so we’ll need to reduce the scale of the face. If you select Edit/Free Transform (or [CTRL + T]) note how the Options Bar in ImageReady differs from that of Photoshop. The Options Bar floats in the ImageReady environment, the units for changing scale are in pixels, and not all of the options we had in Photoshop are available to us, such as the Uniform Scale button. Transform Options in the ImageReady Options Bar.

Moving between ImageReady and Photoshop (con't) You could manually transform the face, holding [SHIFT] to constrain, or move back to Photoshop to use its transformation options. To match our scale, position, and rotation, input the following values: • x: 102 • y: 348 • w: 55.9 • h: 66.7 • rotation: -20.8 • horizontal skew: 0 • vertical skew: 0 Finally, let’s add a Layer Style, specifically, the Outer Glow effect. Select the Layer and add an Outer Glow to it, just as you do in Photoshop. You’ll discover another difference between Photoshop and ImageReady. ImageReady has a Layer Options Palette. The Layer Options Palette In ImageReady, the properties of a Layer are modified using the Layer Options Palette. For example, we’ve just added a Layer Style to the “face” Layer. If we examine the Layer Options Palette, we’ll be able to modify the settings for the Outer Glow effect we’ve just added. The contents of the Layer Options Palette change depending on what part of the Layer you have selected. When you have a Layer Style selected, the options for the Style you’ve selected appear. When you have a Layer selected, the Fill Opacity option appears. The Layer Options Palette (con't) Use the following settings: • Blend Mode: Screen • Opacity: 35 • Gradient: Foreground to Transparent • Color: White • Noise: 0 • Technique: Softer • Spread: 15 • Size: 30 The Layer Options Palette (con't) Now we’re almost ready to save the image and the accompany HTML with our Image Map code. Your image should appear as follows: The Layer Options Palette (con't) You’re hotspots may have disappeared. The visibility of hotspots can be toggled {Clicking} the Toggle Image Maps Visibility button in the Visibility Toggle area of the Toolbox. You can also toggle the visibility of Slices (which we cover in the next chapter) by {Clicking} the Toggle Slices Visibility button. You may find it helpful to see your hotspots again if they’ve become invisible. For optimization, use the following settings: • Image Type: GIF • Lossy: 0 • Color Algorithm: Perceptual • Colors: 64 • Dither: Diffusion - 100% Saving an HTML File and an Image Together in ImageReady Now we’re ready to export both the image itself as well as the accompanying HTML. Select File/Save Optimized As. Navigate to the website folder in the chapter010 folder of photoshop7xfiles. For File name, input “imageMap”. For Save as type, it is essential that you select HTML and Images when saving both the image(s) and the accompanying HTML file. If you need to save the image(s)

only, select Images Only. If you need to save the HTML only, select HTML Only. We need to explore the HTML options when saving an HTML file and an image together. Saving an HTML File and an Image Together in ImageReady (con't) The next option is Settings. By default, Default Settings is selected. To set your own parameters, select Other. The Output Settings dialog box appears. Categories Select from HTML, Slices, Image Maps, Background, and Saving Files. Each category has a set of unique parameters, some of which you will have to be familiar with HTML tags to fully understand. HTML Options HTML options include Formatting and Coding. Under Formatting you can change the case of the tags and attributes that ImageReady generates. In addition, you can format the layout of the code by selecting an Indent option. Finally, you can set the type of Line Endings in HTML. Under Coding you have a number of checkboxes to toggle the available options on or off. Checking Include Comments places comments in the code that identifies the generator of the code as ImageReady. Select each of the options to fit the manner in which you code HTML. We recommend that you check Always Quote Attributes as this is an HTML rule that should always be adhered to. Slices We haven’t looked at Slices yet. We’ll be examining them in the following chapter. Image Maps Image Map options include Type and Placement. For Type, select Client-Side, which is the standard manner in which Image Maps are used in web development today. For Placement select Bottom. Again, it is a de-facto standard that Image Map code is placed at the bottom of an HTML document, within the set of tags. Background The Background category allows you to set options for the background properties of your HTML document. Select Image if you want the background to your HTML page to use either an image or a solid color for the background. You can set the image that will act as your tiled background by inputting the path to the background image itself in the Path field. To set a background color other than the one in your document, select it from the BG Color menu. Checking Background makes the optimized image the tiled background image of your web page. Saving Files The options for Saving Files include File Naming, Filename Compatibility, and Optimized Files. For File Naming, 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. For the most part, these options relevant when using Slices and Rollovers. We will cover these in the following chapter. Filename Compatibility Leave each option checked for maximum filename compatibility with multiple Operating Systems. Note that using file names over 31 characters may be truncated. Optimized Files There are three options available that affect how optimized files are saved. Check Put Images in Folder if you wish the images you are saving to be saved to a particular folder. For example, you will be saving the file imageMap.html into the

website folder. By checking this option, ImageReady will create a new folder called images (or whatever you specify) in the website folder if one does not already exist. At anytime, if this option is checked, images will be saved into the designated folder within the folder you specify when you save the image, images, and/or HTML files themselves. For now, check this option. If you have designated that a background image be used, check the Copy Background Image when Saving option. We do not need to do this. If we had, the image we specified would be copied into the folder specified above. Include Copyright If you have input copyright info for your image(s) (by selecting File/Info) checking the Include Copyright option will include the information. {Click} OK. The Output Settings dialog box disappears. We are returned to the Save Optimized As dialog box. {Click} Save. Your image is saved as imageMap.gif in the images folder inside the website folder and an HTML file called imageMap.html is saved within the website folder. Exit Photoshop and navigate to the website folder in the chapter010 folder. {Double-Click} imageMap.html and try it out. You can also {Double-Click} imageMapComplete.html to view our version. If you like, you can view imageMapComplete.psd within ImageReady to view our version of the file.

Chapter 11 - Advanced ImageReady

Slices One of the most common techniques in web development today is the use of Tables, in HTML, for page layout. Content, such as text, images, and rich media are placed within Table cells to achieve your layout goals. Another common technique is to slice up a single image into distinct parts, primarily for two reasons. One, breaking up larger images tends to decrease download time as the HTTP protocol reportedly handles a series of smaller packets better than a single large packet. The second reason is for Rollovers. You may wish to keep the look of a unified layout, but need some elements of the image to change when the user passes the mouse pointer over particular areas. In other words, you have to slice up an image so that particular sections can have Rollover scripts applied to them. A basic Rollover involves switching one image for another when the user passes the mouse pointer over the image. When the mouse pointer is not over the image, the original image is displayed. Slices (con't) When we built our Image Map for our promotional banner, the only visual indicator that each city (Kobe, Kyoto, and Osaka) was a link was the mouse pointer itself (see “Image Maps in ImageReady”.) When you use Rollovers, you give the user a stronger visual indicator that this part of the image is a button that can be {Clicked} on to navigate to another page. In order to create Rollovers for our promotional banner, we need to slice the image up into distinct parts so that we can swap the city sections of the image with alternate images that indicate that each city area is a link. To slice up an image, we use the Slice Tool. The Slice Tool Select the Slice Tool to create Slices in your image. The moment you select the Slice Tool, a Slice indicator is displayed around your image in the Image Window. The Slice Tool (con't) Select the Slice Tool. Note how a yellow border surrounds the image in the Image Window with a grey box at the top left containing a number, 01, and an icon beside it. This is an Auto-Slice, a Slice that ImageReady automatically generates. In HTML terms, you can picture an Table housing your image. At this point, the Table consists only one column and row because we only have one slice, and therefore, one image. Slices are numbered from left to right, top to bottom. Use the Slice Tool to draw a box around the “February” area of the image, just along the top of the purple bar and just along the top of the green bar for “March”. The Slice Tool (con't) ImageReady adds another Slice. This is a User-Slice, distinguished by the blue box that contains the Slice number. Note how another Auto-Slice has been created to maintain the rules of HTML Tables. Furthermore, the image area within the current Slice is clear whereas the image areas below the two (2) Auto-Slices is slightly ghosted. This gives you a clear indication about which Slice or Slices (you can select multiple Slices if you like) is selected. Create two more Slices around the “March” area and the “April” area. Note how unselected User-Slices are not as ghosted as Auto-Slices. When you’re done, select the Slice Select Tool. The Slice Select Tool To select and modify existing Slices use the Slice Select Tool. Go ahead and {Click} on each Slice with the Slice Select Tool. Note how each Slice has handles that you can use, if necessary, to change the size of a Slice and move a Slice. You will have to experiment with rescaling and moving Slices around to get a feel for how Slices function. Its easy to place then are change them so that a number of different Auto-Slices are generated. If you drag any area of a User-Slice over

an Auto-Slice the Auto-Slice area gives way to the User-Slice area. For now, make sure you have five (5) Slices in total, two (2) Auto-Slices and three (3) UserSlices. Select the Slice Palette and select the “February” Slice with the Slice Select Tool. The Slice Palette Use the Slice Palette to set the Slice Type, Slice Name, Slice Background Color, the URL to navigate to, and the HTML Target. A thumbnail of the currently selected Slice appears in the Slice Palette. Type Select from Image (default) or No Image. When No Image is selected, the Slice Palette changes, replacing many of the options with a Text field into which you can input text that will appear in your web page should you save it from ImageReady. Check Text is HTML to use any tags you wish to format your text. Otherwise, any tags you input will appear in the browser as text. For example this line: <strong>Travel Japan Specials! Would appear thus in a browser if Text is HTML is checked: Travel Japan Specials! Otherwise, with Text is HTML unchecked, the text would appear thus: <strong>Travel Japan Specials! BG (Background Color) If a Slice has been designated No Image or if a Slice is over a transparent area of the image you can set the Background Color for the slice here. Name Slices are given a Name automatically, based on the name of the image and the number of the Slice itself. For example, our image is called slices.psd and our “February” Slice is numbered 02. As a result, the automatic Slice name is slices_02. When you save the optimized version, the Name becomes the actual filename of the image file itself. You should input your own Slice Name so that your web site doesn’t consist of a series of rather peculiarly named image files. URL If you wish to set your links within ImageReady, input the path to the link here. Target If you are targeting your links, select the target here. Input the following names for the Slices: • 01: bannerTop • 02: kobeFeb • 03: kyotoMarch • 04: osakaApril • 05: bannerBottom Toggling Slice Visibility Though this particular image contains only 5 Slices, sometimes you may have many more Slices for a particular image which may obscure the image itself, particularly when modifying it. You can toggle the visibility of Slices on and off by {Clicking} the Toggle Slice Visibility button, just as we toggled the visibility of hotspots for Image Maps (see “Image Maps in ImageReady”.) Optimizing Slices You have to keep in mind that essentially, when you have applied Slices to images the image remains a single image in ImageReady, but upon saving the optimized version, you are saving multiple images (equal to the amount of Slices in your image.) Using the Slice Select Tool, you can select each individual Slice and apply optimization settings to them. This can be very advantageous because now you can mix and match optimization techniques. Parts of the image that appear better as JPEGs can be optimized as such. Parts that appear better as GIFs (usually text and solid colors) can be optimized as such.

In our case, with this image, make sure each Slice is optimized with the following settings: • Image Type: GIF • Color Algorithm: Perceptual • Dithering: Diffusion • Dither: 100% • Lossy: 0 • Colors: 64 Optimizing Slices (con't) Preview the file in a browser ({Click} the Preview in Default Browser button) and take a look at the code. Note how the Slices translate into an HTML Table. Take note of the image names as well. They default to the name of the images is the name you gave each Slice. As a developer, you could cut and paste that code into your own HTML documents (or in the case of a banner, send it to the site hosting the banner.) Of course where you store your images may differ and thus any paths in the code may have to be adjusted. Save your image if you like (the .psd version). Creating Rollovers in ImageReady We needed to use Slices on our banner so that we could build Rollovers. Rollovers involve, at the very least, exchanging one image for another when the user passes the mouse pointer over a particular image. JavaScript is the most popular scripting language used to accomplish the effect. When you build Rollovers in ImageReady, the JavaScript is written for you and is included within the HTML file that you save at the same time as the images (see “Saving an HTML File and an Image Together in ImageReady”.) Again, how you use the JavaScript within your pages, or how you integrate it within your pages is up to you. Just as you may only cut and paste the Table code that is generated by Slices, you may have to selectively cut and paste elements of both HTML and JavaScript from the files that ImageReady generates. Creating Rollovers in ImageReady (con't) To create the Rollovers themselves, we need to take the following steps: 1. Create the image and optionally at this point, the Rollover elements of the image 2. Create the Slices 3. Create the Rollover elements within the image 4. Create the Rollover states We’ve create the image and we’ve create the Slices. Now its time to create the sections of the images that will appear when the user passes the mouse pointer over a particular image. In this case, we are going to place a black Stroke around the text. Creating Rollovers in ImageReady (con't) You can continue working on the image you’ve been working on throughout this chapter, or you open rollovers.psd. rollovers.psd Expand the “February” Layer Set and select the “February” Type Layer. Add a Stroke Effect to it, black, 2 pixels, outside. Do the same thing for the text in the “March” and “April” Layer Sets. You can just drag the Stroke Layer Style from the “February” Type Layer to the remaining Type Layers. You may find it useful to toggle Slice visibility. To review then, when the banner is viewed by a user, initially the text will not have a black Stroke around it, but when the user passes the mouse pointer over the text, the black Stroke will appear. Make sure that you toggle Slice visibility to visible and select the “kobeFeb” Slice with the Slice Select Tool. Using the Rollovers Palette Use the Rollovers Palette to build Rollovers in ImageReady. Select the “kobeFeb” Slice (02) with the Slice Select Tool. Examine the Rollovers Palette:

Using the Rollovers Palette (con't) At this point, the Rollovers Palette contains Rollover State thumbnails of each of our Slices, with the currently selected Slice highlighted, in this case “kobeFeb”. At the top of the Rollovers Palette a thumbnail of the entire image, labelled Normal is present. {Click} the Rollovers Palette Menu and select New Rollover State. A new thumbnail is added and indented, just below the “kobeFeb” Rollover State. It is labelled Over State. You now have two thumbnails that represent the image within the Slice as it appears in what is referred to as the Normal State. Using the Rollovers Palette (con't) Just as you do with frames when creating an animated GIF in ImageReady, you select a particular Rollover State and modify the image accordingly (see “Building an Animation”.) In this case, we want the Stroke to be invisible in the Normal State and invisible in the Over State. Select the Normal State and toggle the visibility of the Layer Style (in this case Stroke) to invisible. Select the Over State and toggle the visibility of the Layer Style to visible. Now, when you {Click} between the Normal State and the Rollover State the Stroke around the text appears and disappears. Using the Rollovers Palette (con't) Repeat the same procedure for the “kyotoMarch” and “osakaApril” Slices. Note You can add additional Rollover States to a Slice by selecting the Rollovers Palette Menu and selecting New Rollover State. Additional States include the Down State, the Selected State, and the Out State. If you wish to build complex Rollovers, you can use these additional States. Preview the file in a browser ({Click} the Preview in Default Browser button.) Pass your mouse over the images to test if the Rollovers work. Examine the code. Note the inclusion of both the HTML Table code as well as JavaScript to make the Rollovers possible. You’ve generated Rollovers with ImageReady, complete with the JavaScript. Issues and Techniques Now that you have used ImageReady’s advanced features to create Rollovers and Slices it’s up to you how you integrate both Photoshop and ImageReady into your web development workflow. Some designers prefer to develop Image Maps and Rollovers themselves, or with authoring packages such as Macromedia’s Dreamweaver. Others prefer to use ImageReady to things like Rollovers and then integrate the HTML and JavaScript into their own pages. We’re going to look at a couple of techniques you can utilize and some of the issues that occur when using ImageReady. Using ImageReady to Build a Page Layout Many developers turn to Photoshop or ImageReady to build the entire layout of the page, or at least all the graphical components. We’ve built the entire layout with some common elements for the Travel Japan site. Open webpage.psd. webpage.psd Toggle the visibility of Slices to visible if necessary and select Slice 11. Using ImageReady to Build a Page Layout (con't) With Slice 11 selected, examine the Slice Palette. Note how this particular Slice has been designated as No Image for Type, Text is HTML is checked, and some text, complete with HTML tags has been input into the Text field Preview the file in a browser. Note how the text is not at the top of the page. We do not have access to many of the tags and attributes for HTML Tables. As a

result, the text is in the correct area of the layout, but is vertically aligned in the center of the cell, which is the default alignment in HTML. Furthermore, ImageReady itself does not show us the text within the Image Window and the text, complete with attributes, can be difficult to edit within the Slice Palette. What ImageReady does particularly well in this situation is build the Table itself and export each image for us. Once we have all the images exported, and the layout built for us within a Table, we can move on to using them for each of our pages and editing them according to our needs. Slice Names and Multiple Images for Layout: Method A Select Slice 04 and examine the name of the Slice in the Slice Palette. The name is “title”. Next, expand the “titles” Layer Set (in the Layers Palette) and examine the Layers. Note how their are titles for different sections of the web site. For example, their are titles such as “Specials”, “Gallery”, “Contact”, and so forth. Each title is a graphic that corresponds to different pages in the web site. Because we will be changing the image that appears within this particular cell depending upon which page we are viewing, many developers build changing image elements according to position. For example, toggle the visibility of each Layer, making sure that only one Layer within this particular Layer Set is visible. Note how each title is aligned to the right and uses the same type design. Slice Names and Multiple Images for Layout: Method A (con't) The issue that we have when we do this is that we cannot assign the name of the Layer to be the name of the image file we export. In this case we have eleven (11) title images to optimize and save within our web site folder. Because the name of the Slice is “title”, each image would in turn be called title.gif. This is fine if we save each image under a different folder. In this case, we would uncheck Put Images in Folder in our Output Settings and navigate to a unique folder each time we saved this particular Slice. Another method developers use is to simply rename the Slice itself just before saving each version of the title. For example, make only the “Destinations” Type Layer visible within this Layer Set. Change the name of the Slice to “destinations”, and select File/Save Optimized As. The Save Optimized As dialog box appears (see “Saving an HTML File and an Image Together in ImageReady”.) Slice Names and Multiple Images for Layout: Method A (con't) For Slices, select Selected Slices. This ensures that none of the other Slices are resaved or saved. Very often, you will have saved many of the Slices within a layout and many need to only save one (or two, or three, etc.) at a time as you continue to develop the site. For Settings, make sure that Put Images in Folder is checked under the Saving Files category, and make sure the folder name is “images” (see “Saving Files”.) Next, make sure that Save as Type is set to images Only as you do not need to save any HTML at this point. Slice Names and Multiple Images for Layout: Method A (con't) Finally, navigate to the website folder in chapter011 and {Click} Save. A Replace Files dialog box appears asking if you wish to replace the file destinations.gif. {Click} Replace. This appears because we have already saved this file to this folder. This dialog box is a good reminder and warning to you when saving out individual Slices. In this case, we can safely save over the existing version. The process then, of saving the remaining versions of the titles would involve making the applicable Type Layer visible, changing the Slice name, and saving only the Slice itself. Slice Names and Multiple Images for Layout: Method B

Another method you could employ is to make a separate file to house the changing content, such as the titles. For example, select Slice 04 and then select the Info Palette. Note the dimensions of the Slice, 429 x 47. What we could do is create a new image with each title stacked vertically. We simply need to create a new image that is 429 pixels wide by 517 pixels high (11 x 47.) Let’s do that. Create a new image, 429 wide by 517 high. Next we need to create Guides at 47 pixel intervals so that we can use them to create our Slices. To do so, select View/Create Guides. The Create Guides dialog box appears. Slice Names and Multiple Images for Layout: Method B (con't) We do not need any Vertical Guides at this point. For now we need nine (9) Guides, evenly spaced at 47 pixels between them. Input 9 and 47 in the first two fields. If Preview is checked, you’ll see the Guides appear in the Image Window. {Click} OK. Why nine (9) instead of eleven (11)? Picture the top and the bottom of the image as the remaining Guides. By using nine (9) Guides, we divide the image into eleven (11) distinct, and in this case, evenly spaced sections. Slice Names and Multiple Images for Layout: Method B (con't) You should now have an image with eleven (11) distinct sections, divided by Guides. Next, select the Slice Tool and create eleven (11) Slices, using the Guides to constrain the height of each Slice. Give each Slice the following names: • 01: title • 02: book • 03: destinations • 04: specials • 05: gallery • 06: contact • 07: japan • 08: login • 09: osaka • 10: kyoto • 11: kobe Note When using this method, it may be advisable to plan for the future. For example, at present, the Travel Japan web site requires eleven (11) distinct titles. This will almost certainly change in the future. Travel Japan may add new sections which require more titles. We could have create this image with room enough for another 5, 10, 20 titles. If you find in the future that you do need more space, you can do one of two things. You could use Image/Canvas Size, the modify the height of the image and add more Slices and Layers to the image, or you could simply save the existing image under a different name and change the content of each Layer (or in this case, each Type Layer.) If you do save the image under a different name, make sure you remember to rename the Slices accordingly. Slice Names and Multiple Images for Layout: Method B (con't) Select View/Clear Slices to clear the slices out of our new image. Select the webpage.psd Image Window and select View/Show/Guides if necessary. Note how there are two Guides in this image that intersect within Slice 04. These Guides were used for precise positioning of the title Type Layers. We will need to replicate the position of these Guides throughout our new image as well. This means that we will need one Vertical Guide and eleven (11) Horizontal Guides. Let’s start with the position of the Vertical Guide. If we zoom in to the top area of the webpage.psd Image Window (use the Zoom Tool or the Magnification Menu at the bottom of the Image Window) we can see that the Vertical Guide is positioned at 557 pixels from the left of the image. What we need to know is how many pixels from the edge of the border of Slice 04 this Vertical Guide is. To do so, we can just drag another Guide into the Image Window

to the edge of Slice 04 and subtract 557 from the position of the new Guide. Slice Names and Multiple Images for Layout: Method B (con't) Select the new image and select View/Create Guides. Uncheck Horizontal Guides and check Vertical Guides. Input 420 into the third field (to insert a single Guide) and {Click} OK. Slice Names and Multiple Images for Layout: Method B (con't) The final step in setup for this document is to place eleven Horizontal Guides at the precise points within each Slice. All the Type that make up the titles for this site will be aligned to these Guides. To find out how far from the top of each Slice we need to place the Horizontal Guides we can zoom into the edges of the webpage.psd Image Window. We can see that the top of Slice 04 begins at 95 pixels. Slice Names and Multiple Images for Layout: Method B (con't) Looking at the Horizontal Guide, we can see that it ends at 128 pixels. If we subtract 95 from 128 (128 - 95) the remainder is 33. This means that we will need to place a Horizontal Guide 33 pixels below the top of each Slice. To do so, we are going to have to enter eleven (11) Horizontal Guides manually following the same procedure we used to insert the Vertical Guide except switching to the Horizontal axis obviously. Slice Names and Multiple Images for Layout: Method B (con't) The first Guide is the easiest. We place at 33 pixels. Following that, we place a Guide at 47 pixel intervals from 33 pixels. Thus the next Guide will be place at 80 pixels (33 + 47.) The following Guide at127 pixels (80 + 47) and so on. Here are the intervals: • 1: 33 • 2: 80 • 3: 127 • 4: 174 • 5: 221 • 6: 268 • 7: 315 • 8: 362 • 9: 409 • 10: 456 • 11: 503 Slice Names and Multiple Images for Layout: Method B (con't) Now you’re ready to build the titles. If you like, you can open mainTitles.psd and work with that file or your own. mainTitles.psd You can create each title (using the Horizontal Text Tool) with the following settings: • Font: Verdana • Style: Bold • Size: 36 • Anti-aliasing: Smooth • Alignment: N/A (since you are positioning the Type Layers)* • Color: White • Layer Style: Stroke, Black, 2 pixels, Outside * If you duplicate the Type Layers, position them, and then highlight the existing text and replace it with the appropriate text you may find setting Alignment to Right helpful. Slice Names and Multiple Images for Layout: Method B (con't) Or you could just drag and drop the existing Type Layers from webpage.psd and positioning them accordingly.

The final steps of course, would be to optimize each Slice and save each Slice when and where required. You can open mainTitlesComplete.psd if you like to examine our final version. To examine the web site itself, open index.html from the website folder. The Old Adage: Practice Makes Perfect As you can see, both Photoshop and its companion program ImageReady are powerful and complex applications. You will never stop learning the applications and developing new methods to create your images. The old adage “Practice makes perfect” is certainly applicable to Photoshop and ImageReady. Use this manual together with the online manual included with Photoshop as you use it and practice with it. As you continue to use each application you’ll find that you’ll come up with your own way of working. We look forward to viewing your work.