Understanding Backgrounds

Introduction to the Background canvas

Welcome to the second lesson in the MakeStories 101 course. This lesson is about understanding the way you can use and set backgrounds in MakeStories.

Backgrounds are the most crucial element of your web story. The only way you can make your stories more appealing is by having an interactive or a very beautiful background.

Like you can have a bright color or a bright gradient.

You can use structures, you can have an image, you can have videos and things like that. With MakeStories, you have eight different types of backgrounds, which you can use and a lot of this.

In this lesson, we will learn about how to use color, gradients, texture, and images as a background for our web story. So let's start with the colors.

How to use colors in Background canvas

Now, when you create your first story, by using the create story button in the dashboard, you will be presented with a blank canvas in the MakeStories editor.

Now the background tab, which is the first step in the editor, will be open by default. In the left top in the background tab, You will see a delete button to remove an active background.

Suppose you have a color set as your background, and you want to remove that particular color background from the canvas.

You can use the delete icon, or you can even use the delete or remove background icon in the toolkit.

Now, if you want to apply the color to the background, you will select the color from the color tab. If you don't like any of the given colors, you can add your own custom color code, or you can even click on the color picker patch and you will be presented with a color picker, which you can use.

The Color Picker will be used to change the color and the slider will be used to reduce the opacity of the color. This is how you can use color as a background.

Gradients & Background canvas in MakeStories

Let’s move to the gradients. You will be presented with a set of gradients. Now, if you don't like any of these given gradients, or you want to change the orientation of the gradient, you can click this plus icon right behind the available gradients.

When you do that, you will be presented with the radiant picker and just like using Photoshop or any other editing tool, You can add the gradient points, and you can also remove a gradient point by dragging them.

You can also change the opacity of the color by using the slider, and then you either set the gradient to linear or radial and then you can select the angle.

This is how you will use the gradients and you can click the apply button to apply this gradient to your background.

How to set up textures in Background Canvas

Now we will go to the third tab, which is called textures. When You click the texture, you will be presented with a set of predefined textures from subtle patterns.

These are the self-repeating patterns, which will keep on repeating on its own. You can select the one that you like. There are so many of them.

Use of Images for Background canvas

Now we will jump on to using the image as a background. Now, there is a specific reason why you should use the image as a background and not just put it over the MakeStories canvas area as a media asset.

Now when you set an image over the canvas, it will almost cover the entire canvas. Click save and hit preview.

You can see that there are a few margins on each side of the story slide. Now, if we apply the same image as a background and save this again, and if we refresh this, you can see that the image has covered the entire background, and there are no white spaces or margin-left on any of these sites.

This is the reason you should use the image as a background and not just a drag-drop of the images. Now, again, if you want to remove the image, you will click on the canvas. You will be presented with the remove background button and you can remove it.

What if you want to upload your own image as a background?

To do that, There are two simple ways to go through.

Number one will be to use the media library. The Media library is the place where all your assets will be uploaded. Now when you click this, you will be presented with a Google drive kind of interface, which we will deep dive into at a later stage.

For now, we will see how you will upload your own image. To upload your own image into the MakeStories interface. You will click on add new Media and you will click on the upload files.

Now, when you do that, you will be presented with a photo picker or a file picker. We will go into the photos folder and select this image.

Now as soon as we select an image, you will see that the image is being uploaded. As soon as it's uploaded, it will be reflected in media files.

Now select the image that you’ve just uploaded in media files and then set it as a background.

Now we have uploaded our own image and set it as a background. What if you want to adjust this image, you want to move across, or you want to zoom this image. To do that, You will just double-click the canvas.

As soon as you double-click your canvas, you will go into edit mode. over there you can drag-drop the image from moving it right to left or vice versa.

You can zoom it in and you can zoom in up to five X times, and then you can even move it the way you want.

So, We have looked into why you should use the images as a background and not just place them on canvas.

We've also seen how you can use colors, gradients, and textures as a background. That's it for this lesson.

In the next chapter, we will look into video, Gifs, overlay, and animated background.

Thank you.