At Yukon Learning, we love using icons to visually represent ideas and content in the Articulate 360 courses we build. Icons are considered “lo-fi” (short for “low-fidelity”), which means they can quickly depict a thought or concept, thereby requiring less cognitive load on learners.
When it comes to finding that perfect icon, Content Library 360 provides us with millions of options to choose from. Sometimes, however, the icons we want to use aren’t quite the same “thickness” or weight. And, we know from design concepts that we want to ensure our graphical elements are consistent.
Luckily, there are some simple adjustments we can make to ensure our icons look consistent. Follow along as we answer this “as heard in training” question: “How can I make all icon outlines the same weight?”
Finding the Right Icons
The first step is to search for icons that aren’t overly simplistic. The reason for this is that we want to have as much control as possible over the ability to manipulate elements of the icon. If it’s one flat icon image, we can’t do much with it. So, how can you tell?
First, insert an icon from the Content Library 360 onto your slide. Then, review the new icon on your slide’s timeline. If there is an expand arrow (or “carat”) to its left, you know it’s a grouped icon set that is made up of multiple individual pieces.
That’s exactly what we want because it means we have a bit of control over the various pieces of the icon!
Note: For fun, go ahead and insert an icon onto your slide, and then select the expand arrow to review all those individual pieces.
Let’s Consider an Example
Imagine we’re developing a course on home safety and want to include icons of a house and a lock. We’ve searched for and inserted the icons we want to use.
But, if we compare the two icons, they don’t quite look the same in regards to their line weight. The lock icon, in this example, has a thicker outline than the house. Rather than removing these icons to find ones with the same outline weight, we can adjust the line weight of one icon to match the other. Let’s do that now!
Making Adjustments
Our first approach will be to increase the line weight of the house icon to match the lock icon. After selecting the house icon, navigate to the Shape Outline menu on the Drawing Tools/Format tab. Then, hover over the Weight option and select a higher (pixel) number.
Now the two icons have a similar thickness and look consistent in design.
Note: You could also right-click on the icon, select Format Shape, and use the Format Shape window to make these same changes in the Width box.
Alternate Method
If you’re working on a solid background color, you can also use the Shape Outline window to control (decrease) the thickness of the lock icon. Using a very similar process to above, we’d quickly select the background color as the Shape Outline, and then increase the Weight to cover more of the line weight.
Note: Not using a solid background? No problem! Simply adjust the weight of the house icon, and call it a day.
Hopefully that gives you more flexibility when choosing and working with icons in your Storyline 360 courses! Please let us know if you’ve found other helpful tips for adjusting icons.
Before You Go, Check Out the Quick Links!
For more on the Storyline 360 elements we explored here, check out the following posts from Articulate and The Articulate Trainer blog.
Storyline 360: Adding Content Library 360 Icons
Storyline 360: Using the Format Shape/Format Picture Window
Why Isn’t My Icon Button Working?
Until next time,
~ John
Leave a Reply