Articulate Storyline Tips & Tricks

How To Recolor PNG Files In Articulate Storyline

In this video, I'll show you how you can recolor your PNG icons directly in Articulate Storyline.

Hi, I'm Mark Sperman from Upward Online Learning where I teach you how you can create literary modules yourself with Articulate Storyline. Are you new here? Then don't forget to hit the subscribe button and the bell notification icon so you won't miss any of my upcoming videos. Are you ready? Then let's get started.


Add custom icons

In Storyline 360, you can add icons through the content library. You can click here on icons and find the right icon. But, if you cannot find the right icon in the content library of Articulate Storyline 360, you can add PNG icons to your Articulate Storyline file. So what you normally would do is you go to picture, picture from file and choose your icon. For instance, this one. And it's blue and you can give it a slightly different color, but not completely. But there's a trick to recolor the PNG icon directly in Articulate Storyline. And I will show you it right now. So instead of loading a card PNG icon in Articulate Storyline, we're going to load a white icon in Articulate Storyline. So I'll switch over to Photoshop and I will show it to you.

Change the icon color in Photoshop

So I'm in Photoshop right now and you'll see here, this is my blue icon. Now what I'll do here now is I'll change it to white and I will save it. Saved for web as a transparent icon with white fill and I save it here. It's also saved. So, and now I will switch back to Articulate Storyline. So now in Articulate Storyline, I will remove this icon and go to insert picture from file. And now I'll load my white icon. This one. So there is one drawback, you can see it on their slide, but there is a trick for it.

Recolor the png file in Storyline

So if you go to file and then recolor, you can give it a color here. For instance, one of these color. But you can also go to more variations and pick a custom color or any RGB color you want to add to your icon. So, for instance, I want this pink color, I click, and my icon is pink. So now you can change the icons with your color palette and also with your color schemes that you are using in your Articulate Storyline module.

Create Png buttons and change states

You can go one step further. So I'll load another icon. What I've done here is... This icon I'll cut it and I have to make it white again. So I'll go back to Photoshop and I'll load it . Just a moment. So what I will do in Photoshop is I'll click here on effects. I click it for a color layout layover. And now you can choose a color layover and I'll choose here for white, and I'll save this icon as PNG with a white fill. Give this a name. Yes, that's okay. And I will do this also for my second icon. So I have done it for my second icon and now we'll save this also as terms pairing PNG with a white fill.

So that's done. And now we'll switch back to Articulate Storyline and we'll import them. So I'm back in Articulate Storyline. So I'm back in Articulate Storyline. And what I will do right now is I'll go to insert picture, picture from file and press my control key and select both and I can add them in Articulate Storyline. So what I will do now is, let me check, I will first color or recolor the border. So for instance, I give this a cream fill and I'll select the inner and I go to this one and I get give the blue fill. So what I can do now is if I cut this one, click on States for this one, go to States and click on edit States, I can copy it.

Let's see if it's... that's not correct. Let's try it again. So I cut this one. Select this one, go to States and now I paste it in here. So what we can do now is we can add multiple States. So for instance, a new state, for instance, a hover state, and let's add this one also in the hover state. Now we can simply recolor this one for instance in a lighter blue. So we don't have... we don't need any new PNG files, but we can do this in Articulate Storyline.

Preview the course

So if I'll preview it, this slide, you can see that with the recolored PNGs you can simply add your own States with custom colors in Articulate Storyline and you'll see that there is hover right now.

Do you have any questions about embedding your Articulate Storyline course in WordPress or about Articulate Storyline common? Please comment below its videos and I promise to answer it.

And if you want to create great engaging new learning in Articulate Storyline, make sure that you get my free step by step guide on how I grade e-learning in Articulate Storyline. And I know for sure that will help you because it describes my whole process that I use for every [inaudible 00:00:06:07] module in Articulate Storyline that I built. And was this video useful to you? Then hit the like button below, and don't forget to hit the subscribe button and the bell notification icon so you won't miss any of my upcoming videos.

FasterCourse Banner

Leave a Comment