Adobe Creative Suite 3 Video Workshop

Home / Design Center / Tutorials

Designing websites with Photoshop and Dreamweaver

Joseph Lowery


This video shows you how use a website comp created in Photoshop to create a website design in Dreamweaver. You learn how to optimize images and copy and paste images between Dreamweaver and Photoshop.

Requirements

To follow along with this article, you will need the following software and files:

Watch this tutorial in the Adobe Creative Suite 3 Video Workshop.

Designing websites in Photoshop and Dreamweaver

  1. In Photoshop, choose File > Open and open the Jump.psd and Company_History.psd files. Often, web designers create a comp file and then save pieces of the comp as separate files such as the two sample files here.
  2. In Dreamweaver, choose File > Open. Open the 12_Photoshop.html file. You can now open Photoshop files directly from within Dreamweaver CS3.
  3. Double-click the placeholder image to open the Select Image Source dialog box.
  4. Select the Jump.psd file, and click OK. The Image Preview dialog box opens.
  5. Below the image preview, click the Double Preview Mode button to the right of the zoom percentage. This lets you preview the original image and the formatted image you will import into Dreamweaver.
  6. Choose the Options tab. Here you can select the web-ready format of your choice, including GIF, Animated GIF, or JPEG.

  7. Choose JPEG from the Format pop-up menu. Change the Quality to 60. The image in the preview window still looks satisfactory, but the change in quality has significantly reduced the file size (see Figure 1). Click OK.

    The Image Preview dialog shows no significant quality reduction at a JPEG 60 Quality setting.

    Figure 1: The Image Preview dialog shows no significant quality reduction at a JPEG 60 Quality setting.

  8. In the Save Web Image dialog box, navigate to the image folder and rename the file Jumphistory.jpg.

  9. Click Save. The Photoshop image now appears in the Dreamweaver document, without you having to export it from Photoshop (see Figure 2).

    You can paste the Photoshop image directly into the Dreamweaver image placeholder

    Figure 2: You can paste the Photoshop image directly into the Dreamweaver image placeholder

    Now you'll try another workflow.

  10. Choose Edit > Undo Set Source to undo the image change.
  11. Return to Photoshop. Choose the Company_History.psd file.
  12. Choose the Selection tool in the Tools panel. A warning message will pop-up asking you to rasterize the image. Click OK. Drag over the edges of the image to select it.
  13. Choose Edit > Copy.
  14. Switch back to Dreamweaver. Click the placeholder image once to select it.
  15. Choose Edit > Paste. This opens the Image Preview dialog box. Click OK to accept the default settings.

  16. Save the document in the Images folder as Company_History.jpg. Click Save.

    Once the image is in Dreamweaver, you can also return it to Photoshop for editing.

  17. In Dreamweaver, select the image. Make sure the Property inspector is open. If not, choose Window > Properties. In the Property inspector, click the Edit In Photoshop button.
  18. Back in Photoshop, choose the Type tool in the toolbar. In the Swatches panel, click the color box and choose a red color.
  19. In the options bar above the Document window, increase the font size to 36 points.
  20. Click in the image area and type Jump!.
  21. Choose the Selection tool and re-select the image.
  22. Choose Edit > Copy Merged to copy the text layer along with the image.

  23. Switch back to Dreamweaver. Make sure that the image is still selected, and choose Edit > Paste. The image is replaced by another copy with the new text (see Figure 3).

    You can paste the merged copy of a Photoshop image and text directly into Dreamweaver.

    Figure 3: You can paste the merged copy of a Photoshop image and text directly into Dreamweaver.

Where to go from here

For more information and additional tutorials, visit the Adobe Design Center.