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
Trang 1Designing 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
Trang 2Photoshop'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
5
4
3
2
1 3 4
5
6
Trang 3◆ 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 change the selected image's
width and height, make desired
adjustments from the Image Size
section
To move the selected 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
Trang 4When 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
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
For Your Information
4 8
Trang 5The 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 All Slices
Click OK.
Photoshop compresses the
selected sample
Click Save to save the compressed
image
9
8
7
6
5
4
3
2
1 3
8 5
6 7
4 9
Trang 6If 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 3 4
5 6
Trang 7Enter 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