Aligning elements in MakeStories

Introduction to Align elements in MakeStories

Hello, and welcome to lesson 18 of the MakeStories 101 course. In this lesson, we are going to look at how you can align your elements using the MakeStories editor.

You can see that under the design tab, The first thing that we have here is called alignment and distribution.

Let's start by adding a text element on the canvas. So we'll add this text element. Now we have the heading to tag over here. Now when we click this heading tag, you can see that the alignment and distribution tab, which was first opaque is now visible.

Alignment & Distribution

So we will start from the top. Here you can see that we have an option, an icon that says align the item to the top. All these three icons are for the vertical alignment and all these three icons are for the horizontal alignment.

Now when we click this first element, it will take this particular heading 2 tags to the top. When we click the second one, it will take us to the center. When we click the third one, it will take it to the bottom.

Similarly, when we click the fourth icon, it will take to the left. The fifth one will take it to the center. The sixth one will take you to the right.

Remember one thing that this particular alignment and distribution icon will only take the alignment of the element. They won’t align the text inside the element.

Let's say we have this text element. Now we want to align the text inside it. We will go into the text tab and then we will use this particular text-align option to align the items. Again, this is for just taking the alignment and positioning it.

We will understand it better with an image. So we have this image over the canvas. Now when we click alignment options, the image starts positioning itself.

Let’s say we want to position it in the extreme center. What we will do is suppose our image is Somewhere over here in the top left corner, so we will click this image and click the second alignment icon.

It will align the center vertically, and then we will click this sixth icon set and will align this image center horizontally. Now we have this image at the exact center of the canvas.

There are two other options, which are the fourth icon and the eighth icon, we will come back to it later.

This is basically for controlling the spacing between three elements. We'll come back to it later.

Other six Alignment elements

For now, we will see these other six options that we have. The first option we have is something that says W. So W stands for controlling the width of your element.

Now you can see when we move the cursor up and down the element’s width is increasing. Again, if you remember while we were controlling text font size, we used some commands like, pressing the command and controlling the width or the font size and then pressing the shift keys and controlling the font size.

When it comes to controlling the width and height and the accent Y coordinates of the element using the alignment and distribution option, we have two options.

One that is you can click the command icon and you can take care of them, and then you can use the arrow keys.

So when we press the command option and move my arrow keys, You can see that this particular width will increase by 25 pixels and decrease by 25 pixels.

If we press the shift icon and change the width or press the arrow keys up and down, It will change by 10 pixels. If we don't use any of the commands or shift, and we use just the arrow keys, it will change by one pixel.

Shift and arrow keys will increase or decrease by 10 pixels. The command and arrow keys Will increase and decrease by 25 pixels. So This holds true for the width height of the X and Y axis inside the alignment and distribution tab.

How to control and manage the Height & Width of images

Now, you can see that the height element of the component is auto over here. Please remember that whenever you are using the text element, you can control only the width of the text element, but you cannot control the height.

At the same time, If you use the image icon or the image element, you can see that you have one, two, three, four, five, six, seven, and eight different touchpoints to change your images, a proportion, or size.

Let's try to decrease the height of your image. When you try to reduce the height of the image, the width is also getting reduced proportionately.

Right now, we do not have an option to lock this particular proportion or unlock this. But, If you want to, just increase the width and not the height, then you will have to manually do that using these over-image controllers of the image.

This will only change either the height or the width. Now, then if you want to scale it, then you will use these corner over image controller options.

This is how you can control the height and width of your image.

X-axis & Y-axis

Let's see X and Y.

As the name suggests, this is the X and Y position of the element with respect to the canvas size. Your canvas starts somewhere from here, which is at zero, and then it ends at 600 pixels vertically, and then it starts at zero, and it ends at 360 pixels horizontally.

Now you can see that over here, this is at 110 pixels, so these images start from 110 pixels. So the Y-axis is that 110.

Now, you can increase this., You can decrease it, but most of the time, you won't be using these x and Y axis controllers because you would love to place them by just dragging and dropping.

When you start moving your image element over the canvas, the X and Y coordinates are also changing simultaneously.

Rotation or Angle

The next option that we have here is the rotation or the angle.

Let's say, we want to rotate this by 45 pixels. we would enter 45. Simultaneously, you can also use this over image controller to rotate your element.

This holds true for, both the images as well as the text elements or any other element. You can also give group these two and then you can move the entire element and our group also.

There is no single way to do things in MakeStories and you can use it the way you want.

Flips

The last option that we have here is the flips. MakeStories have two types of flipping options. One is Vertical flip and another one is horizontal flip. You can see that when you have the text element, you cannot flip them, but you can flip the element when it is an image.

Once we tried flipping the image vertically and horizontally, If we flip it again, It will come back to the original position and we will be able to understand it much better When you see the example in the video.

Spacing Icons

Now the last thing that we said that we will be looking towards the end of this lesson is these two spacing icons. For this, We will need three elements.

Now you can see that we have heading 2, then we have a paragraph and then We have the second paragraph. You can see that the spacing between these two and these two is not equal.

Now what we wanted to do is, we want these three elements to be at equal spacing. We want the spacing between heading two and this paragraph and paragraph one and paragraph two to be equal.

What we will do is select these three elements together, and then we will press the fourth button of alignment and distribution.

Now you can see that my spacing between heading 2 and paragraph 1 and paragraph one and paragraph two is equal. Similarly, let's say we have one paragraph over the bottom right, the second one over the mid-left-right, and the heading is somewhere over the top.

Now we will select these three text elements together and I will use this eighth icon button of alignment and distribution.

Now they all are aligned in the center. The vertical spacing between all of them is equal. This is all about the alignment and distribution tab inside the MakeStories editor.

With this, we have completed almost everything in the design tab as we have looked at the appearance, then we have also seen the text formatting, we have seen on click, which using which we can, you can link the elements to an external URL.

We have also seen filters while we're setting up the background and we have also seen the preset rulers.

With this, the design tab is almost completed. In the next lecture, we will be moving towards the animation tab.

Thank You