How to Convert a PSD to a Dreamweaver File

Import Photoshop files into Dreamweaver to convert them.

Dreamweaver helps you to create web pages and entire websites for the Internet. Technically, Dreamweaver doesn't really "convert" Photoshop PSD image files (or any other image file type) to a web page. Web pages are containers that format and display text, images and other media in a web browser, such as Internet Explorer or Safari. You can, however, import PSD files into Dreamweaver web pages, and then save the page as an HTML, or some other web-compatible file type page. While this process doesn't actually convert the PSD to a Dreamweaver file format, it does allow you to link and display the PSD file in a web page.

Difficulty:

Moderately Easy

Instructions

Things You'll Need

• Dreamweaver CS3 or later

Importing a PSD file into Dreamweaver

1. Open the Dreamweaver page in Dreamweaver. Click "File" on the menu bar and select "Open" to display the Open dialog box. Navigate to the file, select it and then click the "Open" button.

2. Click "Insert" on the menu bar and choose "Image." This opens the Select Image Source dialog box.

3. Navigate to the PSD file you want to import and double-click it. This opens the "Image Preview" dialog box. Photoshop PSD files are not web compatible. In other words, web browsers can't download and display them. The Image Preview dialog box allows you to convert the PSD to a compatible format, such as JPEG, GIF or PNG. Dreamweaver actually creates a copy of the PSD for deployment on the Internet.

4. Click the "Format" drop down and choose a format. Unless the PSD file is a fairly simple graphic, such as monochrome line art or a logo, in most cases, you'll want to set the format to JPEG or PNG---these image formats are much better at maintaining image quality during the file compression process.

5. Adjust the image quality in the "Quality" field. The number in the "Quality" field depicts a quality-versus-compression percentage---the lower the percentage, the smaller the file size and the lower the image quality. In most cases, especially for photographs, Dreamweaver's default "80" percent value works fine.

6. Click "OK" to import the image. You can now save the page and upload it to the Internet.

Tips & Warnings

• Since Dreamweaver doesn't actually import or "use" the PSD file (it creates a copy), you don't need to upload the PSD file itself to the web server, which can help you save space on a limited-storage hosting account. However, if storage space is not an issue, it's a good idea to upload the PSD. This provides you with an off-site backup copy of your source file.

• You can export complex layered PSD file layouts to HTML web pages that you can then open in Dreamweaver by exporting them to HTML from Photoshop. Simply save the file as HTML from the Photoshop "Save As" dialog box. Again, this procedure does not actually "convert" the PSD file, but instead saves the separate layers as individual web-compatible image files. This procedure does, however, maintain the PSD layout format in HTML tables.

• When uploading your page to the Internet, make sure you maintain the image file relative path and file names. Otherwise, the browser can't find and display the image.

References

• "Adobe: Working with Photoshop and Drea mweaver"
• "Adobe: Working With Images in Dreamweaver CS4"
• "VideoJug: How to Import Your PSD Layouts in Dreamweaver"