Why?

Almost 5 years ago I have published some articles about the Theme Colors. From what I hear on social media, and read in most books and manuals (and in a recent webinar) there is a lot of confusion about this topic. In Captivate 11.5, which has now Quick Start Projects and the possibility for multiple themes (with their palette) in a project, this topic becomes even more important. In personalized training, my trainees will always learn that the creation of a good Theme Colors palette is the first step for a useful  custom theme. No doubt about the relevance of such a theme in a company environment, where you need to apply the style sheet of the company. However even a standalone project benefits largely from a good theme to have consistent design.

Creation of Color Scheme (5 colors)

To avoid confusion with Theme Colors in Captivate I prefer to use here the word ‘Color Scheme’ for the palette with 5 colors to which I refer in this part.

Classic color schemes consist of  5 colors, when you use one of the two applications provided by Adobe:

1. Adobe Color,  a cloud-based (free) desktop application. You can open it using the CC app or with this link.  Years ago it had the name  'Adobe Kuler'. It gets regular updates, only recently that was the case. You can find inspiration in this site because lot of schemes are publicly available. Of course it is also possible to create custom schemes, either starting from one or more colors, or from an image. The schemes typically get saved to … one of your CC Libraries. For most Adobe applications that is fine but Captivate sadly has no access (yet?) to those libraries. As a workaround you could use  Captivate Draft (has access). However since the transfer from Draft to Captivate results automatically in a Fluid Boxes project, that workaround is not useful if you need to create non-responsive projects. 
   
   There are plenty of tutorials around for Adobe Color. Just one example: YouTube tutorial. If you have access to LinkedIn learning, you could also find courses.
   To get the scheme into a normal cptx project, you can save a color scheme as ASE file. For a reason explained later, not the ideal format for Captivate. You can make the color values visible in Color, but I miss a way to export them easily. When you open such a file in Notepad or similar, you could extract the RGB-codes but that is cumbersome. Or you can write them on a piece of paper.Hexadecimal is fine:
   

   
   For that  reason I prefer using a mobile app, around since quite a while:
   
   
2. Adobe Capture: available for iPad and for Android (still beta, but functional). I have it installed on my iPad and my Android phone. Short tutorials included.  You have exactly the same functionality as with Adobe Color, but can also directly shoot an image as basis for your scheme. It can also be used to create shapes (SVG’s) and gradients, but I’ll leave that for another blog. Especially with the enhanced use of SVG's in 11.5, an interesting topic.
   
   The advantage of Capture is that you are not limited to saving the schemes to a Library, or save to ASE-file. You can export the scheme as ‘color values’ and print or send them by mail, or social media. Much more useful for Captivate. That functionality may be hidden somewhere in the desktop application, but so far couldn’t find it. You’ll get a txt file with all details of the colors, which is the ideal form for Captivate. Here a screenshot of such a file:
   

   
   Be sure: I will not explain the different ways of defining colors (although I would love to), Captivate accepts only RGB or HEX format. However,  in the Theme Colors palette I suspect that the HSB format is used to create the tints derived from the main colors.

Transfer Color Scheme into Captivate

Do NOT use Swatch Manager

If you have read my old blog post, you will know that it is possible to import an ASE-file in the Swatch Manager. Follow this workflow:

• Clear all swatches
• Click Append
• Point to the ASE file.

In this screenshot you see the result of such a workflow:

You do not need the Swatch manager, your theme will be saved with Theme Colors palette. How can you get the colors in that Theme Colors palette? Only way  is to find the color value of each of these swatches and type them in the Theme Colors editing window. Not so user friendly. This explains my present topic title: NOT to use the Swatch Manager, although I am aware that many trainers and books still mention it. Personally they could take out the Swatch manager, it is a legacy feature.

Use Color Values

Starting from the txt file you got with all the color values, open the Theme Properties panel, and go into Edit mode. To enter a color of the theme, you need 4 steps:

1. Copy the hexadecimal value for the txt file
2. Open a color
3. Go to the Color wheel
4. Paste the value

Here is a screenshot illustrating the workflow:

It is still a cumbersome workflow,. Sorry, but this is due to the fact that ASE import is impossible in the Theme Colors palettes. 

The palette has now 5 main colors, you can add 5 more. Have a good look at the existing palette: do you have enough light and dark colors to provide contrasts? Often it is a good idea to add neutral colors as black, white grey. It is not really compulsory to have/use 10 colors (+tints). In all cases if you want to switch to another palette you have to be very careful. Here I think about branding the QSP project slides.

Some users/trainers recommend and use the color picker a lot. Not a good idea at all. Check it out: you will not always get the color you want when checking its value in the Color wheel. The Theme color palette is directly available (see screenshot below).

When your Theme colors palette is finished, always colors from that palette, never use the Swatch manager. It is the best guarantee to have consistent color management. Moreover, when using other Adobe applications for asset creation or editing (Photoshop, Illustrator) you can easily transfer the colors, using the ASE file or the color values. Even though you’ll use them in a Swatch panel, because that is the default workflow in that application It should be clear now that for Captivate colors are in the Theme Colors palette, not in the Swatch manager. If you open the color dialog, and the used color of the item is a Theme color, the dialog will open in its first state (highlighted in screenshot) automatically. Forget the Swatch manager (second state), the color wheel (third state) and the color picker (last state).

If you like this introduction, could write more detailed articles. Just let me know what you’d like? 

If you want make me happy, add your voice to my repeated request to make it easier to import a color scheme (from Color or Capture) to create a Theme Colors palette.

Intro

If you do follow me since a while, you are aware of the fact that I am a big fan of the Rulers and Guides which appeared with version 9.0.1. They have a lot in common with the same feature in other Adobe applications (Illustrator, Photoshop to mention two). Shortly after the release I wrote an article about possible use cases in normal (blank projects): Guides Rule!

Using Fluid Boxes as alternative for Breakpoint views is an added feature with CP2017, about which you'll find a lot of articles, webinars and videos.  I am always stumped because none of them ever shows the use of Rulers nor Guides. This article will try to convince you that Guides are even more important for Fluid Boxes design than for normal projects.

Fluid Boxes and Themes

There are some limitations when using Fluid Boxes. Some objects cannot be used: zoom object, highlight box, click box (if placed over another object), line shape and some possibilities for multistates. You cannot use groups neither. Most of those limitations are linked with the 2-dimensionality of Fluid Boxes. Static Fluid boxes are a workaround, but you'll lose a lot of 'fluiditiy4. I will talk about my personal workarounds for those limitations in a later post.

Less known are the limitations for Themes. I start every project, even a small one, by customizing an existing theme or creating a theme (based on the Blank theme). Such a custom theme will save a lot of time later on, if small design changes have to be done. THe components of a Theme are described in more details here.

Object Styles

Fluid Boxes workflow will save you time when setting up object styles for Text containers: captions and shapes. You don't need to set up the font size for different screen resolutions, as is necessary for Breakpoint views. Text will rescale automatically when the screen resolution changes. Maybe you'll have to decrease the minimum font size which is set to 14p (for Breakpoint Views it used to be 10p, still readable on smartphones). 

Master Slides

All the included themes in Captivate have Fluid Boxes on the master slides (the 'virgin' Blank theme has them only on the quiz/score masters) . Two exceptions: you  will not find Fluid Boxes on the main master slide, nor on the Blank master slide. You'll see a lot of informational stuff where every presenter starts always with a slide based on the Blank master slide because it is also 'virgin'. Be careful when editing the Blank master slide, because it is needed for PPT-import and software simulation slides, edit only a duplicate).

I found it clarifying to explore the Fluid Boxes on the master slides of the included themes. Result of that exploration were two blog posts :

• Fluid Quiz Slides: describes the setup of Fluid Boxes for the Quiz slides; interesting is the use of the static Fluid Box for feedback messages. The Blank theme has the same setup as the other themes.
• Fluid Boxes and Master Slides: explores the content master slides in the themes, and how to use them. 

During the research for this post I discovered that it is not possible to insert Fluid Boxes on the Main Master Slide. I am used to have some information on that Main Master slide, which I want to show on all slides. Here is an example of the bottom part of the Main Master slide:

That is not possible within a Fluid Box. I tried to set up the Position Properties (which are available) but often weird positioning showed up when published. It is not possible to have different font sizes: either you let everything rescale proportionally and get very small text on phones, or you have to keep the size in px which will maintain the objects and font size fixed. Not really a workable solution.

Alternative for objects which you want on all slides, is to put them on the first slide and time for the Rest of the Project. However you cannot time objects for the rest of the project when using Fluid Boxes, not a workaround in this case.

My solution: insert the objects on each master slide you'll need in the project in Fluid Boxes. That is where Guides are indispensable to me.

Fluid Boxes and Guides

Turn on the Rulers under the View menu and you'll see that they are in percentage, not in pixels as for normal projects? 

For all to be used master slides, I want a setup, with a Fluid Box at the bottom to accomodate the text and button(s) as shown above. That FB should have a height of 10%. That FB will be divided in two: 70% width to the left (text), 30% to the right (buttons). To achieve that, create two Guides

1. Horizontal Guide at 10% from the bottom by double-clicking on the 90% mark of the vertical ruler
2. Vertical Guide at 70% by double-clicking on the 70% mark of the horizotal ruler
3. Lock the Guides (View, Lock Guides)
4. Turn on "Snap to Guide" in View menu

The guides will be visible as well in Master Slide as in Filmstrip view. You can change guide color in the Preferences, Be sure to change the Guide% color.

Switch to the Master slide panel. You'll get the step-by-step work flow to add a 10% Fluid Box at the bottom of two master slides (Title and Custom master slide), and have two child fluid boxes in that first FB.

Edit Title Master Slide

All included themes (also the OldPaper theme I use in this example) have one Fluid Box on the Title master slide, filled with one Title Placeholder. It is not possible to add a Fluid Box, the button Fluid Box on the Big Button Bar is dimmed. To solve this and be able to recover the placeholder:

1. select the placeholder
2. check the option 'Unlock from Fluid Box' on its Properties panel
3. drag the placeholder off the stage in the scratch area
4. uncheck the option 'Unlock from Fluid Box', later on we'll drag it back on the master slide

Select the parent fluid box (drag a rectangle half off the stage). You can now insert two vertical Fluid boxes. You will have to change the setup of the Parent Fluid box. The wrap option 'Squeeze in a column' is fine as are the alignments, but in order to use all available space you need to activate the options Stretch to fit, both Horizontally and Vertically.

Use the horizontal guide to change the height of the bottom Fluid box. This Fluid box needs these settings:

• Flow: Horizontal
• Wrap: Squeeze in a Row (to have text and buttons alwas next to each other), 
• Horizontal: Space Around (eventually define some padding) and Stretch to fit
• Vertical: Middle Align and Stretch to fit

The top fluid box: I choose vertical Flow, kept all the other default settings.

You can now insert two horizontal Fluid Boxes and change their width using the vertical guide, Flow horizontal for both.

The left Fluid box needs to have Left Align horizontally and the right one Right Align. I choose a horizontal padding for both and a vertical for the right Fluid Box. You can now insert the text (doesn't have to maintain the aspect ratio) and the Next Shape button.

I dragged the Title Placeholder back on the slide and created this Title slide from the edite Title slide:

Custom Master Slide

If none of the content master slides fits your purpose, you can start from a duplicate of the Blank Master slide. Insert two vertical Fluid Boxes. Although that master slide doesn't have a starting Parent Fluid box, it will be automatically created when you insert fluid boxes. The work flow to set up the bottom fluid boxes is pretty much the same as for the main master slide. You can now add a Back button as well. If you want more fluid boxes, go ahead. Here is a example of a custom master slide, which you could try to reproduce: And get a (Belgian) beer after success.

Conclusion

Now it should be clear why I love the Rulers and Guides for designing any project, but especially when using Fluid Boxes workflow. The Guides which you set up are saved with the project, you can hide them from the View menu and they'll always be ready to help you out when necessary :)

Intro

Theme versus Template

The goal of a Captivate theme is to keep a consistent design throughout your project. It can be 'applied' to any project, even after creation. Although most themes will be created for a certain resolution, when designed carefully it is not necessary to apply it only to projects with the same resolution. When you apply a well designed theme to a project, the 'look' will change immediately and you'll not have to edit the design a lot afterwards. A theme is saved in a file with extension cptm. You can have themes for a normal (blank)  or for a responsive theme. Captivate 8 and 9 both have several themes in the box, most of them being responsive themes. They show up as thumbnails when you click on the Big Button 'Themes'. Those Captivate themes are stored in the Public Documents, under the subfolder 'Layouts' of the 'eLearning Assets', at the same level as the Theme Colors palettes.

You can store your custom themes in this folder or wherever you want. The Thumbnails view (under Themes button) has a Browse button which allows you to navigate to any folder. I will mostly save a custom theme in the project folder when working for a client. But you see in the screenshot that I have a custom theme (CP8Theme) in the default folder. That folder is a copy of the original Layouts folder in the Gallery under the Captivate installation folder. If you ever have messed up one of the themes in the Public documents, you can restore it from that original folder. If you delete the whole Layouts folder in the Public documents, while Captivate is closed, on restarting the application a new copy of the original folder will be installed in the Public documents (see also my article: Keep your Customisation).

To save a theme you need to use the Themes menu, not the big button 'Themes'. Use the option 'Save Theme as' if you started from an existing Captivate theme.

A template in Captivate has to be chosen before you create a project. You have to use the option File, New Project, Project from Template. This means that a template needs to have exact the same resolution as you want for your project. As for a theme, there is a difference between a template for a responsive, and one for a normal (blank) project. A template file has the extension cptl. When you create a project from a template, it will get the normal extension cptx. You can edit a template, and that will the only reason why you would save it again as a cptl. It is also possible to create a template from a normal cptx-file with the option 'File, Save As'. There is no 'reserved' folder for templates, Captivate has no included 'templates'. The term is often wrongly used: most Captivate 'templates' that you can find on the web, are just cptx-projects, not templates in the Captivate language. 

When a template is saved, the used theme, preferences etc are saved with the template. However you can always apply another theme later on. 

Components of a Theme

1. Theme colors palette

2. Object Styles - Object Style Manager

Some tips:

• Use only colors from the palette defined in Step 1.
• Do not hesitate to change one of the (grayed out) styles between brackets [Default...]. You can overwrite those styles, since you are working on a custom theme. Those are the styles that will be applied immediately when you insert an object. Another approach is to clone a style and set it as Default style. The problem is that you'll end up with tons of custom styles, which makes selecting the proper style in dropdown lists not easier. That is why I always change existing default styles. 
• For buttons: the InBuilt states Rollover and Down are available together with Normal  for change in the OSM, do not forget to check/edit those states. This is valid for Text Buttons, Image Buttons and Transparent buttons.
  

  
• For shapes: you cannot define a default style for text and another default style for buttons (too bad), but any shape style that you define should include InBuilt states (Normal, Rollover, Down) because any shape can be converted to a button.
  

  
• Quizzing objects are in a separate category. Quiz buttons cannot be replaced by shape buttons (yet), but you can define an individual object style for each quiz button. Feedback captions can be replaced by shapes.
  Feedback captions and shapes not always use theme colors in the default Themes included with Captivate. Be careful: if you want to have consistent colors in your project, you'll need to check those styles.
• It is not possible to define real Effects in an Object style. Only the 'old' Transitions can be defined.

3. Master slides

Some tips

• Use the new Rulers to assist you for designing master slides: Guides Rule!
• If you ever will use the theme for software simulations: keep a real Blank master slide, because it is used both for software simulations and for PPT import. You don't want those slides covered up with other stuff.
• Remember that shape buttons can be used on master slides, they can have actions. This can be a big time saver for custom buttons like the ones from these posts: Toggle buttons   and Replay slide button
• Do not forget to label the master slides

4. Skin

Use the theme colors palette to customize the skin: playbar, borders and Table of Contents. You can even insert a logo on the TOC and eventually custom expand/collapse icons.

5. Recording defaults

• Create a default style for the highlight box in step 2: with a big bright red stroke and outer fill. Set it to display as default highlight box style.
• Open Preferences, Recording, Defaults and check the default Highlight box style: it will still be set at the original default style in the original theme. Bit annoying, but it also allows you to save two different sets of object styles within a theme: one for normal slides, and one for software capture slides.

Do not forget to save the theme (using the Themes menu)!

Do you need a Template?

I ask this question often everywhere: with all the design power and flexibility of a custom theme, why would you still need a template? Before themes existed, I used templates to be able to reuse variables and advanced actions (see: Template for reusing script). With the present version of Captivate, we have shared actions which I store in a separate project to be used as external library in any project. Variables, used in those shared actions, get copied automatically when the shared action is dragged into the Library of the new project.  When you copy an object, that triggers an advanced action, the action will be copied along when pasted into another project. 

I used templates to have footnotes on each slide, pointing to the name of the project, showing the slide number and the total amont of slides. But now you can put them on master slides, using system variables or user variables that can be populated later on. 

When would I use a template in Captivate 9? For courses that have several modules, where you want to have some slides in common, maybe have custom navigation/control buttons that cannot be put on the master slide, but need to be timed for the rest of the project. I would rarely use it to have placeholder slides, unless some team members need to have that assistance. Lot of placeholders have fixed object size, which can just be annoying. If you do have a lot of advanced actions (maybe variables), that cannot be replaced by shared actions, identical entries in Project Info, variables not included in shared actions: those would be situations where I would think about creating a template.

Conclusion

I hope this post did clarify the difference between a theme and a template. If you ever see somewhere my question 'Do you need a template', this will no longer be a mystery, right? 

Intro

How are Theme colors used?

Example

I created the color palette  'Lilybiri' based on my logo (see previous post). Browse this Picture Gallery. You'll see one slide, with that palette applied to the White, Vivid, Flat and Halftone Themes. Watch the colors of the master slides, Title, Subtitle, Caption and the 'rollover' state of an inserted shape button. You see that the result is totally different.

If you want to change just the theme colors for an existing theme you have to check the master slides and the object styles. I would have preferred to have more consistency in the use of the theme colors in the themes. Especially in this version, because to create a custom theme you need to start from an existing theme, certainly for responsive projects. 

Tints 

1. For gray colors (like 4D4D4D, E6E6E6...) you'll see that Hue and Saturation remain equal to 0 and only the Brightness will decrease from tint 1 to 5.  Same of course for Black (000000) and White (FFFFFF).
   
   
2. For normal colors the Hue remains constant (there are small variations) for all tints.
   
   
3. First tints (1-3 or 1-4) keep high Brightness but start with lower Saturation that will increase
   
   
4. Last tints (4-5 or 5) keep Saturation of previous tints but decrease the Brightness

Learning Interactions - Theme Colors

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. 

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

TIP  

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:

Color dialog box

Theme Colors 

• 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.
  

  

Summary

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