Colorful 2015 with Adobe Captivate

Intro

Color management in Adobe Captivate is improving slowly but steadily. Too bad: the Help documentation is not offering much explanation about color workflows at all. Have a look at what is explained about enhancements in Captivate 8.0.0 and 8.0.1 and tell me if this is sufficient? It is not for me, and I have a 25 years history as a Photoshop trainer. Do you know about the relationship between the Swatches panel, the Color schemes that appear in a lot of dialog boxes (not only for Fill/Stroke, but also in learning interactions), the Theme colors and the colors applied by default in the Object Style Manager, Master slides and Skin? Since many months I'm trying to figure out a good practice using the enhancements in Captivate 8. In previous versions I created color swatches in the scratch area (outside of the stage) to use with the color picker in order to achieve a consistent color use. That is at the least cumbersome compared with color management in applications like Photoshop and Illustrator.  Since October 2014 for those CC applications I'm able to create and use my Adobe Color palettes (ase), stored in the cloud, on any device and system. Adobe Color is installed on my tablets and smartphone, allowing to create color themes at any moment, often from a shapshot. That new sharing feature (Libraries) is not available (yet?) for Adobe Captivate. 

In this first article I will try to find a way in the jungle of Captivate's color terminology and explain my present work flow to manage colors in a project by creating a custom theme color palette, starting with an 'ase' file created in Adobe Color. Let me know if you find this useful, please? In a second article focus will be on the use of Theme colors:  in object styles, master slides, skins and how to use them in (some) learning interactions (new in Captivate 8).

Swatch Manager

In the help you'll find a lot of screenshots where it is labeled 'Swatches'. But in CP8 title was changed to 'Swatch Manager'. I'm working in Expert UI, and have that panel always available in the right docking station, and make it floating when necessary. If you prefer the default newbie UI, there is a video in the Help that explains how you can open this panel: http://helpx.adobe.com/captivate/using/whats-new.html

You'll see a pretty big color palette in the manager: 8 rows with 15 color/tints, starting with 12 gray tints. When you hover over a color you'll see its Hexadecimal code, top left. To see RGB or HSB codes of the existing colors is a lot more complicated. When a color is selected and you click on the color wheel on top, it is not the selected color that shows up (as I expected) but always the gray color #404040. There is no direct way to see other color codes of the swatches (like HSB, RGB), contrary to the Color Dialog box, that will show you the hexadecimal code and RGB (not HSB) when selecting a color and clicking on the Color Wheel.

If an object is selected on the stage, you can use this Swatch Manager to apply one of the swatches as Fill or as Stroke color. For a text container (shape or caption),  in text editing mode, you can use it to apply a swatch as Text or Highlight (background color behind text) color. That is the goal of the radio buttons in the third row. Honestly, I never use that work flow, if you accidentally choose the wrong radio button, you'll change the Fill instead of the Stroke color. 

The color picker and the color wheel (that will show HSB, RGB and hexadecimal code) on top (first row) are meant to add individual swatches. You will be asked to give a name to a new swatch, the default swatches have no names.

TIP  

When you customize the palette in the Swatch Manager, it becomes available for all open projects, it is not project specific. BUT!!! A big problem is that you cannot save the swatches with a project at all. Whenever you reopen the project, the default swatches palette will appear. Even when you put a PC in Sleep mode, after wake up the custom swatches palette has disappeared and you have to load it again. This is the main reason why I never use the Swatches Manager to edit colors in a project as I mentioned before, but use it only to define a Theme Colors palette. 

The buttons in the second row are the most interesting!


Captivate and Adobe Color

I am using the Swatch manager to create a custom color palette, starting with an Adobe Color scheme. The buttons at the second row, from right to left, are:

  • Clear: this will delete all color swatches in the panel - not really necessary if you use Load

  • Reset: will revert to the original 8x15 palette, any added individual swatch, or loaded custom palette will be cleared

  • Save: the present palette will be saved in the Adobe Color format, extension 'ase' (Adobe Swatch Exchange). The default name will be the project name (you can change the name of course); this can be useful if you created a custom color palette in Captivate, for import into another Adobe applications like Photoshop.

  • Load: allows you to load an 'ase' file created in another Adobe application like Adobe Color. Captivate also accepts 'aco' (Adobe Color, have more information like Pantone color) files but I seldom use that palette format. You get a warning that the existing palette will be replaced by the new, but can still revert to the last option:

  • Append: will add color palette described by an ase or aco file to the existing colors.
An Adobe Color ase file will typically have only 5 colors. There are a lot of tutorials around about using Adobe Color (formerly Kuler) and you can install it for free on any device or use it right from the web site. Just an example: you can create a color scheme from a logo in a quick way. The color scheme imported here into the Swatch Manager is based on my company's logo.

Adobe Color is part of the Creative Cloud,with a CC subscription you'll have access to your personal color themes in the cloud from a lot of Adobe applications without having to save/load it using the ase file. Crossing my fingers that in the future this will also be possible for Captivate.

In most cases, 5 colors will not be sufficient for Captivate to have a complete color scheme. The reason is that Theme color palettes in Captivate have 10 colors (see later). 

Add swatches

Second step in my work flow is to extend the palette to more colors (not necessary 10), that match the existing scheme. This can be done, swatch by swatch,  with the color picker or with the color wheel. Very often I will add white or a very light tint of one of the existing colors (using HSB), and a very dark one or black (if it is not yet present). A similar approach is used by the Tints in Theme colors (see later). Depending on the style chosen for the Adobe Color Theme, maybe you'll need a very contrasting color as well.
In this screenshot you'll see how I used the green color to create a very bright one by keeping the Hue (H in HSB) but increasing the Brightness (B) to 100%. I added 3 swatches in total to have a palette with 8 colors.


Color dialog box

The color dialog box has 3 different looks, depending on the buttons on the top. The active look can be detected because that button will have a very thin black line surrounding it (maybe you'll have to get closer to the screen to see it). Those looks are, from left to right:

  • "Theme Colors": this look will appear by default if the selected object's Fill (or Stroke) has a default Object style using a Theme color, or if its color has been applied from the Theme Color palette.
    The top row shows the Theme colors (see later), under them you'll find 5 extra tints for each theme color. I regret that it is not possible to see the color code of any of the colors directly, it would be great if they showed up on hovering over a color (as hexadecimal code) or even better if you could have full info in the color wheel when clicking on a color. That is not the case (yet?). When exploring, I found that all tints have the same hue (in HSB), different Saturation and Brightness.
    At the bottom you'll find the colors as they were last used, last used color is the first in that sequence. Not that useful (my personal opinion). That row is dynamic, changes whenever you use another color.



  • "Swatches": this look will will appear by default if the selected object's Fill (or Stroke) color has been applied using the Swatches Manager.


    You will see the swatches in the upper section, and the 'last colors' palette at the bottom

  • "Color Wheel" will never show up by default. It allows you to choose a different color, either by picking it (click first on the right vertical bar to choose a hue, then you can change saturation and brightness in the big rectangle) or by entering a Hexadecimal or RGB code. Contrary to the dialog box for adding a swatch,  HSB is not available here. It also shows the last used colors.


  • "Color Picker" is the last button, no look on itself. It allows to pick a color somewhere outside of the dialog box. While moving the picker you'll see the Color Wheel showing up in the dialog box.

A similar Color dialog box shows also up for the gradient stops when editing a Fill gradient, when customizing colors in the Theme Color palette, and in a reduced edition when customizing colors for Learning Interactions.

Theme Colors 

This new feature in Captivate 8 allows to change quickly the look of an existing theme (object styles, master slides, skin). Next week I will talk more extensively about those changes, because not every style will be edited automatically when applying a new palette of theme colors. My work flow, after having imported and extended a color scheme in the Swatch Manager, is to create a custom Theme color palette based on those colors. With that work flow, the color dialog box will always appear in its first look and provide besides the original Theme Colors a set of 5 extra tints for each theme color. Although there are by default 10 colors in such a palette, you can assign the same color more than once. More details about the use of the 10 colors will be provided in the next blog post.

Contrary to the color schemes created with Adobe Color - ase file format - the Theme Colors are saved as XML files. You can find them in the Layouts Folder (under eLearning Assets in a public folder). The XML file is pointing to the RGB codes as you can see here:

You could create a custom theme colors palette by creating new XML files, but you'll need a more exact number for RGB in that case then the one provided in Captivate. An alternative is this work flow:
  • Open the Themes list with the big button on the top bar

  • Click on the Theme Colors button, bottom right

  • Theme Colors dialog box, in its Basic view only gives you the dropdown list with color palettes



  • Click the Customize button (bottom right) to open a hidden part of the Theme Colors dialog box (with Basic button you can hide that part again)



  • You'll see the 10 colors, and clicking on a color will open the Color dialog box in its "Swatches" look. You can now customize that color. The names of the colors are not really relevant. Some colors are not really used in most themes but that is another story, which you'll discover in a later blog post.

  • When you are ready, first change the name of the theme: blue text 'White' can be edited; there is no Save as (at least I couldn't find it).

  • Click the Save button: custom Theme Colors palette is created and immediately applied to the present project. You'll find its definition in a XML file with the same name in the public folder I showed before.

From now on you can use these theme colors for all editing. In the next blog post I'll explore how those colors are used in the current themes in Captivate, and how you can apply them to learning interactions. That post has now been published.

Summary

If you made it up till this paragraph, maybe you'll be confused by the Captivate Color Jungle?  Here is a short summary of the described work flow, to create Theme Colors from a custom Adobe Color scheme:
  1. Import the 'ase' file in the Swatch Manager, using the Load button

  2. Add more swatches to the default 5 colors of the scheme, using Color Wheel or Color picker in the Swatch Manager

  3. Save that extended scheme as an 'ase' file (because custom color schemes in Swatch Manager cannot be saved); that way you can reload it if necessary

  4. Open the Theme Colors dialog in its extended version, customize the 10 colors.

  5. Change the name of the default theme

  6. Save the custom Theme Colors palette

Thanks for your patience, please leave your comments! May a lot of your wishes be fulfilled in 2015. I have some for Captivate as well :)