Understanding the MakeStories Canvas Area

Introduction to Canvas Area in MakeStories Editor

Hello, and welcome to chapter 14 of the MakeStories 101 course. In this course, we will look at the canvas area of the MakeStories editor. This is basically the canvas area, this one, and this is all the things that it has around itself.

This is basically a part where you will be spending most of your time because you will be adding your image as a background. You will be adding text elements. So, many different things.

Preset Ruler

Here you can see that in the canvas area that you have, the first thing that you will notice is the grid lines or the rulers.

So these are the rulers. One is the horizontal ruler and the other one is the vertical ruler. When you hold over the ruler, you can see a grid line that comes up.

So This is a grid line, which you can use to define specific grid points. Suppose if you want to give a margin of 20 pixels on both the sites, then you can have grid lines.

If you remember, when we clicked on the background, we had something called a preset ruler. Here if you click 20 pixels, you can add this particular preset ruler, or else You can go in and you can select those manually by your own self.

This is the first thing that you have to see in the canvas section.

Slide Number

The second option you can see is this slide number over here. Slide number is basically the number of slides that you are working on at this point of time. And these are the indicators.

You can navigate between slides using the arrow buttons over here, or you can even click on this particular indicator.

So the slide, which is active, will be marked as dark black, and then the other things will be grayed out. You can see we are on slide one. Slide one is marked as black, and then the other two are grayed out.

Music Icon

The third thing that you will see is the music icon over here. The music icon will appear only when you add the music to an entire story or a new specific slide.

If we see the slide, number one has this music icon. When You hover over this icon, it will open up and you will see two options. The number one option is the Delete. And the second option plays.

When you click on play, it will play the audio that is set on this particular slide or the story. When you click on delete, it will delete this audio.

Alternatively, if you go into the audio tab, if you have applied audio to a single slide, you will see a remove button in front of that audio file.

Tooltip

The next thing that we'll see around the canvas is this Tooltip. Now, this tooltip basically changes the content depending on the situation. Right now, since we have nothing selected on the canvas, you can see only two options over here.

The one that says Add Text and the other one that says add Media. Now, when you click on an add text icon, as the name suggests, it will add the text over here on the canvas.

Now, you can move this again and then you can do your editing. You can remove it, you can do whatever you want to do with this text element.

You can see that when we click on a text element, the options have changed. We still have the add text and add media option. But after adding text we also have another option, which says copy element. The second one, which says delete an element.

Now we will click the copy element. When we click it, you can see that this element is copied and a duplicate of this element has been created.

Let's try to add another media element over the story canvas. Now, when you click on the media element, you will be taken to the media library. We will add the media to the slide.

Now you can see that when we go back in and click the added image, there is another option that says change image over here. We will click on the change image and you can see that effect like this, the element remains the same but the image now changes.

This can be really helpful when you use any of the templates.

Let's say we will just select a template, let’s go in and try to use the Netflix template. And let's use this one. Now, when we click on this template image, we will select change and upload the new image, and that’s how the image changes.

This change image function can be really useful when you use the templates because while using the template if you use the change image object, you can visualize how your story is going to look like in this template.

All you will have to do is you will have to change the images. This thing can come in very handy by using one of the templates.

Now, let's say we have selected an image as a background. when you click on the background again, you will see a change image button.

When you change the image, the image in the background will change immediately.

This is how the tooltip changes depending on the element you are using or depending on the background that you click or if there is nothing in the canvas then you are left with two options that add text and add a video.

Control Bar

Now the next option that you have is the control bar at the bottom. Here you can see that we have options like the previous and next.

These two options will basically allow you to navigate from one slide to another slide.

Now, you can also see that there are two plus buttons on both sides. The first one is for adding the page before the current slide, and the second one is for adding the page after the current slide.

You can delete the entire slide by clicking the delete page button.

Now, here we have an option that says play animation. Here, we have uploaded an image animated with the zoom-in effect.

When we click on play animation, you can visualize the zoom-in animation in the background, right over here.

Then We are left with another option that says the duplicate page. As the name suggests, if we click on a duplicate page, the current page will be duplicated.

So you can see that both the pages are totally identical.

Now the last option that is left in this is the toggle overlay area. What does this mean? The toggle overlay area means when you click this, it will basically show you the UI that you will see in the final Amp story.

We also have an option for sharing. Then we have this amp story, slide number UI. All of this UI will be replicated within your editor.

Suppose if you are adding a logo, let's say, we want to add our Logo over here. In this particular section like this.

Initially, when we were designing without the overlay area, we thought that this is how it would look on my story on a mobile phone.

Eventually, when we did take a look at the final story, we can now see that the audio icon and the share icon are now above our logo.

If you want to avoid such a thing to happen, you can just click on the toggle overlay area, and you can have a visual experience of what your story is going to look like when it will be played on a mobile phone.

This is how you can make use of the toggle overlay area.

Bottom Bar

Now in the bottom bar, you can see various options.

Number one is the language. We’re happy to let you know that MakeStories is available in English, Spanish, German, French, Italian, Portuguese, and Russian.

If you find the language of your choice, you can select this.

The moment you select the language your entire editor will be converted to the language of your choice. If you select Italian, it will be converted to Italian and so on.

These other two icons are for undo and redo. If we click on an undo then all the actions that are performed on the canvas will be undo to the last position available. Then there is an option that says auto-advance, we will see this in detail in the lesson in the future.

Now, here we have an option that says, save as a template, but we have already seen this in one of the videos in our previous lectures.

Reorder

Another option that we have over here is reorder.

When You click on reorder, you will be shown the slides that are on the story. You can then drag-drop these slides in the way you wish to order, and you can click on save the order.

The slides will be saved in the order of your choice.

Zoom

The last option that we have on the canvas is zoom. When you click, you will see some predefined options. You can click one of the options and canvas will be zoomed in accordingly.

Now, this is one of the options that you can use, but let's say you don't want to use them. What you can do is you can also pinch-zoom on your touch bar, and it will zoom in and zoom out the canvas.

Another option is back pressing command minus minus minus, and then come for zooming out and using command plus for zooming in.

So These are the shortcuts that you can use for zooming in and zooming out.

Now, one other thing that you can use on the MakeStories editor is by right-clicking something.

When you click right to the canvas, you will see a context menu that comes up.

It basically does lots of things that you can do using shortcuts, or you can use one of these options, but again, different users like different things. So we have all the options for everyone.

Now, let's say we have a text element on our story canvas. We will click on this text element and right-click this to copy the style of the element.

Now we will add a new text element on the canvas, and then we will right-click and then click on paste styles. You can see that the font size, color, and everything are applied to the new heading element that we have used.

Similarly, you can send this backward, send this forward so you can do this using your layer tabs, and then you can cut copy paste. You can align this.

If you want the text element at the bottom, you have to click on the bottom and it will be taken to the bottom. So this is how you can use it. This particular context menu, again, changes with that type of element that you click on.

Since you have clicked the text element and getting these options. If you click on the canvas, then we will get different options like ad page before, ad page after, duplicate page, play the animation.

All of these options can also use by clicking one of these icons on the control bar.

There are different ways to do the same thing in MakeStories. Please feel free to use it in the way you want to.

There is no restriction that you should do things in a certain manner.

Every user might have a different choice and you can use MakeStories in the way you want.

With this, we have seen all the options that we have very close to the canvas and in the middle section of the MakeStories.

Now in the future lessons, we will see the design animation and the setting step. That said, for this lesson, see you in the next one.