Many people working with Web sites will begin by developing the site in Photoshop and only move on to Dreamweaver when the basics design is settled. The integration between Photoshop and Dreamweaver means it is easy for you to take anything from a small piece of your design up to the entire layout direct from Photoshop into Dreamweaver. In this article, I’ll show you some ways that you can take advantage of the integration between Photoshop and Dreamweaver.

You can copy and paste a portion of an image from Photoshop into Dreamweaver and size and optimize it there. (Click for larger image).

Importing and Copying Photoshop Images

Dreamweaver can directly import Photoshop PSD format files. Click where an image should appear on your page and choose Insert > Image and select a PSD file to import. The image will appear in the Image Preview dialog and here you can size the image (File tab) and optimize it for the Web. Click OK when you're done, type a name for the image and click Save to save it to your site's folder.

You can also copy and paste images from Photoshop. You can do this by selecting an image in Photoshop and then choosing Edit > Copy to copy from the currently selected layer or choose Edit > Copy Merged to copy from all layers in the image. Next, return to Dreamweaver, click where you want to insert the image and right-click and choose Paste.

The Image Preview dialog opens and this is where you can size and optimize the image. Click OK when you are done, type the name to use to save the image and click Save.

Editing in Photoshop

You can export any image you have on a Web page in Dreamweaver directly into Photoshop for editing. Select the image, right-click and choose Edit With > Photoshop. Photoshop will open with the image in place. Make your changes to it, select the entire image and choose Edit > Copy Merged. Return to Dreamweaver and paste the altered image over the original and save the changes.

Use the slice tool to slice your Photoshop layout into pieces. (Click for larger image).

Slice a Photoshop Design

Another way to use the integration between Photoshop and Dreamweaver is to take the basics of a page design you have created in Photoshop and slice it into pieces that you can use in Dreamweaver. This lets you develop your Web site in Photoshop and reuse pieces like images and buttons in Dreamweaver.

To slice your image in Photoshop, click the Slide tool and drag over the area that will be your first slice. All Slices must be rectangular and the portion of the image you haven't selected is considered a slice too, so don't be surprised if, by creating one slice, your image is divided into two or three slices. Keep dragging to create each additional slice – you will typically create slices for buttons, page header, main body area, footer and so on.

Once you’ve created your slices, switch to the Slice Select Tool and double-click on each slice in turn. Rename each slice so it will be easier to identify in your code later on.

Once you’ve sliced your design you can save it ready-to-load in Dreamweaver. (Click for larger image).

To save the slices, choose File > Save for Web and Devices. Click the Image Size tab and resize the image if desired. Use the two-up layout to determine the correct format to save the slices in and to optimize them. Click Save, and you'll be prompted to select a folder in which to save the files.

From the Save As Type drop-down list make sure to select HTML and images (*.HTML) and from the Settings drop-down list select Other to configure the settings to use – this is valuable if you want to generate CSS to reassemble the slices rather than using a table which is the default setting. To use CSS, select Other, click Next five times, select the Generate CSS option and click OK. Make sure that All Slices is selected from the Slices drop-down list, type a name for the HTML code file and click Save.

Now go into Dreamweaver and open the HTML file that you just saved. This opens the code page with the image slices in place, and you can inspect the code by clicking the Code button. Once you’re in Dreamweaver you can make all the required changes to your page including adding text and configuring links. You can save the design as a template, and then use it to build the individual pages of your Web site.

The integration between Photoshop and Dreamweaver makes it easy for you to design your site in Photoshop and then take parts of the design or the entire design into Dreamweaver in order to code your finished pages.

Helen Bradley is a respected international journalist writing regularly for small business and computer publications in the USA, Canada, South Africa, UK and Australia. You can learn more about her at her Web site, HelenBradley.com

Do you have a comment or question about this article or other e-commerce topics in general? Speak out in the SmallBusinessComputing.com E-Commerce Forum. Join the discussion today!