Dreamweaver, Photoshop, and Bridge now integrate well for image editing and web workflows. You can: 1) Browse images from within Dreamweaver using Bridge. Double-click layered PSD files to edit in Photoshop. 2) Drag images from Bridge's compact mode directly into Dreamweaver. This optimizes the image format during insertion. 3) Edit inserted images by selecting in Dreamweaver and choosing "Edit in Photoshop." Saved changes are automatically updated back in Dreamweaver.

1. D REAMWEAVER
published on 9th July 2008
Round-trip editing
with Photoshop CS3
B Y JA M E S L E E
Chief Instructor
“ In this tutorial, you will be pleasantly surprised
to know the excellent collaboration between
Dreamweaver and Photoshop just makes the job of
editing and inserting the images very much easier.
We shall also take a quick look at using Adobe
Bridge and how it can integrate nicely into the web
workflow.
”
James Lee
Adobe Chief Instructor
© 2008 ACE Training Pte Ltd. All Rights Reserved. 1

2. D REAMWEAVER
One of the things that I had looked forward to using CS3 suite is the integration aspects of Bridge, Photoshop
and Dreamweaver CS3. Let us take a quick look at these right now.
Starting Adobe Bridge in Dreamweaver CS3
1) Within Dreamweaver, go to File > Browse in Bridge to peruse your images in local site.
Using Bridge serves as a convenient way to keep track of all the files.
Slider Bar
2) You can drag the slider bar to ensure your preview is larger or smaller.
© 2008 ACE Training Pte Ltd. All Rights Reserved. 2

3. D REAMWEAVER
Opening a layered file from Adobe Bridge
3) Double-click within Adobe Bridge to open a layered Photoshop file (.psd) format.
4) You can do whatever changes to the layered psd file and save it. Go back to Adobe Bridge, it should reflect
the updated changes.
5) Sometimes you have way too many thumbnails in Adobe Bridge to determine what to insert in. You can
label them by going to Label > Select. You should see a red color marker at the bottom of the thumbnail.
6) To sort them, go to the bottom-left (under Filter) and click on Select category to sort on the selected
items.
© 2008 ACE Training Pte Ltd. All Rights Reserved. 3

4. D REAMWEAVER
Switch to Compact Mode
Since we want to insert images into Dreamweaver, we want to ensure Adobe Bridge is switched to a compact
mode so that we can see both Dreamweaver and Adobe Bridge.
7) On the top right of Adobe Bridge, switch to compact mode.
Compact Mode
Observe the compact mode of Adobe Bridge floats on top of any software that you are using. This is great as it
provides an intuitive way to insert images.
8) Drag the images onto the designated area of the web-page.
9) A new dialog box opens that show on image preview. This is the place where you can do file optimisation
like convert into a jpg or a gif format.
© 2008 ACE Training Pte Ltd. All Rights Reserved. 4

5. D REAMWEAVER
2 preview windows
10) Change the format or the quality settings of the jpg format to vary the quality/compression balance. Click
OK button to confirm. Another dialog box will prompt you to save it either as a .jpg or a .gif format.
Click Save button.
© 2008 ACE Training Pte Ltd. All Rights Reserved. 5

6. D REAMWEAVER
Editing Images from Dreamweaver
11) We are going to edit the image from Dreamweaver. Select the image and within the property inspector,
click Edit in button. It should round-trip to Photoshop.
Click this to launch Photoshop
12) Do the necessary changes in Photoshop and save it.
13) Once finished doing some editing, click on OK button. This is still not yet updated. So you have to select
all (ctrl/cmd +a) within Photoshop.
14. Go to Edit > Copy Merged to copy and merge the layers as one.
15) Go back to Dreamweaver and click on Edit > Paste. You should see it automatically updated. So updating
and editing images is just a click away!
© 2008 ACE Training Pte Ltd. All Rights Reserved. 6