How to Convert Photoshop Layers to Dreamweaver

Photoshop and Dreamweaver, both part of the Adobe Creative Suite, combine to put a robust collection of tools at a designer's keyboard. Intricate graphics are an ideal way to compete for website visitors' attention, and many of the most complicated graphics have enough layers to qualify as electronic onions. Dreamweaver can't handle layered files, which are saved as Photoshop files and not graphical ones. Convert layers in Photoshop and add them to a Dreamweaver site to see the big picture.

Instructions

1. Open Photoshop. Click the "File" menu. Click "Open." Go to the Photoshop document with the layers you want to convert for Dreamweaver. Pull down the "Files of type" menu and search for a PSD files, the only file Photoshop saves with layers (it flattens, or converts all others).

2. Double-click the PSD Photoshop file to open it. Pull down the "Window" menu and click "Layers" to open the "Layers" palette. Note the multiple layers in the document.

3. Click the small lined icon in the top-right of the window. Select "Flatten Image." All of the layers become "flattened" and a single layer of the graphic now exists.

4. Click the "File" menu and select "Save As." Type a new name for the file or leave the old name intact. Pull down the "Format" menu and select a graphical extension such as JPG. Select a place to save the graphic, such as the Dreamweaver website folder set up on your computer. Click "Save."

5. Close Photoshop. If Photoshop asks whether to save the original Photoshop file, click "No."

6. Open Dreamweaver. Click the "Open" folder under the "Open a Recent Item" file and go to the website folder that the graphic was placed in. Double-click the file name so that the graphic opens in the Dreamweaver workspace.

7. Click the "Insert" menu at the top of the workspace. Select "Image." Pull down the "Look in" menu and go to the location where you just saved the flattened image. Click once on the picture to highlight it and it appears in the "Image Preview" section. Click "OK." If a warning message comes up, click "OK."

8. Drag the photo into place on the website area if Dreamweaver doesn't insert it into the optimal place. Resize the picture by clicking on it once, pressing and holding down the "Shift" key, clicking a corner and dragging it to make it smaller. Note that the file name now appears in the list of files in the "Files" pane on the right side of the screen.

9. Click the "File" menu. Click "Save As." Type a new name for the Dreamweaver website to preserve the original, or save with the original name to overwrite the original.

References

• University of Washington, Working with Layers, 2011