Adobe Creative Cloud

December 11, 2015 /Dreamweaver Interface /

Use the Extract panel with Artboards

Learn how to insert text, graphics, and styles from artboards

One of the new features Adobe Photoshop 2015 introduced is a new type of layer group called an artboard. An artboard is a container that can hold several layer stacks within a layer group, then clip any elements placed on the artboard to the artboard boundaries. You can use artboards to design comps for web pages, then use the content within the artboard layers to build your pages in Adobe Dreamweaver with the Extract panel.

The Extract panel is a relatively new panel in Dreamweaver that serves as a bridge between Dreamweaver and Photoshop. Use it to upload Photoshop files, including PSD files with artboards, with the Upload PSD command. When you upload a file with an artboard, you gain direct access within Dreamweaver to all of the artboard assets.

extract 1

Dreamweaver CC 2014.1.1, released in February 2015, added several enhancements to the Extract panel. They include the ability to drag and drop page elements in Live View from the Extract panel using Live Guides and the DOM panel to place them on a page. Live Guides are guides that follow the pointer as you drag an element over a page to help you position it correctly. The DOM panel is an interactive tree representation of the HTML elements that provide the HTML page structure. As you hover over a page element, the DOM icon  appears. If you slide the pointer on top of the DOM icon, the DOM panel will open to help you place your element in exactly the right spot on the page.

extract 2

What do I need? Extract project files

Step 1 of 6

View artboards created in Photoshop

You can create artboards in both Adobe Photoshop and Adobe Illustrator. The following figure shows a file that contains one artboard that was created in Photoshop. Notice in the Layers panel that the assets in the artboard are grouped by layers in a layer group that I renamed Hawaii. The Hawaii layer group was created when the artboard was created, but with the default name artboard 1. The Properties panel shows the dimensions of the artboard. The name of the artboard appears on the canvas above the artboard.

extract 3

The next figure shows a PSD file with three artboards. Each artboard represents a separate page in a website. This is one use of artboards – to illustrate the content for each page in a website.

extract 4

The next figure shows another PSD file with three artboards, but these artboards represent one page shown on three different device sizes. This is another use of artboards – to show how one page will appear when viewed on different devices.

extract 5

Step 2 of 6

Create a website and open a page

Download the Extract project files file, then extract the files.

Create a new website in Dreamweaver called Extract Artboard Example with the extract_artboard subfolder set as the local site folder.

extract 6

Select Advanced Settings, then browse to select the assets folder as the Default Images folder.

extract 7

Open the file hawaii.html from your extract_artboard folder, then change to Live view if necessary. This page was created using the Dreamweaver starter template “Blog post”.

extract 8

Step 3 of 6

Upload a PSD file with the Extract panel

The Extract panel is docked to the left side of the Dreamweaver workspace in the Extract workspace. To open it in all other workspaces, select Window on the menu, then select Extract. The figures in this tutorial are shown using the Default workspace with the Extract panel open, but floated rather than docked. You can also use keyboard shortcuts to open the Extract panel: [Control] [K] (Win) and [Command] [K] (Mac).

extract 9

Note: To float a panel or panel group, drag the panel or panel group title bar and move it to the desired position.

With the hawaii page open in Live view, select the Extract panel. If you don’t see it, select Window on the menu bar, then select Extract.

With the Extract panel either docked or floated, select Upload PSD on the left side of the panel.

extract 10

Browse to and upload the file hawaii_assets.psd from the website folder.

Note: To remove a file listed in the Extract panel, log in to your Creative Cloud account and delete the file from your browser. To delete a file, you must archive it first, then remove it from your archives.

Select the thumbnail for the uploaded file on the right side of the Extract panel to open it.

extract 11

Select the Layers button, then select the folder icon to the left of the Hawaii layer label. Notice that the name of the open file appears in the top left corner of the Extract panel.

extract 12

You can now see the image and text layers that are used in this file. They are grouped under the Hawaii layer. Scroll to see the entire list of layers.

Note: If you upload a PSD file from outside a website, it will be copied to the website folder as it is uploaded.

Step 4 of 6

Use the Extract panel to insert an image

Once you have mastered using Live Guides and the DOM panel, it is very easy to extract images from the Extract panel and accurately place them on an open page. Keep an eye on the Live Guides and the DOM panel before you drop an element onto a page. If you are dropping an element between two existing elements, you will see a green Live Guide at your pointer position on the page between the two existing elements and a green Live Guide in the DOM panel between the two existing elements.

extract 13

If you are dropping an element inside another element, you will see blurred blue edges around the existing element you are hovering over and that element in the DOM panel will be shaded in gray.

extract 14

Change to Split view, then select the Banner photo layer in the Extract panel.

Drag the Banner photo (the image thumbnail) onto the page using Live Guides to help you place it under the subheading Hawaii: Paradise for all ages!

When you see the DOM icon, move the pointer directly on top of it.

extract 15

Pause until you see the DOM panel, then drag to move the pointer directly on top of the div element with the id “bannerImage”.

extract 16

Press [Enter] (Win) or [Return] (Mac). Notice in Code view how the image was placed inside the bannerImage div.

extract 17

Save your work.

Step 5 of 6

Format extracted images

Element Display is a blue toolbar above a selected page element. You use it to associate an ID or selector to an HTML element or to open the Quick Property Inspector to edit HTML attributes. The choices offered in the Quick Property Inspector depend on the type of HTML element selected. After inserting an image, it is important to add alternate text for accessibility and assign a class if you wish to add any formatting to control the position or appearance of the image.

With the banner image selected, select the Edit the HTML Attributes button  in the Element Display to open the Quick Property Inspector, then note the formatting choices available for an image element. The Add Class/ID button  is used to assign a class or ID to an element.

extract 18

Enter Kii wooden carvings to the alt text box in the Quick Property Inspector.

extract 19

Select the Add Class/ID button plus , then begin typing banner. As you type, you will see the class name .banner_img appear below the text box. This style was created in the blogpost_style.css file, which was in the project files you downloaded when you began.

Press [Enter] (Win) or [Return] (Mac) to select the class name.

extract 20

The image now appears with a gray border. The border properties: width, style, and color are assigned from the .banner_img selector properties, as shown in CSS Designer.

Note: To view the .banner_img in CSS Designer as it appears below, select Window on the Menu bar, then select CSS Designer. In the open panel, select blogPostStyle.css in the Sources pane, select GLOBAL in the @Media pane, select .banner_img in the Selectors pane, then select the Show Set checkbox in the Properties pane.

extract 21

Select the banner photo, then notice the alt text and class added to the div tag in Code View.

extract 22

Save your work.

Step 6 of 6

Use the Extract panel to insert text and CSS

You can also extract text from a PSD file with the Extract panel. There are two ways you can copy text from the Extract panel. First, select the text layer that contains the text you need, then either (1) use the Copy Text button to copy the text and paste it on the page or (2) drag the text thumbnail from the text layer onto the page and use the DOM tool to help you place the text in the correct position.

extract 23

You can also extract styles used to format text in a PSD file, including font styles such as fonts, colors, font-sizes, and font-styles. When a text layer is selected in the Extract panel, you will see the CSS properties applied to the selected text in a pop-up window. You can also view them in a slightly different way by selecting the Styles button in the Extract panel. Once you have extracted CSS, you can add them to a style sheet selector’s properties and use them to format page content.

extract 24

Scroll to the bottom of the page to the row with the four social logos.

In the Code window, insert a line between the <hr> code and the social media logos, then type a <p> tag.

Notice the Linting icon in the status bar. Linting is an error-checking process for identifying possible coding errors. The linting icon is green when your page has no linting issues, but changes to red when it does. We have a linting error because we have an opening <p> tag without a closing </p> tag.

extract 25

Select Join the conversation in the Extract panel, then select the Copy Text button, paste the text after the <p> tag, then type an ending </p> tag. Notice the Linting icon is green now, indicating that there are no errors on the page.

extract 26

extract 27

Save your work.

Next, we will copy the styles originally assigned to this text in the artboard in Photoshop.

Select the Join the Conversation layer in the Extract panel, then select the Copy CSS button.

extract 28

In the Code window, scroll to find the code for the #social_logo_div selector, then paste the copied CSS between the beginning and ending brackets.

extract 29

In Split view, note that the text now appears with the CSS applied.

extract 30

Save your work.

Summary

This tutorial introduced the incorporation of art boards with the Extract panel. You learned how a Photoshop PSD file with one artboard or multiple artboards can be uploaded in the Extract panel and used to extract both image and text elements onto an open page in Dreamweaver.

Next, you learned how to use the DOM panel and Live Guides to place an image onto a page. You then learned how to use Element Display to associate an ID or selector to an HTML element or to open the Quick Property Inspector to edit HTML attributes.

Last, you learned to extract text from a PSD file, paste it onto a page in Code view, then copy and paste the CSS originally used to format the text into your style sheet.

Dreamweaver Interface