demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Venetian Mask

Using Image Roundtrip In Adobe DreamWeaver

tools / dreamweaver

Estimated reading time: 4 minutes, 12 seconds

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 and 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 (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: 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.

DreamWeaver insert live imageThe 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.

Dreamweaver image synced iconPresented 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.

PhotoShop altered imageLet’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.

DreamWeaver image out of syncYou’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.

Altered image in DreamWeaverThe 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.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.