84
U
sing H
elp
| C
on
t
en
ts
| Inde
x
B
ack
381
Adobe Photoshop Help
Designing Web Pages
U
sing H
elp
| C
on
t
en
ts
| Inde
x
B
ack
381
•
T to specify the distance in pixels between the top edge of the slice and the top edge of
the layer’s content.
•
R to specify the distance in pixels between the right edge of the slice and the right edge
of the layer’s content.
•
B to specify the distance in pixels between the bottom edge of the slice and the bottom
edge of the layer’s content.
Specifying browser messages
You can specify what messages appear in the browser using the Message and Alt options.
These options are only available for Image slices.
Message Lets you change the default message in the browser’s status area for a selected
slice or slices. By default the slice’s URL is displayed.
Alt Lets you specify an Alt tag for a selected slice or slices. The Alt text appears in place of
the slice image in nongraphical browsers. It also appears in place of the image while the
image is downloading and as a tool tip in some browsers.
In ImageReady, if the Message and Alt options aren’t showing, choose Show Options from
the Slice palette menu, or click the Show Options button on the palette tab to view
them.
To specify a browser message:
1 Select a slice. If you are working in Photoshop, double-click the slice with the slice select
tool to display the Slice Options dialog box.
2 In the Slice Options dialog box (Photoshop) or the Slice palette (ImageReady), type the
desired text in the Message text box, Alt text box, or both.
Adding HTML text to a slice
Choosing the No Image type for a slice lets you enter text that will appear in the slice area
of the resulting Web page. This text is HTML text—you can format it using standard HTML
tags. You can also select vertical and horizontal alignment options. For more information
on specific HTML tags, see an HTML reference (either printed or on the Web).
Photoshop and ImageReady do not display HTML text in the document window; you must
use a Web browser to preview the text. (See “
P
r
e
viewing an image in a br
o
w
ser
”
on
page
53
.) Keep in mind that the appearance of text is affected by the browser settings and
operating system it is viewed on. Be sure to preview HTML text in different browsers, with
different browser settings, and on different operating systems to see how text will appear
on the Web.
Note: Be careful not to enter more text than can be displayed in the slice area. If you
enter too much text, it will extend into neighboring slices and affect the layout of your
Web page.
To add HTML text to a slice:
1 Select a slice. If you are working in Photoshop, double-click the slice with the slice select
tool to display the Slice Options dialog box.
2 In the Slice Options dialog box (Photoshop) or the Slice palette (ImageReady), select No
Image from the Type pop-up menu.
3 Type the desired text in the provided text box.
78
U
sing H
elp
| C
on
t
en
ts
| Inde
x
B
ack
382
Adobe Photoshop Help
Designing Web Pages
U
sing H
elp
| C
on
t
en
ts
| Inde
x
B
ack
382
4 (Photoshop Save for Web dialog box and ImageReady) If the text includes HTML
formatting tags, select the Text is HTML option. When this option is deselected, all the text
you enter (including formatting tags) will be displayed in the resulting Web page.
5 (Photoshop Save for Web dialog box and ImageReady) If desired, select options in the
Cell Alignment section of the dialog box.
Horizontal alignment options:
•
Default to use the browser’s default for horizontal alignment.
•
Left to align the text to the left side of the slice area.
•
Center to align the text to the center of the slice area.
•
Right to align the text to the right side of the slice area.
Vertical alignment options:
•
Default to use the browser’s default for vertical alignment.
•
Top to align the text to the top of the slice area.
•
Baseline to set a common baseline for the first line of text in cells in the same row (of the
resulting HTML table). Each cell in the row must use the Baseline option.
•
Middle to center the text vertically in the slice area.
•
Bottom to align the text to the bottom of the slice area.
Optimizing slices
You can optimize Image slices using the Save for Web dialog box (Photoshop) or the
Optimize palette (ImageReady).
All Image slices use the optimization settings of the entire image until you apply new
settings. If you select multiple slices with different optimization settings, only the controls
that are relevant to all of the selected slices are visible. If settings for a control differ among
slices, the control is blank. Any settings you choose are applied to all selected slices.
In ImageReady, you can also copy optimization settings from one slice to another within a
document, or from a slice in one view to a slice in another view in 2-Up or 4-Up view.
To optimize a slice:
Select one or more Image slices, and specify options in the Optimize panel/palette.
(See “
Optimizing images
”
on page
415
.)
To copy optimization settings between slices (ImageReady):
1 Select the slice that uses the optimization settings you want to copy.
2 Drag the Droplet icon from the Optimize palette onto the slice to which you want to
apply the optimization settings.
Linking slices (ImageReady)
Linking slices lets you share optimization settings between slices. When you apply optimi-
zation settings to a linked slice, all slices in the set are updated.
97
U
sing H
elp
| C
on
t
en
ts
| Inde
x
B
ack
383
Adobe Photoshop Help
Designing Web Pages
U
sing H
elp
| C
on
t
en
ts
| Inde
x
B
ack
383
Linked slices in GIF and PNG-8 format share a color palette and dither pattern. The dither
pattern is applied across adjacent slice boundaries to prevent the appearance of seams
between the slices. (See “
Optimiza
tion options f
or GIF and PNG-8 f
or
ma
ts
”
on page
420
.)
Note: You can also link slices in the Photoshop Save for Web dialog box. (See “
W
ork
ing
with slic
es in the S
a
v
e f
or
W
eb dialo
g b
o
x (P
hot
oshop)
”
on page
417
.)
To link slices:
1 Select two or more slices you want to link.
Note: If the first slice you select is a user slice, any auto slices you link to the first slice
become user-slices. If the first slice you select is an auto slice, any user slices you select are
linked to the auto slice group.
2 Choose Slices > Link Slices.
Each linked set of user slices is assigned a different color for the slice display graphics in
the upper left corner of the slice. This helps to identify all the slices in one set.
To unlink user slices:
Do one of the following:
•
To unlink a user slice, select the slice, and then choose Slices > Unlink Slices.
•
To unlink all user slices in a set, select a slice in the set, and choose Slices > Unlink Set.
•
To unlink all user slices in an image, choose Slices > Unlink All.
Creating and viewing image maps (ImageReady)
Image maps enable you to link an area of an image to a URL. You can set up multiple
linked areas—called image map areas—in 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.
Note: To avoid unexpected results, do not create image map areas in slices that contain
URL links—either the image map links or the slice links may be ignored in some browsers.
Creating image maps
You can create image map areas using an image map tool or a layer.
Tool-based image map areas Are created using an image map tool—you drag in the
image to define the image map area. You can view and set options for tool-based image
maps in the Image Map palette.
63
U
sing H
elp
| C
on
t
en
ts
| Inde
x
B
ack
384
Adobe Photoshop Help
Designing Web Pages
U
sing H
elp
| C
on
t
en
ts
| Inde
x
B
ack
384
Layer-based image map areas Are created from a layer—the layer’s content defines the
shape of the image map area and the image map inherits the name of the layer. If you edit
the layer’s content, the image map area automatically adjusts to encompass the new
pixels. You can view and set options for layer-based image map areas in the Image Map
palette.
If you plan to add a rollover effect to an image map area, it is often preferable to use a
layer-based image map area rather than a tool-based image map area. For example, if you
create a rollover button that displays a glow effect in the Over state, a layer-based image
map area will automatically adjust to encompass the pixels that are produced by the glow.
Important: If you overlap image map areas, the topmost area is active.
Layer-based rectangle image map compared to polygonal image map
To create an image map area using an image map tool:
1 Select the rectangle image map tool , the circle image map tool , or the polygon
image map tool in the toolbox.
2 For the rectangle or circle image map tool, select Fixed Size to specify set values for the
image map area’s dimensions. Enter pixel values in whole numbers.
3 Do one of the following to define the image map area:
•
With the rectangle or circle image map tool, drag over the area you want to define.
Shift-drag to constrain the area to a square. Alt-drag (Windows) or Option-drag
(Mac OS) to drag an image map area from its center.
•
With the polygon image map tool, click in the image to set the starting point. Position
the pointer where you want the first straight segment 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.
To add points to a polygon image map area, select the image map select tool, and
Shift-click where you want to add a point. To remove points from a polygon image
map area, select the image map select tool, and Alt-click (Windows) or Option- click
(Mac OS) the points you want to remove.
To create an image map area from a layer:
1 In the Layers palette, choose a layer from which to create an image map area. (To use
multiple layers in one image map area, first merge the layers.)
2 Choose Layer > New Layer Based Image Map Area.
84
U
sing H
elp
| C
on
t
en
ts
| Inde
x
B
ack
385
Adobe Photoshop Help
Designing Web Pages
U
sing H
elp
| C
on
t
en
ts
| Inde
x
B
ack
385
Converting layer-based image maps to tool-based image maps
Because a layer-based image map area is tied to the pixel content of a layer, the only way
to move, resize, or align it is to edit the layer. You can convert a layer-based image map
area to a tool-based image map area to unlink it from the layer.
To convert a layer-based image map area to a tool-based image map area:
1 Select a layer-based image map area using the image map select tool .
(See “
S
elec
ting image maps
”
on page
386
.)
2 Choose Promote Layer Based Image Map Area from the Image Map palette menu. If the
layer contains multiple, non-overlapping areas of pixel content, multiple tool-based image
map areas are produced.
Viewing image maps
When you select the image map select tool, image map areas show automatically. You can
also show or hide image map areas using the Image Map Visibility button.
Image map preferences determine how image map areas appear in the document
window. You can set preferences for image map lines, line color, and color adjustments.
To show or hide image map areas:
Do one of the following:
•
Click the Image Map Visibility button in the toolbox.
•
Choose View > Show > Image Maps.
•
Choose View > Show Extras. This command also shows or hides selection edges, slices,
text bounds, text baseline, and text selections. (See “
W
or
k
ing with Ex
tr
as
”
on page
47
.)
To set image map display preferences:
1 Do one of the following:
•
In Windows and Mac OS 9.x, choose Edit > Preferences > Image Maps.
•
In Mac OS X, choose ImageReady > Preferences > Image Maps.
2 To change the color of image map lines, choose a color from the Line Color pop-up
menu. Changing the color of image map lines also changes the line color of selected
image map areas to a contrasting color.
3 To change the strength of image map color adjustments, enter a value, or choose a
value from the Image Map Overlay pop-up slider. The value determines the extent of color
adjustments that dim the brightness and contrast of unselected image map areas.
4 To display image map lines only and deselect color adjustment display, select Show
Lines Only.
5 To show a bounding box for circular image map areas, select Show Bounding Box.
65
U
sing H
elp
| C
on
t
en
ts
| Inde
x
B
ack
386
Adobe Photoshop Help
Designing Web Pages
U
sing H
elp
| C
on
t
en
ts
| Inde
x
B
ack
386
Selecting and modifying image maps (ImageReady)
You can move, arrange, align, and duplicate tool-based image map areas using the Image
Map palette. There are fewer options for modifying layer-based image map areas because
they are tied to the pixel content of the associated layer; however, you can select, arrange,
and delete layer-based image map areas as you do tool-based image map areas.
Using the Image Map palette (ImageReady)
The Image Map palette displays options for the selected image maps. You can access
commands for working with image maps in the Image Map palette menu.
To display the Image Map palette:
Choose Window > Image Map, or click the palette button on the right side of the
options bar for the image map select tool.
Selecting image maps
You select image map areas with the image map select tool.
To select an image map area:
1 Select the image map select tool .
2 Click on an image map area in the image. Shift-click to add areas to the selection.
You can also select multiple image map areas by clicking outside an image map area and
dragging across the image map areas you want to select.
Moving and resizing tool-based image maps
You can move and resize tool-based image map areas by dragging. You can also move and
resize rectangular and circular image map areas using numeric coordinates.
Note: To move or resize a layer-based image map area, move or edit the layer.
To move a tool-based image map area:
1 Select one or more image map areas you want to move.
2 Position the pointer inside the image map area, and drag it to a new position. Press
Shift to restrict movement to a vertical, horizontal, or 45° diagonal line.
To resize a tool-based image map area:
1 Select an image map area you want to resize.
2 Drag a handle on the image map border to resize the image map area.
To resize and move a tool-based image map area using numeric coordinates:
1 Select a rectangular or circular image map area.
2 In the Dimensions area of the Image Map palette, change one or more of the following
options:
•
X to specify the distance in pixels between the left edge of a rectangular image map
area, or the center point of a circular image map area, and the origin point of the ruler
in the document window.
107
U
sing H
elp
| C
on
t
en
ts
| Inde
x
B
ack
387
Adobe Photoshop Help
Designing Web Pages
U
sing H
elp
| C
on
t
en
ts
| Inde
x
B
ack
387
•
Y to specify the distance in pixels between the top edge of a rectangular image map
area, or the center point of a circular image map area, and the origin point of the ruler
in the document window.
Note: The default origin point of the ruler is the upper left corner of the image. (See “
U
sing
r
ulers
,
c
olumns
,
the
measur
e t
o
ol,
guides
,
and
the gr
id
”
on page
43
.)
•
W to specify the width of a rectangular image map area.
•
H to specify the height of a rectangular image map area.
•
R to specify the radius of a circular image map area.
Changing the shape of layer-based image maps
When you create a layer-based image map area, the default image map area is a rectangle
that encompasses all of the layer’s pixel data. You can change the shape of the image map
area by selecting a Shape option in the Image Map palette.
To change the shape of a layer-based image map area:
1 Select a layer-based image map area.
2 In the Layer Image Map section of the Image Map palette, choose an option from the
shape pop-up list: Rectangle, Circle, or Polygon. If you choose Polygon, enter a value or
choose a value from the Quality pop-up slider to set the number of segments in the
polygon.
Duplicating image maps
You can create a duplicate image map area with the same dimensions and settings as the
original image map area.
To duplicate an image map area:
Do one of the following:
•
Select one or more image map areas, and choose Duplicate Image Map Area(s) from the
Image Map palette menu.
•
Select one or more image map areas, and Alt-drag (Windows) or Option-drag (Mac OS)
from inside the image map area.
•
Select a image map in the Rollovers palette, and choose Duplicate Image Map from the
palette menu. (See “
U
sing the R
ollo
v
ers palett
e
”
on page
398
.)
The duplicate image map area appears on top of the original (offset 10 pixels down and to
the right) and can be moved, resized, or otherwise modified.
Arranging image maps
The Rollovers palette displays the stacking order of image maps. You can specify which
image map area is on the top and bottom of the stack and move image map areas up or
down in the stacking order.
To change the stacking order of image map areas:
Do one of the following:
•
Select one or more image map areas you want to arrange. You can select a combination
of tool-based image map areas and layer-based image map areas. Then, with the image
map select tool active, click a stacking order option in the options bar: Bring to
78
U
sing H
elp
| C
on
t
en
ts
| Inde
x
B
ack
388
Adobe Photoshop Help
Designing Web Pages
U
sing H
elp
| C
on
t
en
ts
| Inde
x
B
ack
388
Front , Bring Forward , Send Backward , Send to Back . Alternately, choose a
stacking order command from the Image Map palette menu.
•
Drag an image map up or down in the Rollovers palette. (See “
U
sing the R
ollo
v
ers
palett
e
”
on page
398
.)
Aligning tool-based image maps
You can align tool-based image map areas to the top, bottom, left, right, and middle.
Note: To align layer-based image map areas, first link the layers, and then choose an
alignment option from the Layer > Align Linked submenu.
To align tool-based image map areas:
1 Select the tool-based image map areas you want to align.
2 Do one of the following:
•
With the image map select tool active, click an alignment option in the options bar:
Align Image Map Top Edges , Align Image Map Vertical Centers , Align Image
Map Bottom Edges , Align Image Map Left Edges , Align Image Map Horizontal
Centers , Align Image Map Right Edges .
•
Choose an alignment command from the Image Map palette menu.
Distributing tool-based image maps
You can distribute tool-based image map areas evenly along the vertical or horizontal axis.
To distribute tool-based image map areas:
1 Select the tool-based image map areas you want to distribute.
2 Do one of the following:
•
With the image map select tool active, click a distribute option in the options bar:
Distribute Image Map Top Edges , Distribute Image Map Vertical Centers ,
Distribute Image Map Bottom Edges , Distribute Image Map Left Edges ,
Distribute Image Map Horizontal Centers , Distribute Image Map Right Edges .
•
Choose a distribute command from the Image Map palette menu.
Deleting image maps
You can delete selected image map areas by pressing the Backspace key or the Delete key,
or choosing Delete Image Map Area(s) from the Image Map palette menu.
Specifying image map options (ImageReady)
You can specify a name, a URL, a target frame, and Alt text for an image map area in the
Image Map palette.
To change the name of an image map area:
1 Select an image map area.
2 In the Image Map palette, enter a new name in the Name text box.
74
U
sing H
elp
| C
on
t
en
ts
| Inde
x
B
ack
389
Adobe Photoshop Help
Designing Web Pages
U
sing H
elp
| C
on
t
en
ts
| Inde
x
B
ack
389
To specify link options for an image map area:
1 Select an image map area.
2 In the Image Map palette, enter a URL for the link, or choose a previously created URL
from the URL pop-up menu. You can enter a relative URL or a full URL. If you enter a full
URL, be sure to include http:// (for example, enter http://www.adobe.com, not
www.adobe.com). For more information on using relative URLs and full URLs, see an
HTML reference (either printed or on the Web).
3 In the Image Map palette, enter the name of a target frame in the Target text box, or
choose an option from the pop-up menu. A frame name must match a frame previously
defined in the HTML file for the document. When a user clicks the link, the specified file
displays in the new frame:
•
_blank to display the linked file in a new window, leaving the original browser
window open.
•
_self to display the linked file in the same frame as the original file.
•
_parent to display the linked file in its own original parent frameset. Use this option if
the HTML document contains frames and the current frame is a child. The linked file
displays in the current parent frame.
•
_top to replace the entire browser window with the linked file, removing all current
frames.
Note: For more information on frames, see an HTML reference (either printed or on
the Web).
4 In the Image Map palette, enter text for an Alt tag in the Alt text box. The Alt text
appears in place of the image map area in nongraphical browsers. In most browsers, it also
appears if the user positions the mouse over the image map area.
Selecting an image map type (ImageReady)
ImageReady can create client-side and server-side image maps. In client-side image maps,
the links are interpreted by the browser itself. In server-side image maps, the links are
interpreted by the server. Because client-side image maps don’t need to contact the server
to function, they are often significantly faster to navigate. By default, ImageReady saves
image maps as client-side image maps.
Important: Server-side image maps do not work in images that have multiple slices.
You select an image map type in the Output Settings dialog box. (See “
S
etting HT
ML
output options
”
on page
442
.) If you select a server-side image map, ImageReady
generates a separate map file based on the server option you select. However, you’ll need
to update the path to the map file in your HTML file.
59
U
sing H
elp
| C
on
t
en
ts
| Inde
x
B
ack
390
Adobe Photoshop Help
Designing Web Pages
U
sing H
elp
| C
on
t
en
ts
| Inde
x
B
ack
390
Creating Web photo galleries (Photoshop)
You use the Web Photo Gallery command to automatically generate a Web photo gallery
from a set of images. A Web photo gallery is a Web site that features a home page with
thumbnail images and gallery pages with full-size images. Each page contains links that
allow visitors to navigate the site. For example, when a visitor clicks a thumbnail image on
the home page, a gallery page with the associated full-size image loads.
Web photo gallery home page and loaded gallery page
Photoshop provides a variety of styles for your gallery, which you can select using the Web
Photo Gallery command. If you are an advanced user who has knowledge of HTML, you
can also customize a style by editing a set of HTML template files or create a new style.
To create a Web photo gallery:
1 Choose File > Automate > Web Photo Gallery.
2 Under Site, do the following:
•
Choose a style for the gallery from the Styles pop-up menu. A preview of the home
page for the chosen style appears in the dialog box.
•
Enter the email address that you want to display as the contact for the gallery.
•
Choose an extension for the generated files from the Extension pop-up menu.
3 Under Folders, do the following:
•
Click Browse (Windows) or Choose (Mac OS). Then select the folder containing the
images that you want to appear in the gallery, and click OK (Windows) or Choose
(Mac OS).
•
Select Include All Subdirectories to include images inside any subfolders of the selected
folder.
•
Click Destination, select the destination folder that you want to contain the images and
HTML pages for the gallery, and click OK (Windows) or Choose (Mac OS).
Documents you may be interested
Documents you may be interested
