by Sally Cox

One of my favorite hidden gems in Storyline 2 is an obscure feature called Recolor Art. It allows you to alter the color of an object within Storyline-not affecting the original art, but merely "recoloring" it within the project.
In my workflow as an Instructional Designer, I create my own artwork in Adobe Illustrator and export as transparent PNGs. This works out nicely, but there are times when I need to create rollovers from icons or buttons. I want to avoid returning to Illustrator to create separate versions. Enter "Recolor Art."
In the image below there are a few examples of icons you might use in your eLearning project. I'll demonstrate how to use Storyline's Recolor Art feature to alter the Hover state, creating a rollover.
To begin, select your artwork (remember, transparent PNGs work best) and open the States panel by selecting the word "States" at the bottom of the Storyline window.
Click Edit States, click New State, choose Hover from the drop-down menu, and then click Add.
You've created the Hover state; now you'll alter the appearance. With the Hover state still open, select the object on your slide. Then right-click and choose
Format Picture.
Choose Picture from the menu at the left and then click the arrow next to Preset.
You'll find a number of options for recoloring your art, and you'll see the categories listed above the icons. No Recolor means you see your original image. Color Modes and Dark Variations are the ones that give the best result, for me. Experiment with Brightness, Contrast, and Transparency for different effects.
These are limiting however, so if you want more, go to Blend.
Choose a Color from the Blend section and apply a Blend Mode. These behave just like Photoshop Blend Modes and give you a variety of effects based on the color you choose.
If you don't like what you've done, you can click Reset Picture, or use Storyline's Undo command.
When you're done with Recolor, click Close. Lastly, and most importantly, click Done Editing States in the States panel to save the changes.
Here are examples of before (left) and after (right) applying the Recolor feature to an icon. It can always be removed later, and edited as needed. Any way you cut it, it's a real timesaver!
***
Recent Comments