Adobe Web Project

Adobe
Web Project
Photoshop
Curriculum
Guide
Adobe Web Project
PHOTOSHOP OVERVIEW
Contents Photoshop
Lesson 1: Beginning Successfully
The Tools
Rulers, Guides, and the Grid
Viewing Images
Understanding the Palettes
Skill-Building Activity
Lesson 2: Working with Images
Understanding Images and Resolution

Creating New Images
Opening and Importing Images
Working With Layers
Working With Type
Lesson 3: Using Image Maps and Slicing
Working with Slices

Working with Imagemaps (ImageReady)
Modifying Color
Skill-Building Activity
Lesson 4: Animations In ImageReady
Creating a Rollover
Optimizing and Saving Rollovers
Lesson 5: Saving, Formatting, and Exporting Images
About File Formats

Optimizing Images for the Web (Photoshop)
Optimized Images
Saving Optimized Images
The Movie Project Continues
Photoshop Curriculum Guide
Adobe Web Project
PHOTOSHOP OVERVIEW
IntroductionPhotoshop/ImageReady
Welcome to the world-standard image-setting Adobe Photoshop 6.0 software.
Adobe Photoshop 6.0 introduces the next generation of image editing with powerful new features that offer
something for every user. Photoshop 6.0 delivers the broadest and most productive toolset available. The
Photoshop tool (including ImageReady) will allow students and teachers to explore the reaches of creativity,
work at peak efficiency, and achieve the highest-quality results across almost all media.
This Adobe Web Project introduction to Adobe Photoshop and Adobe ImageReady will afford your students an
understanding of the precision and control over their images plus the flexibility to produce anything from small
designs to large projects. Students will be introduced to tools, palettes, drawing and working in Photoshop,
colors, and web publishing. The emphasis of this unit is to prepare students to use the basic tools of Photoshop
and to apply them in preparation of basic web design. Students also will work toward a Final Project in
Photoshop and a summative web-based Adobe Web Project project at the conclusion of the four Lessons.
As an educator, you will appreciate that Adobe Photoshop also provides a consistent work environment with
other Adobe applications including Adobe Illustrator, Adobe LiveMotion, and Adobe GoLive. Adobe Web
Project ties these four powerful tools together.
What can your students do with Adobe Photoshop? With few exceptions, Adobe Photoshop can do everything
they need for image editing.
Other learning resources

Classroom in a Book
The official training series for Adobe graphics and publishing software. This book is developed by experts at
Adobe and published by Adobe Press. Adobe Photoshop Classroom in a Book includes lessons on using
Photoshop software. Instructors can download individual chapters from the Adobe in Education web site
(www.adobe.com/education) for free to supplement their lessons. For information on purchasing Adobe
Photoshop Classroom in a Book, visit www.adobe.com/education/educators/books.html, contact your local
Adobe Authorized Education Reseller at www.adobe.com/education/purchasing/resellers.html, or contact your
local book distributor.
Official Adobe Print Publishing Guide

Provides in-depth information on successful print production, including topics such as color management,
commercial printing, constructing a publication, imaging and proofing, and project management guidelines. For
information on purchasing the Official Adobe Print Publishing Guide, visit the Adobe Web site at www.adobe.com.
Official Adobe Electronic Publishing Guide

Tackles the fundamental issues essential to ensuring quality online publications in HTML and PDF. Using simple,
expertly illustrated explanations, design and publishing professionals tell you how to design electronic
publications for maximum speed, legibility, and effectiveness. For information on purchasing the Official Adobe
Electronic Publishing Guide, visit the Adobe Web site at www.adobe.com.
Adobe Web Project
PHOTOSHOP OVERVIEW
SAMS Teach Yourself Adobe Photoshop 6 in 24 Hours

This is a great learning tool and resource of curriculum ideas for educators because it follows the structure of 24
one-hour lessons in order to make the content manageable. Its easy to learn Adobe Photoshop 6 with this book
because each hour-long lesson is full of step-by-step instructions, screenshots, tips, and tricks. To order a copy,
visit www.adobe.com/education/educators/books.html
Other learning resources are available but are not included with your application.
Adobe, the Adobe logo, Classroom in a Book, GoLive, Illustrator, ImageReady, LiveMotion, Photoshop, and PostScript are either registered
trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. Mac and Macintosh are trademarks of
Apple Computer, Inc., registered in the United States and other countries. Microsoft, OpenType, Windows NT, and Windows are either
registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries. All other trademarks are the
property of their respective owners.
2001 Adobe Systems Incorporated. All rights reserved.
Adobe Web Project
PHOTOSHOP LESSON 1
Beginning Successfully
Level
This section of Adobe Web Project is for the advanced beginning student to intermediate student.
Students are assumed to have a basic-level understanding of the use of software for design and
illustration as well as a comprehension of software interface components. Students are assumed to
have a familiarity with the Web and online resources.
Summary and Overview

Adobe Photoshop is the industry-standard, high-capability program that offers sophisticated
manipulation of images. Because of the programs sophistication, students will be introduced to basic
parts of the program in easy-to-follow steps. The purpose of Lesson One/Photoshop is to introduce
students to the Adobe interface (toolbar, option bar, rulers and guides, and images) through
identification as well as hands-on use of the tools and palettes.
Lesson One is designed to be taught in approximately one to two class hours depending on the teachers pace of
instruction and the prior knowledge of the students. This Lesson is designed to be done in Adobe Photoshop, but
information on using similar functions in Adobe ImageReady is also included for teachers. Teachers will want to
teach students how Photoshop and ImageReady interact.
What Students Will Learn: Assessable Outcomes from the Exercises

In this lesson, your students will learn
To open the Adobe Photoshop file

To select and display tools
To use the options bar
To understand rulers, guides, and the grid
To display, hide, and understand the palettes
To jump from Photoshop to ImageReady
To get more information about the Photoshop program and Help resources for Adobe Web Project
Students will open a Photoshop document, work with tools and the options bar, work with rulers, guides, and
the grid, viewing images. Students will work with palettes. Students will also learn how to get more information
about the Photoshop program using Help. Finally, students will continue work on their Project from Adobe Web
ProjectIllustrator.
Adobe Web Project
PHOTOSHOP LESSON 1
Teacher Orientation for Lesson One

Key Definitions for Lesson One
Current tool: view the name of the active tool.
Document size: displays information on the amount of data in the image. The number on the left represents the
printing size of the image or approximately the size of the saved flattened file in Adobe Photoshop format. The
number on the right indicates the files approximate size including the number of layers and channels.
Efficiency: displays the percentage of time the Photoshop program is actually doing an operation instead of
reading or writing the scratch disk. A value below 100% shows that Photoshop is operating more slowly than
normal.
Options bar: displays tool in Photoshop; includes palettes.
Palette: the colors and textures that monitor, modify, and enhance the artwork.
Pixels: bitmapped, digitized images that have been converted into a series of small squares or picture elements.
Profile: displays the name of the color profile used by the image.
Rulers, guides, and the grid: help to position images or elements precisely across the width or length of an
image.
Scratch size: displays information on the amount of RAM and scratch disk used to process the image. The
number on the left represents the amount of memory that is currently being used by the program to display all
open images. The number on the right represents the total amount of RAM available for processing images.
Timing: displays the amount of time it took to complete the last operation.
Tool: used to draw and paint rhe artwork.
Vector graphics: shapes made up of smooth lines that retain their crispness when scaled.
Work area: the work area occupies the entire space within the Photoshop window.
Dont forget: Tools and palettes can be hidden and re-arranged to organize the work area as needed.
Adobe Web Project
PHOTOSHOP LESSON 1
For the Teacher: Jumping to ImageReady from Photoshop (and Vice Versa)
Jumping between the applications allows you use the full feature sets of both Photoshop and ImageReady
applications when preparing graphics for the Web or other purposesyet still maintain a streamlined workflow.
Jumping to another application also saves the step of having to close the file in Photoshop and reopen it in the
other application. The information below will be of interest to your students. This section may be taught at your
discretion at any point during Lesson One.
1.
CLICK! the Jump To button (
2.
Choose File > Jump To > Photoshop or File > Jump To > ImageReady.
) in the toolbox.
You can jump between Photoshop and ImageReady to transfer an image between the two applications for
editing without closing or exiting the originating application. In addition, you can jump from ImageReady to
other graphics-editing applications and HTML-editing applications installed on your system. For more detailed
information on jumping to other applications in ImageReady, see Photoshop 6.0 Online Help. It is recommended
that your computer has a minimum of 128 megabytes of RAM.
Each time an image in Photoshop or ImageReady is updated with changes made in a jumped-to application, a
single history state is added to the Photoshop or ImageReady History palette. You can undo the update in
Photoshop or ImageReady as you would with other states in the History palette.
Your students are now ready to begin learning how to create and edit images.
Adobe Web Project
PHOTOSHOP LESSON 1
Exercise One: Using the Tools

Lets begin
Have students CLICK! the Adobe Photoshop icon to start Adobe Photoshop. When Photoshop is started, the
menu bar, the toolbox, the options bar, and four palette groups appear on the screen, assuming that no one has
modified the Preferences.
Explain to students that both Photoshop and ImageReady work with bitmapped, digitized images (images that
have been converted into a series of small squares or picture elements called pixels). Photoshop and ImageReady
provide a platform to create original artwork or images that can be imported into the programs by scanning a
photograph, a transparency, a negative, or a graphic, by capturing a video image, or by importing artwork crated
in drawing programs. Images from digital cameras can also be imported into Adobe Photoshop or ImageReady.
Using the Tools

The toolbox contains selection tools, painting and editing tools, foreground and background color selection
boxes, and viewing tools. This section introduces the tools and outlines the specific functions of several of the
most important tools.
Open or select a tool:

Want students to select a tool? Simply instruct them to CLICK! its icon in the toolbox.
Hidden tools:
Some of the tools in the toolbox display a small triangle at
the bottom right corner, indicating the presence of
additional hidden tools.
Select hidden tools in any of the following ways:
CLICK! and hold down the mouse button on a tool that has additional tools. Then drag to
the desired tool, and release the mouse button.
Hold down Alt (Windows) or Option (Mac OS) , and CLICK! the tool in the toolbox. Each
CLICK! selects the next hidden tool in the hidden tool sequence.
Press Shift + the tools keyboard shortcut repeatedly until the desired tool is selected.
Adobe Web Project
PHOTOSHOP LESSON 1
Using the Options Bar

Note to students that most tools have options that are
displayed in the options bar. Explain to students that the
options bar is context sensitive and changes as different
tools are selected. For more advanced students: Some settings in the options bar are common to several tools (such
as painting modes and opacity), and some are specific to one tool (such as the Auto Erase setting for the pencil tool).
Students can move the options bar anywhere in the work area. In Photoshop, you can dock the options bar at
the top or bottom of the screen.
The Photoshop
options bar
includes a palette
well (or space) for storing other palettes, and providing quick access to palettes such as Swatches and Actions;
for visual convenience, your students can reference Swatches and Actions briefly while using the application.
The palette well is available only when using a screen resolution greater than 800 pixels x 600 pixels (a setting
of at least 1024 x 768 is recommended).
Moving ahead with your students

1. Have students select a tool in the toolbox or choose Window > Show Options to display the options bar.
In Photoshop (Windows) and ImageReady (Windows and Mac), your students can double-click the title bar at
the left edge to collapse the options bar, showing only the tool icon.
2.
CLICK! the tool icon on the options bar, then have students choose
Reset Tool or Reset All Tools from the context menu. This returns a tool
or all tools to default settings.
3.
Drag the title bar at the left edge of the options bar to move the
options bar.
In Photoshop, students can also grab the gripper bar at the left edge of the options bar. The gripper bar will
appear only if the options bar is docked at the top or bottom of your screen.
Adobe Web Project
PHOTOSHOP LESSON 1
Exercise Two: Rulers, Guides, and the Grid

Rulers, the measure tool, guides, and the grid help students position images or elements precisely across the
width or length of an image. This exercise will introduce students to these important Photoshop advantages.
Additional Photoshop features are plentiful and useful for you and your advanced students as well.
Using rulers:
Explain that rulers appear along the top and left side of an active
window. Markers in the ruler display the pointers position when it is
moved. Have students note that the ruler origin also determines the
grids point of origin (see below).
To display or hide rulers:

Students need only to choose View > Show Rulers or View > Hide Rulers
Using guides and the grid:

Guides appear as lines that float over the entire image and (important to note to students) do not print. Guides
can be moved, removed, or locked to avoid being accidentally moved. In Photoshop, a grid appears by default as
nonprinting lines but can also be viewed as dots. The grid is useful for laying out elements symmetrically.
To show or hide a grid or guides:

1.
Choose View > Show > Grid.
2.
Choose View > Show > Guides.
To place a guide:
If the rulers are not visible, students should choose View >
Rulers
Show
For the most accurate readings, students should view the image at 100% magnification or use the Info palette.
Adobe Web Project
PHOTOSHOP LESSON 1
Creating a Horizontal or Vertical Guide:
Students can create a guide by selecting Choose View > New Guide. In the dialog box, they should select
Horizontal or Vertical orientation and enter a position.
Drag from the horizontal ruler to create a horizontal guide.
Hold down Alt (Windows) or Option (Mac OS) and drag from the vertical ruler to create a horizontal guide.
Drag from the vertical ruler to create a vertical guide.
Hold down Alt (Windows) or Option (Mac OS) and drag from the horizontal ruler to create a vertical guide.
Vertical Guide
Horizontal Guide
To move a guide:
), or hold down Ctrl (Windows) or Command (Mac OS) to activate the move tool.
1.
Select the move tool (
2.
Position the pointer over the guide (the pointer turns into a double-headed arrow).
3.
Move the guide.
4.
Drag the guide to move it.
5.
Change the guide from horizontal to vertical, or vice versa, by holding down Alt (Windows) or Option
(Mac OS) as you CLICK! or drag the guide.
6.
(Photoshop) Align the guide with the ruler ticks by holding down Shift as you drag the guide. The guide will
snap to the grid if the grid is visible and View > Snap To > Grid is selected.
7.
Finally, students can lock the guide(s) by choosing View > Lock Guides.
Adobe Web Project
PHOTOSHOP LESSON 1
Exercise Three: Viewing Images

Students can view their images at any magnification level from 0.25% (Photoshop) or 12.5% (ImageReady) to
1600%. Note that Adobe Photoshop displays the percentage of an images actual size in the title bar.
When students use any of the viewing tools and commands, the display of the image is affected, not the images
dimensions or file size.
Using the View menu:

Have students enlarge or reduce the view of an image by using the View menu and doing one of the following:
Choose View > Zoom In to enlarge the display of the image.

Choose View > Zoom Out to reduce the view of the image.
Emphasize that each time a Zoom command is chosen, the view of the image is
resized. The percentage at which the image is viewed is displayed in the Title bar
and in the lower left corner of the document window.
As a variation, students can also use the View menu or hand tool to fit an image onto their screens by doing the
following:
1.
Choose View > Fit on Screen. The size of the image and the size of the monitor determine how large the
image appears on-screen.
2.
Double-click the zoom tool (
) to return to a 100% view.
3.
Double-click the hand tool (
) to fit the image on the screen.
Scrolling an image:
Important! Students can use the hand tool to scroll through an image that does not fit in the active window.
If the image fits in the active window, the hand tool has no effect
when you drag it in the image window.
Using the Info bar:

The Info bar is positioned at the lower left corner of the application window
(Windows) or the document window (Mac OS).
In Photoshop, students can choose from a pop-up menu to display information about a documents size,
profile, scratch size, efficiency, timing, and current tool.
In ImageReady, students can choose to display the original and optimized file size, optimized information,
image dimensions, watermark strength, undo/redo status, original image in bytes, optimized image in bytes,
the amount of optimized savings, and download times. Students can also use the ImageReady Info bar to
change the view of an image.
Adobe Web Project
PHOTOSHOP LESSON 1
Exercise Four: Understanding the Palettes

Palettes are used to monitor and modify images. By default, they appear in stacked groups.
Explain to students that they can show or hide palettes as they work. To do so, they choose the appropriate
window:
Window > Show

Window > Hide command
Show displays the selected palette at the front of its group; Hide conceals the entire group.
Changing the palette display:

Not only is it fun but also it can be very productive to reorganize the
work space in various ways. Ask students to experiment with several
techniques:
To hide or display all open palettes and the toolbox, press Tab.
To hide or display the palettes only, press Shift+Tab.
To make a palette appear at the front of its group, CLICK! the
palettes tab.
Allow students on their own time to open/close palettes as well as to
change the palette display.
Adobe Web Project
PHOTOSHOP LESSON 1
Exercise Five: Additional Skill-Building Activities for Students

This is an optional activity for your class depending on the skill level of your students and the time you have
available. However, it may be useful as a brief review of Online Help for all skill levels.
On-Line Help
Online Help has complete information about using palettes, tools, and the application features. Adobe Web
Project Online Help includes all pertinent documentation in Online Help plus keyboard shortcuts, full-color
galleries of examples, and more detailed information about some procedures.
Online Help is easy to use, because you and
your students can look for topics in these
ways:
Scan a table of contents.

Search for keywords or phrases.
Use an index.
Jump from topic to topic using related topic links.
Displaying the Online Help contents

First, help your students look for a topic using the Contents screen:
1.
Display Online Help:
In Windows, press F1, or choose Help > Contents to display the Help Contents menu.
In Mac OS, choose Help > Help Contents (Photoshop) or Help > Help Topics (ImageReady).
The browser will launch if it is not already running. The topics for the Photoshop 6.0
Online Help system appear in the left frame of the browser window.
2.
Drag the scroll bar or CLICK! the arrows for the left frame to
navigate through the Help contents. The contents are organized in
a hierarchy of topics, much like the chapters of a book.
3.
Position the pointer on Looking at the Work Area, and CLICK! to

display its contents in the right window frame.
4.
Locate the Toolbox overview topic, and CLICK! to display it. An

illustration of the tools with brief descriptions appears.
The Online Help system is interactive and therefore very useful for advanced
beginners and intermediate users. You and your students can CLICK! any blue text,
called a link, to jump to another topic. The pointer icon indicates links and appears
when the mouse pointer is moved over a link or a hot spot.
10
Adobe Web Project
PHOTOSHOP LESSON 1
Lesson One: Check for Understanding

Review questions
1.
Describe two ways to change your view of an image.
2.
How do you select tools in Photoshop or ImageReady?
3.
Describe two ways to create images in Photoshop and ImageReady.
4.
How do you switch between Photoshop and ImageReady?
5.
In what ways can topics be searched in Online Help?
Review answers
1.
Commands can be chosen from the View menu to zoom in or out of an image, or to fit it to your screen; the
zoom tools can also be used to CLICK! or drag an image to enlarge or reduce the view. In addition, keyboard
shortcuts can be used to magnify or reduce the display of an image.
2.
Tools can be selected from the toolbox, or tools can be selected by pressing the tools keyboard shortcut.
For example, press M to select a marquee tool. A selected tool remains active until a different tool is
selected.
3.
Original artwork can be made in Adobe Photoshop or ImageReady, or images can be entered into the
program by scanning a photograph, a transparency, a negative, or a graphic; by capturing a video image; or
by importing artwork created in drawing programs. Previously digitized images can also be imported, such
as those produced by a digital camera or by the Kodak Photo CD process.
4.
Students can CLICK! the Jump To button in the toolbox or choose File > Jump To to switch between
Photoshop and ImageReady.
5.
Scan table of contents; search for key words or phrases; use an index; jump from topic to topic.
Additional Adobe Resources on the Web

Visit the Adobe in Education Web site at http://www.adobe.com/education for additional resources:
Instructional resourcesonline tutorials, books, tech guides, and more:

http://www.adobe.com/education/educators/main.html
Complete product information: http://www.adobe.com/education/products/main.html
Training opportunities: http://www.adobe.com/education/educators/training.html
11
Adobe Web Project
PHOTOSHOP LESSON 2
Working with Images

Level
have a familiarity with the Web and online resources. In addition, students must have mastered the
basic Adobe Photoshop skills presented in Lesson One.

Photoshop is the industry-standard, high-capability program that offers sophisticated manipulation of
digital images and artwork. To create effective artwork, however, students must understand some basic
concepts about how to work with digital images, colors, and layers. This goal of this Lesson is to
introduce students to graphics and working with images. Finally, students will be introduced to creating
and formatting type.
Lesson Two is designed to be taught in approximately two to three class hours, depending on the teachers pace
of instruction and the prior knowledge of the students.

About bitmap images and vector graphics

About image size and resolution
To open and change images
To import images
To work with color modes
To create and work with layers
To create and work with type
Working with Images
Adobe Web Project
PHOTOSHOP LESSON 2
Teacher Orientation for Lesson Two

Key Definitions for Lesson Two
Bitmap images: Bitmap imagestechnically called raster imagesuse a grid of colors known as pixels to
represent images. Each pixel is assigned a specific location and color value. Bitmap images are the most
common electronic medium for continuous-tone images, such as photographs or digital paintings, because they
can represent subtle gradations of shades and color. Bitmap images are resolution-dependentthat is, they
contain a fixed number of pixels. As a result, they can lose detail and appear jagged if they are scaled on-screen
or if they are printed at a lower resolution than they were created for.
Color Modes: A color mode determines the color model used to display and print images. Photoshop bases its
color modes on established models for describing and reproducing color. Common models include HSB (hue,
saturation, brightness); RGB (red, green, blue); CMYK (cyan, magenta, yellow, black); and CIE L*a*b*. Photoshop
also includes modes for specialized color output such as Indexed Color and Duotone. ImageReady uses RGB
mode to work with images.
Image: An imitation, representation, or similitude of any person, thing, or act, sculptured, drawn, painted, or
otherwise made perceptible to the sight; a visible presentation; a copy; a likeness; an effigy; a picture; a
semblance.
Image maps: Image maps enable you to link an area of an image to a URL. You can set up multiple linked
areascalled image map areasin an image, with links to text files; other images; audio, video, or multimedia
files; other pages in the Web site; or other Web sites. You can also create rollover effects in image map areas. The
main difference between using image maps and using slices to create links is in how the source image is
exported as a Web page. Using image maps keeps the exported image intact as a single file, while using slices
causes the image to be exported as a separate file. Another difference between image maps and slices is that
image maps enable you to link circular, polygonal, or rectangular areas in an image, while slices enable you to
link only rectangular areas. If you need to link only rectangular areas, using slices may be preferable to using an
image map.
Layers: A new image in Photoshop or ImageReady has a single layer. In Photoshop, this layer is called the
background layer. You cannot change the position of the background layer in the stacking order (it is always at
the bottom of the stacking order); nor can you apply a blending mode or opacity to a background layer (unless
you first convert it to a normal layer). Layers allow you to make changes to an image without altering your
original image data. For example, you might store photographs or elements of photographs on separate layers
and then combine them into one composite image. Where there is no image on a layer (that is, in places where
the layer is transparent), you can see through to the layers below. All layers in a file have the same resolution,
start with the same number of channels, and have the same image mode (RGB, CMYK, or Grayscale).
Pixels: The smallest discrete element of an image or picture on a CRT screen (usually a single-colored dot) "the
greater the number of pixels per inch the greater the resolution.
Resolution: The number of pixels or dots displayed per unit of length on the monitor, usually measured in dots
per inch (dpi). Monitor resolution depends on the size of the monitor plus its pixel setting. Most new monitors
have a resolution of about 96 dpi, while older Mac OS monitors have a resolution of 72 dpi.
Working with Images
Adobe Web Project
PHOTOSHOP LESSON 2
Slices: Slices are used to divide a source image into functional areas. When you save the image as a Web page,
each slice is saved as an independent file that contains its own settings, color palette, links, and animation
effects. You can use slices to achieve faster download speeds. Slices are also advantageous when working with
images that contain different types of data. For example, if one area of an image needs to be optimized in GIF
format to support an animation, but the rest of the image is better optimized in JPEG format, you can isolate the
animation using a slice.
Type: Type consists of mathematically defined shapes that describe the letters, numbers, and symbols of a
typeface. Many typefaces are available in more than one format, the most common formats being Type 1 (also
called PostScript fonts), TrueType, and OpenType. When you add type to an image, the characters
are composed of pixels and have the same resolution as the image filezooming in on characters shows jagged
edges. However, Photoshop and ImageReady preserve the vector-based type outlines and use them when you
scale or resize type, save a PDF or EPS file, or print the image to a PostScript printer. As a result, it is possible to
produce type with crisp, resolution-independent edges.
Vector graphics: Vector graphics are made up of lines and curves defined by mathematical objects called
vectors. Vectors describe an image according to its geometric characteristics. Vector graphics are resolutionindependentthat is, they can be scaled to any size and printed at any resolution without losing detail or clarity.
As a result, vector graphics are the best choice for representing bold graphics that must retain crisp lines when
scaled to various sizesfor example, logos.
Working with Images
Adobe Web Project
PHOTOSHOP LESSON 2
Exercise One: Understanding Bitmap Images, Vector Graphics and

Resolution
Teachers will want to take ten to fifteen minutes of class time to present the differencesand usesof bitmap
images and vector graphics and the effect of each on image size and resolution. Suggested: a handout to students
on which they can take notes; or the teacher can use an overhead slide or simply note the highlights on the
classroom whiteboard to present the material. The information needed is presented below.
Lets begin:
About bitmap images and vector graphics (for a handout or teacher presentation):
Before working with computer images and shapes, you should understand the difference between bitmap
images and vector graphics.
Computer graphics fall into two main categoriesbitmap and vector. You can work with both types of graphics
in Photoshop and ImageReady; moreover, any one Photoshop file can contain both bitmap and vector data.
Bitmap imagestechnically called raster
imagesuse a grid of colors known as pixels to
represent images. Each pixel is assigned a specific
location and color value. For example, a bicycle tire in
a bitmap image is made up of a mosaic of pixels in
that location. When working with bitmap images, you
edit pixels rather than objects or shapes.
Bitmap images are the most common electronic
medium for continuous-tone images, such as photographs or digital paintings, because they can represent
subtle gradations of shades and color. Bitmap images are resolution-dependentthat is, they contain a fixed
number of pixels. As a result, they can lose detail and appear jagged if they are scaled on-screen or if they are
printed at a lower resolution than they were created for.
Bitmap images are good for reproducing subtle gradations of color, as in photographs. They can have jagged
edges when printed at too large a size or displayed at too high a magnification.
Vector graphics these are made up of lines and
curves defined by mathematical objects called vectors.
Vectors describe an image according to its geometric
characteristics. For example, a bicycle tire in a vector
graphic is made up of a mathematical definition of a
circle drawn with a certain radius, set at a specific
location, and filled with a specific color. You can move,
resize, or change the color of the tire without losing the
quality of the graphic.
Vector graphics are resolution-independentthat is, they can be scaled to any size and printed at any resolution
without losing detail or clarity. As a result, vector graphics are the best choice for representing bold graphics that
must retain crisp lines when scaled to various sizesfor example, logos.
Working with Images
Adobe Web Project
PHOTOSHOP LESSON 2
Vector graphics are good for reproducing crisp outlines, as in logos or illustrations. They can be printed or
displayed at any resolution without losing detail. Because computer monitors represent images by displaying
them on a grid, both vector and bitmap data is displayed as pixels on-screen.
Image Size and Resolution (for a handout or teacher presentation):

In order to produce high-quality images, it is important to understand how the pixel data of images is measured
and displayed.
Pixel dimensions The number of pixels along the height and width of a bitmap image. The display size of
an image on-screen is determined by the pixel dimensions of the image plus the size and setting of the monitor.
For example, a 15-inch monitor typically displays 800
pixels horizontally and 600 vertically. An image with
dimensions of 800 pixels by 600 pixels would fill this small
screen. On a larger monitor with an 800 by 600 pixel
setting, the same image (with 800 by 600 pixel
dimensions) would still fill the screen, but each pixel
would appear larger. Changing the setting of this larger
monitor to 1024-by-768 pixels would display the image at
a smaller size, occupying only part of the screen.
How large an image appears on-screen depends on a
combination of factorsthe pixel dimensions of the
image, the monitor size, and the monitor resolution
setting. The examples above show a 620-by-400-pixel
image displayed on monitors of various sizes and
resolutions.
Image resolution The number of pixels displayed per
unit of printed length in an image, usually measured in
pixels per inch (ppi). In Photoshop, you can change the
resolution of an image; in ImageReady, the resolution of
an image is always 72 ppi. This is because the ImageReady
application is tailored to creating images for online media,
not print media.
In Photoshop, image resolution and pixel dimensions are
interdependent. The amount of detail in an image
depends on its pixel dimensions, while the image resolution controls how much space the pixels are printed
over. For example, you can modify an image's resolution without changing the actual pixel data in the
imageall you change is the printed size of the image. However, if you want to maintain the same output
dimensions, changing the image's resolution requires a change in the total number of
pixels.
Monitor resolution The number of pixels or dots displayed per unit of length on the
monitor, usually measured in dots per inch (dpi). Monitor resolution depends on the size
of the monitor plus its pixel setting. Most new monitors have a resolution of about 96
dpi, while older Macintosh OS monitors have a resolution of 72 dpi.
72-ppi and 300-ppi

images; inset zoom
200%
Understanding monitor resolution helps explain why the display size of an image on-screen often differs from its
printed size. Image pixels are translated directly into monitor pixels. This means that when the image resolution
Working with Images
Adobe Web Project
PHOTOSHOP LESSON 2
is higher than the monitor resolution, the image appears larger on-screen than its specified print dimensions.
For example, when you display a 1 inch by 1 inch, 144-ppi image on a 72-dpi monitor, it appears in a 2 by 2
inches on-screen. Because the monitor can display only 72 pixels per inch, it needs 2 inches to display the 144
pixels that make up one edge of the image.
Printer resolution The number of ink dots per inch (dpi) produced by all laser printers, including imagesetters.
Most desktop laser printers have a resolution of 600 dpi and imagesetters have a resolution of 1200 dpi or
higher. To determine the appropriate resolution for your image when printing to any laser printer, but especially
to imagesetters, see "screen frequency."
Ink jet printers produce a spray of ink, not actual dots; however, most ink jet printers have an approximate
resolution of 300 to 600 dpi and produce good results when printing images up to 150 ppi.
A. 65 lpi: Coarse screen typically used to print newsletters
and grocery coupons. B. 85 lpi: Average screen typically
used to print newspapers. C. 133 lpi: High-quality screen
typically used to print four-color magazines. D. 177 lpi:
Very fine screen typically used for annual reports and
images in art books.
File size The digital size of an image, measured in
kilobytes (K), megabytes (MB), or gigabytes (GB). File size
is proportional to the pixel dimensions of the image.
Images with more pixels may produce more detail at a
given printed size, but they require more disk space to
store and may be slower to edit and print. For instance, a
1 inch by 1 inch, 200-ppi image contains four times as
many pixels as a 1 inch by 1 inch, 100-ppi image and so
has four times the file size. Image resolution thus becomes a compromise between image quality (capturing all
the data you need) and file size.
Another factor that affects file size is file format. Due to varying compression methods used by GIF, JPEG, and
PNG file formats, file sizes can vary considerably for the same pixel dimensions. Similarly, color bit-depth and the
number of layers and channels in an image affect file size.
Photoshop supports a maximum file size of 2 GB and maximum pixel dimensions of 30,000 by 30,000 pixels per
image. This restriction places limits on the print size and resolution available to an image.
Working with Images
Adobe Web Project
PHOTOSHOP LESSON 2
Exercise Two: Creating New Images

Teachers will note that the Lesson has now shifted to more of a hands-on, student-centered approach.
Teachers will need to have identified and/or installed a file for students to openor instruct students in this
process with an overhead or whiteboard presentation.
Students will want to import images into Photoshop/ImageReadyand the next exercise will teach them how
to do so. But first, students will need to know how to set the stage for a new imageeither drawn by them or
imported. The New command lets students create a blank image.
To create a new image:

1.
Ask students to do one of the following (in Photoshop):
To base the image dimensions and resolutions on the Clipboard contents (previously pasted), choose
File > New. If the Clipboard does not contain image data, the image dimension and resolutions are
based on the last image created.
To base the image size on the default dimensions and resolution or the last entered setting, hold down
Alt (Windows) or Option (Mac OS) when students choose File > New.
2.
If students desire, they should type a name for the image and set the width and height.
3.
Set the resolution and mode.
4.
Select an option for the contents of

the background layer (Photoshop) or
first layer (ImageReady) of the image:
5.
WHITE will fill in the background

or first layer with whitethe
default color.
TRANSPARENT to make the first
layer transparent with no color
values. Students should be told
that the document will have a
single, transparent layer as its
contents.
BACKGROUND COLOR to fill the
background or first layer with the
current background color.
CLICK! OK.
Working with Images
Adobe Web Project
PHOTOSHOP LESSON 2
Exercise Three: Opening and Importing Images

Students can open and import images in various file formats. Let students know that available formats appear in
the Open dialog box, the Open As Dialog box (Windows), or the Import submenu.
Teachers will need to have identified and/or installed a file for students to openor instruct students in this
process with an overhead or whiteboard presentation.
Opening and importing files:

1.
Choose File > Open.
2.
Students select the name of the file

they want to open.
3.
CLICK! Open.
4.
The file can now be used in

Photoshop/ImageReady.
To save some confusion now or in the future: if

the file desired does not appear, students should
select the option for showing ALL files from the
Files of Type (Windows) or Show (Mac OS) pop-up
menu.
Working with Images
Adobe Web Project
PHOTOSHOP LESSON 2
Exercise Four: Working with Layers

Students will want to know: Why layers? Layers add depth and texture to your students imported images. Also,
layers allow students to make changes to an image without altering the original image data. You might ask
students to imagine that layers are much like sheets of acetate stacked one on top of the otherexcept that
they are on the computer screen. One of the powerful advantages to Photoshop/ImageReady is the ability to
manipulate layers with relative ease. This Exercise about layers is, by the nature of Adobe Web Project, brief.
Layers can be complex and highly sophisticated tools. Advanced students will want to continue learning about
layers in Photoshop.
A newly imported image into Photoshop/ImageReady has a single layer. In Photoshop, this layer is called the
background layer (similar to a base layer of a painting). Students will not be able to change the position of the
background layer as it is always at the bottom of the stacking order when a background layer is present.
All layers in a file will have the same resolution, start with the same number of channels, and have the same color
mode.
Viewing the Layers palette:

Students can use the Layers palette to create, hide, display, duplicate, merge, link, lock, and delete layers. The
Layers palette lists all layers and layer sets in an image, starting with the topmost layer. A thumbnail of the layer's
contents appears next to the layer name. The thumbnail is updated as students edit. Students can make changes
only to the active layer, and only one layer can be active at a time. When the active layer is moved or
transformed, those changes also affect any layers linked to it. Additionally, students can fully or partially lock
layers to protect their contents.
Students can also use the Layers palette to apply layer masks and layer clipping paths to a layer. They can also
apply layer styles to a layer and create adjustment layers or fill layers. A clipping group can be used to act as a
mask for a group of layers or to specify a blending mode for a group of layers.
A. Layer lock options (from left to right): Transparency, Image,
Position, All B. Layer set C. Clipping group D. Text layer E. Show/Hide
F. Base of clipping group G. Paintbrush icon H. Link/Unlink I. Fully
locked layer J. Show/Hide layer style K. Effects bar L. Selected layer
M. Partially locked layer N. New layer styles O. New layer mask P.
New layer set Q. New adjustment or fill layer R. New layer S. Trash
To have the students view the Layers palette:
Working with Images
1.
Choose Window > Show Layers, or CLICK! the Layers palette

tab.
2.
Use the scroll bars or resize the palette to see additional

layers.
3.
CLICK! the arrow to expand or collapse layer sets and layer

effects.
Adobe Web Project
PHOTOSHOP LESSON 2
Selecting layers:
To show or hide a layer, layer set, or layer effect, students need to do the following:
In the Layers palette, students will CLICK! the icon ( ) next to a layer, layer set, or layer effect to hide that layer,
layer set, or layer effect. CLICK! in the column again to redisplay the layer, layer set, or layer effect.
Only visible layers are printed. Making layers temporarily invisible can improve performance. Active layers can
be made invisible; however, changes still affect the layer.
To select a layer, students need to do the following:

1.
In the Layers palette, CLICK! a layer or layer set to make it active.
2.
Select the move tool ( ), right-click (Windows) or Control-click (Mac OS) on the image, and choose the
layer you want from the context menu.
The name of the active layer appears in the title bar of the image window, and a paintbrush (
the layer in the Layers palette.
) appears next to
Changing the stacking order of layers:

The stacking order determines whether a layer or layer set appears in font of or behind the other layers.
Teachers: students will need to have stacked layers prior to this exercise.
To have students change the order of their layers

1.
In the Layers palette, select the layer or layer set that you want to move.
2.
Choose Layer > Arrange
Creating a layered image:

Photoshop allows the creation of a maximum 8,000 combined layers, layer sets, and layer effects per image.
However, the amount of memory in the computer may limit the number of layers possible in a single image.
It is strongly recommended that students use only one layer at this point in the Lesson unless they have worked in
Photoshop before.
Adding a Layer:
Alt-click (Windows) or Option-click (Mac OS) the New Layer button or New Layer Set button at the bottom of the
Layers palette.
Students then can name the layer and select additional options (mode, opacity, and fill).
Working with Images
10
Adobe Web Project
PHOTOSHOP LESSON 2
Exercise Five: Working with Type

Indicate to students that typography gives visual form to language. Adobe Photoshop/ImageReady let
students add type to images with flexibility and precision. Students will be able to create and edit type directly
on-screen (instead of in a dialog box) and quickly change the font, size, style, and color of the type.
Creating type:
Clicking in an image with the type tool puts the type tool in edit mode. You can enter and edit characters when
the tool is in edit mode; however, you must commit changes to the type layer before you can perform other
operations. For example, you cannot select a command from the Layer menu while the type tool is in edit mode.
To determine if the type tool is in edit mode, look in the options barif you see the OK button ( ) and Cancel
button ( ), the type tool is in edit mode.
Students can create horizontal or vertical type anywhere in an image with Photoshop/ImageReady.
The type tool allows students to enter point type or paragraph type. Point type is useful for entering a single
word or a line of characters; paragraph type is useful for entering and formatting the type as one or more
paragraphs.
Students can use the file set up in Exercise Two for this Exercise.
The type tool must be in edit mode to enter and edit characters. Edit mode precludes working in other menus
(example: Layer menu).
Entering Point Type:

In point type, each line is independentthe length of the line grows or shrinks as it is edited and it does not
wrap to the next line.
When you enter point type, each line of type is independentthe length of a line grows or shrinks as you edit it,
but it doesn't wrap to the next line.
To enter point type:

).
1.
Select the type tool (
2.
(Photoshop) CLICK! the New Type Layer button ( ) in the options bar.
3.
CLICK! an orientation button in the options bar:
4.
Horizontal ( ) to enter type horizontally.

Vertical ( ) to enter type vertically.
CLICK! in the image to set an insertion point for the type. The small line through the I-beam marks the
position of the type baseline. For horizontal type, the baseline marks the line on which the type rests; for
vertical type, the baseline marks the center axis of the type characters.
Working with Images
11
Adobe Web Project
PHOTOSHOP LESSON 2
5.
Select additional type options in the options bar, Character palette, and Paragraph palette.
6.
Enter the characters wanted. Press Enter (Windows) or Return (Mac OS) on the main keyboard to begin a
new line.
7.
(Photoshop) Commit the type layer.
8.
The type entered appears in a new type layer.
Entering Paragraph Type:

When students enter paragraph type, the lines of type wrap to fit the dimensions of the bounding box. Students
can enter multiple paragraphs and select a paragraph justification option.
The bounding box can be resized, which causes the type to re-flow within the adjusted rectangle. Students can
adjust the bounding box while entering type or after creating the type layer. Students can also rotate, scale, and
skew type using the bounding box.
To enter paragraph type:

).
1.
2.
(Photoshop) CLICK! the New Type Layer button ( ) in the options

bar.
3.
CLICK! an orientation option in the options bar:
4.
Horizontal ( ) to enter type horizontally.

Vertical ( ) to enter type vertically.
Do one of the following:
5.
Drag diagonally to define a bounding box for the type.

Hold down Alt (Windows) or Option (Mac OS) as it is CLICKED! or dragged to
display the Text Box Size dialog box. Enter values for Width and Height,
CLICK! OK.
Select additional type options in the options bar, Character palette, and
Paragraph palette.
6.
Enter the characters you want. Press Enter (Windows) or Return (Mac OS) on the
main keyboard to begin a new paragraph. If students enter more type than can fit in the bounding box, the
overflow icon ( ) appears on the bounding box.
7.
(Photoshop) If desired, resize, rotate, or skew the bounding box.
8.
(Photoshop) Commit the type layer.
9.
The type you entered appears in a new type layer.
To resize or transform a type bounding box:

1.
Display the bounding box handles:
2.
(Photoshop) With the type tool active, select the type layer in the Layers palette, and CLICK! in the text
flow.
(ImageReady) With the type tool active, select the type layer. If the bounding box handles do not
appear, make sure that the Text Bounds option is selected in the View > Show submenu.
Drag to achieve the desired effect:
Working with Images
12
Adobe Web Project
PHOTOSHOP LESSON 2
To resize the bounding box, position the pointer over a handlethe pointer turns into a double arrow
( )and drag. Shift-drag to maintain the proportion of the bounding box.
(Photoshop) To rotate the bounding box, position the pointer outside of the bounding borderthe
pointer turns into a curved, two-sided arrow ( )and drag. Shift-drag to constrain the rotation to 15
increments. To change the center of rotation, Ctrl-drag (Windows) or Command-drag (Mac OS) the
center point to a new location. The center point can be outside the bounding box.
Formatting Characters:
Photoshop/ImageReady give your students exact control over individual characters in type layers including font,
size, color, and alignment.
In Photoshop, a font family can be chosen and a style can be chosen by typing the desired name in the text box.
As students type, the name of the first font or style beginning with that letter appears. Continue typing until the
correct font or style name appears. Be sure to deselect the font name before entering new type in the image.
To Select Characters:
).
1.
2.
Select the type layer in the Layers palette, or CLICK! in the text flow to automatically select a type layer.
3.
Position the insertion point in the text, and do one of the following:
Drag to select one or more characters.

CLICK! in the text and then shift-CLICK! to select a range of characters.
Choose Select > All to select all the characters in the layer.
Double-CLICK! a word to select it. Triple-click a line to select it. Quadruple-CLICK! a paragraph to select
it. Quintuple-CLICK! anywhere in the text flow to select all characters in a bounding box.
To use the arrow keys to select characters, hold down Shift and press the Right arrow or Left arrow key.
To use the arrow keys to select words, hold down Shift+Ctrl (Windows) or Shift+Command (Mac OS) and
press the Right arrow or Left arrow key.
4. To select all the characters in a layer without positioning the insertion point in the text flow, select the type
layer in the Layers palette, and then double-CLICK! the layer's type icon ( ).
Using the Character Palette:
1.
Choose Window > Show Character
2.
CLICK! the Character palette tab.
3.
With the type tool (
), CLICK! Palettes in the option bar.
Choosing a Font:
1.
Students will choose a font family from the Font Family pop-up menu in the Character palette OR options
bar.
2.
Then, students should choose a font style from the Font Style pop-up menu (Character palette or options
bar).
3.
CLICK! the Color selection box in the options bar or Character palette. And select a color using the color
picker.
Working with Images
13
Adobe Web Project
PHOTOSHOP LESSON 2
Lesson Two: Check For Understanding

Review questions
1.
What is the main difference between a bitmap image and a vector graphic?
2.
What is the biggest disadvantage to an increased number of pixels in an image?
3.
What is the purpose of layers?
4.
Typography gives __________ __________ to language.
5.
Photoshop can create both ________________ and __________________ type anywhere in an image.
6.
Why are characters formatted in type?
Review answers:
1.
While bitmap images are good for continuous-tone images such as photographs or artwork, they contain a
fixed number of pixels. When enlarged, bitmap images can lose detail or appear jagged. A vector graphic,
on the other hand, is composed of lines and curves defined by mathematical objects (vectors). Such
graphics retain their crispness whether they are moved or resized, or have their color changed.
2.
More pixels mean more disk space for storage, and, more important, slower downloads.
3.
Layers add depth and texture to images that have been imported into Photoshop/ImageReady.
4.
visual form
5.
horizontal - vertical
6.
6. Characters are formatted to give exact control over individual characters in type layers.
Additional activities for your students (as time permits):

1.
Have your students format a paragraph using the Paragraph palette.
2.
Have your students create a greeting card using horizontal and vertical text.


Apple Computer, Inc., registered in the United States and other countries. Microsoft, OpenType. Windows NT, and Windows are either
Working with Images
14
Adobe Web Project
PHOTOSHOP LESSON 3
Using Imagemaps and Slicing

Level
have a familiarity with the Web and online resources. They should understand the basics of Adobe
Photoshop and Adobe ImageReady and have facility with the manipulation of images.

Photoshop is the industry-standard, high-capability program that offers sophisticated manipulation of
images. The purpose of Lesson Three/Photoshop is to take students beyond the fundamentals of
Photoshop/ImageReady learned in Lessons One and Two to beginning to create image-rich Web pages.
Students can now use the tools and techniques from the first two Lessons to design basic Web pages
that include images, text, and effects such as imagemaps and rollovers. This is exciting as students will
begin to see how the four Adobe tools (Illustrator and Photoshop/ImageReady PLUS LiveMotion and
GoLive) tie together to provide extremely powerful Web-designing capability.
Because of the nature of Adobe Web Project, the techniques in Lesson Three feature only a small part of
the powerful capability of Photoshop and ImageReady for use in designing Web pages.
Lesson Three is designed to be taught in approximately two to three class hours, depending on the teachers pace
of instruction and the prior knowledge of the students. This lesson is designed to be completed in both Adobe
Photoshop and ImageReady as noted.

1.
To create and view slices
2.
To select and modify slices
3.
To specify slice options
4.
To create and view imagemaps
5.
To select and modify imagemaps
6.
To understand imagemap options and types
7.
To create rollovers
Using Image Maps and Slicing
Adobe Web Project
PHOTOSHOP LESSON 3
Teacher Orientation for Lesson Three

Key Definitions for Lesson Three
Imagemap: Imagemaps enable you to link an area of an image to a URL. You can set up multiple linked
areascalled imagemap areasin an image, with links to text files; other images; audio, video, or multimedia
files; other pages in the Web site; or other Web sites. You can also create rollover effects in imagemap areas.
The main difference between using imagemaps and using slices to create links is in how the source image is
exported as a Web page. Using imagemaps keeps the exported image intact as a single file, while using slices
causes the image to be exported as a separate file. Another difference between imagemaps and slices is that
imagemaps enable you to link circular, polygonal, or rectangular areas in an image, while slices enable you to
link only rectangular areas. If you need to link only rectangular areas, using slices may be preferable to using an
imagemap.
Teachers will want to note the following:
The full version of Photoshop provides tools for creating and manipulating static images for use on the Web.
Images can be divided into slices, links and HTML text can be added, the slices can be optimized and the
image can be saved as a Web page.
ImageReady provides some of the same image-editing tools as Photoshop. In addition, it includes tools and
palettes for advanced Web processing and creating dynamic Web images such as animations and rollovers.
Remember: Only a few of the powerful effects of Photoshop/ImageReady are taught in Adobe Web Project.
Adobe Web Project
PHOTOSHOP LESSON 3
Exercise One: Working with Slices

Lets begin:
Have students CLICK! the Adobe Photoshop icon to start Adobe Photoshop. When Photoshop is started, the
menu bar, the toolbox, the options bar, and four palette groups appear on the screen.
Worth noting to students: most Web effects can be previewed directly in Photoshop/ImageReady. However, the
appearance of an image on the Web depends on the operating system, color display system, and browser used to
display the image. Be sure to preview images in different browsers and on different operating systems using the
color-safe palette.
Creating and viewing user slices:

A slice is a rectangular area of an image that can be used to create links, rollovers, and animations in the Web
page. Dividing an image into slices lets the work be selectively optimized for Web viewing. User slices are those
slices created using the slice tool in Photoshop.
Web page divided into slices:

8.
Image slice
9.
No Image slice
10. Slice that contains a rollover
Students can set how the Photoshop or ImageReady

application generates HTML code for aligning
sliceseither using tables or cascading style
sheetsin the Output Settings dialog box. Students
can also set how slice files are named.
Types of slices:
Slices created using the slice tool are called user-slices; slices created from a layer are called layer-based slices.
When students create a new user-slice or layer-based slice, additional auto-slices are generated to account for
the remaining areas of the image. In other words, auto-slices fill the space in the image that is not defined by
user-slices or layer-based slices. Auto-slices are regenerated every time students add or edit user-slices or layerbased slices. User-slices, layer-based slices, and auto-slices look differentuser-slices and layer-based slices are
defined by a solid line, while auto-slices are defined by a dotted line.
A subslice is a type of auto-slice that is generated when students create overlapping slices. Subslices indicate
how the image will be divided when the optimized file is saved. Although subslices are numbered and display a
slice symbol, they cannot be selected or edited separately from the underlying slice. Subslices are regenerated
every time the stacking order of slices is arranged.
Adobe Web Project
PHOTOSHOP LESSON 3
Creating user-slices:
Students can create user-slices with the slice tool, and in ImageReady, from a selection or from guides.
To create a slice with the slice tool:

1.
Select the slice tool ( ). Any existing slices automatically display

in the document window.
2.
Choose a style setting in the options bar:
Normal to determine slice proportions by dragging.

Constrained Aspect Ratio to set a height-to-width ratio. Enter
whole numbers or decimals for the aspect ratio. For example,
to create a slice twice as wide as it is high, enter 2 for the
width and 1 for the height.
Fixed Size to specify the slice's height and width. Enter pixel
values in whole numbers.
11. Ask students to drag over the area where they want to create a
slice. Shift-drag to constrain the slice to a square. Alt-drag
(Windows) or Option-drag (Mac OS) to draw from the center.
Use snap to align a new slice to a guide or another slice in the
image.
To create a slice from a selection (ImageReady):
1.
Select a portion of the image.
2.
Choose Slices > Create Slice from Selection.
ImageReady creates a user-slice based on the selection marquee. If the selection is feathered, the slice
covers the full selection (including the feathered edges). If the selection is nonrectangular, the slice
covers a rectangular area large enough to cover the full selection.
To create slices from guides (ImageReady):

1.
In an image containing guides, choose Slices > Create Slices from Guides. All slices created from guides are
user-slices.
When you create slices from guides, any existing slices are deleted.
Note that there are two other kinds of slices: layer-based slices that are created from a layer, and auto-slices
(defined by a dotted line) that are generated to fill the space in the image that is not defined by user-slices or layerbased slices. In addition, there are subslices that are generated by creating overlapping slices. Only the user-slice
will be formally used in Adobe Web Project.
Adobe Web Project
PHOTOSHOP LESSON 3
Viewing slices:
Students can view slices in Photoshop, the Photoshop Save for Web dialog box, and ImageReady. The following
characteristics can help them identify and differentiate among slices:
Slice lines Define the boundary of the slice. Solid lines indicate that the slice is a user-slice or layer-based slice;
dotted lines indicate that the slice is an auto-slice.
Slice colors Differentiate user-slices and layer-based slices from auto-slices. By default, user-slices and layerbased slices have blue symbols, while auto-slices have gray symbols.
Slice numbers Slices are numbered from left to right and top to bottom, beginning in the upper left corner of
the image. If the arrangement or total number of slices is changed, slice numbers are updated to reflect the new
order.
Slice symbols indicate whether a user-slice is an Image ( ) or No Image (

slice ( ); if the slice is linked ( ); or if the slice includes a rollover effect (
) slice; if the slice is a layer-based

).
Adobe Web Project
PHOTOSHOP LESSON 3
To show or hide slices:

Turn on display of slices in the View > Show submenu, and choose View > Show Extras. This command also
shows or hides: (Photoshop) selection edges, guides, a grid, target path, and notes, or (ImageReady)
selection edges, imagemaps, text bounds, text baseline, and text selection.
(Photoshop Save for Web dialog box and ImageReady) CLICK! the Slices Visibility button (
).
To change the color of slice lines (Photoshop):

1.
Choose a color from the Line Color pop-up menu in the options bar.
To change the color of slice lines (ImageReady):

1.
Choose Edit > Preferences > Slices.
2.
Under Slice Lines, choose a color from the Line Color pop-up menu.
3.
Changing the color of slice lines automatically changes the color of selected slice lines to a contrasting color.
To show or hide slice numbers (Photoshop):
Select Show Slice Numbers in the options bar. Slice numbers show when the option is checked.
Students select a slice with the slice select tool in order to apply modifications to it. In the Photoshop Save for
Web dialog box and in ImageReady, multiple slices can be selected.
To select a slice:
).
1.
Select the slice select tool (
2.
CLICK! on a slice in the image. When working with overlapping slices, CLICK! the visible section of an
underlying slice to select it.
To toggle between the slice tool and the slice select tool, hold down Ctrl (Windows) or Command (Mac OS).
An Activity for Students:

Have your students open a sample image from the Photoshop Samples Folder. In the example, bear.psd is used.
Have students play with the slice tool.
Create and save this image several
times using the Save for Web option
and have students create the HTML
page for it. Do this several times and
compare different file types.
Adobe Web Project
PHOTOSHOP LESSON 3
Exercise Two: Working with Imagemaps (ImageReady)

Explain that imagemaps will enable students to link an area of an image to a URL. There can be multiple linked
areas (imagemap areas) in an imagewith links to text files, other images, audio, video, or multimedia files,
other pages in a students Web site, or other Web sites. Students can also create rollover effects in imagemap
areas.
In addition, students should recognize that the main difference between using imagemaps and using slices to
create links is in how the source image is exported as a Web page. Using imagemaps keeps the exported image
intact as a single file, while using slices causes the image to be exported as a separate file. And, slices allow the
linking of rectangular images only, while imagemaps allow links to circular, polygonal, or rectangular areas in an
image.
If students need to link only rectangular areas, then using slices may be preferable to using an imagemap.
Lets start imagemapping
Students should open Adobe ImageReady.
Note: To avoid unexpected results, do not create imagemap areas in slices that contain URL linkseither the
imagemap links or the slice links may be ignored in some browsers.
To create an imagemap area using an imagemap tool:
3.
1.
Select the rectangle imagemap tool (

), the circle imagemap tool (
or the polygon imagemap tool (
) in the toolbox.
2.
For the rectangle or circle imagemap tool, select Fixed Size to specify set
values for the imagemap area's dimensions. Enter pixel values in whole
numbers.
),
Have students do one of the following to define the imagemap area:
With the rectangle or circle imagemap

tool, drag over the area to be defined.
Shift-drag to constrain the area to a
square. Alt-drag (Windows) or Option-drag
(Mac OS) to drag an imagemap area from
its center.
With the polygon imagemap tool, CLICK!
in the image to set the starting point.
Position the pointer where the first straight
segment is to end, and CLICK! Continue
CLICKing! to set endpoints for subsequent
segments. Hold down Shift to constrain
the segment to 45 increments. To close
the border, double-click, or position the
pointer over the starting point (a closed
circle appears next to the pointer) and
CLICK!
Adobe Web Project
PHOTOSHOP LESSON 3
Students can Shift-drag to constrain the area to a square orAlt-drag (Windows) or Option-drag (Mac OS) to
drag an imagemap area from its center.
Viewing imagemaps:
1.
CLICK! the Image Map Visibility button (
2.
Choose View > Show > Image Maps.
3.
Choose View > Show Extras
) in the toolbox.
When the imagemap select tool is selected, the imagemap areas show automatically. The imagemap areas can
Show or Hide using the Image Map Visibility button.
Selecting and modifying imagemaps :

1.
Select the imagemap select tool (
2.
CLICK! on an imagemap area in the image. Shift-click will add areas to the selection.
).
Students can move, arrange, align, and duplicate tool-based imagemap areas using the Image Map palette.
The image is saved when you output HTML.
Adobe Web Project
PHOTOSHOP LESSON 3
Exercise Three: An Optional Activity

Applying transformations
The commands under the Transform submenu lets your students apply specific transformations to a selection,
layer, path, vector shape, or selection border. Photoshop or ImageReady previews the effect and surrounds the
selected area with a bounding border that lets students manipulate the selection, layer, or path.
Your students can apply several commands in succession before applying the cumulative transformation. For
example, they can choose Scale, drag a handle to scale, and then choose Distort, drag a handle to distort, and
press Enter or Return to apply both transformations. In Photoshop, students can also enter numeric values in the
options bar.
To scale, rotate, skew, distort, or apply perspective:

1.
2.
To transform part or all of a layer, select it. Then choose Edit > Transform > Scale, Rotate, Skew, Distort,
or Perspective.
To transform part or all of a path, select it. Then choose Edit > Transform Points or Transform Path >
Scale, Rotate, Skew, Distort, or Perspective.
To transform a selection border, make or load a selection. Choose Select > Transform Selection. Then
choose Edit > Transform > Scale, Rotate, Skew, Distort, or Perspective.
Drag the handles, or in Photoshop, enter values in the options bar to achieve the desired effect.
3.
To apply additional transformations, repeat steps 1 and 2.
4.
Press Enter or Return to apply the cumulative transformation or CLICK! OK (

or CLICK! Cancel ( ) in the options bar to cancel the transformation.
) in the options bar. Press Esc
To scale or skew around the center point, press Alt (Windows) or Option (Mac OS) when choosing the Scale or
Skew command.
To flip or rotate precisely:

1.
2.
Students do one of the following:

To flip or rotate part or all of a layer, select it.
To flip or rotate part or all of a path, select it.
To transform a selection border, make or load a selection. Then choose Select > Transform Selection.
Students choose Edit > Transform, Transform Points, or Transform Path (Photoshop), and students choose
one of the following commands from the submenu:
Rotate 180 to rotate by a half-turn.

Rotate 90 CW to rotate clockwise by a quarter-turn.
Rotate 90 CCW to rotate counterclockwise by a quarter-turn.
Flip Horizontal to flip horizontally, along the vertical axis.
Flip Vertical to flip vertically, along the horizontal axis.
Adobe Web Project
PHOTOSHOP LESSON 3
To repeat a transformation:
To repeat a transformation on a selection or layer, choose Edit > Transform > Again.
To repeat a transformation on a path, choose Edit > Transform Points > Again or Transform Path > Again.
To duplicate an item when transforming it:

Hold down Alt (Windows) or Option (Mac OS) when selecting the Transform command.
Freely transforming and previewing effects

The Free Transform command lets your students use the Scale, Rotate, Skew, Distort, and Perspective commands
without having to select them from the menu. To apply these transformations, students use different shortcut
keys as they drag the handles of the transform bounding box. Students can also enter numeric values in the
options bar.
To freely transform:
1.
Specify what to transform:
2.
To transform part or all of a layer, select it. Then choose Edit > Free Transform.
To transform part or all of a path or shape, select it. Then choose Edit > Free Transform Points or Free
Transform Path.
To transform a selection border, create or load a selection. Then choose Select > Transform Selection.
To transform selections by dragging, choose the move tool for pixel-based selections ( ), or the path
component selection tool ( ) for vector shape or path selections, then select Show Bounding Box in the
options bar, and transform the selection by dragging the handles to reshape the bounding box. The
cursor changes shape as you move the cursor near the handles of the bounding box.
Students do one or more of the following:
3.
To scale, drag a handle. Students should press Shift as they drag a corner handle to scale
proportionately. When positioned over a handle, the pointer becomes a double arrow ( ).
To rotate, move the pointer outside of the bounding border (it becomes a curved, two-sided arrow) (
), and then drag. Press Shift to constrain the rotation to 15 increments.
To rotate around a point other than the center of the selection, drag the center point to a new position
in the selection before rotating.
To distort relative to the center point of the bounding border, press Alt (Windows) or Option (Mac OS),
and drag a handle ( ).
To distort relative to a point other than the center of the selection, drag the center point to a new
position in the selection before distorting.
To distort freely, press Ctrl (Windows) or Command (Mac OS), and drag a handle.
To skew, press Ctrl+Shift (Windows) or Command+Shift (Mac OS), and drag a side handle. When
positioned over a side handle, the pointer becomes a white arrowhead with a small double arrow ( ).
To apply perspective, press Ctrl+Alt+Shift (Windows) or Command+Option+Shift (Mac OS), and drag a
corner handle. When positioned over a corner handle, the pointer becomes a gray arrowhead ( ).
Students press Enter or Return to apply the cumulative transformation or CLICK! OK ( ) in the options bar.
Press Esc or CLICK! Cancel ( ) in the options bar to cancel the transformation.
10
Adobe Web Project
PHOTOSHOP LESSON 3
Lesson Three: Check for Understanding

Review questions
1.
What purpose does a slice serve?
2.
User-slices are created by ________________________.
3.
What purpose does the imagemap serve?
Review answers
1.
Slices divide a source image into functional areas.
2.
Slice tool.
3.
Imagemaps enable students to link an answer of an image to a URL.


11
Adobe Web Project
PHOTOSHOP LESSON 4
Animation in ImageReady
Level
have a familiarity with the Web and online resources.

Adobe ImageReady provides a powerful, easy way to create multiple-frame animations from a single
document. Using the Animation and Layers palettes, students will be able to create, edit, copy, paste,
and rearrange frames in sequence. Students will also be able to use the powerful Tween feature of
ImageReady to quickly create new frames that vary a layers opacity, position, or layer effects, and create
the illusion of a single element in a frame moving or fading in or out.
Adobe Photoshop/ImageReady is the industry-standard, high-capability program that offers
sophisticated manipulation of images. The purpose of Lesson Four/Photoshop-ImageReady is to take
students beyond the fundamentals of Photoshop/ImageReady learned in Lessons One, Two, and Three
to using the information and begin to create animated, image-rich Web pages. Students can now use
the tools and techniques from the first three Lessons to design basic Web pages that include images,
text, and effects plus animation. This is exciting as students will begin now to see how the four Adobe
tools (Illustrator and Photoshop/ImageReady PLUS LiveMotion and GoLive) tie together to provide
extremely powerful Web-designing capability.
Because of the nature of Adobe Web Project, the techniques in Lesson Four feature only a small part of
Lesson Four is designed to be taught in approximately two class hours, depending on the teachers pace of
instruction and the prior knowledge of the students. This lesson is designed to be done in both Adobe Photoshop
and ImageReady as noted.

To create a rollover by using the rollover palette

To create a multi-layered image to use as the basis for the rollover or animation
To use the Layers palette in conjunction with the rollover palette to create rollover sequences
To optimize and save the rollover
To create a Web animation using the animation palette
To add, select, rearrange, and delete frames
To copy and paste frames
To work with layers
Adobe Web Project
PHOTOSHOP LESSON 4
Teacher Orientation for Lesson Four

Key Definitions for Lesson Four
Animation: a sequence of images, or frames, that is displayed over time. Each frame varies slightly from the
preceding frame, creating the illusion of movement when the frames are viewed in quick succession.
Optimizing: the process of fine-tuning the display quality and file size of an image for use on the Web or other
online media. Adobe Photoshop and Adobe ImageReady give you an effective range of controls for compressing
the file size of an image while optimizing its online display quality. You can optimize images in the three major
graphic file formats used on the Web: GIF (Graphics Interchange Format), JPEG (Joint Photographic Experts
Group), and PNG-8 or PNG-24 (Portable Network Graphics, with 8-bit or 24-bit color).
Rollover: a sequence of images, or frames that are displayed when triggered by a mouse event. Each frame
varies slightly from the preceding frame, creating the illusion of movement when the frames are viewed.
Rollover palette: lets students create, view, and set options for the frame state in a Rollover.
Adobe Web Project
PHOTOSHOP LESSON 4
Exercise One: Creating a Rollover

Worth noting to students: most Web effects can be previewed directly in Photoshop/ImageReady. However, the
appearance of an image on the Web depends on the operating system, color display system, and browser used to
display the image. Be sure to preview images in different browsers, on different operating systems, and with
different color bit depths if at all possible.
Lets begin:
Students should begin in the ImageReady environment.
A rollover is a Web effect in which different states of an image appear when a viewer performs a mouse
actionsuch as rolling or clickingover an area of the Web page. A state is defined by a specific configuration
of the Layers palette, including layer location, styles, and other formatting options.
Students will use a slice or imagemap area to define the
active area for a rollover. By default, every slice or imagemap
area has one statethe Normal state. (The Normal state
corresponds to the appearance of an image when it is first
loaded into a Web browser and no rollover effects have
occurred.) When new states are added to the rollover, a
snapshot of the slice or imagemap area is captured in the
previous state. Students can then use the Layers palette to make changes to the image in the new state.
Students can also add an animation to a Rollover state.
How students work with layers is an essential part of creating rollovers. Placing the image content for a rollover
on its own layer allows students to use Layers palette commands and options to create rollover effects. When
creating rollovers or animations, some changes made to a layer affect only the active state or frame, while others
affect all states or frames.
When working with layers in a frame, students can create or copy selections in the layer; adjust color and tone;
change the layer's opacity, blending mode, or position; add layer effects; and perform editing tasks as with layers
in any image. Using layer attributes to create animation effects is very simple, and it allows students to save an
animation file in Photoshop format for later re-editing.
Keep in mind that some changes you make to layers affect only the active frame, while others affect all frames:
Frame-specific changes Affect only the selected frames in the Animation palette. Changes you make to a layer
using Layers palette commands and optionsincluding a layer's opacity, blending mode, visibility, position, and
layer effectsare frame-specific.
Global changes Affect all frames in an animation. Changes made to the layer's pixel values, using painting and
editing tools, color and tone adjustment commands, filters, type, and other image-editing commands, affect
every frame in which the layer is included.
Adobe Web Project
PHOTOSHOP LESSON 4
Creating layer-based slices:

When students create a slice from a layer, the slice area encompasses all the pixel data in the layer. If students
move the layer or edit the layer's content, the slice area automatically adjusts to encompass the new pixels.
Layer-based slices are especially useful when working with rollovers. Start by placing the rollover element on a
separate layer, and then create a slice from that layer. If students apply an effect to the layersuch as a drop
shadow or glowto create a Rollover state, the slice automatically adjusts to encompass the new pixels.
However, students should not use a layer-based slice when they plan to move the layer over a large area of the
image during an animation, because the slice dimension may exceed a useful size.
To create a slice from a layer:

1.
Select a layer in the Layers palette.
2.
Choose Layer > New Layer Based Slice.
Using the Rollover palette

Students can use the Rollover palette to create and set options for Rollover states. The Rollover palette displays
thumbnails for each state of a rollover. The first state in the Rollover palette is always the Normal state.
Ask students to change the thumbnail view of Rollover states:

1.
Choose Palette Options from the Rollover palette menu.
2.
Select a thumbnail size.
3.
Under Thumbnails Show, define the content of the thumbnail:
4.
Current Slice to show only the current slice in the thumbnail.

Entire Document to show the entire image in the thumbnail. This view is useful when creating a
secondary rollover effect.
CLICK! OK.
Ask students to select a slice or imagemap area in the Rollover palette:

Choose a slice or imagemap area from the pop-up menu at the lower left
corner of the Rollover palette.
Adobe Web Project
PHOTOSHOP LESSON 4
Creating Rollover states:

When students create a Rollover state, they select a mouse action that activates the state (except for the first
state in a rollover, which is always the Normal state).
Ask students to create a Rollover state:

1.
Select the slice or imagemap area to which they want to add the rollover.
When creating a slice or imagemap area for a rollover, use a layer-based slice or a layer-based imagemap area.
This is recommended because the dimensions of a layer's content may change in the course of creating a rollover.
2.
In the Rollover palette, create a new state:
CLICK! the New State button ( ) at the bottom of the palette.

Choose New State from the Rollover palette menu.
The new Rollover state is identical to the state immediately preceding

it, until modifications are made to the image using the Layers palette.
Modify the image for the Rollover state using the Layers palette.
Create a Layer for each Rollover state that is planned to be used. This
will make it easier to edit each frame.
Adding layers to frames:

When students create a new layer, it is visible in all frames
of an animation. To hide a layer in a specific frame, select
the frame in the Animation palette, and then hide the
desired layer in the Layers palette.
Students can use the Add Layer to New Frames option to
automatically add a new layer to the image every time
they create a frame. The new layer is visible in the new
frame but hidden in other frames.
Adobe Web Project
PHOTOSHOP LESSON 4
To add a new layer every time a frame is created:

Choose Add Layer to New Frames from the Animation palette menu. A check mark indicates that the option is
turned on.
Activity for Students:

1.
Have students re-create the

Rollover palette to the right.
2.
Have students create another

rollover using four or more
states.
Previewing Rollover States:

Your students can preview Rollover states directly in the ImageReady document window by switching to rollover
preview mode. This preview is consistent with Internet Explorer 5.0 for Windows. To preview the rollover effect
in your computer's default Web browser, CLICK! the Preview in Default Browser button in the toolbox.
To have students use rollover preview mode:

1.
CLICK! the Rollover Preview button (

palette.
) in the toolbox, or CLICK! the Play button ( ) in the Rollover
2.
In the document window, perform the action that activates the Rollover state. For example, position the
mouse over the rollover slice or imagemap area to preview the Rollover state. Then CLICK! the slice or
imagemap area to preview the state.
To exit rollover preview mode:

Select any tool in the toolbox (including the Rollover Preview
button), or CLICK! the Play button in the Rollover palette.
Adobe Web Project
PHOTOSHOP LESSON 4
Exercise Two: Optimizing and Saving Rollovers

Creating animations:
An animation is a sequence of images, or frames, that is displayed over time. Each frame varies slightly from the
preceding frame, creating the illusion of movement
when the frames are viewed in quick succession.
Working with layers is an essential part of creating
animations in ImageReady. Placing each element of an
animation on its own layer enables you to change the
position and appearance of the element across a series
of frames, using the Layers palette commands and
options.
Students use the Animation palette, in conjunction with the Layers palette, to create animation frames from an
original, multilayer image. They can assign a delay time to each frame, use the Tween command to generate new
frames, and specify looping for the animation.
Keep in mind that an image can have multiple animations that are associated with different Rollover states. For
example, adding an animation to the Normal Rollover state causes the animation to play when the Web page is
first loaded by a Web browser. Adding an animation to another Rollover state causes the animation to play only
when the Web user performs the specified action (such as placing the mouse over the rollover or clicking on the
rollover).
To have students display the Animation palette:

Choose Window > Show Animation, or click the Animation
palette tab.
To change the thumbnail view of frames:

1.
Select Palette Options from the Animation palette menu.
2.
Select a thumbnail size, CLICK! OK.
Adobe Web Project
PHOTOSHOP LESSON 4
To add a frame to an animation:

In the Animation palette, do one of the following:
CLICK! the New Frame button ( ).

Select New Frame from the Animation palette menu.
Selecting frames:
Before your students can work with a frame, they must select it as the current frame. The contents of the current
frame appear in the document window.
Students can select multiple frames, either contiguous or discontiguous, to edit them or apply commands to
them as a group. When multiple frames are selected, only the current frame appears in the document window.
In the Animation palette, the current frame is indicated by a narrow border (inside the shaded selection
highlight) around the frame thumbnail. Selected frames are indicated by a shaded highlight around the frame
thumbnails.
To select the current frame:

In the Animation palette, CLICK! the thumbnail of the frame you want to select as the current frame.
In the Animation palette or the Layers palette, CLICK! the Forward button ( ) to select the next frame in
the series as the current frame.
In the Animation palette or the Layers palette, CLICK! the Backward button ( ) to select the previous
frame in the series as the current frame.
In the Animation palette, CLICK! the Rewind button (
) to select the first frame in the series as the current
frame.
To select multiple frames:

In the Animation palette, do one of the following:
To select contiguous multiple frames, Shift-CLICK! a second frame. The second frame and all frames
between the first and second are added to the selection.
To select discontiguous multiple frames, Ctrl-CLICK! (Windows) or Command- CLICK! (Mac OS) additional
frames to add those frames to the selection.
To select all frames, choose Select All Frames from the Animation palette menu.
Adobe Web Project
PHOTOSHOP LESSON 4
To deselect a frame in a multiframe selection:
Ctrl- CLICK! (Windows) or Command- CLICK! (Mac OS) a frame to deselect it.
Rearranging and deleting frames:

Students can change the position of frames in an animation and reverse the order of selected contiguous
frames. They can also delete selected frames or the entire animation.
To change the position of a frame:

1.
Select the frame you want to move. Ctrl- CLICK! (Windows) or Command- CLICK! (Mac OS) to add frames to
the selection.
2.
Drag the selection to the new position.
To reverse the order of contiguous frames:

1.
Select the contiguous frames that are to be reversed.
2.
Choose Reverse Frames from the Animation palette menu.
To delete selected frames:

Select Delete Frame(s) from the Animation palette menu.

CLICK! the Trash button ( ) in the Animation palette, and CLICK! Yes to confirm the deletion.
Drag the selected frame or frames onto the Trash button.
To delete an entire animation:
Select Delete Animation from the Animation palette menu.
Tweening frames:
Students use the Tween command to automatically add or modify a series of frames between two existing
framesvarying the layer attributes (position, opacity, or effect parameters) evenly between the new frames to
create the appearance of movement. For example, if your students want to fade out a layer, set the opacity of
the layer in the starting frame to 100%; then set the opacity of the same layer in the ending frame to 0%. When
they tween between the two frames, the opacity of the
layer is reduced evenly across the new frames.
The term "tweening" is derived from "in betweening,"
the traditional animation term used to describe this
process. Tweening significantly reduces the time
required to create animation effects such as fading in or
fading out, or moving an element across a frame.
Tweened frames can be edited individually after they are created.
Using tweening to animate warped text: Specify different warping effects in two frames of the animation, then
use the Tween command to generate the intermediate frames.
Adobe Web Project
PHOTOSHOP LESSON 4
Students create frames using tweening:

1.
To apply tweening to a specific layer, select it in the Layers palette.
2.
Select a single frame or multiple contiguous frames.
3.
4.
) in the Animation palette.
CLICK! the Tween button (

Select Tween from the Animation palette menu.
Specify the layer or layers to be varied in the added frames:
5.
All Layers to vary all layers in the selected frame or frames.

Selected Layer to vary only the currently selected layer in the selected frame or frames.
Specify layer attributes to be varied:
6.
Position to vary the position of the

layer's content in the new frames
evenly between the beginning
and ending frames.
Opacity to vary the opacity of the
new frames evenly between the
beginning and ending frames.
Effects to vary the parameter
settings of layer effects evenly
between the beginning and
ending frames.
If students selected a single frame in
step 2, they must choose where to add
frames from the Tween With menu:
7.
Next Frame to add frames between the selected frame and the following frame.
First Frame to add frames between the last frame and first frame. This option is only available if the last
frame in the Animation palette is selected.
Previous Frame to add frames between the selected frame and the preceding frame.
Last Frame to add frames between the first frame and last frame. This option is only available if the first
frame in the Animation palette is selected.
Enter a value, or use the Up or Down Arrow key to choose the number of frames to add.
8.
CLICK! OK.
Specifying looping:
Your students select a looping option to specify how many times the animation sequence repeats when played.
To specify looping:
1.
CLICK! the looping option selection box at the lower left corner of the Animation
palette.
2.
Select a looping option: Once, Forever, or Other.
3.
If Other is selected, enter a value in the Set Loop Count dialog box, and CLICK! OK.
10
Adobe Web Project
PHOTOSHOP LESSON 4
Viewing animations:
Viewing an animation lets your students preview the frames in timed sequence. They can preview an animation
in ImageReady or in a Web browser.
To view an animation in ImageReady:

1.
CLICK! the Play button ( ) in the Animation palette. The animation is displayed in the document window.
The animation repeats indefinitely unless you specified another repeat value in the Play Options dialog box.
2.
To stop the animation, CLICK! the Stop button ( ).
3.
To rewind the animation, CLICK! the Rewind button (
To preview an animation in a browser:
), (
) in the toolbox, or choose File > Preview In and select
CLICK! the Preview in Default Browser tool (
a browser from the submenu.
Use the browser's Stop and Reload commands to stop or replay the animation.
An Additional Activity for Students:

Have your students Create a 5-, 10- & 15- frame animation
11
Adobe Web Project
PHOTOSHOP LESSON 4
Exercise Three: Optimizing and Saving Rollovers

Optimizing animations:
Students can apply optimization settings to animated images just as they do to nonanimated images.
You should always optimize an animation in GIF format because GIF is the only format in ImageReady that
supports the display of animated images on the Web.
While you can optimize an image that includes animation in JPEG or PNG format, these formats do not support
animation. The resulting Web page will display only the first frame of the animation.
In addition to the standard optimization options for GIF format, you can optimize frames to include only areas
that change from frame to frame. (This greatly reduces the file size of the animated GIF.) ImageReady also
applies a special dithering technique to animations to ensure that dither patterns are consistent across all frames
and to prevent flickering during playback. Due to these additional optimization functions, ImageReady may
require more time to optimize an animated GIF than to optimize a standard GIF.
To have students optimize an animated image:

1.
Choose Optimize Animation from the Animation palette menu.
2.
Set the following options:
3.
Bounding Box to crop each frame to

the area that has changed from the
preceding frame. Animation files
created using this option are smaller
but are incompatible with GIF editors
that do not support the option.
Redundant Pixel Removal to make
transparent all pixels in a frame that
are unchanged from the preceding frame. This option is selected by default and is recommended.
The Transparency option in the Optimize palette must be selected for redundant pixel removal to work.
CLICK! OK.
4.
Apply optimization settings, as described in Optimizing images.

When optimizing the colors in an animation, use the Adaptive, Perceptual, or
Selective palette. This insures that the colors are consistent across frames.
Saving animations as animated GIFs:

Animations that are viewed in a Web browser are called animated GIFs.
When saving an optimized document containing an animation,
students can choose to generate an HTML file that contains code for
displaying the animated GIF in a Web page. The resulting Web page can
contain just the animated GIF or additional Web features, such as links
and rollovers, depending on the source document.
12
Adobe Web Project
PHOTOSHOP LESSON 4
To have students save an animation as an animated GIF:

1.
Optimize the animation, as described above.
2.
Save the image, as described in previous lessons.

Saving animations as QuickTime movies
Students can save an animation as a QuickTime movie. The resulting file is viewable in the QuickTime player and
can be opened in other applications that support QuickTime movie format.
To save an animation as a QuickTime movie:

1.
Choose File > Export Original.
2.
Select QuickTime Movie from the format pop-up

menu.
3.
Type a filename, and choose a location for the file.
4.
CLICK! Save.
5.
If desired, adjust the compression settings,

and CLICK! OK.
13
Adobe Web Project
PHOTOSHOP LESSON 4
Lesson Four: Check for Understanding

Review questions
1.
Describe a simple way to create animation.
2.
Why would you want to tween animation frames?
3.
How do you optimize an animation?
4.
What does optimizing an animation accomplish?
5.
Why is working with Layers important in animation in ImageReady?
Review answers
1.
A simple way to create animation is to start with a layered Photoshop file. Use the New Frame button in the
Animation palette to create a new frame, and use the Layers palette to alter the position, opacity, or effects
of one of the selected frames.
2.
You can instruct Adobe ImageReady to tween intermediate frames between any two frames, to change
layer opacity or position between two frames, or to add new layers to a sequence of frames. Tweening saves
time and effort in animation.
3.
Click the Show Options button in the Optimize palette, and then choose File > Save Optimized to optimize
animations.
4.
When an optimized animated document is saved, an HTML file can be generated that contains code for
displaying the animated GIF in a Web page. The resulting Web page can contain just the animated GIF or
additional Web features, such as links and rollovers depending on the source document.
5.
Working with layers is the key to creating animations in ImageReady. Each new frame starts out as a
duplicate of the preceding framethe frame is edited by adjusting its layers.


14
Adobe Web Project
PHOTOSHOP LESSON 5
Saving, Formatting, and Exporting Images

Level
have a familiarity with the Web and online resources, and have successfully completed Lessons One
through Four in the Photoshop unit of Adobe Web Project.

Adobe ImageReady provides a powerful, easy way to create multiple-frame animations from a single
document. Using the Animation and Layers palettes, students will be able to create, edit, copy, paste,
and rearrange frames in sequence. Students will also be able to use the powerful Tween feature of
ImageReady to quickly create new frames that vary a layers opacity, position, or layer effects, and create
the illusion of a single element in a frame moving or fading in or out.
The purpose of Lesson Five/Photoshop-ImageReady is to take students beyond the fundamentals of
Photoshop/ImageReady learned in Lessons One, Two, Three, and Four to using the information in
creating animated, image-rich Web pages. Students can now use the tools and techniques from the first
four Lessons to design basic Web pages that include images, text, and effects plus animation. This is
exciting as students will begin now to see how the four Adobe tools (Illustrator and Photoshop/
ImageReady PLUS LiveMotion and GoLive) tie together to provide extremely powerful Webdesigning capability.
Because of the nature of Adobe Web Project, the techniques in Lesson Five feature only a small part of
Lesson Five is designed to be taught in approximately one class hour, depending on the teachers pace of
instruction and the prior knowledge of the students. This lesson is designed to be done in both Adobe Photoshop
and ImageReady as noted.

In this lesson your students will learn
About file formats

To add digital copyright information
To optimize images for the Web
To save optimized images
Adobe Web Project
PHOTOSHOP LESSON 5
Teacher Orientation for Lesson Five

Key Definitions for Lesson Five
File Formats: You can use various file formats to get images into and out of Photoshop and ImageReady.
Graphic file formats differ in the way they represent graphic information (as pixels or as vectors), in how they
compress image data, and in which Photoshop and ImageReady features they support.
Digital Copyrighting: You can add copyright information to Photoshop images and notify users that an image
is copyright-protected via a digital watermark that uses Digimarc PictureMarc technology. The watermarka
digital code added as noise to the imageis generally imperceptible to the human eye. The watermark is
durable in both digital and printed forms, surviving typical image edits and file format conversionsand is still
detectable when the image is printed and then scanned back into a computer. Embedding a digital watermark
in an image lets viewers obtain complete contact information about the creator of the image. This feature is
particularly valuable to image creators who license their work to others. Copying an image with an embedded
watermark also copies the watermark and any information associated with it.
Optimizing images: To optimize an image for the Web, you select a file format and other options in the
Optimize panel (Photoshop) or the Optimize palette (ImageReady). You can apply different optimization settings
to different slices in an image. You can also use alpha channels to selectively optimize an image within a slice or
across slice boundaries.
Teachers will want to note the following:
The full version of Photoshop provides tools for creating and manipulating static images for use on the Web.
Users can devide images into slides, add links and HTML text, optimize the slices, and save the image as a
Web page.
ImageReady provides many of the same image-editing tools as Photoshop. In addition, it includes tools and
palettes for advanced Web processing and creating dynamic Web images such as animations and rollovers.
Remember: Only a few of the many powerful effects of Photoshop/ImageReady are taught in Adobe Web
Project.
Adobe Web Project
PHOTOSHOP LESSON 5
Exercise One: About File Formats

Your students can use various file formats to get images into and out of Photoshop and ImageReady. Graphic file
formats differ in the way they represent graphic information (as pixels or as vectors), in how they compress image
data, and in which Photoshop and ImageReady features they support.
The teacher will note that Exercise One requires explaining the various formats to the students. It is
recommended that teachers provide a handout or describe the formats on the whiteboard to ensure student
comprehension.
Photoshop format: Photoshop format (PSD) is the default file format for newly created imagesand the only
format supporting all available image modes (bitmap, grayscale, duotone, indexed color, RGB, CMYK, lab, and
multichannel), guides, and layers (including adjustment layers, type layers, and layer effects). Later versions of
Photoshop provide features that are not supported in previous versions. If your students edit or save an image
using an earlier version of Photoshop, unsupported features are discarded.
AVI (ImageReady): Audio Video Interleave (AVI) format is the standard Windows format for audio/video data.
QuickTime Movie (ImageReady): QuickTime Movie format is a cross-platform format used for time-based data,
such as video and audio. In ImageReady (only), you can save animations as QuickTime movies and open existing
QuickTime movies as animations in order to optimize them for the Web.
Student activity to promote understanding:

Students will compare file sizes of PNGs, PSD, EPS, JPG (high, medium, low).
The teacher will need to provide a file in advance, plus a handout on which students can record their
observations.
The teacher should provide a file for students that can be converted into the several formats listed above. As
students convert the files from one format, students will mark file size.
This file can be used in subsequent activities in this Lesson. Advanced students can create their own files with
the teachers guidance.
Adobe Web Project
PHOTOSHOP LESSON 5
Exercise Two: Optimizing Images for the Web (Photoshop)

In Photoshop, preferences can be set for saving image previews, using file extensions, and maximizing file
compatibility.
To set file saving preferences:

Have students choose Edit > Preferences > Saving Files, and set the following options:
Image Previews:
Students should choose an option for saving image previews: Never Save to save files without previews, Always
Save to save files with specified previews, or Ask When Saving to assign previews on a file-by-file basis.
(In Mac OS, you can select one or more of the following preview typesto speed the saving of files and
minimize file size, select only the
previews needed:
Icon to use the preview as a file

icon on the desktop.
Macintosh Thumbnail to
display the preview in the Open
dialog box.
Windows Thumbnail to save a
preview that can display on
Windows systems.
Full Size to save a 72-ppi
version of the file for use in
applications that can only open
low-resolution
Photoshop images. For nonEPS files, this is a PICT preview.)
File Extension (Windows):

Students should choose an option for the three-character file extension that indicates a file's format: Use Upper
Case to append file extensions using uppercase characters or Use Lower Case to append file extensions using
lowercase characters.
Append File Extension (Mac OS):

File extensions are necessary for files that students want to use on or transfer to a Windows system. Choose an
option for appending extensions to filenames: Never to save files without file extensions; Always to append file
extensions to filenames; or Ask When Saving to append file extensions on a file-by-file basis. Select Use Lower
Case to append file extensions using lowercase characters.
In Mac OS, to append a file extension to the current file only, students hold down Option and choose a file
format from the Save As or Save a Copy dialog box.
Adobe Web Project
PHOTOSHOP LESSON 5
To display a preview file icon (Windows

only):
1.
Students Save the file in Photoshop

format with a thumbnail preview.
2.
Right-CLICK! the file on the desktop

(or in any Windows or Photoshop
dialog box that displays a file list),
and choose Properties from the
context menu that appears.
3.
CLICK! the Photoshop Image tab.
4.
Select an option for generating

thumbnails, and CLICK! OK.
Preview icons appear on the desktop and in

file lists (when the view is set to Large Icons).
Adobe Web Project
PHOTOSHOP LESSON 5
Exercise Three: Optimized Images

To the teacher: the following information can be presented via handout or on the whiteboard. A discussion
instructional format is appropriate for this material.
About optimization: Optimization is the process of fine-tuning the display quality and file size of an image for use
on the Web or other online media. Adobe Photoshop and Adobe ImageReady give you an effective range of controls
for compressing the file size of an image while optimizing its online display quality. You can optimize images in the
three major graphic file formats used on the Web (see Adobe Illustrator, Lesson 5): GIF (Graphics Interchange
Format), JPEG (Joint Photographic Experts Group), and PNG-8 or PNG-24 (Portable Network Graphics, with 8-bit or
24-bit color).
There are two methods of optimizing images:
For basic optimization, the Photoshop

Save As command lets students save
an image as a GIF, JPEG, or PNG file.
Depending on the file format, students
can specify image quality, background
transparency or matting, color display,
and downloading method. However,
any Web featuressuch as slices, links,
animations, and rolloversthat have
been added to a file are not preserved.
For precise optimization, students can

use the optimization features in
Photoshop or ImageReady to preview
optimized images in different file formats and with different file attributes. Multiple versions of an image can
be viewed simultaneously and optimization settings can be modified as the image is previewed to select the
best combination of settings. Students can also specify background transparency and matting, select
options to control dithering, and resize the image to specified pixel dimensions or a specified percentage of
the original size.
When saving an optimized file use the Save for Web (Photoshop) or Save Optimized (ImageReady) command,
students can choose to generate an HTML file for the image. This file contains all the necessary code to display the
imageas well as links, rollovers, and animationsin a Web browser.
Adobe Web Project
PHOTOSHOP LESSON 5
Exercise Four: Saving Optimized Images

There are several ways to save an optimized image for use on the Web:
HTML and Images: Students can generate all files required to use their image as a Web page. This includes an
HTML file and separate image files for the slices in the source image. The HTML file includes code for any Web
effectssuch as hypertext links, imagemaps, rollovers, and animationsin the document. The image files use
the format and options specified in the optimization setting.
Images only: Students can save their image with the format and options specified in the optimization setting. If
the source image contains multiple slices, each slice is saved as a separate file.
HTML only: Students can save the HTML code, but not the image data, for their images. In ImageReady, they can
also create an HTML file using the Copy HTML command. This command lets students copy the HTML code for
an optimized image to the Clipboard, and paste the HTML code into an HTML file. If they subsequently make
changes to the source image, students can use the Update HTML command to update the HTML file.
Adobe Web Project
PHOTOSHOP LESSON 5
To save an optimized image, have students:

1.
(Photoshop) Choose File > Save for Web.
2.
Select a view and apply optimization settings
3.
Students should do one of the following:
4.
(Photoshop) CLICK! OK in the Save For Web dialog box.

(ImageReady) Choose File > Save Optimized to save the file in its
current state.
Students then type a filename, and choose a location for the resulting file or files.
5.
Students select a Save As Type option:
HTML and Images to generate an HTML file

and save each slice as a separate image file.
Images Only to save each slice in the image
as a separate file.
HTML Only to generate an HTML file but not
save any image files.
6.
To set preferences for saving image files and HTML files, CLICK! Output Settings.
7.
(ImageReady) Select Include GoLive Code to reformat HTML and JavaScript code so that rollovers will be
fully editable in Adobe GoLive (to be used later). Code is reformatted in the style used by GoLive (and may
create a larger HTML file).
8.
CLICK! Save.
Adobe Web Project
PHOTOSHOP LESSON 5
NOTE: Students need not generate an HTML file to open a Web page in GoLive. Simply save the Web page as a
Photoshop (PSD) file, and then import the file directly into GoLive. For more information, see Adobe GoLive, Lesson
Three in Adobe Web Project.
To copy HTML code to the Clipboard (ImageReady):

Choose Edit > Copy HTML Code, and choose an option for copying code from the submenu:
Copy All Slices to copy HTML code for all slices in the document.
Copy Selected Slices to copy HTML code for selected slices only.
Copy Preloads to copy the JavaScript portion of the HTML code for slices in the document.
ImageReady generates and formats HTML code based on settings in the Output Options dialog box.
To paste the ImageReady HTML code into an HTML document, open the HTML document in the destination
application and choose Edit > Paste.
Adobe Web Project
PHOTOSHOP LESSON 5
Lesson Five: Check for Understanding

Review questions
1.
Name the several ways to save optimized images on the Web.
2.
Explain the Photoshop format.
3.
Explain the QuickTime movie format
Review answers
1.
HTML and Images: Students can generate all files required to use their image as a Web page. This includes
an HTML file and separate image files for the slices in the source image. The HTML file includes code for any
Web effectssuch as hypertext links, imagemaps, rollovers, and animationsin the document. The image
files use the format and options specified in the optimization setting.
2.
3.
Images only: Students can save their image with the format and options specified in the optimization
setting. If the source image contains multiple slices, each slice is saved as a separate file.
HTML only: Students can save the HTML code, but not the image data, for their images. In ImageReady,
they can also create an HTML file using the Copy HTML command. This command lets students copy the
HTML code for an optimized image to the Clipboard, and paste the HTML code into an HTML file. If they
subsequently make changes to the source image, students can use the Update HTML command to
update the HTML file.
Photoshop format: (PSD) is the default file format for newly created imagesand the only format
supporting all available image modes (bitmap, grayscale, duotone, indexed color, RGB, CMYK, lab, and
multichannel), guides, and layers (including adjustment layers, type layers, and layer effects). Later versions
of Photoshop provide features that are not supported in earlier versions.
QuickTime Movie format is a cross-platform format used for time-based data, such as video and audio. In
ImageReady (only), it is possible to save animations as QuickTime movies and open existing QuickTime
movies as animations in order to optimize them for the Web.


10
Adobe Web Project
PHOTOSHOP THE MOVIE PROJECT
The Movie Project Continues

You are the Director of the Marketing Team working for a large Hollywood studio (Palisades Pictures) and your
boss wants to advertise a new movie Web site for Once Upon a Day in Wonderland. As the Director of
Marketing, it has fallen on your shoulders to design and create the rollover button for the studios home page.
The head of the studio has made it clear that she expects an outstanding rollover button advertising the motion
pictures Web site. Once again, the success of this films Web site is your responsibility.
Here is an example of the vital statistics for the film you are advertising (or you may create your own with your
teachers guidance and permission):
Working Title: Once Upon a Day in Wonderland

Starring: John Revath, Charlize Sheron, Gregg German, and Christine Grant
Directed by: Tim O'Connors
Assumed Rating: PG-13 / PG
Final Cut Running Time: 160 minutes (two hours, forty minutes)
Synopsis of the Script: Tom Jeever's rather creepy mission is to create a new virtual world called Wonderland.
But others are out to stop this new virtual paradise. When Tom meets Christine Grant, another virtual reality
programmer working for the enemy, all madness breaks loose. Will the two live happily ever after in charmed
bliss? Or will Christines deep, dark secret throw a wrench into the works?
Using the above movie example (or your own vital statistics) and the information you learned from your
Photoshop lessons, you will create one or more movie buttons to advertise Palisades Pictures new film Web site.
Of course, your poster will be created on the computer you use in class employing Photoshop as your tool. The
studio has high hopes for the Web site of Once Upon a Day in Wonderland (or your title). As the Director of
Marketing, it is your responsibility to make those hopes come true.
Your teacher will tell you the time/class periods you have to create your rollover button.
Assignment: Create a rollover/animated button to advertise the Web site of the movie Once Upon a Day in
Wonderland (or your title).
Necessary procedures:
1.
Use Photoshop to create the graphic elements for your banner ad.
2.
With your teachers permission, use the Internet to locate other resources, if needed, to use in your poster.
Or, you may use a clip-art CD.
3.
Use Photoshop to lay out the poster using color, text, and graphics.
4.
Save your button as an animated GIF.
5.
Copy this GIF to a disk and turn in.
Photoshop: The Movie Project Continues
Adobe Web Project
PHOTOSHOP THE MOVIE PROJECT
Sample Banner Ads:
Photoshop: The Movie Project Continues
Adobe Web Project
Photoshop Toolbox Handout
PHOTOSHOP TOOLBOX HANDOUT
Adobe Web Project
Adobe Web Project
Adobe, the Adobe logo, Classroom in a Book, GoLive, Illustrator, ImageReady, LiveMotion, Photoshop, and PostScript are either registered trademarks or
trademarks of Adobe Systems Incorporated in the United States and/or other countries. Mac and Macintosh are trademarks of Apple Computer, Inc., registered in
the United States and other countries. Microsoft, OpenType, Windows NT, and Windows are either registered trademarks or trademarks of Microsoft Corporation
in the United States and/or other countries. All other trademarks are the property of their respective owners.
Adobe Web Project
PHOTOSHOP TOOLBOX OVERVIEW
The marquee
tools make
rectangular,
elliptical, single
row, and single
column
selections.
The move tool

moves
selections,
layers, and
guides.
The lasso tools

make freehand,
polygonal
(straight-edged),
and magnetic*
(snap-to)
selections.
The magic wand

tool selects
similarly colored
areas.
The crop tool

trims images.
The slice tool

creates slices.
The slice
selection tool
selects slices.
The airbrush
tool paints softedged strokes.
The paintbrush
tool paints brush
strokes.
The pencil tool

paints hardedged strokes.
The clone
stamp tool
paints with a
sample of an
image.
The pattern
stamp tool*
paints with part
of an image as a
pattern.
The history
brush tool*
paints a copy of
the selected
state or snapshot
into the current
image window.
The art history

brush tool*
paints with
stylized strokes
that simulate
the look of
different paint
styles, using a
selected state
or snapshot.
The eraser tool

erases pixels and
restores parts of
an image to a
previously saved
state.
The background
eraser tool*
erases areas to
transparency by
dragging.
The magic
eraser tool
erases solidcolored areas to
transparency
with a single
click.
The gradient
tools create
straight-line,
radial*, angle*,
reflected*, and
diamond*,
blends
between colors.
Photoshop Toolbox Overview
Adobe Web Project
The paint
bucket tool* fills
similarly colored
areas with the
foreground
color.
The blur tool

blurs hard edges
in an image.
The sharpen
tool sharpens
soft edges in an
image.
The smudge tool

smudges data in
an image.
The dodge tool

lightens areas
in an image.
The burn tool

darkens areas in
an image.
The sponge tool

changes the
color saturation
of an area.
The path
selection tools*
make shape or
segment
selections
showing anchor
points, direction
lines, and
direction points.
The type tool

creates type on
an image.
The pen tools* let

you draw smoothedged paths.
The custom
shape tool*
makes
customized
shapes selected
from a custom
shape list.
The
annotations
tool* makes
notes and voice
annotations
that can be
attached to an
image.
The eyedropper
tool samples
colors in an
image.
The measure
tool* measures
distances,
locations, and
angles.
The hand tool

moves an image
within its
window.
The zoom tool

magnifies and
reduces the view
of an image.
The image map

tools define
image map
areas in an
image.
The image
map select
tool selects
image maps.
Adobe Web Project
The toggle
image map
visibility tool
toggles between
showing and
hiding image
maps.
The toggle
slices visibility
tool toggles
between
showing and
hiding slices in
an image.
The rollover
preview tool
previews rollover
effects directly in
ImageReady.
The preview in
default browser
tool previews
animations in a
Web browser.
Adobe, the Adobe logo, Classroom in a Book, GoLive, Illustrator, ImageReady, LiveMotion, Photoshop, and PostScript are either registered trademarks or
trademarks of Adobe Systems Incorporated in the United States and/or other countries. Mac and Macintosh are trademarks of Apple Computer, Inc., registered in
the United States and other countries. Microsoft, OpenType, Windows NT, and Windows are either registered trademarks or trademarks of Microsoft Corporation
in the United States and/or other countries. All other trademarks are the property of their respective owners.
Adobe Web Project
PHOTOSHOP USING THE PEN TOOL
Using the Pen Tool

Drawing with the pen tool
Use the pen tool to draw a freeform path. The pen tool lets you create straight lines and smooth, flowing curves
with great precision.
A path is made up of one or more straight or curved segments. The beginning and end of each segment are
marked by control points, which work like pins holding wire in place. You change the shape of a path by editing
its control points.
A path is either open, like an arc, or closed, like a circle. For an open path, the starting and ending control points
for the path are called endpoints. You can control curves by dragging the direction points at the end of direction
lines that appear at control points that form curves.
A. Selected endpoint B. Selected control point C. Curved path segment D. Direction line E. Direction point
Paths can have two kinds of control points--corner points and smooth points. At a corner point, a path abruptly
changes direction. At a smooth point, path segments are connected as a continuous curve. You can draw a path
using any combination of corner and smooth points. If you draw the wrong kind of point, you can always
change it.
A. Four corner points B. Same point positions using smooth points C. Same point positions combining corner
and smooth points
A corner point can connect any two straight or curved segments, while a smooth point always connects two
curved segments.
Using the Pen Tool
Adobe Web Project
A corner point can connect both straight segments and curved segments.
Note: The default fill property of any line drawing is Fill, which fills in the area between path points to create
solid shapes. If you want to make an unfilled line drawing, choose Window > Properties and click Outline. Use
the slider to determine the width of the line.
Drawing straight segments

The simplest path you can draw with the pen tool is a straight line, made by clicking the pen tool to create two
control points. By continuing to click, you create a path made of straight line segments connected by corner
points.
To draw straight segments with the pen tool:

1.
Select the pen tool (
2.
Position the tip of the pen point where you want the straight segment to begin, and click to define the first
control point (do not drag). The control point remains selected (solid) until you add the next point.
).
Note: The first segment you draw will not be visible until you click a second control point. Also, if direction lines
appear, you have accidentally dragged the pen tool; choose Edit > Undo and click again.
3.
Click again where you want the segment to end. This creates another control point.
4.
Continue clicking the pen tool to create additional straight segments.

The last control point you add appears as a solid square, indicating that it is selected. Existing control points
become deselected as you add more control points.
5.
Complete the path by doing one of the following:
To close a path, position the pen pointer over the first (hollow) control point. A small loop appears next
to the pen tool ( ) when it is positioned correctly. Click to close the path.
To leave the path open, Ctrl-click (Windows) or Command-click (Mac OS) anywhere away from all
objects, or choose Edit > Deselect All, or select a different tool in the toolbox.
Using the Pen Tool
Adobe Web Project
Direction lines and direction points

When you select a control point connecting curved segments, or a curved segment, the segments display
direction lines which end in direction points. The angle and length of the direction lines determine the shape and
size of the curved segments. Moving the direction points reshapes the curves. Direction lines do not appear on
your Web page.
After selecting a control point (left), direction lines appear on any curved segments connected to it (right).
A smooth point always has two direction lines that move together as a single, straight unit. When you drag the
direction point of either direction line on a smooth point, both direction lines move simultaneously, maintaining
a continuous curve at that control point.
In comparison, a corner point has no direction lines. The angles of corner points are changed by dragging the
corner point directly.
Adjusting direction lines on a smooth point (left) and a corner point (right)
Direction lines are always tangent to (perpendicular to the radius of) the curve at the control points. The angle of
each direction line determines the slope of the curve, and the length of each direction line determines the
height, or depth, of the curve.
Using the Pen Tool
Adobe Web Project
Moving and resizing direction lines changes the slopes of curves.
Drawing curved segments

You create curves by using the pen tool to add control points where a curve changes direction, and to drag the
direction points that shape the curves.
Curves are easier to edit and your system can display them faster if you draw them using as few control points as
possible. Using too many points can also introduce unwanted bumps in a curve. Instead, draw widely spaced
control points, and practice shaping curves by adjusting the length and angles of the direction lines.
To draw a curved segment:

1.
Select the pen tool (
2.
Position the pen tip where you want the curve to begin. Hold down the mouse button. The first control
point appears.
3.
Drag to set the slope of the curve segment you are creating. In general, extend the direction line about one
third of the distance to the next control point you plan to draw.
).
A. Positioning pen tool B. Starting to drag (mouse button pressed) C. Dragging to extend direction lines
Using the Pen Tool
Adobe Web Project

4.
Release the mouse button.
Note: The first segment will not be visible until you draw the second control point.
5.
Position the pen tool where you want the curve segment to end, and then do one of the following:
To create a "C"-shaped curve, drag in a direction opposite to the previous direction line.
To create an "S"-shaped curve, drag in the same direction as the previous direction line.
A. Starting to drag second smooth point B. Dragging away from previous direction line, creating a "C" curve
C. Result after releasing mouse button
A. Starting to drag new smooth point B. Dragging in same -direction as previous direction line, creating an "S"
curve C. Result after releasing mouse button
6.
Continue dragging the pen tool from different locations to create additional smooth points.
7.
Complete the path by doing one of the following:
To close the path, position the pen tool over the first (hollow) control point. A small loop appears next
to the pen tip when it is positioned correctly. Click or drag to close the path.
Using the Pen Tool
Adobe Web Project
To leave the path open, Ctrl-click (Windows) or Command-click (Mac OS) anywhere away from all
objects, or choose Edit > Deselect All, or select a different tool in the toolbox.
Apple Computer, Inc., registered in the United States and other countries. Microsoft, OpenType, and Windows and Windows NT are either
Using the Pen Tool
Adobe Web Project
PHOTOSHOP MACINTOSH SHORTCUTS
Viewing
Result
Action
Fits image in window
Double-click
, or
100% magnification
Double-click
, or
Zooms in or out
+ (zero)
or
+ spacebar, or
or
+ (zero)
+ spacebar
Applies zoom percentage, and keeps zoom

percentage box active*
+ Return in Navigator palette
Zooms in on specified area of an image*
+ drag over preview in Navigator palette
Scrolls image with hand tool*
Spacebar + drag, or drag view area box in Navigator palette
Scrolls up or down 1 screen
Page Up or Page Down
Scrolls up or down 10 units
+ Page Up or Page Down
Moves view to upper left corner or lower right

corner
Home or End
Toggles layer mask on/off as rubylith*
Hold down
to scroll left (Page Up) or right (Page Down).
Not in ImageReady.
Command
Shift
Option
Photoshop Macintosh Shortcuts
Key
Adobe Web Project
Selecting and Moving Objects

Result
Action
Repositions marquee while selecting
Any marquee tool (except single column and single row) +

spacebar + drag
Adds to or subtracts from selection
Any selection tool +
or
Intersects a selection
Constrains marquee to square or circle
+ drag
+ drag
Draws marquee from center
+ drag
Constrains shape and draws marquee from center
+ drag
(except when
Switches from
to
+ drag
Switches from
to
+ click
Moves copy of selection
Moves selection area 1 pixel
or any pen tool is selected)
+ drag selection
Any selection +
Moves selection 1 pixel
Moves layer 1 pixel when nothing selected on layer
Increases or decreases detection width*
+ [ or ]
Accepts cropping or exits cropping
+ Return or Esc
Makes protractor *
Snaps guide to ruler ticks
+ drag guide
Toggles guide orientation
Hold down
+ drag
+ drag end point
+ drag guide
to move 10 pixels.
Not in ImageReady.
Command
Shift
Option
Key
Adobe Web Project
Painting
Result
Action
Any painting tool +
Selects background color
+
+
*
Deletes
+ click
Sets opacity, pressure, or exposure for painting

mode
+ click
Any painting or editing tool + number keys (e.g., 0 = 100%,

1 = 10%, 4 then 5 in quick succession = 45%)
Cycles through blending modes
Fills selection/layer with foreground or

background color
+ Delete, or
Fills from history*
Displays Fill dialog box
+ Delete
+ Delete
Lock transparent pixels on/off
Connects points with a straight line
Any painting tool +
Hold down
+ Delete
+ click
to preserve transparency.
Not in ImageReady.
Command
Shift
Option
Key
Adobe Web Project
Editing
Result
Action
Moves type in image
+ drag type when Type is selected
Aligns left, center, or right*
+ L, C, or R
Aligns top, center, or bottom*
+ L, C, or R
Selects 1 character left/right, or 1 line down/up, or

1 word left/right
Selects characters from insertion point to mouse

click point
+ click
, or +
Moves 1 character left/right, 1 line down/up, or 1

word left/right
, or
Designates new origin over existing type
+ click or click + drag
Selects word, line, paragraph, or story
Double-click, triple-click, quadruple-click, or quintuple-click
Shows/Hides selection on selected type
+H
Toggles Underlining on/off*
+U
Toggles Strikethrough on/off*
+/
Toggles All Uppercase on/off*
+K
Toggles Small Caps on/off*
+H
Toggles Superscript on/off*
Toggles Subscript on/off*
Chooses 100% horizontal scale*
+X
Chooses 100% vertical scale*
+X
Chooses Auto leading*
+A
Chooses 0 for tracking*
+Q
Justifies paragraph - left align last line*
+J
Justifies paragraph - force last line*
+F
Toggles paragraph hyphenation on/off*
+H
Toggles single/every-line composer on/off*
+T
Decreases/increases type size of selected text 2

pts./px.
+<>
Decreases/increases leading 2 pts./px.
Adobe Web Project

Decreases/increases baseline shift 2 pts./px.
Decreases/increases kerning/tracking 20/1000 ems
Hold down
Hold down
to decrease/increase 10x.
to decrease/increase 10x.
Not in ImageReady.
Command
Shift
Option
Key
Adobe Web Project
Path Editing*
Result
Action
Selects multiple anchor points
+ + click
Selects entire path
+ click
Duplicates a path
Switches from
+ drag
to
Switches from
to
Switches from
to
when over path

when pointer is over anchor
point or direction point

Switches from
or
to
when pointer is over
anchor point or direction point.

Closes path
+ double-click
Closes path with straight-line segment
+ double-click
Not in ImageReady.
Command
Shift
Option
Key
Adobe Web Project
Slicing and Optimizing

Result
Action
Toggles browser dither for selected image pane in

Optimized view
Toggles through gamma previews in selected
image pane
Toggles through Optimized/2up/4up/ Original
+Y
+Y
+Y
views
Toggles between Slice tool and Slice selection tool
Draws square slice
+ drag
Draws from center outward
+ drag
Draws square slice from center outward
+ drag
Reposition slice while creating slice
Spacebar + drag
Toggle snap to slices on and off
Ctrl key while drawing a slice
Opens context-sensitive menu
Ctrl + click on slice
ImageReady only.
Not in ImageReady.
Command
Shift
Option
Key
Apple Computer, Inc., registered in the United States and other countries. Microsoft, OpenType, and Windows are either registered
trademarks or trademarks of Microsoft Corporation in the United States and/or other countries.
Adobe Web Project
PHOTOSHOP WINDOWS SHORTCUTS
Viewing
Result
Action
Fits image in window
Double-click
, or Ctrl + (zero)
100% magnification
Double-click
, or Alt + Ctrl + (zero)
Zooms in or out
Ctrl +
or
or
Ctrl + spacebar, or Alt + spacebar
Applies zoom percentage, and keeps zoom

percentage box active*
+ Enter in Navigator palette
Zooms in on specified area of an image*
Ctrl + drag over preview in Navigator palette
Scrolls image with hand tool*
Spacebar + drag, or drag view area box in Navigator palette
Scrolls up or down 1 screen
Page Up or Page Down
Scrolls up or down 10 units

Moves view to upper left corner or lower right
+ Page Up or Page Down

Home or End
corner
Toggles layer mask on/off as rubylith*
Hold down Ctrl to scroll left (Page Up) or right (Page Down).
*
Not in ImageReady.
Shift
Key
Photoshop Windows Shortcuts
Adobe Web Project
Selecting and Moving Objects

Result
Action
Repositions marquee while selecting
Any marquee tool (except single column and single row) +

spacebar + drag
Adds to or subtracts from selection
or Alt + drag
Intersects a selection
+ Alt + drag
Constrains marquee to square or circle

Draws marquee from center
Constrains shape and draws marquee from center
+ drag
Alt + drag
+ Alt + drag
Ctrl (except when
Switches from
to
Alt + drag
Switches from
to
Alt + click
Moves copy of selection

Moves selection area 1 pixel
Moves selection 1 pixel
Moves layer 1 pixel when nothing selected on layer
or any pen tool is selected)
+ Alt + drag selection

Any selection +
+
Ctrl +
Increases or decreases detection width*
+ [ or ]
Accepts cropping or exits cropping
+ Enter or Esc
Makes protractor *
+ Alt + drag end point
Snaps guide to ruler ticks
+ drag guide
Toggles guide orientation
Hold down
Alt + drag guide
to move 10 pixels.
Applies to shape tools.

*
Not in ImageReady.
Shift
Key
Adobe Web Project
Painting
Result
Action
Any painting tool + Alt
Selects background color
+ Alt + click
*
Deletes
+
*
+ Alt + click
Sets opacity, pressure, or exposure for painting

mode
Any painting or editing tool + number keys (e.g., 0 = 100%,

1 = 10%, 4 then 5 in quick succession = 45%)
Cycles through blending modes
Fills selection/layer with foreground or

background color
Alt + Backspace, or Ctrl + Backspace
Fills from history*
Alt + Ctrl + Backspace
Displays Fill dialog box
+ Backspace
Lock transparent pixels on/off
Connects points with a straight line
Any painting tool +
Hold down
+ click
to preserve transparency.
Not in ImageReady.
Shift
Key
Adobe Web Project
Editing
Result
Action
Moves type in image
Ctrl + drag type when Type is selected
Aligns left, center, or right*
+ Ctrl + L, C, or R
Aligns top, center, or bottom*
+ Ctrl + L, C, or R
Selects 1 character left/right or 1 line down/up, or

1 word left/right
Selects characters from insertion point to mouse

click point
+ click
Moves 1 character left/right, 1 line down/up, or 1

word left/right
, or
+ Ctrl +
, or Ctrl +
Designates new origin over existing type
Shift + click or click + drag
Selects word, line, paragraph, or story
Double-click, triple-click, quadruple-click, or quintuple-click
Shows/Hides selection on selected type
Ctrl + H
Toggles Underlining on/off*
+ Ctrl + U
Toggles Strikethrough on/off*
+ Ctrl + /
Toggles All Uppercase on/off*
+ Ctrl + K
Toggles Small Caps on/off*
+ Ctrl + H
Toggles Superscript on/off*
+ Ctrl + +
Toggles Subscript on/off*
+ Alt + Ctrl + +
Chooses 100% horizontal scale*
+ Ctrl + X
Chooses 100% vertical scale*
+ Alt + Ctrl + X
Chooses Auto leading*
+ Alt + Ctrl + A
Chooses 0 for tracking*
+ Ctrl + Q
Justifies paragraph - left align last line*
+ Ctrl + J
Justifies paragraph - force last line*
+ Ctrl + F
Toggles paragraph hyphenation on/off*
+ Alt + Ctrl + H
Toggles single/every-line composer on/off*
+ Alt + Ctrl + T
Decreases/increases type size of selected text 2

pts./px.
+ Ctrl + < >
Adobe Web Project

Decreases/increases leading 2 pts./px.
Decreases/increases baseline shift 2 pts./px.
Decreases/increases kerning/tracking 20/1000 ems
Alt +
+ Alt +
Alt +
Hold down Alt to decrease/increase 10x.

Hold down Ctrl to decrease/increase 10x.
*
Not in ImageReady.
Shift
Key
Adobe Web Project
Path editing*
Result
Action
Selects multiple anchor points
Selects entire path
+ Alt + click
Duplicates a path
+ Alt + Ctrl + drag
Switches from
Switches from
to
to
Ctrl
when over path
Alt
+ click
Switches from to when pointer is over anchor

point or direction point
Alt + Ctrl
Switches from or
to when pointer is over
anchor point or direction point.
Alt
Closes path
+ double-click
Closes path with straight-line segment
+ Alt + double-click
Not in ImageReady.
Shift
Key
Adobe Web Project
Slicing and Optimizing

Result
Action
Toggles browser dither for selected image pane in

Optimized view
+ Ctrl + Y
Toggles through gamma previews in selected

image pane
Alt + Ctrl + Y
Toggles through Optimized/ 2up/4up/ Original

window
Ctrl + Y
Toggles between Slice tool and Slice selection tool
Ctrl
Draws square slice
+ drag
Draws from center outward
Alt + drag
Draws square slice from center outward
Alt +
Reposition slice while creating slice
Spacebar + drag
Toggles snap to slices on and off
Ctrl while drawing a slice
Opens context-sensitive menu
Right mouse button on slice
+ drag
ImageReady only.
Not in ImageReady.
Shift
Key

Adobe Web Project

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Adobe Web Project

Загружено:

Авторское право:

Доступные форматы

Adobe