photoshop 5.5 for the web

Share these FREE Courses!

Why stuff your friend’s mailbox with a copy of this when we can do it for you!
Just e-mail them the link info –
Make sure that you visit the site as well:
• MORE FREE COURSES
• Weekly Tool Tips
• Updated course versions
• New courses added regularly

So don’t copy files or photocopy - Share!

End User License Agreement
Use of this package is governed by the following terms:

A. License
TrainingTools.com Inc, ("we", "us" or "our"), provides the Licensee ("you" or "your") with a set of digital files in electronic format (together
called "the Package") and grants to you a license to use the Package in accordance with the terms of this Agreement. Use of the package
includes the right to print a single copy for personal use.

B. Intellectual Property
Ownership of the copyright, trademark and all other rights, title and interest in the Package, as well as any copies, derivative works (if any
are permitted) or merged portions made from the Package shall at all times remain with us or licensors to us. This Package is protected by
local and international intellectual property laws, which apply but are not limited to our copyright and trademark rights, and by international
treaty provisions.

C. Single-User License Restrictions
1. You may not make copies of the files provided in the Package

2. You may not translate and/or reproduce the files in digital or print format
3. You may not rent, lease, assign or transfer the Package or any portion thereof
4. You may not modify the courseware
Table of Contents
Web development training 1-877-644-3444 i

CHAPTER 1 – DIGITAL GRAPHICS 1
The RGB Color Space 2
Image Resolution & Color Depth 2
Image Types 3
Bitmap Images 3

Vector Images 3

File Types 5
GIF Format 5

JPEG Format 6

PNG Format 6

Review Questions: Digital Graphics 7
CHAPTER 2 – THE PHOTOSHOP ENVIRONMENT 9
The Photoshop Workspace 10
Photoshop’s Menus 11
File 11

Edit 11

Image 11

Layer 11

Select 11

Filter 11

View 12

Window 12

Help 12

The Toolbox 13
Adobe Online 14

Painting Tools 14

Type Tool 15

Measure Tool 15

Gradient Tool 15

Paint Bucket Tool 15

Eyedropper Tool 15

Hand Tool 15

Zoom Tool 15

Foreground/Background Colors 15

Edit Mode 16

Screen Mode 16

Jump 16

Table of Contents

ii Eye Candy 3.0 or Xenofex 1.0 for $99 each! www.alienskin.com

Palettes 17
Navigator Palette 17

Info Palette 18

Options Palette 18

Color Palette 18

Swatches Palette 19

Brushes Palette 19

History Palette 19

Actions Palette 20

Layers Palette 20

Channels Palette 20

Paths Palette 21

Setting Preferences 21
Preferences - Units & Rulers 22

Preferences – General 23

Preferences - Saving Files 25

Preferences - Display and Cursors 26

Preferences - Transparency & Gamut 27

Preferences - Guides and Grid 28

Preferences - Plug-Ins & Scratch Disks 29

Preferences - Memory & Image Cache 30

ImageReady 31
Review Questions: The Photoshop Environment 32
CHAPTER 3 – CREATING NEW IMAGES 34
Creating New Images 35
Name 35

Width & Height 35

Resolution 36

Mode 36

Contents 36

Image Window 37

Scanning Images into Photoshop 38
Importing Existing Images into Photoshop 39
Open Dialog Box 39

Image Mode 39
Magnification/Navigation Controls 41
Navigator Palette 41

Zoom Tool 42

Table of Contents
Web development training 1-877-644-3444 iii

Hand Tool 42

The History Palette 42
The Snapshot 42

The State 42

Maximum History States 43

Automatically Create First Snapshot 43

Allow Non-Linear History 43

Review Questions: Creating New Images 45
CHAPTER 4 – USING SELECTIONS AND CHANNELS 47
Selections and Channels 48
Selection Tools 48
Marquee Tool 48

Multiple Selections 49

Modifying Selections 49

Info Palette 50

Moving Selections 50

Lasso Tool 51

Options Palette 52
Feather 52

Style 53

Lasso Width 54

Frequency 54

Edge Contrast 54

Magic Wand Tool 54

The Pen Tool 55
Direction Selection Tool 55

Convert Point Tool 55

Add/Delete Anchor Point Tools 56

Freeform Pen Tool 56

Magnetic Pen Tool 56

Creating a Selection from a Path 56
Creating Selections in Quick Mask Mode 57
Quick Mask Options 57

Creating a Selection with Color Range 58
Color Range Dialog-Box 58

Saving Selections with the Channel Palette 60
Table of Contents

iv Eye Candy 3.0 or Xenofex 1.0 for $99 each! www.alienskin.com

Color Channels 60

Alpha Channels 61

Restoring Your Selection 62

Load Selection Dialog Box 62

Review Questions: Using Selections and Channels 64
CHAPTER 5 – USING LAYERS 67
Layers 68
Layers Palette 69
Layers 69

Using Layers 71
Transparency 71

Moving Layers 71

Blend Modes 71

Preserve Transparency 72

Layer Masks 72

Transforming Layers 74
Creating New Layers 74
Text and Layers 75
Layer Effects 76
Managing Layers 77
Changing the Stacking Order 77

Duplicating Layers 77

Merge Options 77

Review Questions: Using Layers 78
CHAPTER 6 – EDITING IMAGES 81
Using the Painting and Drawing Tools 82
Color Palette Group 82
Brushes 82

Swatches 83

Color Palette 83

Airbrush Tool 84
Airbrush Options 84

Table of Contents
Web development training 1-877-644-3444 v

Paintbrush Tool 85
Paintbrush Options 85

Rubber Stamp Tool 86
Rubber Stamp Options 86

Pattern Stamp Tool 87
History Brush Tool 87
Art History Brush 89
Art History Brush Options 89

Eraser Tool 90
Eraser Tool Options 90

Background Eraser Tool 91
Background Eraser Options 91

Magic Eraser Tool 92
Pencil Tool 92
Line Tool 92
Line Tool Options 92

Blur Tool 93
Sharpen Tool 93
Smudge Tool 93
Dodge Tool 93
Burn Tool 93
Sponge Tool 93
Gradient Tool 94
Gradient Tool Options 94

Gradient Editor 95

Paint Bucket Tool 96
Using the Type Tool 96
Type Tool Dialog Box 96

Using Filters 99
Applying Filters 99

Table of Contents

vi Eye Candy 3.0 or Xenofex 1.0 for $99 each! www.alienskin.com

Fine-Tuning Filters with Fade 100

Adjusting Images 101
Histogram 101
Channel 101

Mean, Std Dev, Median, Pixels 101

Level, Count, Percentile, Cache Level 102

Using Levels 103
Channel 103

Input Levels/Input Levels Sliders 103

Output Levels/Output Levels Sliders 104

Levels Eyedropper Tools 104

Auto 104

Preview 104

Auto Levels 104
Auto Contrast 104
Curves 105

Color Balance 107
Color Balance Fields and Sliders 107

Tone Balance 107

Preserve Luminosity 107

Brightness/Contrast 108
Hue/Saturation 108
Desaturate 108
Replace Color 109
Selective Color 110
Channel Mixer 110
Invert 110
Equalize 110
Threshold 111
Posterize 111
Variations 111
Table of Contents
Web development training 1-877-644-3444 vii

Adjustment Layers 112
Using Guides and the Grid for Alignment 112
Using Guides 112

Using the Grid 113
Review Questions: Editing Images 114
CHAPTER 7 – CREATING STATIC IMAGES FOR THE INTERNET 118
Creating a Logo in Photoshop 119
Importing Vector Based Logo Files 119

Preparing the Logo for the Internet 121
Save for Web 123
Preview Windows 123

Compression Options 124

Building Compression Options 124

Compressing Photographic Images 125

JPEG Compression 126

Compression Levels 126

Creating a Custom Logo 127
Review Questions: Creating Static Images for the Internet 132
CHAPTER 8 – CREATING BANNERS AND ANIMATED GIFS 134
Banner Dimensions and Restrictions 135
Creating a Static Banner 135
Creating an Animated GIF Banner 138
The ImageReady Environment 138
The Animation Palette 139
Frame Thumbnails 139

Frame Controls 139

Animating in ImageReady 140
Review Questions: Creating Banners and Animated GIFs 143
CHAPTER 9 – CREATING BUTTONS AND ROLLOVERS 145
Table of Contents

viii Eye Candy 3.0 or Xenofex 1.0 for $99 each! www.alienskin.com

Creating Buttons with ImageReady 146
Button Size 146
New Document 146

The Rectangle Tool 147
Rectangle Options 147

Rounded Rectangle Options 148

Ellipse Tool Options 148

Styles Palette 149
Creating Custom Styles 149

ImageReady’s Type Tool 150
Centering Layers 151
Creating Rollovers 152
Rollover Palette 152

HTML Options 154
Tags Case 155

Indent 155

Attribs Case 155

Line endings 155

Always Quote Attributes 155

TD W, H 155

Spacer Cells 155

Empty Cells 155

Include Comments 155

Image Maps 155

Code 156

Photoshop’s Menus 156
Compatibility 156

Background Image 156

Subfolder 156

Copyright 157

Review Questions: Creating Buttons and Rollovers 158
CHAPTER 10 – CREATING NAVIGATION BARS 160
Tables and HTML Layout 161
Creating a Navigation Bar 161
Slices 164
Table of Contents

Web development training 1-877-644-3444 ix

Slice Tool 164

Slice Select Tool 164

Slice Palette 165
Type 165

Name 165

URL 165

Target 165

BG 165

Optimizing Slices 166
Image Maps 166
Creating Image Maps 166

Review Questions: Creating Navigation Bars 168
CHAPTER 11 – CREATING WEB PAGES WITH IMAGEREADY 170
Creating a Web Page with ImageReady 171
Web Page Dimensions 171

Navigation Bar 172

The Logo 174

Corporate Headquarters 175

Using Slices for Layout 178

Optimize Slices 180

Review Questions: Creating Web Pages with ImageReady 182

Web development training 1-877-644-3444 1

1

Digital Graphics



In this chapter you are introduced to the nature of computer generated
images as well as Internet browser image standards.


Objectives

Upon completing this section, you should be able to:

1. Understand resolution and color depth.

2. Differentiate between bitmap and vector graphics.

3. Explain standard image file-types for the Internet.

2 Eye Candy 3.0 or Xenofex 1.0 for $99 each! www.alienskin.com

The RGB Color Space

Computer displays are made up of individual dots or units called pixels placed in
rows and columns, like a chart or grid. Each pixel can be one of up to 16 millions
colors. Essentially your computer has a palette that holds a swatch or blob of red
paint, green paint, and blue paint. By mixing these colors together, other colors
are created. Because Red, Green, and Blue are a computer’s primary or
fundamental colors, computer displays are said to operate in the RGB (Red,
Green, Blue) color space or spectrum. Each primary color is made up of 256
individual values or shades (measured from 0 – 255.) By mixing Red at a value
of 190, Green at a value of 81, and Blue at a value of 14 for instance, we get a
dark orange color. Mixing all the colors together at a level of 0 produces black.
Red, Green, and Blue all set to a value of 255 produces white.


Image Resolution, Dimensions, and Color Depth

Resolution in digital imagery refers to pixels per inch (ppi) or density, similar to
how many square feet a particular room in a house might have. Currently,
computer displays are limited to a range of 72 to 96 ppi. For the web, 72 ppi is
the standard. Increasing the density is practical only for images intended for print
and results in large file sizes which in turn result in longer download times.

The amount of pixels contained in the width and height of an image is referred to
as an image’s dimensions. For instance, an image might be 320 pixels wide by
200 pixels high (commonly expressed as 320x200.) Image dimension is a key
element of web design. Currently computers have a common group of fixed
desktop dimensions ranging from 640x480 to 1280x1024 or higher. Web sites
are usually designed “resolution-safe” meaning to the lowest common
denominator, a desktop display at 640 pixels wide by 480 pixels high (640x480).
Within the browser itself a width of 600 pixels is the common limit. This ensures
that everyone viewing web sites with image capable browsers will be able to view
your site.

Color depth describes the maximum amount of colors an image can contain.
The number of colors an image contains is dependent on the image’s bit-depth.
Confused? When users describe an image’s color depth, they might also
describe it in terms of bit-depth. The higher the bit value the more colors the
image can contain.

Web development training 1-877-644-3444 3


Images are made up of one of four standard bit depths: 1 bit, 8 bit, 24 bit, and 32
bit. A 1-bit image consists of either black or white, or two colors. 8 bit images
contain a maximum of 256 colors or 256 shades of gray. 24 bit images contain a
maximum of 16 million colors. 32 bit images can contain over a billion colors;
however, the final 8 bits of the image are commonly reserved for alpha channel
information rather than color. Alpha channels are covered later.


Image Types

In addition to resolution and color depth, images are also distinguished by the
type or kind of image it is. There are two primary image types, bitmaps and
vectors.

Bitmap Images
Bitmap images are the most common type of image file. Bitmap files map out or
plot the image pixel by pixel. Think of a grid once again, where each square
represents each pixel in the image. The image file basically describes each pixel,
such as pixel 300 wide by 250 high is red. Pixel 301 wide by 250 high is also
red. Pixel 302 wide by 250 high is yellow and so on. The larger the image and
the greater the color or bit-depth the larger the file size. Because bandwidth is a
major concern when developing web sites keeping the size of your images to a
minimum is very important. The main benefit of bitmap images is photographic
color, tone, and texture are accurately produced.

Vector Images
Vector images do not plot images on a pixel-by-pixel basis. Instead vector files
contain a description of the image expressed mathematically. Essentially the file
tells the computer about the image and the computer draws it. For instance, an
image of a red circle in vector format, written in plain English, might look
something like this:
•
Draw a circle
•
Radius is 2 inches
•
Color is red

4 Eye Candy 3.0 or Xenofex 1.0 for $99 each! www.alienskin.com

The main benefit of vector images is there file size, particularly relative to the file
size of bitmap images. Imagine the same circle in a bitmap file. In plain English
it might look something like this:
• Row 1
o
Pixel 1x1 is white
o
Pixel 2x1 is white
o
Pixel 3x1 is white
o
Pixel 3x1 is white, etc. until we reach Pixel 800x1
• Row 2
o
Pixel 2x1 is white
o
Pixel 2x2 is white, etc.
As you can see, describing the circle, and the color surrounding it, on a pixel-by-
pixel basis is a much more laborious and lengthy process than telling the
computer to draw the circle itself.

Unfortunately, vector images, because they describe images in terms of shapes,
lines, curves, points, colors, length, etc., cannot reproduce photographic images.
Vectors are limited to images with continuous tones and definitive outlines.
Furthermore, with the exception of Macromedia’s Flash vector format, vector
images are not yet supported by web browsers. Vector support is coming to the
Internet in the form of the Scalable Vector Graphics format. For information,
consult

Photoshop is a bitmap image editor. It can, however, load or import vector based

images. On import Photoshop translates the vector description and a bitmap
image is created. Importing vector images is covered in detail later.

Web development training 1-877-644-3444 5


File Types

Bitmap files, at the most basic or fundamental level, are just as described, a map
or plot of each individual pixel. However, image files can and often do contain
other information depending on their use. For instance, the author or creator of
the image might be included, as well as the date and copyright information. In
addition, because bitmaps tend to be large, various methods of compression or
methods to reduce file size have been developed. To designate extra
information and compression methods, different file types have been developed.
File type is not the same as image type where the image is either a bitmap or a
vector. File type designates a particular variety of bitmap or even a particular
variety of vector. With Windows the file type is usually identified by adding a
period followed by three letters to the end of the filename, as in “circle.gif” or
“circle.jpg.” This is called a file extension. On the Macintosh file extensions are
not used to designate file types. A file designating the file type and the
application that created it is attached to the image file instead. However, Web
servers and browsers also use file type extensions so it is advisable that
Macintosh users do the same for images generated for the web.

Web browsers currently support three image file types. They are .gif, or
Graphics Interchange Format (GIF), .jpg or Joint Photographic Experts Group
(JPEG), and .png or Portable Network Graphics (PNG.)

GIF Format

Graphic Interchange Format (.gif) uses a maximum of 256 colors (8-bit color
depth) and uses combinations of these to simulate colors beyond that range. The
GIF format is best for displaying images such as logos, icons, buttons and other
images with uniform colors and tones.

GIF images come in two different versions and have some extra functionality that
JPEGs do not. You can save GIF images in GIF 87 or GIF 89a format (the
extension .gif remains the same.) GIF 89a has the following features that GIF 87
and JPEG files do not:

Interlacing
If you save a GIF 89a image as interlaced, the browser is able to display the
image as it loads, gradually getting crisper and clearer until it has loaded.
Interlaced GIFs have slightly larger file sizes than non-interlaced GIFs, so you
have to decide whether the interlacing effect is worth the extra download time for
your images.

Transparency
With GIF 89a format images you can set a single color to be transparent, that is,
it will allow the background color or image to show through it, similar to using a

6 Eye Candy 3.0 or Xenofex 1.0 for $99 each! www.alienskin.com

blue screen in cinema. Transparency is most commonly used to make the
rectangular background canvas of an image invisible; this feature can be very
effective in web page design.

Animated GIFs
GIF 89a images can also be animated. Animated GIF images are simply a

number of GIF images saved into a single file and looped. Netscape Navigator
and Microsoft Internet Explorer both display animated GIFs, but many other
browsers cannot, and may not be able to display even the first image in the loop.
Animated GIFs also take longer to download, therefore use animated GIFs with
caution.

JPEG Format (JPEG, JPG)

Joint Photographic Expert Group is the best format for photographs because
JPEG files contain millions of colors (24-bit color space.)
JPEG images do not support transparency or interlacing, but Photoshop allows
you to specify the degree of file compression so you can create a balance
between image quality and file size. JPEG compression for the web is covered
in depth later.

A new addition to the JPEG format is Progressive JPEG. Progressive-JPEGs
boast superior compression to regular JPEGs. They also give you a wider range
of quality settings and offer support for interlacing.

PNG Format (PNG)

Portable Network Graphic is a new bitmap file type developed in part with the
Internet in mind. There are two PNG sub-types, PNG-8 and PNG-24 (the file
type extension remains .png for both.) Both use the same compression method
and support alpha channels or variable transparency, meaning areas of the
image can be partially transparent, similar to tinted windows. PNG-8 is limited to
256 colors (8-bit color depth) and PNG-24 can have up to 16 million colors (24-bit
color depth.) Unfortunately, neither Netscape Navigator nor Microsoft Internet
Explorer offers full support for PNG images. As a result, using PNG images for
your web site at this time is not recommended.

Web development training 1-877-644-3444 7


Review Questions


1. What are the primary colors computers mix to create other colors?



2. What are the primary image types and how do they differ?



3. Color depth is also referred to as?



4. What file types are currently supported by Netscape Navigator and
Microsoft Internet Explorer?



5. Why would you choose to use a JPEG image type instead of a GIF image
type?


8 Eye Candy 3.0 or Xenofex 1.0 for $99 each! www.alienskin.com

Summary

As a result of this chapter, you should be able to:

•
Understand resolution and color depth.

•
Differentiate between bitmap and vector graphics.

•
Explain standard image file-types for the Internet.

Web development training 1-877-644-3444 9

2

The Photoshop Environment



This chapter introduces you to Photoshop’s workspace. Photoshop’s
tools, menus, palettes and preferences are summarized.

This section contains a lot of information. It’s important to familiarize
yourself with the Toolbox and the Palettes before proceeding with the rest
of the material. You might find the Preferences information of additional
value after you’ve mastered Photoshop’s workspace. The two most
important Preferences are Units & Rulers.

Objectives

Upon completing this section, you should be able to:

1. Identify Photoshop’s default tools, menus, and palettes.

2. Customize Photoshop’s environment.

3. Set preferences specifically for Web development.

4. Understand the relationship between Photoshop and ImageReady.





10 Eye Candy 3.0 or Xenofex 1.0 for $99 each! www.alienskin.com


The Photoshop Workspace

When you first open or start Photoshop the work area is made up of a set of
default or standard Tools, Palettes and menus. Photoshop’s Tools are contained
in the Toolbox. Each Tool has a set of properties or features that you can
modify. These properties are contained in what are called Palettes. For
instance, when you select the Paintbrush tool you use the Brushes Palette to
select the size of the brush and the Options Palette to modify or affect how the
brush operates. Palettes also contain other functions unrelated to Photoshop’s

tools, such as advanced image manipulation tools. Photoshop’s menus, like
most standard applications, run along the top of the workspace.



Web development training 1-877-644-3444 11


Photoshop’s Menus
{Clicking}
on a menu item activates a pull-down box containing a list of available
items. Move the mouse over the desired option and
{Click}
to choose it. The
menus are File, Edit, Image, Layer, Select, Filter, View, Window, and Help.
Many of the options or items in the menus are covered in depth in later chapters.
In this chapter, we summarize their functions.



File
The File menu contains options to create new images, load existing images, save
images, acquire images from scanners, print images, set preferences and color
settings, and exit the program.

Edit
The Edit menu contains options to copy, cut, and paste entire images or parts of
images, fill areas of an image, stroke selections or paths (covered in depth in
later chapters) and transform or modify images.

Image
The Image menu contains options to modify color depth or mode, manipulate or
adjust color and other image properties, modify image size, canvas size and
orientation, examine color information and extract areas of an image from
backgrounds.

Layer
The Layer menu contains options to modify and manipulate layers. Layers are
covered in depth in later chapters. To summarize, a Photoshop image can
contain a number of separate levels or layers that contain image information.
Much like a high-rise building with glass floors, looking from above, people and
objects on the higher floors might obscure or block out people and objects below
them. Similarly, image information contained in higher layers will appear above
image information on lower layers.

Select
The Select menu contains options to create, modify and manipulate Photoshop’s
selections. Selections are areas of an image that you choose to isolate from the
rest of the image. For instance, you might want to isolate a person’s hair to
change the color without affecting the rest of the image.

Filter
The Filter menu contains a variety of different special effects, called Filters that
you apply to an image or parts of an image. For instance, you might have an

12 Eye Candy 3.0 or Xenofex 1.0 for $99 each! www.alienskin.com

image of a runner. By applying the Motion Blur filter to the image, you create a
greater sense of speed.

View
The View menu contains options to modify viewing your image, including
zooming in and out and how images might look when printed or viewed on
another computer. In addition, options to view rulers and guides are available to
aid in editing your images.

Window
The Window menu contains options to view and/or hide the Toolbox and Palettes
as well as options to organize images within Photoshop’s workspace.

Help
The Help menu contains options for online help, information about plugins and
information about the version of Photoshop you are using. Use “Help Topics” for
reference or finding out how to accomplish objectives you might be having
problems with.

Web development training 1-877-644-3444 13


The Toolbox

The Toolbox contains a wide range of Tools used to create and manipulate
images. The Toolbox can be moved anywhere within Photoshop’s work space
by
{Clicking}
and holding the top of the Toolbox. Drag or move to the location of
your choice and
{Release}
the mouse button. To hide the Toolbox select
“Window/Hide Tools.” Select “Window/Show Tools” to get the Toolbox back. By

default the Toolbox sits at the left side of the workspace. Select a Tool by
{Clicking}
on it. Some Tools have a small triangle at the bottom right corner of
the Tool Icon.
{Click}
, hold and drag to select other varieties of these Tools from
a flyout window.




14 Eye Candy 3.0 or Xenofex 1.0 for $99 each! www.alienskin.com

Adobe Online
The Adobe Online button connects you to product support, updates and tips for
Photoshop. An Internet connection is required.

Selection Tools


Marquee

Move


Lasso


Magic Wand

Pen


The Marquee, the Move, the Lasso, the Magic Wand, and the Pen Tool make up
Photoshop’s Selection Tools. Selections are areas of an image you wish to
isolate in order to modify it, such as changing the color of someone’s hair. A
Marquee, a dotted line in constant motion, represents the shape of your
selection. The Marquee is also known as a
selection path
.

Painting Tools


Airbrush

Paintbrush


Rubber Stamp


Art History


Eraser


Pencil

Blur

Dodge

The Airbrush, Paintbrush, Rubber Stamp, Art History Brush, Eraser, Pencil, Blur,
and Dodge Tools make up Photoshop’s Painting Tools. Use the Painting Tools
to create or modify images, recolor images, clone parts of images and other paint
and drawing effects.