Tag Archive: Dreamweaver Creative Cloud

Dreamweaver CC: PSD to HTML and CSS

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:

Figure 1

Figure 1: Launch the Extract panel in Dreamweaver

 

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.

Figure 2

Figure 2: To get going, click on the “Get Started” button.

 

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

Figure 3: View Photoshop documents in Dreamweaver

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

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

Figure 4: Extract CSS code from PSD layers

 

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.

  1. In the Extract panel (see Figure 5), select an image.
  2. Figure 5: Extract web-optimized images from a PSD.

  3. In the resulting dialog (see Figure 6), click on arrow  which will prompt you with another dialog where you can:
  • Set the folder location
  • Image format.
  • Image name.
Extract web-optimized Images

Figure 6

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 arrow to download one or more layers.

Figure 7: The Layer tab is a convenient way to view the PSD structure and layers in one place.

 

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.

Figure 8: The styles tab enables you to inspect, copy and easily extract font styles, colors, and gradients.

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.

More on this topic:

Extract a Photoshop design into code in Dreamweaver

Extract Assets in a browser

In future blog posts, we will cover the new contextual code hinting, extract measurement, and the new drag and drop functionalities in the Extract panel. As always, we encourage you to provide your input and feedback on the latest release of Dreamweaver CC.

Best,

The Dreamweaver Team

 

Edge Web Fonts integration with Adobe Dreamweaver

With Adobe Dreamweaver 12.2 CCM release, the choice of fonts has become wider and better! Integration of Edge Web Fonts with Dreamweaver gives you access to a vast web font library made possible by contributions from Adobe, Google, and foundries around the world, for free.  What’s more? Designer or the end user need not necessarily have these fonts installed on their systems — the web browsers render the text with the fonts at run-time.

Here are the quick steps to use Edge Web Fonts:

Dreamweaver extensions don’t appear after updating Dreamweaver to 12.1

The menu items in Dreamweaver are listed in the menus.xml file. When you add an extension, an entry for the extension is made in the menus.xml file.

Menu organization is changing in this release because a new menus.xml file will overwrite the previous menus.xml file. Because the previous menus.xml file – which contained Dreamweaver extensions – will be overwritten, menu entries corresponding to these extensions will no longer be displayed after the update.

To display previously installed extensions, do the following:

1. Click Help > Manage Extensions.
2. In the Adobe Extension Manager, use Ctrl-click or Shift-click to select extensions that you want to enable.
3. Right-click and select Disable.
4. Right-click again, and select Enable.