Using Background Scrims / Overlay

Introduction to Background Scrim or Overlay

Hello everyone and welcome to lesson Five of the MakeStories 101 course. In this lesson, we are going to take a look at what is overlay and why you should use them.

Often you will rescind people, naming overlay as a scrim or background scrims. Remember that the overlay and background screen are one in the same thing so please do not get confused with it.

To check this, we’re going to do like, first of all, we’re going to remove this background and we will use an image in the background canvas. Let's say we have on this image and we applied it as a background. Now we will add a text element on top of this and enter the text.

Now we will change the color for this to white. We will look into much detail when we do the lesson on text elements. For now, you do not have to worry about what I'm doing with the texture and all this stuff. So we have center-aligned this and taken it.

How to apply Color scrim /overlay to your text elements in MakeStories

Now you can see that we have a text element over here, but it is not clearly visible. That's the last thing you want to happen to your stories where people cannot read the text that you have on your story elements.

So, A good way to do this is to add a small color, which fades in from the bottom to top, or like, suppose if you have your text element at the top, you can have it from top to bottom or you can have it on both the sides.

To do that, we suggest our users use the overlay section. When you go to the overlay, you will see an option that says enable scrim.

There is a small switch button, so we will click this. The moment we do it, you can see that there is a small gradient black color coming in from the bottom. Now you can see that the moment we have enabled this over text is, it has much better visibility than it had before.

We will again switch it off so you can see how adding an overlay scrim can help enhance the visual element or enhance the visibility of your text elements on the story.

So now we have enabled scrim. The moment we do that, you can see that by default, a black-colored screen comes in. But again, as we told you in the last video, MakeStories is all about customizations.

So you have probably seen this feature when we use gradient backgrounds. So now all you have to do is to select this color point and you can change the color as you wish.

Suppose you have a red in my branding color, so you can change this scrim to red.

This is a simple color picker, so you can control the opacity, and then you can also add multiple points.

How to apply multiple color scrims in your web stories

Let's say you want to have a scrim over here in the bottom, and then you also want to have a scrim at the top. What you will do is, you will add another point here by clicking on flip points. We will copy this color code and then we will click the other scrim point and we will paste this color code over here in the color picker.

Now you can see that we have the scrim on both sides. If you want to reduce the intensity, click on scrim/overlay and select white color from the color picker and we will reduce the intensity from liner scrim.

Now you can see that we have a scrim on both sides, how you do this is completely up to you. And you can also flip this by using flip points. The moment we will change this color, you can see that now we have blue at the top and right at the bottom, the moment you flip this, the colors will flip.

Since we were using gradient backgrounds, we had the option to select the angle. Here we are using the linear scrim right now, we don't have the center option over here, we just have eight different options for the eight directions where we can take this scrim.

The moment we change angles, you can see that my screen is going in a diagonal direction and it will keep changing the way you change angles. You can do these things in like hundreds of different ways. It is completely up to you guys.

Types of Scrims/Overlay in MakeStories editor

MakeStories offer three different types of scrim/overlay in its editor. The first one is Solid, the second one is linear, and the last one is radial.

We have seen that by default, we suggest you use the linear scrim or the linear overlay. But let's say you want to have just one solid color.

In that case, you can click solid. When you do that, you are shown an option with just one color.

Let's say you want to have a red color, and then you want to increase its opacity. Solid scrim turns your whole canvas covered by just one solid color. You're going to also use this kind of scrims.

The last option that we have is the radial scrim. So radial Scrim is basically a radial-gradient, nothing more. The radial one is the least one that's used on MakeStories.

So you can skip this. You don't have to worry about it.

Again as I said, you can customize it the way you want. Then, the most used scrim option is the linear scrim. So we will Just select the angle point and flip it and bring it to the black. Now we are back to the default scrim that MakeStories provide.

With this, we have completed all these seven different kinds of background options that MakeStories offer, and that we have also seen how you have to use overlay and why you should use it.

If you have any questions, feel free to reach out to us. We are always available on the live chat. You can click this button and you can send us a message and then we will get back to you.

In the next video, we are going to check out how you can configure the backgrounds. Like you can also add animations to your background, You can add filters. So, We will take a deep dive into this option in the next video.

Thank you.