Working With Photoshop - Adobe 38040334 - Dreamweaver CS3 User Manual

Working with Photoshop

About Photoshop integration
You can insert Photoshop image files (PSD format) into web pages in Dreamweaver and let Dreamweaver optimize
them as web-ready images (GIF, JPEG, and PNG formats). You can also paste all or part of a multi-layered or multi-
sliced Photoshop image into a web page in Dreamweaver.
Note: If you use this integration feature often, you may want to store your Photoshop images on your website for easier
access. If you do, be sure to cloak them to avoid unnecessary handling between the local site and the remote server.
For a tutorial about working with Dreamweaver and Photoshop, see www.adobe.com/go/vid0200.
See also
"Cloak and uncloak specific file types" on page 100
Working with Photoshop and Dreamweaver
If you use Photoshop to create images, you can use Dreamweaver to optimize your images for the web and insert
them in web pages. You can also select slices or layers in a Photoshop image, and then use Dreamweaver to insert
them as images in web pages. After inserting these images in web pages, you can still edit the source files in
Photoshop and update the corresponding web images in Dreamweaver.
Use the following workflow to insert an image created in Photoshop into a web page:
•
In Photoshop, save your image as a regular Photoshop file (PSD). You don't have to convert the image to JPEG,
GIF, or PNG first.
• In Dreamweaver, select the PSD file and insert it into the web page. Dreamweaver lets you optimize the image for
the web, and then inserts it in the page.
Use the following workflow for using a slice or layer in a Photoshop image as an image in a web page:
•
In Photoshop, select and copy the slice or layer to the Clipboard.
• In Dreamweaver, paste the slice or layer into the web page. Dreamweaver lets you optimize the image for the web,
and then inserts it in the page.
Use the following workflow for updating web images originally created in Photoshop:
• In Dreamweaver, select the JPEG, GIF, or PNG file that you derived from a PSD file and inserted with
Dreamweaver, and then click the edit image button in the Properties panel. Dreamweaver opens the source file in
Photoshop.
•
In Photoshop, make your changes to the source file and save it. Then select all or part of the image and copy it on
the Clipboard.
•
In Dreamweaver, paste the image over the web image in the page. Dreamweaver optimizes the source file using
the original optimization settings, and then replaces the image on the Clipboard with the updated version.
For a video tutorial on working with Photoshop and Dreamweaver, see www.adobe.com/go/vid0200.
September 4, 2007
DREAMWEAVER CS3 374
User Guide