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
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:
- 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.
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:
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.
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.
- 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.
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:
- 'Insert Linked' to insert the graphic as a linked asset. This means that the asset will maintain its reference to the corresponding asset on the cloud. Any change to the asset on the cloud will be reflected in the linked asset in Dreamweaver.
- 'Insert Unlinked' to insert the graphic as an unlinked asset.
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.
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.
- 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.
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:
- 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.
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.