Download Chapter 5

The Web Warrior Guide to
Web Design Technologies
Chapter 5
Photoshop and ImageReady: Part I
Objectives
In this chapter, you will:
• Create images
• Edit images
• Save and optimize images
Creating Images
• If you have ever used a painting program (such as Paint,
which comes with the Windows operating system), you will
be familiar with the idea of creating computer images
• Photoshop lets you do far more than just paint, however
• It also includes tools for
– advanced techniques
– filters for applying effects across the entire image
– layers that allow you to manipulate discrete parts of an image
– vector-based tools
Newly Opened Adobe Photoshop
Window
Using Tools
• The Toolbox is the
palette containing the
tools you use to
create images
• The Toolbox was
shown earlier in
Figure 5-1
• Sets of tools are
differentiated from
individual tools by a
small triangle below
and to the right of the
Tool icon
Using Tools
• Drag your mouse
diagonally across
the Document
window to select
an area
• This selection area
is outlined with a
dashed link called
a marquee
Using Tools
• Fill the selection area with a solid color or a pattern
• The currently selected color is shown as the foreground
color in the Toolbox
• Using tools such as the Brush tool or the Paint Bucket tool
results in the foreground color being applied to the open
image
• Behind the foreground color in the Toolbox is the
background color
• This color is used to augment the foreground color when
creating gradients or patterns that fade from one color to
another
Using Filters
• The tools in the Toolbox are useful for adding
color and effects to specific areas of an image
• Photoshop also includes many filters, available
under the Filter menu, that can be used to add
graphical effects to entire images or selected
areas
• The filters are divided into 13 main categories and
a few advanced categories
Using Filters
• Most of the filter
categories recreate
the effects of
traditional drawing
and painting
techniques such as
watercolor, crosshatching, and
mosaic
• Other filters are
used to blur,
sharpen, or distort
the image
Using Layers and Vector Shapes
• Layers are a Photoshop element that you can
think of as sheets of clear plastic
• When stacked above one another, they can
contain separate image elements
• You can edit the contents of a layer without
affecting the image elements in the other layers
• Vector shapes are another kind of element that
can be edited without affecting other parts of an
image
Using Layers and Vector Shapes
• Web graphics are bitmap images, which means
they are composed of a grid of pixels, where each
pixel can have a different color
• When you use tools such as the Marquee tools or
Brush tool, you are manipulating the pixels in the
bitmap
• Vector shapes are composed of lines, rather than
pixels, and can be colored with different styles in
addition to solid colors
Image Created with Layers
Using Text
• Text in Web graphics often suffers from aliasing, which is
an effect that causes the edges of the text to appear jagged
• Normally you will want to use anti-aliasing, a technique that
blurs the edges of the text slightly in order to create the
appearance of a smooth edge
Navigating Images
• Before you begin manipulating images, you need
to be able to find your way around them
• One of the tools you will use most often is the
Zoom tool (also called the Magnifying Glass tool),
which lets you increase or decrease the scale of
the image window
• Photoshop also allows you to change the scale in
other ways
Changing Dimensions
• Changing the dimensions means changing the
actual height and width of an image
• In Photoshop, the term canvas refers to the
dimensions of an image
• An image’s canvas size is the height and width, in
pixels, of the image
• In Photoshop, you alter the image dimensions
with the Image Size and Canvas Size menu tools
Changing Dimensions
• Image Size lets you stretch or shrink the image;
Canvas Size lets you pad or crop the image
• Padding means adding empty space to the edge
of an image in order to make it bigger; cropping
means removing part of the image in order to
make it smaller
• Photoshop also includes the Crop tool in the
Toolbox and the Trim command under the Image
menu
Fixing Low-Contrast Scans
• Often you will find that scanned images have low contrast
• That is, the white areas are not truly white, and the black
areas are not truly black
• Figure 5-9 shows an image with low, normal, and high
contrast
Fixing Low-Contrast Scans
• You can solve this problem in Photoshop by
using the Brightness/Contrast option and the
Levels option
Fixing Problem Colors
• In addition to the problem of
low contrast, scanned images
may have colors that do not
appear as bright as in the
source image
• This is a common problem
when the source is printed on
low-quality paper
• You can improve poor color in
Photoshop with the
Hue/Saturation feature
Retouching with the Brush Tool
•
An easy way to fix small specks like those seen here is with the
airbrush capabilities of the Brush tool
•
Using the normal Brush tool would leave hard edges where you
make your edit
•
The airbrush capabilities leaves a smoother line
Retouching with the Dust & Scratches
Filter
• The Dust & Scratches filter is explicitly designed
to remove minor blemishes from photographs
caused by dust on the camera lens or scanner
bed or from scratches in the original photo
• This filter works by finding adjacent pixels that
are different colors and blurring them
• When using some filters, you will want to apply
them to a selected area, rather than to the full
image
Retouching with the Dust & Scratches
Filter
• If you find it
awkward to make
the selection by
using the Elliptical
or Rectangular
Marquee tools, you
can use another
type of selection
tool, called the
Lasso tool, which
allows you to
create a selection
area of any shape
Blurring Images
• Blurring reduces color contrast, lightness
contrast, and texture contrast by blending
adjacent pixels
• If the area you need to select is too irregular for
the Lasso tool, you can use the Magic Wand tool,
which creates a selection area of all pixels that
are similar to the color of the selected pixel
Blurring Images
• Like the Paint Bucket
tool, the Magic Wand
tool includes a
Tolerance setting in the
Option bar
• Both tools also include
a Contiguous option
• When checked, this
option ensures that
only similar pixels
(which are adjacent to
the one you click) are
affected
Using Saturation
• Adjusting the color
saturation of the
background can
emphasize the
foreground and enhance
the presentation of the
subject
• Using the Sponge tool
has the same effect, but
it is more appropriate for
making local changes to
specific pixels
Replacing Unwanted Elements
• Replacing unwanted parts of a photo is one of the
most enjoyable aspects of editing images
• The Clone Stamp tool (also called the Rubber
Stamp tool) allows you to duplicate specific parts
of an image
• When you use this tool, you need to specify the
brush size, which controls the diameter, in pixels,
of the line created when using this tool
Image with Unwanted Elements
Removed
Saving and Optimizing Images
• When creating pages for the Internet, you need to
factor in the importance of how quickly the pages
will load on the user’s computer
• To make images download quickly on the Web,
you must optimize them, which means reducing
their file size while maintaining the image quality
• You can optimize images by using one of two
methods: color reduction or compression
Saving and Optimizing Images
• Color reduction is appropriate for simple images
that contain few colors, such as line graphs
• Compression is more appropriate for complex
images that contain many colors, such as
photographs
• Among all the available file formats for bitmap
images, only three can be displayed as part of a
Web page: GIF, JPEG, and PNG
• GIF images can contain a maximum of 256 colors
and are optimized through color reduction
Optimizing GIF Files
• The Save for Web command gives you more
control over the optimization process and allows
you to preview your changes
• When preparing images for the Web, always use
the Save for Web command
• Sometimes, reducing the number of colors in an
image causes banding, an effect in which smooth
gradations of colors turn into stripes
Optimizing GIF Files
• One way to fix banded colors is to use dithering,
which is the technique of adding pixels to an image to
break up the boundaries between different colors
Optimizing GIF Files
• You can choose which method (Perceptual, Selective,
Adaptive, or Web) to use when reducing the colors of
an image
• The default Color Reduction setting is Selective, and
that usually produces the best result
• Another option is Web, which favors Web-safe colors
Optimizing GIF Files
• You can optimize GIF images by specifying a
certain percentage of Web Snap, which controls
how many Web-safe colors to use in the image
• It is a good idea to leave this setting at 0%,
because using a higher setting will result in lowquality images
• It is not necessary to use Web-safe colors when
optimizing images
Optimizing JPEG Files
• You can optimize JPEG images in the Save
For Web dialog box
• The menu options on the right side of the box
are different for JPEG images
• Compressing a JPEG image is simple
• A high Quality setting results in a large image
file with no noticeable degradation of the
image
Optimizing JPEG Files
• A low Quality setting results in a smaller image file
that may contain artifacts, or areas of texture that are
side effects of the compression
Optimizing JPEG Files
• Another option when compressing images is to make
the image progressive, a setting that causes the image
to download in stages rather than all at once
• A progressive JPEG image is similar to an interlaced
GIF image
Optimizing by File Size
• In order to make sure the Web page downloads in a
few seconds or less, you may decide that all the
elements of a page must have a combined file size of
less than 60KB
• If the HTML file itself has a size of 30KB, that leaves
another 30KB for all the graphics on the page
• It is then convenient to optimize an image based on a
fixed file size, rather than just looking at the maximum
optimization that does not compromise image quality
Optimizing by File Size
•
First select a target file size for the optimized image in the Desired
File Size text field
•
The target size should depend on the dimensions of the image
and the number of colors in it
•
A small image of 50 by 50 pixels with just a few colors can be
optimized to less than 1KB
Summary
• The Toolbox contains all the tools you need to
select, draw, and manipulate the image with your
mouse
• Layers are like sheets of clear plastic
• You can change the elements inside one layer
without affecting those in another
• Use the Zoom tool to magnify the image
• Use the Levels dialog box to fix low-contrast
scans
Summary
• You can smoothly replace areas of an image with
the Clone Stamp tool
• Images with few colors, such as graphs, are best
saved as GIF images
• Images with many colors, such as photographs,
are best saved as JPEG images
• You can optimize an image by selecting a target
file size and letting Photoshop find the best
settings