How many times have you started a web page design from a Photoshop PSD mockup? Or needed to revise an image in Photoshop after it was part of your web layout? Dreamweaver CS3’s integration with Photoshop makes these common tasks much quicker.

Start off by opening a page in Dreamweaver and opening an image in Photoshop, even a layered PSD (note that all of these techniques work in Fireworks too—it’s your choice!). Make a rectangular marquee selection of the part of the image you want to bring into your web page. Don’t worry if it’s not the size, format, or optimization level you ultimately want, just press Command-C (Ctrl-C on a PC) to copy it (or go to Edit > Copy Merged if the file is layered).

Now, position your cursor in your Dreamweaver document, right where you want the image to go—a div container, a table cell, whatever you like—and paste (Command/Ctrl-V).

Copying from Photoshop and pasting to Dreamweaver brings you to the Image Preview dialog.

You’ll get plenty of options for modifying your image now, including optimization and dimension settings. The downside is that this dialog mimics the one found in Fireworks, not Photoshop, but it’s so simple to use that it really doesn’t matter. Change your settings, save your file, and the image will pop right into Dreamweaver.

The image can be pasted into Design View or into Code View.

This isn’t all, though! Dreamweaver will remember what file the image came from, so you can go back to it later for editing. Just Command-double click (Ctrl-double click on a PC) the image in Dreamweaver and the original will open in Photoshop (or Fireworks, depending on your preferences for the file type… more on that shortly). Make your changes, then just copy/paste right back in to Dreamweaver.

For many versions, Dreamweaver has been linked with Fireworks through a series of image editing controls on the Properties Inspector. If you don’t typically work in Fireworks, this is easily switched to Photoshop in your Preferences. In the File Types/Editors preferences, make sure that Photoshop CS3 is your primary editing app for at least PSD and JPEG files. You might want to make Fireworks the primary for PNGs and GIFs, but it’s up to you.

Make Photoshop the primary editor for JPEGs and PSDs to enable easy editing.

These preferences dictate what application will open when you Command-double click an image or click the edit button on the Properties Inspector.

When an image is selected, you’ll see in the Properties Inspector which app will open when clicked.

Simple copy/paste of images from app to app and easy editing after the fact are hopefully just the first steps in Photoshop/Dreamweaver integration. Many web designers will save time turning mockup or “comp” designs into functioning layouts with this method. Let’s hope this trend continues with stronger integration in future updates, like copy/paste of slices into CSS positioning layouts… a girl can dream.

This entry was posted on Wednesday, August 22nd, 2007 at 1:07 pm and is filed under Graphic Design, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.