How to Export Photoshop Documents Into Dreamweaver


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.

Things You'll Need

  • Adobe PhotoShop PSD file
  • Adobe DreamWeaver

PhotoShop PSD Slicing and Prep

  • Access the Adobe PhotoShop application by clicking its desktop icon.

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

  • 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.)

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

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

  • 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

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

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

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

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

Tips & Warnings

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

Related Searches


  • Photo Credit Images
Promoted By Zergnet


You May Also Like

  • How to Move Images in Dreamweaver CS5

    By default, Adobe Dreamweaver CS5 allows limited control over the position of your image. You can click and drag the image to...

  • How to Convert a PSD to a Dreamweaver File

    Dreamweaver helps you to create web pages and entire websites for the Internet. Technically, Dreamweaver doesn't really "convert" Photoshop PSD image files...

  • How to Copy & Paste in Photoshop Cs3

    Photoshop CS3 is part of the Adobe creative suite, which also includes print and web design programs such as InDesign, Dreamweaver, Flash...

  • How to Import Templates to Dreamweaver

    Adobe Dreamweaver is a web authoring application used by web developers to model, create and manage large, dynamic websites. Dreamweaver automates much...

  • How to Export PSD to CSS

    PSD is the file format for Adobe Photoshop files. Photoshop helps you generate cascading style sheets (CSS) for Web images. Displaying a...

  • Photoshop File Extensions

    Photoshop CC can open and export image files in a wide variety of formats, such as the proprietary PSD and PSB formats.

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!