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 {Single-
Click} 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 24-
bit 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 white-
checkered 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 Palette to remove the modifications you've just done. Try out the
other Shapes in the Marquee Tools.
Marquee Options
Marquee Options include Tool Presets, New Selection, Add to Selection, Subtract
from Selection, Intersect with Selection, Feather, Anti-aliased, Style, and Width
and Height.

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 Anti-
aliased 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 {Double-
Clicking} 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: Non-
Destructive 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 add some space just above the
area where the paragraph begins. To do so, input a value in this field.
Add Space After Paragraph
If you have multiple paragraphs, you may want to add some space just below the
area where the paragraph begins. To do so, input a value in this field.
Hyphenate
Check Hyphenate to enable hyphenation.
The Vertical Type Tool

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 dialog-
box 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 real-
time. {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 4-
Up, 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 In-
between 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 <body> </body>
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) User-
Slices. 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!</strong>
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!</strong>
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.