Tag Archive: Web Design

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

 

Overview of the Enhanced CSS Designer and Element Quick View in Dreamweaver CC

The latest release of Dreamweaver CC has not only introduced new features, but also has major improvements to existing ones such as the CSS Designer and the Element Quick View. We’ve created a couple of videos to provide an overview of these features and the enhancements we’ve made in Dreamweaver CC.

CSS Designer

This video provides an overview of the CSS Designer panel and highlights the improvements to it. In this video you’ll learn how to:

  • Start a page design with the CSS Designer.
  • Work with the CSS Designer visual controls.
  • Use the panel’s workflow enhancements.

You’ll also take a look at how Live View integrates with the CSS Designer feature, making web design easier than ever.

Element Quick View

The Element Quick View panel lets you easily modify the HTML structure of your page with a tree view.  In this video you’ll get an overview of the feature and learn how to:

  • Use the Element Quick View to precisely insert elements into your website.
  • Easily edit the structure of your website.
  • View editable and dynamic (read-only) elements.

 

Where to go from here?

Download Dreamweaver CC and give these features a spin. Adobe has published thousands of free learning tutorials and videos for all skill levels: beginners, intermediate, and advanced. We encourage you to continue to provide your feedback and input as this is what shapes our products.

Best,

Dreamweaver Team


Adobe Dreamweaver Survey 2013

The Dreamweaver team is conducting a customer feedback survey. The objective of this survey is to connect with you, our users, and figure out from as many of you as possible what’s working in Dreamweaver and what isn’t. 

Your feedback is important to us. Participation in this survey is voluntary and your responses are completely anonymous. 

Dreamweaver In Action – Be Part of The Story!

We’re thrilled to announce the #DreamweaverInAction series. Many of our customers have shared their great work and stories, so we decided to pass it along to the community.

The primary aim of this series is to show off our customers’ exciting work, inspire further creativity by sharing ideas and cultivate a discussion about the modern Dreamweaver. It will also help our featured customers get exposure through Adobe’s social channels and website.

We kicked off the series by showing off the creative work of AltaSartoria web design agency. Claudio Caciagli, lead designer and developer, has just launched this stunning responsive website http://altasartoria.com

AltaSartoria web design agency

AltaSartoria web design agency

 

We followed that up with an inspiring example by designer Jordan Flower, who used Dreamweaver and WordPress to create a business at Keys Apparel that supports victims of human trafficking.

Keys Apparel

Dreamweaver & WordPress site.

 

Do you have a great story to tell? Tell it to millions of Adobe customers. Send us your website or work you’ve created with Dreamweaver CC and be part of the story. You can share your story by sending us a message on Facebook (https://www.facebook.com/AdobeDreamweaver) or tweet it with the (#DreamweaverInAction) hash tag.

 

Visualize Relationships Between HTML Elements in Live View & Applied CSS Selectors

A few months ago, we announced a new Dreamweaver CC update with several exciting new features.

One of these, the Live Highlight feature, lets you visualize the relationships between HTML elements in Live View and applied CSS selectors.

Let’s review how Live Highlight works. In the screenshot below, a user intends to make changes to the ‘Cart’ navigation link. To make changes to HTML elements, the user usually starts by selecting the CSS selector “.SiteNavLink a” and editing the associated properties. These changes could however inadvertently change other HTML elements that the user might have no intention of changing at all.

 

Live Highlight in Dreamweaver

Live Highlight in Dreamweaver

 

Using Live Highlight, users can now simply click the CSS selector in the CSS Designer panel to see the affected page elements. These elements are highlighted in blue in Live View mode. Users decide if they want to create a separate Selector that applies to ‘Cart‘ alone, thus leaving the styles for other links undisturbed.

Enjoy the video below that shows how to use the new Live Highlight feature. Also, check out this article for more info http://ref.sx/LiveHighlightDreamweaver

 

Download and get your hands on the modernized Dreamweaver CC with exciting features that make mobile and web content creation a more streamlined and productive experience.