Video: Using Style Guides & Developer Notes in Adobe Captivate 7

Video: Using Style Guides & Developer Notes in Adobe Captivate 7

Hello again!

Here’s the next tutorial video for the Adobe Captivate 7 eLearning Template. This tutorial will teach you how to use style guides and developer notes in your Captivate elearning template.

To purchase or preview our Adobe Captivate 7 eLearning Template, click the buttons below.

Learn More Preview HTML5 Version Preview Flash Version

First off, what’s a style guide?  A style guide is a set of standards for the content and design of an elearning course.  Today we’re going to focus on font and color standards.

At this point, you should have already designed the look and feel of the course, so you should know what colors and fonts to use.  The next step is simply to insert these onto the page for you to easily reference as you develop your Captivate project.

To do this, insert the color guide as an image.

Click Insert > Image… from the file menu.

Select your image from the popup window.

… and click “Open”.

Click and drag the color guide off of the white area of the screen.  The white area is called the stage.  When you publish the course, only items within the stage will appear.  Think of it as a window through which the user will see your content.

We place the color guide, font guide, and developer notes all off the stage so that they’re not in view when the course is published, but we can easily reference them while we create our Captivate project.  This way we can provide direction to other developers we might be collaborating with, extract exact colors as we create them in the project, and reference what fonts to use in different sections of the course.

These guides can save you a lot of time, and help you maintain a consistent and professional design throughout your project.

Next, we need to create the font guide.  First create a white background to place your fonts on.

  1. Click the “Insert Shape” button in the tool menu
  2. Click the “Rectangle” shape from the pop-out menu, and your cursor will change into a crosshairs.
  3. Click, hold, and drag to draw the rectangle.

Next, create the fonts.

  1. Click the “Insert Text Caption” button in the tool menu.  The caption will appear on the stage.
  2. With the caption selected, go into the “Properties” panel under the “General” section
  3. … and select “Transparent” from the “Caption” drop-down menu.
  4. Next, click and drag this text caption off the stage and onto the white rectangle you created.

With this in place, create each font style that you’ve defined.  Type what the style name is, the font family to use, the font size, set the color and describe any additional text formatting such as bold or italics.  For example, we have here “Heading 1 with Berlin Sans FB Demi for the font family, set at 24points in size, and a gray color.

You want the color and font style guides to be easily referenced from any page of the project, so select each of these objects, go into the “Properties” panel under the “Timing” section, and set “Display for” to “Rest of Project”.

Lastly, we should create a section for Developer’s Notes.

Insert another text caption, and place it to the right of the stage.  Make it fairly large so there’s plenty of space for notes.

Type “Developers Notes:” at the top, and leave the rest blank.  Use this section to type notes to yourselves and other developers related to the content on the page.

And we’re done.  If you want to follow along with these tutorials, you can go to, and purchase the Adobe Captivate 7 template.

Take it easy,


No Comments

Comments are closed.


Your Cart