Creative Cloud Libraries in Dreamweaver

Creative Cloud Libraries make your favorite assets available to you anywhere. You can create or capture images, colors, text styles, and more in several Creative Cloud desktop and mobile apps, and then easily access them across other desktop and mobile apps for a seamless creative workflow.

You can access CC Libraries right from within Dreamweaver to reuse colors and graphics in your web pages. You can also keep the inserted graphics up-to-date with those on the cloud by inserting them as 'linked' assets.

Read on for more information on using CC Libraries in Dreamweaver.

The CC Libraries panel (Window > CC Libraries) is the main access point to your assets saved on Creative Cloud. The panel also lets you search for assets in Adobe Stock.

Using this panel, you can:

• Browse a specific library for the assets stored in the library
• Create a library
• Preview assets in the selected library
• Drag or copy assets to be inserted onto your web page
• Enter a key word, such as, full name or part of a name of an image to search on Adobe Stock

Getting started

Define a site in Dreamweaver

A site in Dreamweaver is a folder where all the images, videos, scripts, stylesheets, and other files related to your web pages are stored. Defining a site upfront helps you easily save the assets that you import from CC Libraries to the site. Ensure that the web page into which you want to import assets from CC Libraries is also saved in the site folder.

For information on creating sites, see Set up a local version of your site.

Add assets to CC Libraries

Ensuring that all the required assets are available on Creative Cloud helps you import the assets into your web page in Dreamweaver quickly.

If you are looking for stock images, then Adobe Stock is a good place to start with. For detailed information, see Get assets from Adobe Stock.

Graphics and colors that you capture or create from various Adobe mobile and desktop apps can be stored on Creative Cloud and imported into your web pages. For example, a vector graphic created using Adobe Shape CC or an image processed using Photoshop. Creative Cloud also lets you and your team collaborate and share assets, so you can reuse assets created by others too.

For more information on Creative Cloud Libraries, see Creative Cloud Libraries.

Get assets from Adobe Stock

Adobe Stock is deeply integrated with Creative Cloud Libraries. You can search for images and add them to any of your CC Libraries in one of the following ways:

• Directly from the Adobe Stock website.
• Using the CC Libraries panel in Dreamweaver.
• Using the CC Libraries panels in other Adobe applications, such as Photoshop and Illustrator.
  

Once you add the images to a CC Library, you can follow the instructions in the Reuse graphics in CC Libraries topic to use these images in your web pages.

If you are unsure about purchasing Stock images right away, you can add only wartermarked Stock images (previews) to your libraries and use these images as placeholders. When you are ready to purchase these images, you can do so in the CC Libraries panel in Dreamweaver and other apps, or directly from the Adobe Stock website. 

When you license an image, all instances of the watermarked asset in your open documents are updated to the high-resolution version of the licensed image.

Reuse colors and color themes saved in CC Libraries

• Reuse colors in Live view
• Reuse colors in Code view

Reuse colors and color themes in Live view

You can save colors and color themes in your Creative Cloud Libraries from apps such as Illustrator, Photoshop, or Adobe Color CC. You can import these colors and color themes in your web pages using the CC Libraries panel in Dreamweaver using the following steps:

Reuse colors in Code view

Colors saved on Creative Cloud are available as code hints in Code view. You can select the required colors from the code hints as you code in Code view. The Creative Cloud icon adjacent to the color in code hints indicates that these colors are stored on Creative Cloud.

The code hints pick colors from the library that is currently opened in the CC Libraries panel. In the image above, colors in the library 'My Library' are made available as code hints. To get colors in another Creative Cloud Library as code hints, open the required library in the CC Libraries panel and then resume your work in Code view.

Reuse graphics saved in CC Libraries

You can save graphics created using Adobe desktop and mobile apps, such as, Photoshop, Illustrator, Adobe Shape CC, or Adobe Sketch CC, in your Creative Cloud Libraries. The CC Libraries panel helps you insert graphics into Live view and the code hints help you insert graphics directly into your code.

You can insert graphics from CC Libraries as:

• Linked assets: When graphics are inserted as linked assets, a small cloud icon appears at the lower right corner of the asset in Live view. This icon indicates that the asset is linked to the original asset on the cloud. The cloud icon is also displayed adjacent to the asset in the Assets panel.
• Unlinked assets: You can insert an asset as a local copy in your web pages. In Live view, right-click the required asset in the CC Libraries panel, and select 'Insert Unlinked'. When you insert a copy of a graphic, the asset is copied to your local machine and is not linked to the original asset on the cloud. This means, any changes or updates to the asset on the cloud is not reflected in Dreamweaver.

You can also batch download assets and save on your computer for later use.

• Reuse graphics in Live view
• Reuse graphics in Code view
• Specify sampling options for graphics
• Resample or rename linked graphics
• Download graphics

Reuse graphics in Live view

Reuse graphics in Code view

Graphics saved in your Creative Cloud Libraries are available as code hints in Code view. First, open the required library by selecting it in the CC Libraries panel. Then, switch to Code view and select the required graphic from the code hints as you code. The Creative Cloud icon adjacent to the graphic in code hints indicates that the graphic is stored on Creative Cloud.

Note: When you insert graphics using code hints, the graphics are inserted as 'unlinked' graphics.

To get colors in another Creative Cloud Library as code hints, open the required library in the CC Libraries panel and then resume your work in Code view.

Specify sampling options for graphics

The Height and Width boxes resample the asset using the Dreamweaver image optimization engine. You can also select the format type in which you want the asset to be placed. The enabled cloud icon indicates that the asset will be placed as a linked asset. After specifying the file name and sampling options, press Enter to insert the asset.

 Note:

• The SVG option is available for Illustrator (.ai) files only and is set as default for such files. You can change the format of such files to JPEG using the drop-down list in the resampling dialog box.
• A JPEG file can be inserted only as a JPEG file, and so no other format option is available for such files.

Edit graphics

Using the CC Libraries panel, you can quickly open and edit InDesign and Illustrator assets in their native applications. To do so, right-click the asset in the CC Libraries panel, and then click Edit.

Ensure that the native applications - InDesign or Illustrator - are installed on the same computer as the Dreamweaver instance you are using. Also, ensure that you have installed the latest updates to these applications from Creative Cloud.

Unlink, resample, and rename linked graphics

You can change the name, size, or resample images imported into your web page from CC Libraries using one of the following options:

• Click the asset in Live view and then click the cloud icon. 
• Right-click the asset and click Linked asset options.
• Double-click the cloud icon adjacent to the asset name in the Assets panel.

The resampling dialog box appears to let you change the required properties. To unlink the asset from its source in CC Libraries, click the cloud icon in the resampling dialog box.

When you unlink an asset, any changes to the source file on Creative Cloud will not be reflected in the image in your web page.

Download graphics

You can download the required graphics as linked assets from CC Libraries in bulk and insert them in your project at a later point in time. When you use these assets in your projects, they will still maintain the link to the corresponding library item. 

• Linked: To download graphics as linked assets, right-click the asset in CC Libraries panel and select Download Linked. The popup with filename and resampling options is displayed. Save the asset in your site folder by specifying the filename and sampling options, and pressing Enter.

• Unlinked: To download graphics as unlinked assets, right-click the required asset in the CC Libraries panel and select Download Copy. The popup with filename and resampling options is displayed. Save the asset in your site folder by specifying the filename and sampling options, and pressing Enter.