How to Export Photoshop Documents Into Dreamweaver

by Meaghan Ellis

Adobe Photoshop enables you to design a dynamic layout, while Dreamweaver brings it to life in HTML coding. The exporting process is not difficult, but it can be a bit methodical, as it requires detailed preparation prior to exporting. PhotoShop documents, commonly referred to as PSD files, must be edited and set up as web devices and sliced images for transfer to DreamWeaver. Then the file has to be imported into DreamWeaver for HTML coding. Overall the process, takes approximately 10 to 15 minutes to complete depending on your familiarity with PhotoShop tools, functions and components.

PhotoShop PSD Slicing and Prep

1

Access the Adobe PhotoShop application by clicking its desktop icon.

2

Click the "File" menu tab at the top of the screen and select the "Open" action to load the PhotoShop PSD file into the application.

3

Select the toolbar slicing button, which displays an image of a carving knife. (This is the slice tool as the layout must be sliced for HTML coding purposes.)

4

Trace over the sections of the layouts to separate the elements and create individual pieces of the layout.

5

Click the "File" tab once again, and select the "Save for Web and Devices" action in the drop-down list.

6

Click the "Save" button in the "Web and Devices" window to create an updated version of the PSD document that will be used for HTML coding in Dreamweaver.

Importing to Dreamweaver

1

Open the Adobe Dreamweaver application from your computer's desktop screen.

2

Click the "HTML" option under the "Create New" section that is displayed in the "New Document Setup" window.

3

Locate the "Files" tab in the lower right corner of the screen and click the "Desktop Items" folder tab to view its collapse menu and subfolder options.

4

Click the "Images" folder that will be listed under the desktop items, as this is the file folder location that was created when you saved the Photoshop PSD file with the sliced updates. This action will import the sliced Photoshop document into the Dreamweaver design platform.

Warning

  • close Do not export the Photoshop document without slicing. Slicing the Photoshop PSD file is extremely important. The slicing tool breaks the layout down so it does not appear as only one big picture. A layout is like a big puzzle that is already put together, so you want to do the opposite. You want to break it down so it can be fully functional and accessible. Any design layers and elements representing buttons, links, boxes, image sections and other items that should be separated should be sliced into individual pieces. These are your web devices, as they make the website a website. Without these devices, you'll only have a still picture that looks like a layout, but nothing will work.

Items you will need

About the Author

Meaghan Ellis has been writing short stories, newspaper articles, Web content and product research reports for over 12 years. While double majoring in business management and marketing at Southern University, she runs a home-based graphic design and Web content business.

Photo Credits

  • photo_camera Ablestock.com/AbleStock.com/Getty Images