Understanding Background Configuration

Introduction to background configuration

Hello guys and welcome to lesson Six of the MakeStories 101 course. In this course, we are going to take a look at how you can configure your background and how you can set some of the properties for your background.

The next thing that we will do is some customizations. Now, whenever you want to customize your background, all you have to do is click the background.

On the right-hand side, you will see an option depending on what kind of background you have used.

Image background configuration

If you have used an image background, you will get image settings over here.

So we will click on image settings and then over here, it will ask me if you want to have the alternative text for your image, so this is good for accessibility, and it will help you rank your stories on Google or any search engine.

Now we will live it blank right now. You don't have to do it because whenever you publish as a web story, the story validation option will say that your image does not have alt text.

When you click that option, you will be shown an option to fill in the alt text.

But doing that before can come in handy and you won't have to waste your time when you try to publish a story. We will click this and we have the image alternative text tab below the image settings text where you can write an image alternative text.

Filter configuration

The next option for background configuration is Filter. This filter is available for images and for videos. Those are basically the filters that you use on Instagram or something like that, or any other photo editing app.

These are predefined filters, which we have within the tool. Now if you want to change or you don't like any of this stuff, then you can control all of the brightness, contrast, and saturation.

Using these options, you can introduce a little bit of blur, then you can do a little bit of gray scaling, or you can add a Sepia effect. If you have a good designer or you are a great designer by yourself, you can take care of these things very easily.

We have seen the settings for the image. When you use an image background, you will also get an option to animate them.

Please see that the background animation option will come only when you will use the image background. Now you don't have to confuse the background animation with the animated background. These two things are completely different.

All about Background Animation

Zoom In & Zoom out background animation

We will go into the animation tab right now, and select the effect. Most of the time zoom in and zoom out are the effects that we suggest our users use because they have the best output possible. They are the ones that look really beautiful.

We will click on zoom in and then apply for 10 seconds. And then we will click on play. Now, when you click on play, you will be able to see how this effect looks in real-time.

Again, we will save the story and try to check it out over here. Now you can see that the same effect is applied here in the output and the images zooming in for 10 seconds.

In the same way you can use the zoom-out effect. So the zoom-out effect as the name suggests it will zoom out the image. These are the effects that you can use.

Ken Burns background animation

One effect that you have is called the Ken Burns effect. Please see that you won't be able to see the ken burns effect inside the editor. To preview the ken burns effect, you will have to use the preview of the story.

You click on ken burns, the first image that you have here will already be taken, and then all you have to do, you have to add another slide and select an image.

Let's say we have selected one image over here. Then we will add another slide and add one more image. For each of the images, you can select their transition and whether it will zoom in or it will zoom out.

So we will have to zoom in for the first image for like three seconds. Then we have the pen right effect for a second with zoom out for three seconds, and then we have a Pen up effect with zoom in for three seconds.

Now we are done with these three images. We will save this, and now we will preview the Ken Burns effect. By previewing, you can see this is the Ken Burns effect, and this is by default from the AMP team. If you have any questions regarding the Ken Burns effect, you can get in touch with the amp team.

We suggest you use the Mask effect, because it is much more, better, and it has better visibility and user experience compared to the ken burns effect. So with that, we are done with the image settings and with the image animations.

Video & Gifs Background Configuration

If you are using a video or a GIF background, then the settings will change. Let's say we're taking a video as background. When you click on the video or in the background, the video settings will appear. We will click on video settings.

We have already shown you how to use a video loop.

The videos don't have the ALT attributes, the videos have the title attribute, you can write the title attribute in the title tab of video settings.

One thing that you can add to your videos is the video captions and these captions come really handy. Now if you don't have a video caption, please see that you can also generate your own VTT files and we suggest you use vttcreator.com for that. And you can click on create captions.

These are the captions that are readily available. Here you can upload your own video and you can check it. What we will do is what we will use, so this is like a video caption for a video of about eight seconds. We will download this as a VTT file.

Now we will click the background and click on the add subtitle file. Suppose you have a story for multiple audiences then depending on the language of the browser their video files, caption files can change.

Below the video caption tab, you can select the language that you have and you can add multiple VTT files. You can use your own subtitle URL or you can upload the available vtt file from the upload button.

Once it is uploaded in the media manager, click on the uploaded vtt file and then click on add subtitle. Here You have a warning saying that video subtitles are not shown in the editor.

Now if you want to see these video subtitles, you have to click on unsaved changes and you will have to refresh this.

One thing that you have to remember is that when you use the video subtitles, please refrain from having any text over here on the canvas.

Also, remove the video background overlay and then preview the story.

Now you can see that over here, we have the video captions coming up. So now we have seen that for a video, You can use a video caption file. Again the filters that we have applied to the images, they can also be applied to the videos.

You cannot animate a video. So when you apply the video as a background and go into the animation settings, it will say you that you don't have any inimitable element.

So, You cannot animate a background video at this point of time neither in MakeStories nor in web stories.

With that, we are done with everything and anything related to background. It was a massive six-lesson course only on backgrounds because we have tried to do it in-depth. As we all know that background is the only thing that is going to make your story very interactive and very beautiful.

We hope that with this, all your questions related to the background are now solved.

Again, if you have any questions you can ask us on live chat, or you can also join our forum. In the next video, we will start with the templates.