Dreamweaver CC: PSD to HTML and CSS

Effective July 01, 2022, the features in Extract panel will be discontinued in Dreamweaver 21.2 and earlier versions. You can use Adobe Photoshop to extract style information, assets from PSD components, and reuse them in Dreamweaver.

Our team continues to streamline and improve Dreamweaver. It has a modern UI, edit capabilities in Live View, CSS Designer and a 64-bit architecture. That’s not all though, it gets even better. It also has a complete integration of Extract which empowers users to easily go from PSD comp to code.

Extract enables web designers and developers to build web and mobile content from a Photoshop comp directly in Dreamweaver, bridging the gap between Photoshop and Dreamweaver, and reducing the need to go back and forth between the two.

Extract Panel

The Extract panel is where all the magic happens. You can easily extract CSS, images, fonts, colors, gradients, measurement and more to help build sites faster. If the panel is not opened by default, you can launch it as follows:

Launch Dreamweaver CC
Window > Extract ( see Figure 1)

Extract Tutorial (onboarding experience)

We’ve added an onboarding experience to show how easily users can Extract info from a PSD. Click on any layer, text, or image to see how to easily extract info. To get going, click on the “Get Started” (see Figure 2) button on the top left corner.

View Photoshop documents in Dreamweaver

Once you click the “Get Started” button, the Extract panel will automatically sync to your Creative Cloud folders (see Figure 3). You have the following options to upload and view your

PSD in Dreamweaver:

The “Upload PSD” button, which will upload your PSD to your Creative Cloud account directly from within Dreamweaver. (Figure 3).

Browse your Creative Cloud account folders and select any PSD to get started.

Now that you have successfully uploaded and can view a PSD in the Extract panel, here are the things you can do with it:

Extract CSS

When a PSD is opened in the Extract panel, you can fully inspect the CSS that is pulled from Photoshop layers. When you select a layer, you’ll see all the CSS associated with that selection. Let’s see how that works:

In the Extract panel, select any text or image layer in your PSD. You will get prompted with the resulting dialog (see Figure 4).
Click on “Copy CSS” to copy the CSS associated with that specific element.
You can now paste it into your CSS document to edit or tweak your design.

Extract an image (PNG, PNG 8 Alpha, JPG)

Web designers and developers are now able to extract web-optimized images into their designs – all without leaving Dreamweaver.

In the Extract panel (see Figure 5), select an image.

In the resulting dialog (see Figure 6), click on
which will prompt you with another dialog where you can:

- Set the folder location
- Image format.
- Image name.

Layer tab

The Layer tab (see Figure 7) is a convenient way for web designers and developers to view the PSD structure and layers in one place. This tab enables them to:

View the PSD layers and structure in one place.
Toggle the eye icon next to the layers to show or hide that layer.
Click on
to download one or more layers.

Styles tab

No more guessing font names, sizes or styles. The styles tab (see Figure 8) enables you to inspect, copy and easily extract font styles, colors, and gradients as follows:

Click on Styles tab in the Extract panel.
Select any font to get font style, size, and colors.

Where to go from here

Download Dreamweaver CC and explore the new Extract feature videos and tutorials to see how the new capabilities speed up your development process.