Photoshop cs5 by steve Johnson part 70 pps

ptg
Designing for the Web
and Devices
Introduction
If you need to manipulate a photographic image to place it
on the Web, there's not a better program on the market than
Adobe Photoshop that will do the job for you. You can pre-
pare images for the Internet all right from Photoshop.
Photoshop uses various document formats such as JPEG,
GIF, PNG, and WBMP (Wireless BMP), to save images for the
Web. For example, the JPEG format is used primarily for
compressing photographic images, while the GIF format is
used for compressing clip art and text. Each format is
designed to serve a purpose, and knowing when to use a
specific format will help you design fast-loading, dynamic
web documents.
However, saving files in a specific file format is not the
only way Photoshop helps you create web-friendly images;
you can also slice images. When you slice an image, you're
cutting the image into several pieces. Since the Internet han-
dles smaller packets of information more efficiently than one
large piece, slicing an image makes the whole graphic load
faster, and Photoshop helps you slice images with ease.
19
19
What You’ll Do
Save for the Web
Work with Save For Web Options
Optimize an Image to File Size
Work with Web File Formats
Optimize a JPEG Document

Optimize a GIF Document
Optimize a PNG-8 Document
Optimize a PNG-24 Document
Optimize a WBMP Document
Create an Animated GIF
Work with Animation
Slice Images the Easy Way
Work with Slices
Arrange Slices
Save a Sliced Image for the Web
Add HTML Text or URL Link to Slices
Define and Edit Web Data Variables
Export Directly to Video
Export to Zoomify
443
From the Library of Wow! eBook
ptg
444 Chapter 19
Photoshop's Save For Web & Devices command is a dream come true
for preparing images for the Internet, or even for saving images in a
quick-loading format for Microsoft PowerPoint slide presentations, and
you don't even have to leave Photoshop. The Save For Web & Devices
command lets you open any Photoshop document, and convert it into a
web-friendly format using the GIF, JPEG, PNG, or WBMP formats. You
can even try different optimization settings or compare different opti-
mizations using the 2-Up or 4-Up panes. In addition, the dialog area
below each image provides optimization information on the size and
download time of the file.
Saving for the Web
Save for the Web

Open a document.
Click the File menu, and then click
Save For Web & Devices.
Click the Original, Optimized, 2-Up,
or 4-Up tabs to view the document
using different layouts.
Click one of the sample images to
change its default format.
IMPORTANT
If you're viewing
the document using 2-Up or 4-Up,
the first image is the original. You
can't change the original; you can
only edit one of the sample
images.
Click the Optimized File Format list
arrow, and then select from the
following options:
◆ GIF. The Graphics Interchange
Format is useful for clip art,
text, or images that contain a
large amount of solid color. GIF
uses lossless compression.
◆ JPEG. The Joint Photographic
Experts Group format is useful
for images that contain a lot of
continuous tones, like photo-
graphs. JPEG uses lossy
compression.
◆ PNG-8. The Portable Network

Graphics 8-bit format functions
like the GIF format. PNG uses
lossless compression.
5
4
3
2
1
3
4
5
6
From the Library of Wow! eBook
ptg
Chapter 19 Designing for the Web and Devices 445
◆ PNG-24. The Portable Network
Graphics 24-bit format
functions like the JPEG format.
PNG-24 uses lossless
compression.
◆ WBMP. The Wireless Bitmap
format converts an image into
black and white dots, for use
on output devices like cell
phones and PDAs.
Click the Preset list arrow. Select a
template from the available
options, if you want to use some
timesaving default options.
Select from the various options

that will change based on your File
Format selection. Select Convert to
sRGB if you want the image
converted, and choose your
preferred viewing style and
amount of metadata to be included
in the file.
Click the Color Table section
(available for the GIF and PNG-8
formats), and add, subtract, or edit
colors in the selected document.
To ch ange the selecte d image's
width and height, make desired
adjustments from the Image Size
section.
To mo ve the se lec ted image
directly into the Device Central
application, click the Device
Central button.
Click Save.
Enter a name, and then select a
location in which to save the
image file.
Click OK.
Photoshop saves the modified file
and returns you to the original
image.
13
12
11

10
9
8
7
6
9
10
11
Working with Matte and Transparency
The Matte option, when available, specifies the background color
used to fill anti-aliased edges that lie adjacent to transparent areas of
the image. When the Transparency option is selected, the matte is
applied to edge areas to help blend the edges with a web back-
ground of the same color. When the Transparency option is not
selected, the matte is applied to transparent areas. Choosing the
None option for the matte creates hard edges if Transparency is
selected; otherwise, all transparent areas are filled with 100% white.
The image must have transparency for the Matte options to be
available.
For Your Information
7
8
From the Library of Wow! eBook
ptg
446 Chapter 19
When you choose Save For Web & Devices, you are able to save your
image in one of four web formats: GIF, JPEG, PNG, or WBMP. The Save
For Web & Devices dialog box comes with options that will help you
through the process. For example, if you choose the JPEG format, you
can select the amount of compression applied to the image or, if you

select the GIF format, you can choose how many colors are preserved
with the image. The PNG format lets you save images in an 8-bit (256
colors) or a 24-bit (millions of colors) format. The options available with
Save For Web & Devices give you the control you need to produce
small image files with high quality.
Working with Save
For Web Options
Work with Save For
Web Options
Open a document.
Click the File menu, and then click
Save For Web & Devices.
Select from the various Save For
Web & Devices tools:
◆ Hand Tool. Drag the image to
change the view of a document.
◆ Slice Selection Tool. Select a
predefined image slice.
◆ Zoom Tool. Click on the image
to expand the view size.
◆ Eyedropper Tool. Drag within
the image to perform a live
sampling of the colors.
Click the Thumbnail Options
button, and then select bandwidth
options for the selected document.
Click the Zoom list arrow, and then
select a view size for the sample
images.
Click the Toggle Slices Visibility

button to show or hide the image
slices.
Click the Preview button to choose
from browser options or view in
the default browser, and then
select the image.
Click Save.
8
7
6
5
4
3
2
1
3
6
7
5
Additional save options in Photoshop include:
Convert to sRGB. You can choose to have image colors converted to
sRGB in the Save process.
Preview. Select from four preview options: Monitor Color (default),
Macintosh or Windows with no color management, or Use Document
Profile.
Metadata. Select from five options to include no metadata (very help-
ful for stripping out metadata you don't want others to see), copyright
only, copyright and contact info, all metadata except camera info, or
all metadata.
For Your Information

4
8
From the Library of Wow! eBook
ptg
Chapter 19 Designing for the Web and Devices 447
The Save For Web & Devices dialog box has many options to help you
create the exact image you need—including helping you compress an
image down to a specific file size. For example, you've just created an
image you want to display on the Web, but the maximum file size you
can use is 35 KB. You could experiment with compression options in the
Save For Web & Devices settings, or you could use the Optimize to File
Size option.
Optimizing an Image
to File Size
Optimize an Image to File Size
Open a document.
Click the File menu, and then click
Save For Web & Devices.
Click the 2-Up tab, and then select
the sample image to the right.
Click the Optimize menu, and then
click Optimize To File Size.
Enter a file size in the Desired File
Size data box.
Click the Current Settings option
or the Auto Select GIF/JPEG
option to let Photoshop choose
between the JPEG or GIF format.
Click the following Use options:
◆ Current Slice

◆ Each Slice
◆ Total of Al l Sl ic es
Click OK.
Photoshop compresses the
selected sample.
Click Save to save the compressed
image.
9
8
7
6
5
4
3
2
1
3
85
6
7
4
9
From the Library of Wow! eBook
ptg
448 Chapter 19
If you design web documents, you know that the size of your images is
very important. Photoshop gives you the option of compressing images
in one of four formats appropriate for use on the Web: GIF, JPEG, PNG,
and WBMP. The GIF format compresses images that contain solid col-
ors with sharp, definable edges, such as clip art and text. The JPEG for-

mat reduces the size of image files that contain a lot of soft transitional
colors, such as photographs. The PNG format is a hybrid format
designed to take the place of the GIF and JPEG format. Finally, the
WBMP format was created to display images on low-resolution
devices like cell phones and PDAs by converting the image into dots of
black and white. Photoshop will help you transform your images into
whatever format you need in order to create stunning web images.
Working with Web
File Formats
Work with Web File Formats
Open a document.
Click the File menu, and then click
Save For Web & Devices.
Click the Original, Optimized, 2-Up,
or 4-Up tabs to view the document
using different layouts.
Select one of the samples.
Click the Optimized File Format list
arrow, and then select a format
from the available options.
Select the options you want to use
to change the image compression,
and specify your desired color
profile options.
Click Save.
The Save Optimized As dialog box
appears.
7
6
5

4
3
2
1
43
7
5
6
From the Library of Wow! eBook
ptg
Chapter 19 Designing for the Web and Devices 449
Enter a file name in the Save As
box.
Click the Save as Type (Win) or
Format (Mac) list arrow, and then
select to save the image in HTML
and Images, Images Only, or HTML
Only.
Click the Save As list arrow, and
then select the location in which
to save the file.
Click the Settings and Slices list
arrows to further define the output
files (if you save a single image
without slices, you can leave these
settings at their default values).
Click Save.
12
11
10

9
8
9
11
8
Creating an HTML File for an Image
When you save an optimized file using the Save Optimized As com-
mand, you can choose to generate an HTML file for the image. This
file contains all the necessary information to display your image in a
web browser.
For Your Information
10
12
From the Library of Wow! eBook