Color me Storyline

If you’re an Articulate groupie, you probably know that community manager David Anderson has been posting a weekly challenge for some time now. This week’s challenge: Top 10 Things Learners Need to Know About Storyline. David suggested we target any area of Storyline development. I decided to focus on various ways to adjust colors in Storyline…and it was tough stopping at 10!

Theme Colors

1  Theme Colors…


…accessed from the Design tab on the ribbon, affect the colors that are used for Storyline elements such as shapes, text, and images. You can choose a built-in theme or create custom ones, which can be edited. Themes can be applied to one slide, matching slides, or all slides. Check out this Articulate Tutorial on Working with Theme Colors.


Coloring Shapes from the Menu

2  Shape Styles and Shape Fill Gradients


When you click on a shape, you make it active, and the Drawing Tools Format bar appears. You can change colors quickly by clicking to drop down some quick styles, as indicated above.

Another color change you can make from the menu is adding gradients, as seen in the screen shot below.


It’s true that flat design has become more popular recently. Still, you may, at times, want to take advantage of  gradients. Access some nuanced gradients of the current color, with light and dark variations, by clicking the Shape Fill drop-down.


Coloring Shapes from the Format Fill Dialog Box

3  Preset Gradient Colors and REALLY Customizing Your Own Gradients


For more flexibility and control, right-click a shape and, from the shortcut menu, choose Format Shape. Then, select the Gradient Fill option button, as I’ve done above. You might want to try out the Preset colors…either accepting them “as is”, or modifying them a bit.

Notice how the color in the shape below changed when I removed stops 2, 3, and 5 from the preset Wheat color gradient.


And, by clicking the drop-down arrow by the Color Fill icon you can open the Colors dialog box and begin playing with the slider and other options to really pinpoint the perfect color.


There’s a bit about gradients at in this Fill Formatting tutorial.


Coloring the Question Slides and Feedback Layers


Question Slide customization can feel a bit confusing, since the main part of the slide is controlled by the Slide Master, and the Feedback layers for the slide are controlled by the Feedback Master. So here’s an example.

4  Customizing Colors on Slide and Feedback Masters

The Question Title and background on the question slide above are based on the Slide Master Question layout. And, the Font Colors for the Incorrect and Correct layers come from the Feedback Master Correct and Incorrect layouts.


Articulate has tutorials on Slide Masters and Feedback Masters.


Coloring the Player – So Many Options

5  Storyline’s Built-In Color Options

Don’t stop with just coloring the slides…you can also customize the colors for the Storyline player. Check out this Articulate Tutorial for information on switching players, customizing them, and saving those customizations.

6  The Articulate Storyline Player Colors Job Aid

I like to keep job aids handy, and this Storyline Player Colors job aid, available at the community downloads page, is one I periodically reach for.


7  Free Storyline and Studio Colorizer Tool

Super Hero James Kingsely has created a really cool free tool: the Articulate Storyline and Studio ’13 Colorizer. This tool automates the process of colorizing your player to match up with, say, company or story colors.


Picking up Colors

8  Pixie

Pixie, by Nattyware (free), was one of the first tools I learned about after joining the Articulate Heroes Community.  I can’t even tell you how many times I’ve used this tool to pick up colors from anywhere on the screen and apply them in my design. I’ve placed it on my Start menu for quick access – noted in the screen shot by the red rectangle.



9  Built-In Storyline Color Picker Tool


Let’s say I wanted to change the option buttons in this story to match the green on this duck (above). The steps would be:

  1. Click on the option button and then click on the Radio Color drop-down
  2. Select More Radio Colors
  3. Click the Color Picker tool to make it active
  4. Hover the Color Picker Tool over the green part of the duck
  5. Click when you’ve found the desired color
  6. Click OK
    Really Easy!

10 David Anderson’s Color Toner Template

Last but not ever least, David Anderson created a very excellent Color Toner template, another tool that I turn to frequently during project development. Check out this blog post, which includes a quick how-to tutorial.



11…Oh, Wait!

Only 10, David, REALLY??? 😉

Warning: count(): Parameter must be an array or an object that implements Countable in /nfs/c09/h02/mnt/138262/domains/ on line 405

2 thoughts on “Color me Storyline

Leave a Reply

Your email address will not be published. Required fields are marked *