Browse, manage, and access creative assets across Dreamweaver projects with Adobe Stock and using other Adobe apps.
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:
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.
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.
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:
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.
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:
In the CC Libraries panel, perform one of the following actions:
Paste the color value in Code view or CSS Designer.
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.
Effective from November 16, 2021, Dreamweaver has discontinued the functionality of extracting SVG from an Illustrator asset. We encourage you to use this workaround to enable the image format option and convert Illustrator(.ai) assets to PNG 32/PNG 24/PNG 8/JPEG formats. Alternatively, users can export Illustrator assets to SVG format from the Illustrator app.
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:
You can also batch download assets and save on your computer for later use.
Perform one of the following actions:
Drag the graphic from the CC Libraries panel onto your page in Live view.
Note: When you drag graphics from the CC Libraries panel onto Live view, the graphic is inserted as a 'Linked' graphic (if you have defined a site).
Illustrator files are inserted as web-optimized, SVG files by default. If you want to customize the properties of SVG files, you can edit the preferences in options.json file. For more information, see Extract web-optimized SVG files from CC Libraries.
Right-click the required asset in the CC Libraries panel, and select:
In the Sampling dialog box that appears, specify the file name and the dimensions of the image. For detailed information, see Specify sampling options for graphics.
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.
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:
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.
You can change the name, size, or resample images imported into your web page from CC Libraries using one of the following options:
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.
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.
