Articulate Storyline Template Design

Have you ever wondered how to make a Storyline template file? If you’ve ever wondered what steps you’ll need to take to design an eLearning templates for Storyline, here are five steps to help you build an Articulate Storyline design in a reasonably short period of time.

  1. Plan it out. Sketch if you have to. You don’t have to create a great piece of art, just sketch and think out a few ideas until you find a solution.
  2. Create or obtain graphics and bring them into Storyline.
  3. KISS – Keep it simple, Sam. As you create your file, create it simply enough that anyone can follow it.
  4. Include instructions. Document it; place a text box off to the side that explains what to do. Remember you are not the only one likely to use this slide.
  5. Once you have polished it all up, save as a template file and place it in some repository so others can grab it as well.

Let’s walk through this process together. I have included both the Storyline file and the Storyline template file and all graphics I used to build this course so you can follow along.

Plan it out.


This is my first step. I wanted to create some kind of organic neat looking click to reveal slide. Please excuse my handwriting. First, the initial screen shows the slides initial state. Shows instructions inside where I will place the content. I drew an active state, a visited state, and wrote some questions. Would it be neat that, if after being visited, the button animates into the circle? Or should I just grey it out? After all buttons have been clicked, should there be an indicator that all have been visited? During this stage, I attempt to plan everything out.

Create/Obtain Graphics


In this case, I went into Illustrator and fleshed out the idea. I changed the buttons to always have a stroke around them to help contrast with the background a little more. I also downloaded this blue ocean background from a Stock Asset Library and placed a blue translucent object over it to help dial it back a bit. I then saved all my graphics.

Keep it Simple, Sam! (KISS)

In Storyline, bring in the background and start building your slide. After bringing in my graphics, I created my buttons. For the Hover state, I duplicated the Normal state and put the blend mode on Hard light, choosing a slightly brighter grey than selected.


For the Selected state, I changed the image for a more stroked image I made in Illustrator. Additionally, I brought in the visited graphic for the Visited state.

I also utilized the button set option. Right click on your button and go down to Button State and select Button Set 1. Do this for each button.


I placed the line that was going to show in the active state on the layer itself. This way, it will animate when the user clicks the button.

I also decided that, with the visited state being pretty different, there didn’t need to be anything to show that the slide has been complete.

This slide is now complete.

Include Instructions

It’s always good practice to include instructions in template slides. So, I have placed some instructions off to the right.

Polish and Save

I have gone over the file one more time to make sure I didn’t forget anything. Once I am satisfied, I save the file as a template by going to File > Save As and changing the type to storytemplate.


Test it out. Create a new file, and go to File > Import > Storyline  and browse to your new file. A Dialogue box will come up. If you have more than one slide in your template file you can select just one slide to import. Click Import and your new project will now have your template slide!

Template slides can save you a lot of work. Let us know how you like to build your template slides in the comments below!

Pin It on Pinterest