Dreamweaver CS5: The Missing Manual

Inserting an Image from Photoshop

Since Adobe (the maker of Photoshop) bought Macromedia (the maker of Dreamweaver), it was only a matter of time before it brought these two powerful programs together. Dreamweaver streamlines the process of moving images back and forth between Photoshop and Dreamweaver. You can add a Photoshop document to a web page two ways: Insert a PSD file (Photoshop’s native format), or copy an image from Photoshop, and then paste it into a Dreamweaver document.

The first method—inserting a PSD file—supports what Adobe calls Smart Objects, which lets Dreamweaver keep track of whether you update the original Photoshop file, and if so, gives you the option to update the compressed, web-ready version of the image. Nice. That’s great news if you’re the type who’s constantly tweaking your artwork in Photoshop. The second method—copying and pasting from Photoshop—doesn’t keep track of any changes to the original Photoshop file. Both methods are explained in the following pages.

Method 1: Using the Insert Image Object

You can insert a regular Photoshop file using the same steps described on Adding Images for inserting GIF, JPEG, or PNG files. For example, use the Image button on the Insert panel (Figure 6-2), or choose Insert→Image. The Select Image Source window appears, just as it does when you insert a standard web-ready file. You can then choose a Photoshop document (a .psd file), and click the OK (Choose on Mac) button. Instead of just inserting the image, however, ...