Zoom-in Online

Following in the steps of the enhanced integration across the CS4 lineup, Dreamweaver now supports Photoshop PSD files. Drag and drop a PSD file into a Dreamweaver page to create an image Smart Object.

Smart Objects are tightly linked to their source file. A small indicator on the Smart Object in Dreamweaver CS4 shows when the source and instance are in sync. When you make any changes to the source image, Dreamweaver notes that the files are out of sync; just click the Update from Original icon in the Properties panel to immediately update your image without opening Photoshop .

Multiple size instances of the same PSD file can be saved across pages. For example, if you have a logo placed throughout your site in a variety of sizes as Smart Objects, any updates made to the Photoshop file can be applied individually to the associated Smart Objects on a page-by-page basis, or to all of them at once through the Assets panel. Unique sizes are maintained while the image itself is faithfully re-sampled. Here's my quick walk-through to get you started:

This is my very basic web page that I've set up, just a line of text. Go to INSERT>IMAGE to insert an image, which will bring you to the next window.

Select your PSD file. Click OK.

You will be prompted with this Image Preview box, where you can adjust certain parameters such as the type of image and quality. I went with "JPEG—Better Quality". Click OK.

My PSD file has been imported as a Smart Object in my document. Notice the Sync icon in the upper left corner.

Ok! Let's edit this. Right click /CMD+click on the image, choose EDIT WITH>ADOBE PHOTOSHOP CS4. This will open the file in Photoshop.

From here, make any adjustments necessary. Im my case, I brightened my image up with the Curves tool. Go to FILE>SAVE to save your changes.

Go back to Dreamweaver and your changes will automatically be reflected. Nice!

This is a new feature from the newly updated Dreamweaver CS4, if you'd like to give it a shot yourself, download the Adobe CS4 trial here.