Image Roundtrip is ideal for the web designer-developer who follows a particular set of behaviors: their workflow is almost exclusively in Adobe applications, with a constant demand for image modifications. If you’re a “one and done” designer – for example, creating content very quickly on a daily basis for a blog – this approach will likely not work for you. But if you’re responsible for a relatively static site using DreamWeaver and Photoshop and wish to continue to adjust your images, including after the site is published, this technique may be ideal.

In order to use Image Roundtrip, you must have your site setup correctly in DreamWeaver first, including specifying where your images folder is located. I’ll assume that you have the site folders I have previously suggested, with an assets folder that contains your site images beside an originals folder. The latter contains the original working documents for your site: the .psd and .ai files, the Word documents in which you wrote the body copy of the site, etc.

To start our lesson, create any image in PhotoShop (you might want to use the image I have, by “gnuckx”, from flickr and lisenced under Creative Commons). Then – this is important – save the image as a PSD file in the originals folder for your site.

Now start DreamWeaver, make sure you’re working on the correct site, start a new page, switch to Design Mode, and use Insert / Image from the menu (or Opt + CMD + I).

“Wait,” you’re about to say. “We can’t insert a PSD image into a web page: HTML only supports four image formats, and PSD is definitely not one of them”.

Go ahead anyway: use the file dialog to locate the PSD you saved in the originals folder. DreamWeaver will, surprisingly, allow you to insert the image, but then immediately prompt you to convert the image into a web-ready format.

The interface you’re presented with at this point is a cousin to PhotoShop’s Save For Web window, but slightly different: the “four up” mode is shifted to the bottom right corner, for example. Otherwise, you have the same options to crop, resize, and optimize the image that you do in PhotoShop or Fireworks. I would suggest that whatever format you choose, you use the settings I’ve previously discussed. When you’re finished, click on OK.

If you’ve set up your site correctly in DreamWeaver the application will prompt you to save this new version inside your site’s images folder, with a web-ready filename. After you’ve completed this process the application will prompt you to insert alt text for the image as normal.

Presented in Design Mode, your inserted image features a watermark of a circular green arrow in its top left corner. This is not a permanent part of the image, and will not be displayed on the final website: it is only there to remind you that the image is “live linked” to its PhotoShop progenitor. DreamWeaver is essentially keeping an eye on the original version of the image, looking for any alterations to it.

Let’s make some changes to the original now. There are four ways you can switch back to editing the PhotoShop document: you can use whatever techniques your OS provides to swap between applications, or:

• right-click on the image and choose Edit Original With / PhotoShop
• use the equivalent command under Modify in the menu bar
• click on the PhotoShop icon in the Property Bar while the image is active.

Note that you can use these commands at any time within DreamWeaver; if PhotoShop isn’t running and/or the original image isn’t loaded, everything will be made ready for you. The only requirement is that the original image stay in the same location.

Back in PhotoShop, alter something about the original image: here, I’ve added some text. Save the PSD with the changes and switch back to DreamWeaver.

You’ll see that the image’s watermark has changed; half the arrow is now red, indicating that the web version of the image is out of sync with the PhotoShop original. We can fix this:

From the same locations as above (right-click, menu bar, property bar) choose Update From Original.

The image now re-syncs with the PhotoShop version and shows the changes you made. The truly nice part is that it goes through the same optimization process that you completed previously: if you saved the image as a JPEG at a particular quality and size, DreamWeaver does the same thing again, but invisibly and behind the scenes.

This provides a friction-free workflow for a designer who prefers to move back and forth between PhotoShop and DreamWeaver, tweaking images and seeing the result, without having to worry about image versions or quality loss through recursive saving and compression.It’s not my personal method of working, but that doesn’t mean it can’t be yours.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.