Dreamweaver CS6: The Missing Manual

Inserting an Image from Photoshop

Since Adobe makes the world’s most popular image-editing program, Photoshop, it only makes sense that Dreamweaver’s engineers provide a streamlined process for 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, too. Nice. That’s great news if you’re the type who constantly tweaks your artwork in Photoshop. The second method—copying and pasting from Photoshop—doesn’t keep track of any changes to the original file. Both methods are explained in the following pages.

Method 1: Using the Insert Photoshop Images

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, 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 OK (Choose on Macs).

Note

You can also insert a PSD file by dragging it directly from the desktop (or any folder) and dropping it into a Dreamweaver ...