Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this


  1. 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. 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. 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. 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. 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. 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