How to use
Character & Type in Photoshop
About designing Web pages with Photoshop and
When designing Web pages using Photoshop and ImageReady, keep in mind the
tools and features that are available in each application.
- Photoshop provides tools for creating and
manipulating static images for use on the Web. You can divide an image into
slices, add links and HTML text, optimize the slices, and save the image as
a Web page.
- ImageReady is designed for professional Web
page layout. You can more easily work with layers as if they were
independent objects: selecting, grouping, aligning, and arranging them. In
addition, ImageReady includes tools and palettes for advanced Web processing
and creating dynamic Web images like animations and rollovers.
The graphics tools and features in Photoshop and
ImageReady simplify most Web design tasks:
In ImageReady, preset document sizes for pages and
banners, grids, guidelines, and smart guides simplify page layout. Both
Photoshop and ImageReady let you add content to layouts using the text,
drawing, and painting tools. In ImageReady, you can arrange and align content
using layers, layer sets, and grouped layers. To experiment with different
page compositions or to export variations of a page, use the Layer Comps
The Web Content palette in ImageReady enables you to
track slices and their rollover states. For example, you can create a button
for a Web page that glows whenever the user moves the pointer over it, and you
can manage the button states and activities in those states.
For creating simple Web animations, ImageReady provides
the Animation palette, giving you the ability to determine, frame by frame,
the appearance of an animation that can be exported as an animated GIF or SWF
file. You can create animation in conjunction with sets of slices, nested
tables, percentage width tables, and remote rollovers,
where you mouse over one image and a different image changes.
Export and image optimization
When your page or graphic is ready for final export, the
Save For Web dialog in Photoshop and the Optimization palette in ImageReady
enables you to precisely determine how the page or graphic should be exported.
Additionally, you can export an HTML file with the actual images. This text
file instructs a browser how to properly display exported images and rollover
Note: You can preview most
Web effects directly in Photoshop or ImageReady. However, the appearance of an
image on the Web depends on the operating system, color display system,
and browser used to display the image. Be sure to preview images and pages in
different browsers, on different operating systems, and with different color
bit depths. Remote rollovers are best previewed in a browser.
Preparation in Adobe GoLive
Additionally, Photoshop and ImageReady files can be
opened directly in Adobe GoLive. Slices, URLs, and other Web features in
Photoshop files are accessible in GoLive for management and editing. For more
information on using GoLive, see the Adobe GoLive User
Automating the workflow
Photoshop and ImageReady have a robust system that
enables you to automate repetitive tasks. For example, ImageReady droplets
allow designers to quickly convert a batch of images into a Web-ready format.
A slice is a rectangular area of an image that you can use to create links,
rollovers, and animations in the resulting Web page. Dividing an image into
slices allows you both finer functional control and better file size
optimization of your image.
Selecting and modifying slices
You can move, duplicate, combine, divide, resize, delete, arrange,
align, and distribute user slices. There are fewer options for
modifying layer-based slices and auto slices; however, you can
promote a layer-based slice or an auto slice to a user slice at
In Photoshop, you cannot combine, align,
or distribute slices. Edit your document in ImageReady to access
these slice-editing capabilities.
Working with tables (ImageReady)
When you convert a document containing slices to HTML, it is
output as a single table; each individual slice is placed inside
separate table cells. Slices are actually table cells.
Optionally, you can choose to group slices
into tables themselves, which are then
nested inside the main table. You can only nest one level
down, however; slices grouped into tables cannot be nested again
inside other slice group tables.
A slice of type Table Slice is a slice that
contains a table you've created, or a nested table.
You can resize tables to fit layer-based
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.
Each template for gallery styles comes with different
options. If you're using a preset style, some options may be dimmed, or
unavailable in that particular style.
To create a Web photo gallery:
making a gallery from images in the file browser, your images will be
presented in the order in which they're displayed in the file browser.
If you'd rather see a different order, change the order in the file browser,
then select Web Photo Gallery.
- Select the files or folder you want
to use from the file browser.
- Choose File > Automate > Web Photo
- 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.
- Under Source Images, do the
- In the Use pop-up menu, choose Folder or
Selected Images From Web Browser.
- If you chose Folder, 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).
Your folder name appears in the dialog box next to the Browse/Choose button.
Then check Include All Subfolders 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).
- To set general options for the
gallery photos, choose General from the Options pop-up menu. Then do the
- Choose an extension for the files (.htm,
- Check Use UTF 8 Encoding for URL if you want
- Check Add Width and Height Attributes for
images to increase download speed.
- Check Preserve All Metadata to maintain
- To set options for the banner that
appears on each page in the gallery, choose Banner from the Options pop-up
menu. Then do the following:
- For Site Name, enter the title of the
- For Photographer, enter the name of the
person or organization that deserves credit for the photos in the gallery.
- For Contact Info, enter the contact
information for the gallery, such as a telephone number or a business
- For Date, enter the date that you want to
appear on each page of the gallery. By default, Photoshop uses the current
- If available, for Font and Font
Size, choose options for the banner text.
- To set options for the gallery
pages, choose Large Images from the Options pop-up menu. Then do the
- To have Photoshop resize the source images
for placement on the gallery pages, select Resize Images. Then choose an
option for the image size from the pop-up menu or enter a size in pixels.
For Constrain, choose which dimensions of the image you want to constrain
during resizing. For JPEG Quality, choose an option from the pop-up menu,
enter a value between 0 and 12, or drag the slider. A higher value results
in better image quality but larger file size.
- For Border Size, enter the width of the
border around the image in pixels.
- For Titles Use, specify options to display
caption information under each image. Select Filename to display the
filename, or select Description, Credits, Title, and Copyright to display
description text drawn from the File Info dialog box. For more information,
- For Font and Font Size, choose options for
the caption text.
- To set options for the home page,
choose Thumbnails from the Options pop-up menu. Then do the following:
- For Size, choose an option for the thumbnail
size from the pop-up menu or enter a value in pixels for the width of each
- For Columns and Rows, enter the number of
columns and rows that you want to be used to display the thumbnails on the
home page. This option doesn't apply to galleries that use the Horizontal
Frame Style or Vertical Frame Style.
- For Border Size, enter the width of the
border around each thumbnail in pixels.
- For Titles check either Filename,
Description, Credits, Title or Copyright.
- For Font and Font Size, choose options for
the caption text.
- To set options for colors of
elements in the gallery, choose Customize Colors from the Options pop-up menu.
To change the color of a particular element, click its color swatch, and then
select a new color using the Color Picker. The Background option lets you
change the background color of each page. The Banner option lets you change
the background color of the banner.
- To set options to display text to
appear over each image as an antitheft deterrent, choose Security from the
Options pop-up menu. Then do the following:
- For Content, select Custom Text to enter
customized text. Select Filename, Description, Credits, Title, or Copyright
to display text drawn from the File Info dialog box. For more information,
- Specify font, color, and text alignment
options. To place the text on the image at an angle, choose a rotation
Photoshop places the following HTML and JPEG files in
your destination folder:
- A home page for your gallery named index.htm
or index.html depending on the Extension options. Open this file in any Web
browser to preview your gallery.
- JPEG images inside an images subfolder.
- HTML pages inside a pages subfolder.
- JPEG thumbnail images inside a thumbnails
Customizing and creating Web photo gallery styles
Photoshop provides a variety of styles for your Web photo 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