Adobe Creative Cloud

January 21, 2016 /Dreamweaver Interface /

Use CC Libraries with Adobe Stock

Learn how to use the Creative Cloud and Dreamweaver’s CC Libraries panel to collect and manage website assets

Although the Assets panel is still available to keep your website assets organized, the new CC Libraries panel is a great asset management tool used to locate new assets and keep your CC Libraries assets organized.

What do I need?

Extract project files.zip

Finding the right photographs and art to create a vibrant website presence is a time-consuming part of the design process. Hiring talented photographers and illustrators is a significant part of the budgeting process. Fortunately, as a Creative Cloud subscriber, you have vast sources available to you for collecting and managing website assets at little or no cost. You also have the means to manage your acquired assets through the Creative Cloud desktop and mobile apps, Creative Cloud website, and CC Libraries panels within applications such as Dreamweaver.

The CC Libraries panel lists and organizes your website assets, such as images, colors, and videos. The CC Libraries panel is open by default as part of the Files panel group in the Default, Code, and Design workspaces. If it is not open, select Window, CC Libraries on the Menu (Application) bar to open it. CC libraries can be private or shared libraries, allowing you to share assets between your devices or with others on your creative team. Library assets are automatically synced to your Creative Cloud account.

At the top of the CC Libraries panel is a drop-down list box used either to name a new library or to select an existing library. The default library name is My Library. Next to the Library name are two icons that you use to view your library items as either icons or in a list.

Below the list box is a search text box you use to search assets in the current library. The first time you open the CC Libraries panel or if you have a library open with no assets, you see a link to a short video introduction to CC Libraries and a link to search Adobe Stock. Adobe Stock is a service built into Dreamweaver and other desktop apps, such as Photoshop CC. This service gives you, as a Creative Cloud subscriber, access to millions of high-quality royalty-free photos, videos, vector graphics, and illustrations. These assets can either be purchased either as needed or with a subscription package.

stock 1

Icons on the bottom left side of the panel are used to add graphics, character styles, paragraph styles, and colors. Icons on the right side include a Creative Cloud icon that shows if your libraries are up-to-date and a delete icon to remove a selected asset.

Step 1 of 6

Create a website and open a page

Download the CC Libraries file, then extract the files.

Create a new website in Dreamweaver called CC Libraries Tutorial with the cc_libraries_tutorial subfolder set as the local site folder.

stock 2

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

stock 3

Open the file new_zealand.html from your cc_libraries_tutorial folder, then change to Live view if necessary. This page was created using the Dreamweaver starter template Blog post. This page has not been completed yet. We will change the large photo to one of Milford Sound, a spectacular fiord near Queenstown, New Zealand.

Step 2 of 6

Use the CC Libraries panel to add a new library

You may add as many libraries as you want to help organize your assets. Your libraries are listed in the library list box at the top of the CC Libraries panel.

Open the CC Libraries panel if necessary, then select the link Learn How to Use Libraries for a brief overview of how the libraries work.

Return to Dreamweaver, then select My Library in the CC Libraries panel to open the drop-down list of libraries.

stock 4

Select Create New Library, enter Have Camera Will Travel as the new library name, then select Create.

stock 5

stock 6

Step 3 of 6

Add an image to a library

There are several ways to add assets to the CC Libraries panel in addition to Adobe Stock. You can add assets created from the Adobe desktop applications Photoshop, Illustrator, InDesign, After Effects, Dreamweaver, and Premiere Pro.

You can also add assets created from the Adobe mobile apps Capture CC, Hue CC, Shape CC, and Brush CC. Lastly, you can use the Creative Cloud app to download royalty-free photos, videos, illustrations, and vector graphic assets from the Creative Cloud Market. The Creative Cloud Market is a collection of royalty-free content that is available at no charge to Creative Cloud subscribers, such as icons, patterns, and vector graphics. Creative Cloud subscribers can download up to 500 assets per month at no charge.

Once you add an asset to a library, that asset can be shared and reused in other projects.

Open Photoshop, then open the file blog_photo.jpg from the website assets folder. (Photoshop was the original program used to create this image.)

Select the Add graphic icon graphic  in the CC Libraries panel, then rename the image blog_photo.

stock 7

Switch back to Dreamweaver and verify that the blog_photo image was added to the Have Camera Will Travel library in the CC Libraries panel.

stock 8

This image can now be added, or reused, in any document open in Dreamweaver or any other Adobe program that supports CC Libraries.

Step 4 of 6

Download an image from Adobe Stock

To download an image from Adobe Stock and add it to a library, select the Search text box list button, then choose Adobe Stock from the drop-down list. You have the choice to download a preview copy of the image or to purchase the image. We want to find and preview an image of Milford Sound to use on the New Zealand page.

Select the list button on the right side of the Search text box, then select Adobe Stock.

Notice that the Search text box now shows Search Adobe Stock as the source to search.

Type Milford Sound in the Search text box, then scroll through the list of photos to view the choices available.

Select one of the images, then select the Save Preview to Have Camera Will Travel buttondownload

stock 9

The new image now appears in the CC Libraries panel, along with the Blog photo image. When you hover over the image you see several properties listed: the image name, file type, and the licensing status. This image is only available now to us as an unlicensed, preview copy.

stock 10

Scroll to view the iguana image on the page in Live view, then drag the Milford Sound, New Zealand image from the CC Libraries panel into the div right above the iguana image. You will see a green Live Guide when you hover over the correct position.

stock 11

Hover over the DOM icon stock 12  on the Live Guide to open the DOM panel.

Slowly drag down the DOM panel to position the pointer over the bannerImage div, then drop it.

stock 13

The Optimize Assets dialog box opens to give you the opportunity to rename the file, change the width and height settings, and remove the link to the original asset.

Rename the file to add –resized to the end of the file name, select the Do Not Constrain Aspect Ratio button stock 14 , change the width to 1000 and the height to 330, then select OK.

stock 15

Now that the image is optimized, open the Property inspector, remove width and height settings so the image will automatically adjust to different sized devices, then add the class banner_img.

stock 16

Now you have two copies of this image in your website asset folder: the original image and the optimized image. Both images are listed in the Assets panel. However, the CC Libraries panel only lists the original image.

stock 17

Delete the iguana image, then close the Property inspector.

Note: When you drag an asset from the CC Libraries panel onto a page, it is automatically linked to the original asset. When changes are made to it, other copies of that asset will be updated to reflect the changes. To prevent changing the original asset, [Alt] drag (Win) or [Option] drag (Mac) the asset onto the page. It can then be edited without affecting the original asset.

Notice the Adobe Stock watermark across the page. This indicates that this image is not yet licensed for you to use. To legally use it, you must purchase the license.

stock 18

Right-click the image in the CC Libraries panel, then select Buy Image.

Note: If you do not want to purchase this image simply to complete the tutorial, skip this step, but continue to work with the unlicensed image, knowing that you cannot legally use it in a project without purchasing the license.

The watermark disappears from the face of the image, as it is now a licensed image. The image properties in the CC Libraries panel show that you now own a license to use this photo.

stock 19

Save your work, then move the Scrubber to verify that the image will resize to fit various window widths.

stock 20

Step 5 of 6

Manage Creative Cloud Libraries

Open your browser, navigate to and sign in to your Creative Cloud account, then select the Libraries link to view and manage your libraries.

stock 21

The Libraries page displays your Creative Cloud libraries. You can sort your libraries by date or by name.

stock 22

You can create a new library.

stock 23

You can invite collaborators to work with you with one of your libraries; send a link to a library; share a library using Slack (a team communication tool); and copy, rename, or delete a library.

stock 24

You can also go to the site stock.adobe.com and search for photos, videos, illustrations, and vectors. You can view your list of libraries, select a library and view the images you have downloaded and licensed from Adobe Stock. Although you still see the watermark across the page on a licensed image in your library, a Licensed annotation appears at the top left corner of the image.

stock 25

Return to Dreamweaver.

Step 6 of 6

Download assets from the Creative Cloud Market

The Creative Cloud Market is accessed through the Creative Cloud desktop app. Select the Assets tab, then the Market tab to find images in several different categories. A search text box is located under the menu bars to assist you in finding appropriate images.

Open your Creative Cloud desktop app.

stock 26

Enter airplane in the Search text box, then select an image to download from the choices listed. I chose a SVG image.

Select the DOWNLOAD button to download the image to your CC Libraries panel.

stock 27

Choose Have Camera Will Travel in the Libraries list box, then select Continue.

stock 28stock 29

You receive a message that the image has been downloaded. Verity that it is listed in the Have Camera Will Travel library. How cool is that! Remember, these are free images for you to use as a Creative Cloud subscriber.

stock 30

Save your work.

Summary

This tutorial introduced the tools available to you with the CC Libraries panel, the Creative Cloud app, Adobe Stock, and the Creative Cloud Market. The integration of these exciting tools brings millions of high-quality photos, videos, vector images, icons, and patterns to your projects at little to no cost through your Creative Cloud subscription.

It can be a little confusing as to which tool to use for which task. I hope this table helps to compare how each tool is used as related to CC Library assets.

Tool Used to access Adobe Stock photos Used to access Creative Cloud Market Used to Manage Libraries
CC Libraries panel X X
CC Desktop app X X
Adobe Stock website X
CC website X

 

Dreamweaver Interface