Micro Animation in Adobe After Effects: Motion Graphics For Apps and Websites | Valeri Visuals | Skillshare
Search

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Micro Animation in Adobe After Effects: Motion Graphics For Apps and Websites

teacher avatar Valeri Visuals, Adobe After Effects Instructor

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      Introduction

      2:22

    • 2.

      Section 1: Lottie and JSON Animation

      2:04

    • 3.

      Let's Begin!

      11:20

    • 4.

      Designing the Scene from Scratch

      11:16

    • 5.

      Your First Animation!

      12:57

    • 6.

      What is a Loop Animation?

      6:36

    • 7.

      Improve the Animation

      5:52

    • 8.

      Convert the Animation to LOTIE and JSON files

      12:24

    • 9.

      Render the Animation For Sharing on Your Portfolio!

      3:33

    • 10.

      Section 1: Project Task

      0:42

    • 11.

      Section 2: Animated Gmail Signature

      2:15

    • 12.

      Let's Begin to Design the Scene

      8:14

    • 13.

      Learn How to Group Layers ( Precomps )

      14:04

    • 14.

      Moving on to Design and Animate the Second Part

      14:03

    • 15.

      Learn to Creat a GIF

      5:49

    • 16.

      Create a Gmail Signature

      9:23

    • 17.

      Render the Animation For Sharing on Your Portfolio!

      4:24

    • 18.

      Section 2: Project Task

      0:42

    • 19.

      Section 3: 3D Animation for Long Videos

      1:30

    • 20.

      Let's Begin to Design the Scene

      10:40

    • 21.

      Camera and 3D Layers

      3:25

    • 22.

      Animate the Scene and Render it

      8:21

    • 23.

      Make it Play Endlesley for Long Videos

      9:21

    • 24.

      Section 3: Project Task

      0:42

    • 25.

      Section 4: Loader Animation for Your Portfolio

      1:15

    • 26.

      Let's Begin to Design the Scene

      10:27

    • 27.

      Advanced Animtion Methods

      14:24

    • 28.

      Finishing to Create the Loader Animation

      10:04

    • 29.

      Share it on your portfolio like a pro

      12:19

    • 30.

      Section 4: Project Task

      0:42

    • 31.

      Closure

      0:35

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

1,581

Students

27

Projects

About This Class

Hi, I'm glad you chose to learn Motion Design with me. In this course, you will learn all about working with basic shapes in Adobe After Effects. The good news is that you will not only learn how to create and animate them, but you will also learn how to apply them in real-world projects that you can offer to your clients.

First of all, please download the main folder for the course, named "D.I.M_Micro Animation".
Click here to download the main folder for the class

It’s a great course, especially for absolute beginners that want to take the first step into the Motion Design world. So if you’re a Graphic designer, Photographer, Videographer, or illustrator, and you want to offer more to your clients, this one is for you

  • Lesson 1: Learn how to create animation in Lottie and JSON files for websites and apps.

  • Lesson 2: Learn how to create an animated email signature for your client's brand

  • Lesson 3: Learn how to animate a complex 3D animation that you can integrate into long videos for a YouTube channel.

  • Lesson 4: Learn how to present your animation on your portfolio like a pro!

Throughout all the lessons, you will learn to export the animations for sharing on social networks so that you can share them on your social media channels, and of course, on your portfolio website. And To give you the best learning experience, during the lessons,

  • You’ll get clear ques on when to work along with me and when to just listen without touching the computer.
  • You’ll also get mid-lesson questions to help you memorize the lessons better.
  • In addition, you will get instructions on performing shortcuts and different functions for both PC and Mac users.
  • And I’ll even tell you when to take breaks.
  • And, of course, I will provide super fun assignments at the end of each lesson, just like in a real classroom.

On top of all, I created a free class, especially for beginners – in which you’ll learn all the important fundamentals and gain an understanding of what it’s like to work in Adobe After Effects. So, if during this class, you come across a topic that interests you and you want to learn more about it, you are more than welcome to learn it in the free lesson. You can find the link in the description of the first lesson of this class.

Free Class to Learn the software (After Effects) even better

Oh, and don't worry, you won't have to hear my funky accent throughout the lessons. This class is voiced by a professional voiceover. Okay, enough with the talking. Let's get started!

Meet Your Teacher

Teacher Profile Image

Valeri Visuals

Adobe After Effects Instructor

Top Teacher

Hi, I'm Valeri! I am a freelance Motion Graphics Designer who also teaches After Effects, the best software for Motion Graphics. My job here is to teach you the best skills in Adobe After Effects so that you can start a successful career in Motion Design.

Ever since I was a kid, I've always been into drawing. I started off doodling animals, cartoon characters, and people. As I grew older, I decided to take my passion more seriously and got a bachelor's degree in visual communication, which covered graphic design, illustration, and animation. And would you believe it? I even worked at an animation studio for a whole year during my third year of college! I worked at an animation studio for a year but eventually decided to go freelance full-time. I loved what I did so much that I st... See full profile

Level: Beginner

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: Hi, I'm glad you chose to learn motion design with me. In this course, we're going to learn all about working with basic shapes in after effix. And the great news is that we're not only going to learn how to create and animate them, but we're also going to learn how to apply them in the real world projects that you can offer to your clients. In the first lesson, we'll create a basic shapes animation and learn how to export it into a lot or JSON file, which is perfect for websites and apps. In the second lesson, we'll create a complex animation that will turn into a professional email signature. In the third lesson, we'll turn layers into three dimensional layers and learn how to create an isometric camera angle. In addition, we'll learn how we can integrate the animation into longer videos, such as podcast, video games, and more. In the final lesson, we'll create a super cool loader animation and learn how to showcase it in our portfolio like approach. In each lesson, we'll learn how to explore our animation for sharing on social networks, so you can share it on your social media channels and on your portfolio website. But wait, there's more. To give you the best learning experience, you'll get a clear notification on when to work along with me and when to just listen without touching the computer. You also get a mid class question to help you memorize the lessons better, and I even tell you when to take a ten minute break just like in a real classroom. On top of all, I created a free course for beginners, in which you learn all the important fundamentals and gain an understanding of what it's like to work in after affix. So if during this course, you come across a topic that interests you and you want to learn more about it, you are more than welcome to watch the free course I mentioned. You can find the link in the description of this video. Oh, and don't worry. You won't have to hear my funky and exotic accent throughout the lessons. This course is voiced by a professional voice on. Okay, no with a token, let's start with the first lesson. 2. Section 1: Lottie and JSON Animation: Hi, everyone. In this lesson, we will create a cool animation using basic shapes and learn how to export it to Jason or Lodi files that are perfect for websites and apps. This lesson is divided into seven parts. In the first part, we will understand what Lodi and Jason files are and why it is important to know how to create them. We will create a main folder for the course and install the fonts we will use in this lesson. We will enter after effects, create our first composition and adjust the software settings for a better workflow. Then we'll learn about the basic parameters of a layer in after effects. In the second part, we will design the scene from scratch and after effects, and we will learn methods for more organized work. In the third part, we will learn what key frames are and start animating the scene, and we will learn how to time and synchronize the animation we created. In the fourth part, we'll learn to create a loop animation. The fifth part, we'll improve the animation we created and learn about the graph editor. In the sixth part, we'll install a free script and learn how to use it. We'll identify any problems that might come up. Then we'll solve those problems and export a finished video file that can be used on websites and apps. Finally, in the final part, we'll learn how to render the animation we made into a high quality MP four file to share on social media. After that, at the end of the lesson, you will get a small task for you to do. The task is meant to help you remember and understand what you've learned. Don't worry. The task won't take up too much of your time. It's designed to be doable in 2 hours only. If you have any problems or questions, feel free to ask me or your classmates for help in our closed community group. All right. Enough with the talking. Let's begin. 3. Let's Begin!: So what are Lodi and JSN files anyway? Lodi and JSN are lightweight animations that can be used on websites, mobile apps, and other digital platforms. Knowing how to create and render animations in Lottie and Jason files can help designers and developers create high quality, engaging animations that improve their platforms, user experience and performance. All right. Enough with the talking. Let's begin. As a professional motion designer. I can tell you that working with organized folders is very important. When you're working on a motion graphics project, there are many different assets that you need to keep track of, such as images, video footage, audio files, and so on. Organizing these files into folders lets you quickly find what you're looking for and keeps your project super efficient. Addition, an organized file structure becomes even more important if you're working with a team. Everyone on the team needs to be able to find the assets they need quickly. Having an organized project can help ensure that everyone is on the same page. Let's see what folders we need to create. But before that, remember to download the folder for this lesson. For those who still need to install the after effects software, you can see how to do it in the free course I mentioned earlier. You can find the link to the course in the description below or in the PDF file found in the folder you downloaded from me. Okay. Now let's find a folder on the computer where we will create the main folder for the course. Find a folder that suits you. Now let's create the main folder for the course. Let's call it DM micro animation. Now inside this folder, we need to open three more folders. The first is A. We will save all the after effects files here. The second is assets. Here, we will save all the graphic assets used in the project. The third one is renders or samples. In this folder, we will save all the renderings and tests of the project. Now let's open the assets folder and transfer to this folder the assets that we need for this lesson. Open the folder you downloaded from me. Right. And copy all the assets to the assets folder you just created. You can close the folder now if you like. Now, let's install the font we will use in this lesson. I will show how to install fonts for Windows and Mac users as well. The name of this font is Montserrat, and we will use it for educational purposes only. Open the folder and enter the folder called static. For Windows users, select all the files, right click and choose Install for all users or Install. I already installed this font, so I will not install it again. Mac users with finder selected, click on. Go. Now, click on. Go to Folder, and type this line. Then press Enter. This will bring you to the fonts folder installed on your system. Now, drag all the fonts from the course folder to the fonceFolder, or you can copy the font and paste it there. So after installing the font, we can close the folder. I'll move this folder to the side real quick, and now let's lunch after effects together. We can exit from this window. I will maximize the window, and first, let's click on default so we all see the same panel arrangement. And now, as with any editing software, we need to open a new file. To do this in after effects, we must create a first composition. Let's click on new composition and now define the settings of our first composition. We will call it animation for Lt. Here we will set the size of our composition. This time, we will work in a square format of 1080 pixels in width and ten 80 pixels in height. Here we will choose the number of frames our animation will consist of. We will write down 60, which means to create 1 second of animation. We will pass 60 frames. Why? Exactly 60? Because this animation is designed for websites and apps. Those who don't know what frame rate means is welcome to see the free course I mentioned earlier. In this course, I explain in depth about this topic. You can find the link to the course in the description of this video or in the PDF file located in the main folder of the course that you downloaded from me. All right. Let's move on. Here, we will choose the duration of our first composition. 10 seconds is enough for us this time. Finally, let's choose the background color of the composition. It is important to note that we can easily change all these settings at any stage in the animation later on. Now let's click. Now before we continue, I would like to make a few important notes for those who see the screen in this way. Don't worry. See it that way because your caps lock key is on. Turn off the caps lock key so you can see the screen normally. Now, when we work on a project and after effects, it is important to change the language on our computer to English. That way, the keyboard shortcuts we will use in the course will work properly. Next, if you see the preview screen differently than I do, you can click here. If you see the numbers here differently than I do, you can hover here with the cursor. Then hold down the control key and click on the numbers here. Okay. And if you see the screen smaller or bigger than mine, just come here and select fit. Finally, set the preview quality here to full. After creating our first composition, the first thing we need to do is to save the project and give it a name. Because currently, as you can see, After Effects file has no name right now. The name we gave was the name of our first composition. The composition we are in now. Let's go to file and click on Save. Now let's find the folder we created for the lesson. We will enter the A folder and name the after effects file we are working on. You can call it the same name as our main composition or any other name you like. After that, click on Save, and our project now has a name. After the first saving of the project. Besides giving the name to the project. We also activated the autosave function. This is very important to do because now after effects will automatically save our project every few minutes. Now, let's go to edit preferences and set the best settings for a better workflow. Mac users, you can go to preferences this way. Click on General and now select the settings exactly like I did. You can stop the lesson and continue it once you have selected everything. In the meantime, I will continue to the next column. And here is the auto save. Here we decide how often after effects will save the project automatically. I chose every 5 minutes. Finally, let's get to script and expressions and select everything I selected. And now we can click and start the lesson. Note that you don't need to change these settings every time before starting a new project. Okay. So the first thing we will do is import the color palette into the project. To import assets to the project, we will double click on the gray area in the project panel. Now we need to find the folder we created for the lesson and enter the assets folder. Now, select the color palette. Ensure PNG sequence is not selected and click Import. Now, to see the color palette in our composition, we must drag it to the composition panel located here. To do this, we will drag the palette into the composition like this. Here, we see the palette in the preview screen. We can reduce this layer manually by grabbing the edge from here and holding the shift key to reduce the layer symmetrically. Now release the mouse click and then release the shift key. Also, we can reduce the layer from the composition panel through the layer itself. If we click on the small arrow of the layer, we can see the basic transform properties of the layer. If we open these properties, we can see the basic parameters for each layer in after effects. Here we will see the scale parameter. We can change the value of this parameter manually, or we can click on the value and enter a number we want. Write down 30 and click on Enter. Let's close the parameters from here. Now we can move this layer over here to the side, and so that it doesn't bother us later. Let's lock it from here. That way, we won't be able to touch or move it during work. Now, so that we don't see this layer in the composition panel. We can make it disappear using the shy function found here. Let's click on this icon. For those who do not see the icon, you can click here and see the same arrangement of functions as I do. Let's select this layer as an invisible layer, and to perform the function, we will also click on the shy icon here. And now we don't see this layer here. It doesn't bother us and we can't move it. Okay, now let's start designing our scene. To do this conveniently, we can open a grid adapted to our composition. Now, let's adjust the preview screen to fit the size of our panel. We will go here and select fit. Make sure the quality of your preview is also in full. If you don't see the background color you chose at the beginning, click here to see it. If we want to change this background color, we can do it through the composition settings. To get to the composition settings we are in now, we need to click Control K. I note again that all the shortcuts will work when the keyboard language is set to English. Let's click Control K. Here, we see the composition settings we created earlier. To see the changes we are making, click on preview. Now you can change the background color to any other color. All right. Let's click on Cancel and start creating our scene. 4. Designing the Scene from Scratch: So let's create our first shape. For this, select the Pen tool, then click on fill and D select it. Now let's click on stroke and choose a light color from our palette using the eyedropper. Click Okay, and let's create the shape from the center. Place your cursor here and create the first point. Now, hold down the Shift key and click here to create a straight line. We can choose the thickness of the line here. Let's click on the number, type in 40 and press enter. Now, let's go back to the selection tool using the shortcut v. Let's select the layer and using the scroll wheel on the mouse. Let's zoom in into the preview screen. For those who don't have a scroll wheel on their mouse, you can zoom in and out using these keys. So after we've zoomed in to see our shape up close, we can see that the end of this line is straight. Let's learn how to round it off. For this, let's open the properties of this layer, open contents, open shape and open stroke. We can enlarge the panel like this, and here in stroke, we can round the edges and connections. We can now close everything, minimize the panel, and learn how to move the preview screen while in Zoom. To move the screen, we need to hold down the space bar and then move it like this. Or we can move the screen by clicking on the middle click of the mouse. Now, I want to talk about an important topic called anchor point. Please don't touch anything and just listen to me. I'll open the rotation parameter and change the value. Pay attention to how the layer moves. It rotates not from the center of the shape. It's because the anchor point is located here. As you can see, there's a small icon here. Let's move it to the center together now. For this, let's select the anchor point tool and drag the anchor point of this layer to another location. If we move the anchor point while holding down the control key, the anchor point will move symmetrically. This way, we can easily center it in the center of the layer. After placing the anchor point, let's press to switch back to the selection tool and go to a line. For those who can't find it, you can open it via a window. Let's click here to center our shape to the center of the composition. Now we can set the preview to fit and cancel the grid. However, this time, let's not cancel it from here. Let's cancel it using the shortcut. Press the apostrophe key. Let's press it a few times to practice. We will use this grid often. Now let's create this sphere. To do this, we will click and hold the rectangle tool. Now release it and select the ellipse tool. Now, don't do it with me because I want to show you something interesting. Let's see what happens if I try to create this sphere here. Note that the sphere is created on an existing layer. I'll press control Z to undo the action. Now let's do it together. If we want to create this sphere in a new layer, we need to make sure we are not selecting any layer, and then we can choose the color for the sphere. Let's choose the blue color. And we will cancel the stroke this time. Now, when we create this sphere, it will be in a new layer. Let's create the sphere here while holding down the Shift key to make it symmetrical. Now let's release the mouse click and then release the shift key. Next, let's align the sphere to the center, using a line and move it downwards. We won't be able to grab it because we're still on the ellipse tool. To move this sphere, let's switch back to the selection tool by pressing. Now, let's select the layer and grab the sphere and move it down while holding shift for symmetrical movement. Okay. And now let's name our layers. To do this, we need to select the layer and press enter. We can change the name to stroke one. Press enter to complete the action. Let's do the same thing for the sphere. We'll call this layer sphere one. Next, let's create the text scale. To do this, we need to select the text tool and choose the font Manst that we installed earlier. Click wants to open the text line and then type scale. Press shift to capitalize the first letter and continue typing the rest of the word without holding down shift. Double click on the text to select it. Change the size to 30 and press enter. Select the font style to bolden the toolbar or by using the arrow buttons. Finally, let's choose the text color from here. Now, let's say we want to move the text. To exit the text line, we need to press control enter. Now we have exited the text line, and I can press V to return to the selection tool. Now go to the paragraph and make sure that the text is left lined and centered. Let's move a little closer and center the anchor point of the text layer to the center. This time, we won't use the Anchor Point tool. We'll do it with a super useful shortcut Control Alt home. Mac users, pay attention to how to do this on your keyboard. Let's use the short cut together. And a, the anchor point jumps to the center, and now we can center the text and bring it down while pressing the shift key. Now, let's bring back the grid by pressing the apostrophe key. Now let's select all the layers and move everything up using the arrow keys on the keyboard. For larger movements, we'll press the arrows while holding down the Shift key. Let's place the layer here, and to assign them all to the same group, we can click on the square here and tag all these layers in blue. Now let's duplicate all these layers. To do this, we will select all the layers and press the shortcut control D. Next, we will select them and move them down so that they are positioned side by side. To differentiate them from the first three layers, let's tag them in yellow. And now, while all the layers are selected, let's move them to the left. We will hold shift and move them with the left arrow key on the keyboard. Okay, one more time, let's duplicate the first three layers again. This time, we will position the layers upwards. Let's tag them in red. While everything is selected, let's move all the layers to the right while holding the Shift key. All right. Now let's change the words we have here. We can leave this text layer unchanged and replace its name in the layers panel. Press Enter and delete the number two. Now let's double click on this word and change it to rotation. Don't forget to press Control Enter to exit the text line. Finally, we'll change this text to stretch. Press Control Enter and then V to return to this selection tool. Now, I want us to move the layers to be a bit further apart from each other. This time, we'll use a grid called the proportional grid. I'll turn off this grid for now and show you how to open it using a shortcut. The short cut to this grid is Alt and the apostrophe key. Now let's move these layers over here. And those layers over there. Now we can cancel the grid, so let's press out and the apostrophe key again. Next, let's set the preview screen to fit and change the colors of the spheres. This one is in yellow. But this sphere will be red. Now, let's create the letter A, which is supposed to be up here. To do this, we'll select the text tool, click once here, and then press Shift A to make the letter uppercase. We'll select the letter by double clicking and change the font size to 300. This time, we'll choose the black font style. Now, let's click here. To exit the text line, we'll press Control Enter and V to return to the selection tool. Now let's center the anchor point of this layer using the shortcut we learned. Question, what is the shortcut to center the anchor point. To do this, press Control Alt home. Now, we will go to a line and center the layer in the composition. Let's bring back our grid by pressing the apostrophe key and continue designing the scene. In my opinion, we can enlarge this layer a bit. This time, we won't enlarge it through the font size, but we'll enlarge the layer itself through the scale parameter. Let's select the layer and press to open the scale parameter. Let's change the size to 130. Now, let's raise this layer a bit. It's too big. Let's change the size to 120 and raise the text again. Now, I'll press to open the rotation parameter and rotate the layer to check that it doesn't touch the other shapes in the scene. Great. Okay. And now, I'll bring the rotation to zero. Now we can close the parameters and let's place the layer above all the others and change its color to none. This way, the layer will be gray. All right. We have finished designing the scene, and now we're moving on to the animation stage. But before that, I highly recommend taking a ten minute break. Get up from your chair, do some light stretches, make some tea or coffee, and come back refresh for the next part. 5. Your First Animation!: So at this stage, we don't need the color palette, so we can click here to see all the hidden layers and simply turn off the layer from here. We can also unlock and completely delete the layer using the backspace or delete key. The layer is deleted from the layers panel, but it is not deleted from the project itself. So don't worry. We can use the palette again if we need to. All right, so for now, I'll delete it, and we can also close the grid by pressing the apostrophe key, and now we're ready to start the animation. The first thing we're going to animate is the spheres. In order to make them move, we need to create key frames. Key frames are a fundamental concept in animation and motion graphics. In after effects, keyframes are used to define the starting and ending points of an animation or transition. They are points in time that mark the position, size, rotation, opacity, and other properties of an element or layer. Key frames are also used to control the speed and timing of an animation. By adjusting the distance between key frames, you can control the speed of an animation. I cover this topic in depth in the free course I mentioned in the beginning of this course. If any of you guys want to learn more about it, you're more than welcome to watch it. You can find the link to the free course in the description below or in the PDF file. That's in the main folder of the course you downloaded from me. All right. To begin, let's select all the spheres while holding down the shift key so that we can select multiple layers at once. Next, make sure that the time indicator is at the beginning of the timeline. And finally, press P to open the position parameter because this is the parameter for which we will create key frames. Now, we will tell after effects to keep the spheres in their current position at this point in time. Therefore, we will click on the stopwatch and create the first keyframe. Next, we will move the time indicator to the second number one and move the spheres to the desired position while holding down the shift key to ensure a straight axis movement. This action will automatically create a new key frame. Now, to preview our work, let's move the time indicator to the beginning of the timeline and press the space bar. Good job. You have created your first animation. Let's place the time indicator at the beginning. Now, I want to time this sphere's animation differently so that they don't all move together. I want the first sphere to move to be yellow, then blue, and only then red. We need to create an overlapping action or an offset. To achieve this, we need to move our key frames in the timeline. We will leave the yellow sphere where it is now as it will be the first sphere to move. Now, we'll move the layer of the blue sphere to start only after the yellow sphere has reached its second point. But because I move the entire layer, there is an empty part in the animation, and I can't see the blue sphere. To prevent this from happening, we will only move the key frames and not the entire layer. To do this, let's select all the key frames, or we can click the parameter here. Now we can move these keyframes here while holding down the Shift key. This way, the key frames will stick to the end of the yellow spheres key frames. Now let's do the same thing with the key frames of the red sphere. We will select all of them and move them to the time when the blue sphere has already reached its last point. If we watch the animation again, we will see that the spheres are now moving one after the other as we wanted. The next step in our animation is to match the animation of the letter e to the scale animation we created. Doing this for scale and rotation is very simple, but creating the stretch text animation can be a bit more challenging. As you can see, if I stretch this layer in this way, I won't be able to create the effect I want. Let's see how to create this correctly. As you can see in the example on the screen, an illustrator, using the create outlines function, we can turn any text layer into a shape with a path. After that, we can move and change that path. All right. And now, in order to do this in after effects, we need to right click on the text layer, go to create, and choose Create Shapes from text. Now we have a new layer in which the text has become a simple shape layer with a path. We can delete this text layer. Now, let's change the color of the layer to none. Now we have a path that we can change the shape of. Let's see how to do it. Before we begin, let's get closer and position the screen in a way that will be comfortable for us to work on this part. Let's open the grid and select the pen tool. At the moment, we can see small points, and if we select one of them, we can move it wherever we want. I'll press control Z. I can also choose multiple points. I'll hold down the At key, and now I can select several points. Okay. I can also move all four of these points. I'll hold down the Alt key, and now I can select all of these points as well. Now let's see what happens if I want to move the entire right side to the side. I'll press Alt and select all the points in this section and then move the points here. Note that the letter is stretched incorrectly. It happens because there are not enough points here. Let's create these points together. To do it accurately, we will use guides. Let's get a little closer. We can enlarge this panel like this. Now to create the guides. We need to bring out the rulers using the control our shortcut. Now, to create a guide, simply click here and drag the mouse down. And now we need to lock them through view and then choose lock guides. And here, the guides are locked, and we can create the points. Let's position ourselves on top of the layers path. When we see the mouse icon change to a plus, we'll know that clicking on the path will create a point. So let's create a few points here. We can select and delete points using backspace or delete. We can zoom in a bit more and align the points. After that, to hide the guide, we can use a useful shortcut control in the semicolon key. Pressing the keyboard shortcut again will bring back the guides. Finally, let's press control to hide the rulers to. All right. So now let's stretch the text. First, I'll explain how it works, and then we'll animate the path together. I'll move here a bit so I can select the point. Now I'm holding down the Alt key and selecting all the points on this side. Except for this one. Next, I move the path sideways while holding down the Shift key. Cool. I will press control Z to undo the action, and let's animate this path together. So the first thing we need to do is find its parameter in the layer itself. As you can see, there are two paths here, one for this part of the letter, and one for this part of the letter. We need to animate both of these pads. Instead of manually opening all of these parameters, we can simply select the layer and tight path in the search bar. We will then press enter and see both paths open conveniently. Now we will time the animation of the letters paths to the animation of the red sphere. Let's set the preview back to fit and see where the animation of the red sphere starts. To do this, we will select the layer of the red sphere and press the U key to see its key frames. Now, we see that the animation of the red sphere starts from the second number two. Let's move the time indicator to this keyframe while holding down the Shift key. Now let's select the layer of the letter A, and tight path in the search bar. Press Enter, and now we'll tell after effects that from the second, The path will be in the shape it is currently in. Because there are no additional key frames before these key frames. The letter will be in this shape throughout this time. Now let's move the time indicator to second number three, at the same moment when the red sphere finishes its animation and change the shape of the letter to the shape we want it to be. We will hold down the Alt key. Select all the points on this side. Make sure we are not selecting this point. And now let's drag the path here while holding down the Shift key. After that, we will now press and hold the alt key and select all the points on this side. Let's move these points here. We can also change the position of these points upward. Let's select this point, hold the shift key, and also select this point. Now let's move both of the points we selected earlier upward. Now let's select only this point. Hold the alt key, select only this point and move it while pressing Shift. Finally, let's select this point and move it here while holding shift. Now, these two keyframes tells after effects that at this point in time, the design of the letter's path will look like that. In this keyframe, the design of the letter looks like this. All right. Let's move on. Let's close the layers. Set the preview to fit and close the grid. And now we can switch to the selection tool and see all the animation we have created so far. Looks nice. The next step in our animation is to synchronize the scale and rotation animations. Let's begin by timing the rotation animation. First, we should select the layer of the blue sphere and press to see its keyframes. As we can see in the final animation, the letter should be upside down from the start of the animation. The letter rotates as the blue sphere rises upward. Therefore, we need to reach the point where the blue sphere is already up, then press R to see the rotation parameter and set the rotation of the letter at this time. We will then click on the stopwatch without changing the value of this parameter. And at this point in time, when the blue sphere is at the bottom, the rotation will be, let's say -180, During this time, the letter will be upside down, and after this keyframe, the letter will start rotating until it reaches the value we set for it at this time. Now, both animations are synchronized at the same time points. Let's see how it looks. Looks great. Now, let's animate the scale animation. We already know that the size of the letter should be this size to when the yellow sphere rises, and we also know that it takes 1 second for the yellow sphere to complete its animation. Therefore, we will set the scale parameter of this layer to the current value. Now we go back in time, which is when the animation begins at second zero and set a different value for the scale parameter, such as 50 or 60. Next, we will close the layer, expand the panel, and show all the parameters of all the layers. To do this, we need to ensure that we don't select any layer and then press you. Now let's move on to the next part and learn how to make this entire animation play seamlessly in a perfect loop. 6. What is a Loop Animation?: So to make this entire animation play seamlessly in a perfect loop. First, we need to understand what is a loop animation. A loop animation is a type of animation where the beginning and end of the animation seamlessly blend together, creating an infinite loop. In other words, the animation plays continuously without any discernible start or end point. There are several ways to create a loop for this animation. We will do it in the simplest way, which is to create a reverse animation for everything that happens here. Let's see how to do this. To make it easier, let's hide the layers without key frames so they don't disrupt our workflow in the layers panel. Just like we hid the color palette earlier, so we can select this layer as it doesn't have any key frames. If you don't see the shy icon, click here. Okay, we will click here and select this layer two. This one two. Since there are no keyframes here, let's select this layer as well. There are no keyframes here either. Let's select this layer two. There are none here. Let's select this layer as well. Cool. And now we need to click here to activate the shy function. Great, so now we see only the relevant layers, and we can move on to create the loop. Okay. So the first thing we need to do is to create the reverse stretch animation. That is, we need to create a return animation for the red sphere and also for the path of the letter A. So first of all, let's decide at what point in time we want to return the red sphere. We want it to return after it reaches the top in the third second. So in the fourth second, we want it to go back. So we can simply copy this keyframe and paste it to the position of the time indicator. So let's select it and press control C and then control V. Let's see how it looks. So the sphere goes up and immediately comes back down. Now, let's create the reverse animation for the blue sphere. I want to bring the blue sphere downwards only after the red sphere finishes the animation. Therefore, I will go to the second number five, copy the first key frame of the blue sphere and paste it here. Let's see what I got. Note that after the blue sphere reaches the top, it already starts to go down, which is not what I wanted. I needed to stay up all this time and only start to return from the fourth second. What we need to do is to create a pause. Let's learn how to do it. The pause will only be created if there is no change in the value of the key frame. Therefore, we need to copy its last keyframe and paste it at the fourth second. These two keyframes are completely identical, meaning they have the same value. This way, we know that there will be no change in the animation throughout this time. The change will only start right after these keyframes because there are key frames with different values. Now, let's create the reverse animation for the yellow sphere. First, we need to find the point in time when we want the sphere to start returning. Second number five is great because the blue sphere completes its animation at this point. We also need to create a pause, which means that the yellow sphere will be in the same position as it is now. We can copy this keyframe and paste it here. During this time, there will be no change in its animation. Next, at second number six, we will return the yellow sphere to its initial position. Let's copy this keyframe. And paste it here. As a result, the yellow sphere will return to its starting point. In both cases, we copied the last keyframe and pasted it here, and then we copied the first key frame and pasted it here. In other words, we took these two key frames and reversed them. Let's see how we can apply this knowledge to create the reverse animation of the letter A. We need to time the reverse animation of letter A with the reverse animation of all the spheres. First of all, let's match the reverse animation of the stretch text with the red sphere. In this case, it's very simple. We simply copy the first key frames when the letter is not stretched and paste them at this point in time when the red sphere goes back down. Let's copy these key frames using Control C and paste them with control V. Now the letter is stretched and returns to its original shape. And now, as the blue sphere begins to return, we need to rotate the letter back to how it was at the beginning. That is, from a value of -180 to zero. But now we need to do the reverse animation. Therefore, we can copy both of these keyframes with Control C and paste them here with control V. And now, when both keyframes are selected, right click on one of them. Go to keyframes assistant and select reverse keyframes. Now we have reversed the animation of the last key frames. Next, from this point on, as the yellow sphere returns, we need to reverse the scale of the letter. Again, we will select both key frames of the scale parameter and paste them to the position of the time indicator, as this is where the yellow sphere begins to return. Now let's reverse these key frames using reverse key frames. Let's see how everything looks together. Okay, now I want to teach you another useful shortcut. Instead of manually placing the time indicator at the beginning of the timeline, we can simply press the home key. Mac users, pay attention to the keys you need to press. Cool, and now let's learn how we can improve our animation. But before that, I highly recommend taking a ten minute break. Get up from your chair, do some light stretches, make some tea or coffee, and come back refresh for the next part. 7. Improve the Animation: Now, we will improve the animation by converting the keyframes from linear key frames to easy Ease keyframes. Easyse is a feature in aftereffects that helps to create smoother and more natural animation. It works by gradually slowing down and speeding up the animation between two keyframes, making the movement more organic and less jarring. I cover this topic in depth in the free course I mentioned in the beginning of this course. If any of you guys want to learn more about it, you're more than welcome to watch it. You can find the link to the free course in the description below or in the PDF file. That's in the main folder of the course you downloaded from me. So to convert the keyframes to EsEs, we need to select all the keyframes. Right click on one of them. Go to Keyframe Assistant and choose Ess. Or we can use the shortcut F nine. Let's do this and see what we got. As you can see, the icon of the keyframes has changed. Let's press space bar and see how it looks. Meanwhile, there is a very small difference from the animation we had before. Let's try to improve the animation even more by changing the speed of the animation over time. We will do this with the help of the graph editor. Let's see how to do it. Select only the keyframes of this layer so that we can see the difference from the other layers. Now, let's click on the graph editor. Then right click to ensure that we are in the speed graph. Make sure this icon is selected. If you see the graph slightly different from mine, click here, and you will see all the key frames. Let's zoom out a bit. Now, let's select the key frames again and drag this handle here while holding down the shift key. Pay attention to the influence percentages. It should be around 88%. Let's also drag the other side until it reaches about 88%. Now, notice the timing of the yellow sphere animation compared to the other objects in the scene. The duration of the animation did not change, but the speed of the object at the beginning and end of the movement did change. This causes the yellow sphere to move in a much more interesting way than the other spheres. Let's apply this movement to all objects in the scene. As we saw before, when we moved the handles, we actually changed the influence of the key frames, which was around 88% on both sides. Let's learn how to change the influence more accurately without having to go into the graph editor every time. Firstly, let's revert these keyframes to regular EasEs by pressing F nine. Now, the influence of the key frames has returned to its original state. Next, let's select them again, and instead of entering the graph editor, simply hold down the Alt key and double click on one of the key frames. This will open the keyframe velocity panel where we can input the influence percentage. Let's start by setting it to 85% at the beginning and 85% at the end. Click Okay. And if we check the graph, we'll see that the influence is now equal in all the keyframes. Now let's change the influence for all the key frames. Don't do it with me because I want to explain something important first It's important to note that we can only change the influence for one type of parameter. That is, we cannot select all the key frames, enter key frame velocity, and change them all to 85% at once. Note that even though I selected all of them and changed them, if we check the influence of these keyframes, we'll see that it hasn't actually changed. We cannot select two different parameters. We need to select either the scale parameter or the rotation parameter. In the free course, we learn how to change the influence of all parameters at once using a free script. For those who want to check this out, you're welcome to watch the course. In the meantime, let's practice doing it manually. Let's select all the key frames of the position parameter. Now, hold down the Alt key and double click on one of the key frames. Then let's change the influence to 85% on 85%, click and repeat the same process with the rotation parameter. We will select those keyframes, hold down the Alt key and double click on one of the key frames. We will change the influence to 85% on 85% and click. Let's do the same thing for the scale parameter. We need to select the key frames of the scale parameter, hold down the Alt key and double click on one of the key frames. We will change the influence to 85% on 85% and click. We also need to do the same thing for the path of the letter a. So let's select all the key frames of the path parameter. Hold down the Alt key and double click on one of the key frames. We will change the influence to 85% on 85% and click Okay. Finally, let's see how everything looks together. It looks great to stop the preview, we need to press the space key. Then to go back to the beginning of the timeline, we need to press the home key. Now, make sure that we are not selecting any layer, then press you to close all layers. Next, we need to restore all hidden layers, disable Shi for all of them, and let's continue with the lesson to learn how to render the animation we created as a lot file. 8. Convert the Animation to LOTIE and JSON files: So in order to export our animation in a file that is suitable for apps and websites, we need to install the free Lotti plug in. Before doing so, let's save the project by pressing controls. After that, close the project and proceed to install the plug in. First, we need to go to the official Lotti website. You can find the link in the lessons description or in the PDF document located in the main folder of the course you downloaded from me. Or you can search for Lotti files on Google and visit the first website. Now register to the website. Once you are registered, go to design and select Create with After Effects. Now, we will learn two different ways to install the plug in. The first method is using Adobe Creative Cloud, while the second method is suitable for those without an Adobe Creative Cloud account. Important to note that both methods are identical for both Mac and Windows users. I will start with the first method from my PC, and then I will show the second method using my Macbook. Let's start with the first method and click here. You need to make sure you are logged into your account. Now click on Manage and install the plug in using Creative Cloud app. You can open the app from here or search for it on your computer. If you don't have this app, you can access Creative Cloud through the Internet browser and download the desktop version. Since I already have the app, I won't download it again. After you download and install the app, log into your account, go to stock and marketplace, then future in. Now type in the search bar and install the version for after effects. Click and wait for a few moments. Now let's move on to the second method. This process is identical for both Mac and Windows users. The first thing we need to do is click here and download the ZXP file. If we try to open this file, we won't succeed. To install this file, we need to use extension Manager. We can find the link to download the extension in the Li files installation guide. Now, if we scroll down, we'll see a link to the Anastas Extension Manager website. Let's click on the link. Download the version that suits us. Since I'm doing this using my Macbook, I'll download this version. Now, let's extract this file and delete the zip or win file. Next, let's open the extension. If you're using a Mac, you can mark move two applications folder. Here, you can select check automatically. You should now see the names of Adobe programs installed on your computer. Let's choose after effects. And now to install the plug in, we just need to drag the ZXP file into the extension. Click and wait for a few moments. Then click again. The plug in is now successfully installed, and we can see it in after effects. You can close the extension and other windows and return to our project. After installing the plug in, let's go back to the folder we created for the and to the AE folder and open our project. You can now close this panel. Next, let's open the plug in. Go to window, then extensions, and choose Lottie files. Click on it and the Lottie panel will open. Now, let's register through the browser. After that, you can close the browser and return to our project. Here, we can see the name of the composition we're working on. And now, click on the green button and wait for the Lotti to be ready. And here we can see our animation is ready. By the way, we can grab this panel from here and attach it here for convenience. Now we see that we have an error note. If we click on it, we'll see the errors we have. Due to these errors, the animation will not work on the devices displayed here. Let's start by fixing the lottie file error for the web. We can come back here to the composition and make some changes. The first thing we'll do is delete the live text layers. To do this, we can convert these text layers into shapes with path like we did for the letter A. We'll select the layer we want to change. Right click, go to create, and choose Create Shapes from text. Now we can delete this text layer and change the color to red to know that this layer belongs to this group. Let's do the same thing for the next two text layers. Now we can delete this text layer two. There's no need to change the color here because it's already blue. Let's do it one more time for this layer. Right click, create, and choose Create Shapes from text. Now we'll delete the text layer and change the color to yellow. Now, we need to get rid of merge paths. After converting the text layer to a shaped layer, a parameter called merge paths is created, which we need to delete in order for the lottie file to work. We can find merge paths under contents. Select it and press backspace or delete. Now, instead of opening each layer manually, we can simply select the relevant layers. And now, type merge in the search bar and see all existing merge paths in the project. Let's delete them all. And now we can click the green arrow again. As you can see, the error message disappeared. Now, let's address another issue we have. Note that when the animation ends, we see the entire scene standing still. That is, we have many unnecessary frames where we do not see any changes. In order to fix this, we need to shorten the duration of our composition. Let's go back to the composition and see where our animation ends exactly. To know exactly where it ends, we need to find the last keyframe in this scene. For this, we need to see all the key frames in the project. Question, which key should we press to see all the key frames of all layers. So to achieve this, let's make sure we're not selecting any layer and press the U key. If we expand the panel, we will see where the last key frames are located. Here it is in the six second. We need to shorten the work area to the six second. We can do this manually by dragging the work area or by using the n key, which will shorten the work area to the location of the time indicator. And if we press the create button again, we will see that the animation now plays in a perfect loop. Okay. Now let's learn how to render this animation to a Lotti or JSON file. We will also learn how we can preview the animation we created in a web browser or on a mobile device. To render the animation, click here and choose which format to render it in. But before that, let's see what it looks like in the web browser and on a mobile device. To do this, let's click on Upload. Now we see the name of our composition. Here, we choose which folder to save it in on the Lotti account we signed up for. Let's click upload. Wait a few seconds. Now let's go back to the Lotti website. If you have already signed up, you can click here, go to my dashboard, and see the animation we just created. Let's open it and see what it looks like. From here, you can view how it appears on a phone or tablet by simply opening the camera and scanning this QR code. From there, we can render the animation into a lightweight JS file. We can also download it from here as a lottie file that weighs even less and save it to your computer. However, let's close this because we will render the animation through after effects. Another important consideration before rendering is how your animation will appear on different background colors. By chucking it, you can make adjustments that are best suited to your needs. By pressing this button, we can view the animation in full screen mode. In my opinion, it looks fantastic. Okay, press the escape button, and let's return to after effects and continue rendering the animation. Let's click here and render it as JSON file. We'll save the file in the samples folder we created earlier. Make sure the name is good. It's the same name as the composition. I'm good with that, so I'll click on Save. Now let's open our sample folder and check the render. The file is there, and it weighs only 32 kilobytes. Now let's save it as a lot file. We're already inside the sample folder. This time, the extension is L, which is great. Let's click on Save. Let's go back to our folder, refresh it, and we can see that the Lotti file weighs 5 kilobytes. These are the files you can send to your client or to a programmer or to whoever is working on your website or application. Now, let's go back to the project and continue with the lesson. Regarding the plug in, we can either drag it here so it doesn't bother us. Release it from the panel, or close it in this way. Now let's prepare our animation for sharing on social media and in your portfolio. 9. Render the Animation For Sharing on Your Portfolio!: So in order to share the animation we created on social media and in our portfolio. We need to render it in an MP four file. So now let's learn how to render this animation with a background as a high quality MP four file. As you can see, the background we have here is not a real background. It is made only for the preview screen. To create a real background, we need to create a new solid by right clicking on this gray area. We'll go to new and select solid. Or we can use the shortcut Control Y. So let's press control y and create a new solid layer. Now, let's choose the color of the solid. Before we press okay, let's make sure the solid will be the same size as the composition. We can click here to make it happen, and now let's press okay. Here's the solid. Let's drag it below all the layers. Before rendering, we ensure that the work area ends on time to avoid rendering unnecessary parts. And now to render the video, we navigate to composition and choose add two render Q. We are now in the after effects render panel where we can see which composition we are rendering. Here, we select the file format we want to render the video two. We will choose H 0.2 64, which is MP four file. In the format options, we choose VBR and make sure hardware encoding is selected. Here we choose the quality of the MP four. Set it to 40. This will render a slightly larger file size, but with better video quality. Now click and choose where to save the render. Let's select the samples folder that we created and use the same name as the composition for the file. Finally, we click Save and then the render button to begin the rendering process. Now, let's wait a couple of seconds. And now to see the render, we can either find the folder manually or click on the link here in the output mode. This will take us directly to the folder where the video is rendered. Let's open the video and see how it looks. It looks great. Now you can share the animation you created on social media and display it on your portfolio website. And if you enjoyed the course, I would really appreciate it if you rate this course according to your experience. Also, don't forget to leave feedback, so I know if you learn anything interesting in the course or not. Okay, let's go back to our project. Let's return to the composition, and before we exit the project, let's save it. Press controls. And now you can close the project and join me to the next lesson where we will learn how to create a cool animation and use it as an e mail signature. I am very proud of you. You learned a lot today. You can share your animation in our private community group. And of course, you can ask me questions there. I promise to answer any question you have. I hope you enjoyed it, and before jumping into the next lesson, I highly recommend that you take a ten minute break. Get up from your chair, do some light stretching, grab a cup of coffee, and recharge your brain for the next lesson. Okay. 10. Section 1: Project Task: All right. And now to practice what we learned. Please create this animation. You can use different colors than mine, but try to keep the animation the same. This task is meant to help you remember and understand what you've learned. Don't worry. The task won't take up too much of your time. It's designed to be doable in 2 hours only. If you have any problems or questions, feel free to ask me or your classmates for help in our closed community group. M 11. Section 2: Animated Gmail Signature: Hello, everyone, and thank you for joining me back. In this lesson, we will create a super cool animation that will be converted into a professional email signature. This time, our animation will be composed of three separate animated parts. We will learn the correct workflow when working on a bit more complicated projects. This lesson is divided into six parts in which we will learn. In the first part. We will design the first animated part of the animation and learn how to create a basic rig to control the shape we have created easily. In the second part. We will learn how to group all layers into one group, and we will learn about the concept of precompose. Then we will continue to animate the scene in the third part. We will design and animate the second animated part of the animation. We will use and learn a cool effect. Then we will create the third animated part and synchronize between all parts. In the fourth part. We will prepare the animation we created for rendering and learn how to create a gift file using Photoshop. In the fifth part. We will learn how to design the Gmail signature using Google Docs. We will learn how to transfer the signature we created to the Gmail account. Then we will identify any potential problems we may encounter and solve the problems and export a proper gift file. In the sixth part. We will prepare the animation we created for sharing on social media and render the animation we made in a high quality MP four file. Finally, we will organize the project before we close it. After that, at the end of the lesson, you will get a small task for you to do. The task is meant to help you remember and understand what you've learned. Don't worry. The task won't take up too much of your time. It's designed to be doable in 2 hours only. If you have any problems or questions, feel free to ask me or your classmates for help in our closed community group. All right. Enough with the talking. Let's begin. 12. Let's Begin to Design the Scene: So first, let's open the After effects software. We can exit from this window, enlarge the software window, and to see the same panel layouts. Let's click on default. Now, let's click on new composition and create our first composition. We'll call it animation for Gmail. We'll work in a square format of ten 80 by ten 80 pixels at a frame rate of 30 frames per second. The duration of the composition will be 10 seconds. We can leave the background color in white and click. Great, now that we have created our first composition, we need to save the project and give it a name. Let's go to the folder we created for the lesson. We'll go into the A folder and name the after effects file we're working on right now. We can give it the same name as our main composition. Now, let's click on save. Now, let's import the color palette into the project. For this, we will double click on the gray area in the project panel. Now we will find the folder we created for the lesson and enter the assets folder. We will select the color palette and click on import. After that, let's drag the palette into the composition, press and set the layer size to 30. We will place it here, so that it doesn't bother us. We can lock the layer and hide it from the layers panel. For those who don't see the shy icon, you can click here. Let's select the layer as a hidden layer and hide it by clicking on the icon here. There, this layer is hidden from the layers panel, but we can still see it on the screen. Okay, now let's start to create our scene. The first thing we'll do is select the rectangle tool. We'll turn off the fill. We will select the stroke and the dark color from our palette. And now we will create the rectangle while holding shift to create a symmetrical shape. The anchor point of the shape is automatically placed in the center because we selected this function in preferences. For those whose anchor point is not in the center of the shape, you can select the anchor point tool and drag the anchor point to the center of the shape while holding control. Don't forget to go back to the selection tool. Now let's bring out the grid by pressing the apostrophe key to see the center of the composition. Now let's align the layer to the center of the composition using the align tool. Click here and here. Now, let's make the corners of this shape free so we can move each one separately. To do this, we need to convert the path of this shape to a bezier path. Let's open the contents of the layer. Open the rectangle until we see the rectangle path. Right click on it and choose convert Tobi path. Now, if we select the pen tool and select one of the corners, we will able to move it separately like this. Now, we need to use a free script from Aftereffects. That will help us move the points in a more convenient way. But before using the script, we need to open the path and select it. Now we can go back to the selection tool. Now we can go to window, scroll down, and choose to open the script called create nulls from paths. While the path is selected, we need to click on points follow paths. Now we can either close the panel or move it here. We can also close the window from here. Now we have four nulls, which are four empty layers that allow us to control the corners of our shape. Now let's create the small spheres that are supposed to be in the corners of the shape. Let's make sure we don't select any layer. Click and hold the rectangle tool and select the ellipse tool. Let's change the color to blue and turn off the stroke. Okay. We'll create the sphere while holding down the shift key so that it will be symmetrical. Okay. Now let's change the name of the layer. We'll select it and press enter. Let's call it sphere one. Press enter to finish the action. Because we changed the name. We can now see the secondary names of our layers. To go back to seeing the names normally. Let's click here. Now, let's place the first sphere next to the first null. Because soon we will control and animate the corners of the shape from the spheres and not from the nulls. Let's select the null to see where it is located. Now let's move the sphere to this area. Let's go back to the selection tools so that we can move the layers in the composition, and let's move the sphere here. Our goal is to locate the anchor point of the sphere to be located exactly in the corner of the shape. To do this, we can use the snapping function. Let's click here and activate the two functions located next to it. Now when we move the sphere from its center, it will move in a snapping way. We will release the mouse when we see that the sphere has been placed where we want it. Now let's duplicate this sphere using the shortcut control D. Let's move it down a bit and place it next to this null. Let's also change the position of the layer in the layers panel for convenience. Now let's grab it from its center and move it towards the corner of the shape. Let's duplicate the shape again using control D. Move it to the location of this null and place the sphere next to it in the layers panel. Now let's move it to the corner of the shape. Let's repeat this action one last time. Control D to duplicate. Move the sphere to the corner of the shape and place it next to this null in the layers panel. Now we can cancel the snapping and continue. As you guys know, we move the path of our shape using the nulls. Now I want to move the path using the spheres and not the nulls. We can connect the null and the sphere using the parent and link function. Parenting and linking are both powerful tools and after effects that allow you to control the motion of one layer or property based on the motion of another. Parenting is a relationship between two layers in which one layer, the child is attached to and follows the motion of another layer, the parent. When you parent a layer to another layer, any motion or transformation applied to the parent layer is also applied to the child layer. This is useful for creating complex animations, such as characters or vehicles, where the movement of one part affects the movement of another. Linking, on the other hand, is a more flexible relationship that allows you to control one property or parameter of a layer based on another. I cover this topic in depth in the free course I mentioned in the beginning of this course. If any of you guys want to learn more about it, you're more than welcome to watch it. You can find the link to the free course in the description below or in the PDF file. That's in the main folder of the course you downloaded from me. So all we have to do now is simply drag the pick whip of the null layer to the sphere layer. Now you can see that when we move the sphere, it moves the path. Let's do the same with the rest of the nulls. We'll connect null three to sphere three. See that it works. Then do the same with null two and sphere two, null one and sphere one. Now we don't actually need to see these nulls anymore, so we can select them all by clicking their tag, choosing select label group and hide them all from the layers panel. Now, let's tag the shape layer with any color to differentiate it from the sphere layers. So after we created our scene and we control the path of the shape through the spheres, we're ready to move on and start to animate the scene. Okay. 13. Learn How to Group Layers ( Precomps ): All right. So first, let's select all the spheres. We'll select the first sphere, then hold the shift key and select the last sphere. At this stage, I know that the spheres in my animation need to be placed where they are right now. Let's say it will happen in second number one. Now we'll press P to open the position parameter and create a key frame. And now in the second zero, which is at the beginning of the animation, I want them to appear from the center. We can place them in the center using the align tool. Just make sure that the align is according to the composition, and then click here and here. New key frames were automatically created with the new location of the spheres. So what will happen now is that in second number zero, the spheres will be here and in second number one the spheres will get here. Now, in second number two, I want the spheres to go back to the center. We can do it by using the align tool again. Great, and now let's improve the animation. Question, how can we make our animation more interesting? To do that, let's select all the keyframes and convert them to easy ease by pressing the F nine key. All that's left to do now is to create an offset for the animation of the spheres so that they don't all move together at the same time. Let's decide that the four sphere will go first, so we'll select all the other spheres. Now we'll move with the time indicator four frames forward and move the keyframes here. We can also select the key frames we want to move in time and move them using a cool shortcut. We'll hold the alt key and move the keyframes to the side using the arrows on the keyboard. Let's do that with these keyframes, too. Hold the alt key and move the keyframes four frames forward with the right arrow. Okay, let's see what we got. Look sweet. Let's just change the thickness of the stroke real quick. We'll select the layer and change the stroke thickness to ten or even 12. Yep, 12 looks better. So after we finish the first animated part and before we go any further, let's group all the layers related to the animation of the first animated part into one group. In after effects, we call this precompose. Precomosing is a technique used to group layers together and treat them as a single layer. It is a very useful tool in after effects that can simplify your timeline and help you organize your project. You can then treat this precomposed layer just like any other layer in your composition and apply effects, transformations, and other adjustments to it. I cover this topic in depth in the free course I mentioned at the beginning of this course. If any of you guys want to learn more about it, you can find the link to the free course in the description below or in the PDF file. That's in the main folder of the course you downloaded from me. Okay, so let's see how it's done. First, let's hide all the key frames. Make sure we don't select any layers and press you. Now, let's show the nulls we hit earlier because they have an essential role in this animated part. Let's select all the layers, excluding the color palette as it isn't part of this animated part. Okay, now let's select the relevant layers. Right click on one of them and choose precompose or use the shortcut Control Shift C. For now, let's click precompose. We'll call it animation underscore one. Now, let's make sure that both of these are selected and press okay. We can also see the precomp we made in the project panel. Nothing has changed in the animation, and if we double click the precomp, we can enter it. Let's turn off the background and the grid. We can use the shy function again to hide the nulls and continue the lesson. Now, let's get back to our main composition. As you can see, the size of this precomp is the same as the main composition. I actually don't need this precomp to be this size because there's a lot of empty space here. I'll turn off the grid. Since I don't need all this space, I need to decrease the precomp size. To do that we need to go into the precomp and change its settings. To get to composition settings, we'll press control K. Now, let's make sure that preview is selected and decrease the size. We'll change it to 800 pixels by 800 pixels. Let's make sure I didn't make it too small. And when we go back to the main composition, we'll see that we now decrease the size of the pre comp and this will make our work more convenient. The precomp we created automatically becomes a regular after effects layer. Like any layer and after effects, the precomp layer has the basic parameters. In this case, we'll animate the scale parameter to make our animation more interesting. To see the scale parameter, let's select the layer and press. We can hide the color palette so it won't get in our way. Now let's decide that in the beginning of our animation, the size of the precomp will be zero. So I'll create a key frame with this value. I frame 15, this layer will grow to 100%. Now let's select the key frames and convert them into ECEs using F nine. Let's see how it looks. Okay. Now let's decrease the size of this layer when the animation inside this pre comp is finished. Let's get to second number two. As we learned in the previous lesson, we can copy these keyframes using Control C and paste them in place of the time indicator using Control V. Now let's flip them with a right click on one of them, go to Keyframe Assistant and select time reverse keyframes. Let's check that the timing of the scale down animation matches the animation. I think it should start decreasing a bit earlier around here. So let's move the keyframes here. Okay, now let's check it out again. All right. Let's move on. As you can see, the animation of this layer is already finished here. That is, from the second, we don't see anything, but the length of this precomp is very long. We don't really need all this length. Let's learn how to shorten the precomp. We'll go to the end of the animation and drag the layer by its corner like this or we can shorten the precomp for real. To do that, we need to go into the precomp. Now we need to find the point in time when the animation is finished. That is where's our last keyframe. For that, we'll make sure that we don't select any layers and press you. Here's the last keyframe. We'll place the time indicator here and bring the work area in place of the time indicator manually. Or using the shortcut we've learned. Press. Now to get rid of all the unnecessary length, we need to right click the gray part of the work area and select trim comp tio work area. And here, the length got shorter. And if we go back to the main composition, we'll see that the length of this prec is shorter. Let's see how it looks. The only thing that's left to do is move these keyframes to the end of the precomp. Now, I want to create the same animation, but with minor changes in the color of the spheres and the thickness of the shaped stroke. We can duplicate the animation and do everything we planned. Let's see what happens if I duplicate this precomp through the layers panel. Now I'll enter the precomp and change the color of one of the spheres. When I return to the main composition, I'll see that the color has changed in both precomps, which is not what I wanted. I only wanted to change the color in this precomp and not the other one. Okay. I'll press control Z to undo my actions, and let's see how to do this correctly. What needs to be done is not to duplicate the precomp from this panel, but through the project panel. In case we have many precomps in the project and we want to find a specific one. We can right click on the precomp we want to find, go to reveal and select reveal layer source and project. Now we will press Control D to duplicate this precomp. The precomp is not currently in our main composition because we haven't dragged it there yet. We can do that after making the changes we planned. For now, let's enter this precomp from here. Now let's select our color palette through the project panel to see the colors. Let's select all the spheres and change their colors using the eye dropper. Let's sample the red color from our palette. After that, we can change the color of our shaped stroke to yellow. Let's also set the stroke width to eight. We can restore the background to see how it looks. Now let's decrease the size of the spheres in this precomp. I will close all the layers and display the scale parameter only for this layer. See what happens when we change the size of this layer. Because it is linked to the null and the null is linked to the path, this ruins the design of the shape. Let's see how to do this properly. Let's open the layer. Within the shape layers. There are two places where we can control the size of the shape. We can control the size of the shape using the basic transform properties of the layer itself. However, we found that it didn't work for us this time. Fortunately, in shape layers, there are also basic transform properties for the shape inside the layer, which is called ellipse one. This way, our shape will shrink properly. So we'll shrink all the spheres through the shapes transform and not the layers transform. Let's shrink it to maybe 50. Or 80. I think 60 would be the best option. Let's do the same for the rest of the spheres. In order not to manually open the transform for each sphere, we can simply select the layers we want to shrink and type scale in the search bar, then press enter. Now, we see that each layer has two types of scale, the shapes transform and the layers transform. In our case, we'll use the shaped scale. Let's write 60 here. Now, we can delete the word from the search bar and continue. Now let's go back to our main composition and drag the new precomp here. Let's turn off this precomp to see the new one. As you can see, this precomp doesn't have the scale animation that exists in the first one. We can select the parameter from here. This way, we'll select all its key frames. Now let's hit Control C to copy them. Then we can paste them onto the new pre. Let's press control V. Now, let's press S to see the scale parameter and the key frames we just pasted. Note that the key frames were pasted in the same place where the time indicator was. Let's move the keyframes to the beginning of the precomp. Finally, let's turn on the first precomp again. All right. Let's move on. Now, we'll create an offset between these two precomps. Let's select this layer and move it forward in time. Let's see what we got. Looks great. Let's just position this layer under the first one. Now, to create a more interesting animation. Let's create a rotation animation for the first precomp. For this, go to the beginning of the animation and press R to open the rotation parameter. Now, let's create a key frame with the current value, which is zero degrees rotation. At the end of this precomp, let's set the layer to rotate one full rotation. Let's see how it looks. Now, we'll select the key frames and convert them into EasEs Looks better now. Let's do something similar to the second precomp. We'll go to the beginning of this precomp, press R, create the first key frame, and this time, set the layer to rotate 180 degrees. Let's select the key frames and convert them to asys as well. All right. Let's see how everything looks together. Let's see it again. Looks nice. Now, let's close the layers and slightly change the timing between the two animations. Okay. Looking good. And we are ready to move on to the next part. 14. Moving on to Design and Animate the Second Part: So now, let's create the animation of the five rotating spheres. To do this, enter the first pre comp and copy one of the spheres and paste it into the main composition. Let's also copy the sphere from the second precomp. Now let's turn off the precomps so that it doesn't bother us. Now, let's delete the animation on these spheres. Select both layers, press you, select the key frames, and use the backspace or the delete key to delete them from the layers. Next, let's center these two spheres in the composition using the align tool. Make sure composition is selected. Then we'll click here and here. Now, let's design the entire scene. Let's zoom in a bit using the mouse wheel. For those who don't have a mouse wheel, you can zoom in from here or press this keys. Okay, let's move this sphere here while holding down the shift key. Let's duplicate the blue sphere and move it here. Let's also duplicate the red sphere and move it here. Now, let's select both red spheres with shift and tag these layers and pink so we can easily distinguish between the spheres. Now let's see how we can check if the distances between the spheres are equal. To do this, we will open the proportional grid by pressing out and the apostrophe key. Now we need to go to edit and then preferences and select grids and guides. Here, we can change the number of lines in the proportional grid. Let's set it to eight on the vertical axis and press. Now we can adjust the positions of the spheres according to the new grid. Press salt and the apostrophe key again to close the grid. Now we are ready to animate the spheres. So let's zoom out a bit. Select all the spheres. And now go to second number one. Press P to see the position parameter and create the first key frame. Now go to second zero, center all the spheres using the align tool. Make sure we are selecting composition and click here and here. After that, move to second two and center the key frames again with a line. Now, let's cut these layers to the position of the time indicator because this is when the animation of these layers ends. To do this, we'll use the shortcut Alt and the right bracket. Now, let's change the keyframes to easy ease and adjust their animation with the graph editor. Select these keyframes and drag the handles here. Let's see how it looks. Looks nice. Now, let's place the red spheres under the blue ones, close the layers, and move on. And now, I want to add a rotation animation to all the spheres as they open to the sides. For this, we can use a null object. In after effects, a null object is a type of layer that does not render or appear on screen, but can be used as a reference point for other layers in the composition. It's an invisible layer that can be used to control the position, rotation, scale, and other properties of other layers in the composition. One of the main advantages of using a null object is that it allows you to control multiple layers at once, rather than having to adjust each layer individually. For example, you can parent several layers to a null object and then control the layers with the null. I am talking about this topic in depth in the free course that I mentioned at the beginning of the course. For those who want to understand this topic in depth, feel free to watch the free course. You can find the link to the course in the description below or in the PDF file in the main folder that you downloaded from me. So let's do this. We will right click here, go to new and select null object. The null is centered in the composition, and it is great. Now we can select all the spheres and link them to the null. Let's cut the null to the length of the layers of the spheres. To do this, we'll use the shortcut, Alt and the right bracket. Now let's get to the beginning of the animation, press R to bring out the rotation parameter of the null and create the first key frame. Let's move on to the second number two, and we'll set that in the second, the null will make one rotation. What we just did was add an additional animation to all the spheres with the help of the null. Therefore, all the spheres rotate while opening to the sides. Now let's make these keyframes easys let's change the animation behavior of the rotation to something like this. The nulls rotation will start slowly, and towards the second key frame, it will increase in speed. Let's see what Like. Now, so that the spheres don't just appear randomly. Let's add a scale animation to the null. We'll select the null, press, set it size to zero at the beginning of the animation. Now go to second one and set it to 100 and back to zero at the second number two. We'll change the keyframes to *** and adjust their behavior using the graph editor. Let's see it again. It looks great. Now let's improve our animation with a cool effect called echo. Let's go to the effects and presets panel. Type echo in the search bar, and now drag the effect onto the sphere. Next, in echo time, set it to -0.001. 30 for the number of echoes, and here, change it to maximum. When this sphere moves quickly, we'll see a cool trail effect. Now let's copy and paste the effect onto the other spheres. Be careful not to over use this effect as it may slow down your computer. Okay. It's a good time to save the project by pressing control less. As you can see, because we use the effect, we jump to the effect panel to return to the project panel. We can click here or use the arrows and select project panel. Now, to maintain an organized composition, let's group all the layers we have created now into one. To do this, let's select all the new layers and press Control Shift C. Now, we will name this pre comp spinning spheres. Make sure both options are selected and click. We can find this pre comp in the project panel as well. All right. Let's move on. If we take a closer look, we can see that this pre comp is large in relation to the animation it contains. Let's enter the pre comp itself and turn off the background. And now let's take care of it. Fir press Control K to access the composition settings. Now let's reduce the size to 500 by 500. Click and return to the main composition. Now, let's create the gray sphere. For this, let's make sure we don't select any layers and choose the ellipse tool. Select the fill color to be black and disable the stroke. Now, let's bring out the grid by pressing the apostrophe key to see the center of the composition. Now, let's create the sphere while holding down the Shift key. Let's center it. Now, let's switch to the selection tool. Finally, let's change the name of the layer. Select it, press enter, and call it big sphere. Then we'll press enter again. Now, let's bring up the scale parameter of this layer by pressing S. We can turn off this layer. At the second zero, the size of the sphere will be zero. At the second one, the sphere will reach 100%. At the second two, it will return to zero. Let's convert the keyframes to *** and adjust them in the graph editor like this. Let's see how it looks. I think it's very slow. Let's see how we can speed up this animation. Let's say we want the duration of the sphere animation to be 1 second instead of 2 seconds. Instead of manually moving the key frames one by one, we can simply select the key frames, hold down the alt key, grab the last keyframe, and move it to another position. That way, all the keyframes move together, maintaining an equal and precise distance between them. Let's place the last keyframe at the position of the time indicator while also holding the shift key. That way, the key frames will snap to the position of the time indicator. Now this animation lasts for 1 second instead of 2 seconds. Now let's cut this layer here because this is the moment when the animation ends and we can no longer see the sphere. We will use the short cut alt and right bracket. Now, let's create the yellow ripple. For this. First, let's duplicate this layer using control D. Then let's press S and change the value of this keyframe to 200. Now, we will enable the stroke in this layer and color it yellow. Finally, we will turn off the fill. This is how it looks for now. I think the stroke is too thick. Let's reduce it to five. Now let's move this layer a bit forward in time to create a nice offset. Let's see how it looks. It looks better now. Finally, let's position this layer under the big sphere. Let's see it again. Looking good. Okay, now and rename this layer to big stroke and tag it yellow. We can tag this layer in gray. Now let's time and sync between all the animation parts. The animation of the rotating spheres is the first animation that opens the video, so we'll leave it here at the beginning of the timeline. When this animation is finished, the animation of the big sphere will begin. Let's drag these two layers here. Let's activate them and see where it's best to place them. I think here is a good time. Let's see how it looks. It's better from here. Okay, it looks better now. And after that, let's start the animations of the shape. Let's move this pre comp here and see how it looks. It's better from here. I think it looks great. Finally, let's create the square that is supposed to be behind the entire scene. Now we can cancel the grid. Let's turn off the background and make sure no layer is selected. Then we'll go to the ellipse tool, press, and hold, and select the rectangle tool. We'll activate the fill and choose white color. Then we'll turn off the stroke. Now let's create the square at about this size while holding down the Shift key. Now, let's center it in the composition using a line. Next, we'll place this layer beneath all the other layers. I see that the square turned out a bit too large, so let's press S and scale it down. Let's write 85. Now let's round the corners. For this, we'll close the layer and open it again to see all the properties. We can close the transforms. Now we'll open the contents, open rectangle one, open rectangle path, and here we'll find the parameter to round the corners. Let's set it to 130. Okay, now let's see how everything looks together. Looks great. And now we're ready to render the scene. But before that, I highly recommend taking a ten minute break. Get up from your chair, do some light stretches, make some tea or coffee, and come back refresh for the next part. 15. Learn to Creat a GIF: In this lesson, we will render the scene and use photoshop to convert it to a gift file. For those who need to install the photoshop software. You can see how to do it in the free course I mentioned earlier. You can find the link to the course in the description below or in the PDF file found in the folder you downloaded from me. Let's prepare our scene for rendering. First thing we can do is to delete the color palette from the composition since we no longer need it. Let's select the selection tool and click here to see the hidden layers. Now, unlock this layer and delete this using the backspace key. The next thing we need to do is to adjust the work area to the end of the animation so that we do not render unnecessary parts. The animation ends here. So let's bring the work area here using the shortcut we learn by pressing the end key. Let's see that everything is playing perfectly. As you can see, we have a perfect looping animation, meaning the video ends and starts smoothly. The next thing we need to take care of when preparing an animation for the G mail signature is to adjust the size of our main composition. If we leave the size as it is now, we may encounter a problem in the next step. The video borders will interfere with placing the animation correctly in the signature. Therefore, let's enter the composition settings and adjust its size. Question, what is the shortcut to access the composition settings. To do this, we will press control K and change the size of this composition. Let's set it to 900 pixels by 900 pixels. Now click and make sure we haven't reduced it too much, meaning that all the animation remains within the composition borders. The last thing we need to take care of before rendering is to click on the collapse function located here. For those who do not see this icon, you can click here. Let me explain what it does. I'll zoom in so we can take a closer look. See what happens when I activate the function on this prep. The quality of the objects will improve. Look at this sphere up close. So let's activate it on this pre comp and also on the rotating spheres precomp. Everything seems fine, and we're ready to render. To do this, we'll go to composition and click on add TO render Q. And now we are in the render panel. Here, we see the composition we're rendering. To turn this animation into a G mail signature, we need to create a gift from this animation first. So first, we need to render our animation as an MOV file with a transparent background. Let's see how to do it. Let's click here and in format, we'll choose quick time. Now, we'll go to format options, and in video Codec, we'll choose animation. We'll click. In channels, we'll select GB Alpha. This way, after Effect knows that we want to render the video with a transparent background, we'll click. Let's click here and decide where to render the video. Of course, we will choose our samples folder. Let's make sure the name is good. Click on save, and finally click on Render. Now wait a few moments. As soon as the rendering is completed, let's open the photoshop software because that is how we will turn the rendered video into a gift. Let's go to file, click on Open, and find the animation we just rendered. It is, of course, located in our samples folder. Let's select the animation and click on Open. We'll wait a few seconds. Then here is our animation. Now let's go to file, then port, and then save for web. We'll wait a few seconds. Okay, so here we need to change a few things. First, we will choose gift here. We'll make sure the transparency checkbox is checked. In colors, you can select the maximum. This means that the gift will be of maximum quality, but the file size will be a bit larger. If you don't want the file to be too large, then select 32. I will select 256. Here we will choose none. And because we don't need this video in this size, we can click here for 50% to make the gift half its size. Now, let's wait until the render is complete. Here we can see how much the final file will weigh. Now, let's select forever and click Save. Let's choose where to save the gift. Let's save it in our samples folder. The name seems appropriate. Let's click save and wait a few seconds. Now let's open our samples folder. I will just enlarge my view here to see it as icons, and there's the gift ready. Looking good. Okay, let's go back to our project. Don't close it for now because we'll come back to it soon. Now, let's learn how to create a professional GML signature, using the animation we created. 16. Create a Gmail Signature: So the first thing they need to do is to access Google Docs. Now, let's sign in with our Gmail account. If this document doesn't open automatically for you and you see the browser in this way, click on the large plus sign and create a new document. Okay, you can close this now. Now, let's call this document Gail signature and press Enter. For our convenience, let's go to file, and then page setup. Here we will choose that the document will be borderless and we will color the page with this color. Press ok and let's prepare the signature. To do this, we'll go to insert and create a table with three columns. Now, we'll make sure that our text line is inside this part of the table. We'll go to Insert again and then image and choose upload from computer. Now, let's find our gift. We'll select it and click open, and here the gift is playing perfectly. Now, let's select the image and go to image options. Then we can reduce the size to five or even three. We can close the image for now. Next, let's strength this section and add the text we want. If we are writing a website address, we need to hit Enter after finishing writing to make the text line clickable. Then let's select all the text and change the font to Montserrat. For those who don't see this font in their list, they can go to more font, search for this font, and select it. Or you can search for it on Google Fonts. Go to the website, select Fonts, search for the font. Click on it and download all the styles to your computer or click on the plus icon of the font style you want. Now, let's go back to our signature and change the font Mont Surat. Then we can change the title to black. Next, let's shrink this section and select it to increase the stroke thickness to three. After that, to remove the other lines of the table, we can go to table options, type zero in alignment. And select zero in color and table border. The thick line will disappear, but that's not a problem. We can select it and return its thickness to three. Finally, let's click here and move the text down a bit. If we want to enlarge the gift, we can select it, go to image options and change the size to five. Once we confirm that everything looks good, we can proceed to turn it into a signature in G mail. To do this, let's log into our G mail account. Open the settings, click on see all settings and scroll down to signatures. Now click on Create New and give it a name. Next, we need to copy the signature we created in Google Docs. Let's select everything manually or use the shortcut Control A. Now, press Control C to copy it. Let's go back to the GML settings and press Control V to paste it. If you have additional signatures, you need to select the new signature you created. Now scroll down and click on Safe Changes. Finally, let's create a new message and see how the signature looks. In my opinion, it doesn't look good. The animation is too big in relation to the text. Let's fix it. For this, let's go back to the settings and edit the signature. To scale down the animation, we need to go back and edit it on Google Docs. Now select the gift, open the image options, decrease it to three, Move the text up by deleting these lines, and I think we should scale it down to two. Let's move the line closer. Now select everything using Control A. It can be closed. Then press Control C to copy it. Let's go back to the Gmail settings, select everything using Control A and delete it. Now delete all the empty lines until we reach the beginning. Now press Control V to paste it. Scroll down and click on Safe changes. Let's create a new message and check how it looks. As you can see, the signature is not aligned to the left. In order to fix this, we need to go back to the settings. We will select our signature by using Control A and choose left alignment. Let's do this again and now the signature is aligned to the left. We'll scroll down and click on Safe Changes. Let's create a new message and check how it looks. It looks great. But now let's say the client has decided to change something in the animation of the signature. They asked us to change the color of the square in the background so it doesn't blend with the white color of Gmail. Let's see how we deal with this. The first thing we need to do is go back to our project and after effects. Now, let's select the square and also select the palette in the project panel so we can sample the colors. Then let's change the fill color to a light gray color from our palette. Finally, let's render the animation again. Let's go to composition and click on add to Adobe render Q. We will render everything with the same settings as before. Let's save it in the location of the animation we have. Now select the video here and click on Save. After effects, we'll ask us if we want to replace the old render with the new one, and we will say yes. Then click on Render and after effects, we'll ask us if we are sure, and we will confirm it. However, after effects cannot render the animation even though we click. This happens because the file we want to render is still open in photoshop. So we will click and close this file without saving it. Then we will try to render it again. This time, let's use the shortcut Control M. We will select all the settings as before. And now it will work. Let's go back to Photoshop, open our new video, and export it again as a gift. Okay. This time, Let's render it with 64 colors. We will reduce it like before to 50%. Click here to activate the action, wait a few seconds, and save this gift in the place of the previous one. We will select it, click on Save and Replace. Now, let's go back to Google Docs. We will select the old gift, click on Replace image, and choose upload from computer. We will select our new gift and click Open. Finally, let's change the color of the page to white so that the new color blends well. Now, let's select everything with Control A and press Control C to copy it. Now go back to the G mail settings. Then select everything here with Control A and delete it. Now, delete all the empty lines until we reach the beginning. Now let's press Control V. Next, select the all signature with Control A and align the text to the left twice. Finally, we'll scroll down and click on Safe changes. Now let's create a new message and check how it looks. And here's our signature finally ready. And this is how it looks on G mail in dark mode. Now, let's go back to the project and continue with the lesson. You can also close photoshop. There's no need to save this file. Let's go back to our project, organize it, and render it for sharing on social media or your portfolio website. 17. Render the Animation For Sharing on Your Portfolio!: So now, let's render this animation with a nice background as a high quality MP four file, so we can share it on social media. To create a background, we will create a new solid by right clicking on this gray area. We'll go to new and select solid. Let's choose white as the color of the solid. Let's drag it under all the layers. And if you want to change the color of your solid to a different color from our color palette, you need to press control shift. This will bring up the solid settings where you can sample a different color and click. I like the previous color better, so I'll press control Z to undo the action. And now to render the video, we'll go to composition, select Add two render Q. This time, we'll choose the high quality MP four preset that is here. We'll click here and choose to save the file in the samples folder we created. For the name, we can delete number one, click Save and render. To view the render, click on the link located in the output mode. Open the video to see how it looks. It looks nice, but I remembered that we rendered the video in a composition size that was suitable for a gift. Let's return to our project and render it again with a size that is suitable for social media. If you want to delete the last renders, select them and press backspace. Okay. Now, close everything until you reach the main composition. So as you can see the composition size is too small. Let's press control K to access the composition settings and increase the size to ten 80 pixels by ten 80 pixels. Now, since we have increased the composition size, we need to increase the solid accordingly. Here's how we can do it quickly. Select the solid, right click, go to transform and select PitoCm. You can also see the shortcut for this action. Click on it, and the solid will now be the same size as the composition. Now let's render it again by pressing Control M. Select a high quality MP four format. Choose to save the file in the last render location. Click Save replace Render and. Check the video now. Looks great. Now you can show the animation you created in this lesson on social media and share it on your portfolio website. And if you enjoy the course, I would greatly appreciate it if you rated according to your experience. Also, don't forget to leave a review, so I can know if you learn something interesting in the course or not. All right, let's go back to our project and learn how to organize the project panel using folders. A folder like the one that was created automatically when we created the solid. Let's make sure we don't select anything, click on the folder icon, and now change the name to precomps. This is where we'll save all the precomps we created for this project, except for the main composition. Let's tag it in blue and put all the other precomps in the folder we created. Now we'll save the color palette in another folder called assets. So let's make sure we don't select anything. We'll create a new folder, change the name to assets and drag the color palette and the solid folder into this folder. That's the end of the lesson. Let's save the project before we close it. You can share your animation in our private community group. You can also ask me any questions there. I promise to answer any question you may have. I hope you enjoyed it. I'll see you in the next lesson. But before that, I highly recommend taking a ten minute break. Get up from your chair, do some light stretches, make some tea or coffee, and come back refresh for the next part. 18. Section 2: Project Task: All right. And now to practice what we learned. Please create this animation. You can use different colors than mine, but try to keep the animation the same. This task is meant to help you remember and understand what you've learned. Don't worry. The task won't take up too much of your time. It's designed to be doable in 2 hours only. If you have any problems or questions, feel free to ask me or your classmates for help in our closed community group. 19. Section 3: 3D Animation for Long Videos: Hi everyone. In this lesson, we will create a very cool animation by turning the layers into three D layers and creating an isometric camera angle. We will also learn how to integrate our animation into long videos for YouTube channels or long podcasts. This lesson is divided into four parts. In the first part. We will design the frame in the second part. We will create a camera and learn how to create an isometric angle. Then we will turn the layers into three D layers. The third part. We will animate our scene and render it in a high quality MOV file with a transparent background in the fourth part. We will learn how to make the animation play endlessly. Then we will organize the project before we close it. Finally, we will render the animation as a high quality MP four file for sharing on social media. After that, at the end of the lesson, you will get a small task for you to do. The task is meant to help you remember and understand what you've learned. Don't worry. The task won't take up too much of your time. It's designed to be doable in 2 hours only. If you have any problems or questions, feel free to ask me or your classmates for help in our closed community group. All right. Enough with the talking. Let's begin. 20. Let's Begin to Design the Scene: First, let's open the after effects software. As usual, we can exit from this window. Let's click on default so that we can all see the same panel arrangements. And now let's click on new composition, and now we'll define the settings for our first composition. We'll call it animation for a channel. Again, we'll work in a square format of ten 80 by ten 80 pixels, and at 30 frames per second. The duration of the composition will be 10 seconds. Finally, let's choose the background color of the composition. We'll choose a gray color and click. I remind you that if you see this red error, you need to press the caps lock key to turn it off. All right, now we click here to see the background of the preview screen and maximize the software window. We can now save the project. Let's find the folder we open for the lesson. Go into the AE folder, and name the project animation for a channel. Now let's import our color palette into the project. Double click the gray area in the project panel. Find the folder we created for the lesson and go into the assets folder. We will select the color palette and click on Import. Let's drag the palette into the composition, now press and reduce the size of this layer to 30. Let's position it here and lock the layer and hide it from the layers panel. For those who do not see the sh icon, you can click here. Let's select the layer as a hidden layer and hide it by clicking on the icon located here. Now, let's design the first object in the scene, which is the blue window panel. We will create it using the rectangle tool. We will color it in the blue color from the palette. Let's turn off the stroke and create a rectangle. Now let's center it using the align tool. For those who do not see this panel, you can find it under window. Okay, so let's click once here and here. Now, let's round the corners of the rectangle. To do this, we'll open the rectangle, also open the rectangle path, and here in roundness, we'll change it to 40. Now you can close all the properties of the layer. Now let's press enter to change the name to main shape. Press enter again to finish the action. Now, let's go back to the selection tool using the V shortcut. Now let's create the top part of this window. The quickest way to do this is by duplicating this shape using Control D. Let's change the name of the new layer to up shape. Now, change the color to dark gray from our palette. Then we need to cut off the entire bottom part of this shape. If we drag this shape from here, it won't work. To do this in the right way, we need to turn this shape into a bezier path. Let's open all the properties of this shape until we get to the path itself. Right click on it and select convert Tobi path. Now we have points that we can move and modify. I'll in so we can take a closer. All right. Let's move on. Let's erase this point using backspace or delete keys. Delete this one as well. Now, let's get rid of the curved edges. To do this, we can hold down the alt and control keys and click on this point once. Let's do the same for this point as well. Now, let's select both points using shift and move them up while holding down the Shift key. Looks nice. After finishing with the design of the top part, let's center the anchor point of this shape to its center. As you can see, it is not located at the center of the shape. Instead of using the anchor point tool, we can use the shortcut we learned, Control Alt home. And now the anchor point of this shape is centered at its center. Now, let's create the three points that are located here. To do this, let's make sure we're not selecting any layer and click and hold the rectangle tool and select the ellipse tool. We'll color the first sphere in blue. Now let's zoom in a bit and create the sphere here while holding down the shift key. To create another sphere, we could duplicate the layer itself and move it. But this time, I want to teach you another method so that all the spheres are on the same layer. To do this, we can duplicate the shape inside the layer. Let's select the ellipse here and press Control D. Now, let's open the properties of the new ellipse and move it through the position parameter like this. Now close this and open the fill and change the color to yellow. We can close this now. Now, let's duplicate this sphere again. To do this, we need to select the ellipse path. Now we can close it, select the ellipse here and press Control D. Let's move the new sphere here. Finally, let's change its color to red from the palette. Now let's change the name of this layer to spheres. Let's also center the anchor point of this layer by pressing control Alt home. We have created one layer with three spheres inside. Now, if we want to scale down the spheres, we will press S. This way, we will scale them all down at once. Let's scale the layer down to 80. Now, let's create the text layer that is supposed to be here. For this, we will take the text tool and write design. Now, let's select all the text and click here so that all the letters are in capital letters. I will change the font style to light and the color to white. For some reason, the font did not change. If this happens to you, too, just look for the font name here and change the font style from here. Now, let's click here and press Control enter to exit the text line. Now let's press V to switch to the selection tool. Next, let's change the font size to 100. All right. In the second thought, I will change the font style to thin. Now, let's center the anchor point in the center of the layer. And position this layer in the center of this shape. For this, let's activate the snapping from here. We will drag the layer from the anchor point and try to find the right position. Here, this looks good. We can now turn off the snapping. Let's set the preview screen to fit, Enlarge this window a bit and continue. Now, I want to change the shape of the panel we created. We won't be able to do it that way. Pulling it through its corners won't work because it will ruin the rounded corners. Question, what do we need to do to make this shape editable? To do this correctly, we need to convert the path of this shape to a bezier path as we did before for the top shape. Now, we can select one of the points, then select the bottom points and change the shape of the window to how you like it. This way, the rounded corners will not be affected. I'll leave it as it was. What's important to remember in this process is that after we change the path to a bezier path, we won't be able to change and control the rounded corners. As you can see, the roundness parameter no longer exists here. Just keep that in mind. Okay, so after we are happy with our design, let's select all the layers and test them into one prep. We'll use the shortcut we learn Control Shift C. Now, let's name this precomp window panel underscore one. Make sure both are selected and press. As you can see, the size of the precomp is too big. We have a lot of empty space. Let's trim this precomp. For this, let's go inside the pre comp. We can turn off the background here. Now let's open the composition settings using the keyboard shortcut Control K. Let's check preview so we can see what we're doing. Now let's reduce the size of this composition. We'll change the width to 800 and the height to 400. We'll type in 400 and press enter. That's a bit too much. Let's go back to the composition settings and change it to 600. I think maybe 500 is better. Yes, 500 is great. Let's press k or enter. Now when we return to the main composition, we can see that the borders of this pre comp have been reduced, and we're ready to move on to the next stage where we'll create the ymmetric angle. 21. Camera and 3D Layers: To create the isometric angle, we will use the camera of After effects. Let's see how to do it. First, let's create a new camera by right clicking here, going to new and selecting camera. If you want to learn more about the camera and after effects, you can watch the free course that I mentioned at the beginning of this course. You can find the link to the free course in the description below or in the PDF file in the main folder that you downloaded from me. All right. Let's move on. In type, we will choose a two node camera, and here we will choose 50 millimeters. Then we will click. Now let's open the camera options from here. In Zoom, we will write 10,000. Now, we'll open transform, and in position, we'll change it to -10,000. And now let's close the layer. Next, we will create a new null. We'll link the camera to the null. We can enable collapse for the null layer and turn off the layer because we don't really need to see it. We will only use the transform properties of this layer. But before that, it is very important to convert this layer to a three D layer so that it can work with the camera. Now we'll change in orientation to 45 here. 35 here. And 30 here. Let's close everything. Now, all that's left to do is to convert our pre comp layer into a three D layer so that the camera can see and interact with it. There it is. We've created a camera with an isometric angle. Now let's create two additional precomps of the window panels. But as we learned, in order to duplicate the precomp in a way that we can make changes without affecting the original pre, we need to duplicate the prec through the project panel. Let's find this precomp in the projects panel by right clicking and selecting reveal and then reveal layer source and project. Now let's press control D. Let's enter the new pre comp and change the text two in. Now let's duplicate this pre comp again and change the text in the new prec to motion. Now, let's go back to the main composition and drag the two new precomps into our scene. Because these two layers are not three D layers, the camera does not see them. Let's click here and convert these layers to three D layers. Finally, let's go back to the selection tool. Now, if I move this layer here, and that one there, we will see all the layers from the isometric angle. Okay, let's press Control Z and now let's eimate seeing. 22. Animate the Scene and Render it: First, let's animate this layer up and the bottom one down. We will leave the middle window panel in its place without moving it. Let's select this one and while holding control, we will also select that one. Now let's press P to bring up the position parameter. At this point in time, we will set that these layers will be located here. A second number one, we will select only this layer. Open the grid and drag it here. Now let's select the bottom layer and drag it here. At second number two, I want both layers to return to their original positions. So let's simply copy this keyframe and paste it here. Same thing with this layer. Let's see how it looks. Now I want these windows to rotate as they move. This time, we will also move the window panel in between. Let's select all these layers with shift and press R to bring up the rotation parameter. Because these layers are three dimensional layers. We have different rotation axis. We can rotate the layers on the x axis. It looks like this on the y axis. It looks like this, on the z axis, it looks like this. So at this point in time, at the beginning of the animation at the second number zero, all layers should be at this value on the z axis. Then in the next second, when they are already open, we will rotate all layers 90 degrees. Now, in the second number two, they will return to zero, just like at the beginning. Now, let's select all the layers and press you to see all the key frames we have created so far. Now let's improve our animation using *** and the graph editor. First, let's click here to isolate this layer so we can see only it. Now let's select all the keyframes and press F nine to convert them to ***. Let's see it again. Now let's change the way this animation moves over time. Let's see what I mean. First, select the key frames for the position parameter and go to the graph editor. Now let's select the middle key frames and drag the handles like this. Now the layer will start to rise quickly, make a small pause when it's in the air and then quickly return to its original position. After that, let's select the key frames of the rotation parameter and perform the reverse action. We'll make the layer start spinning slowly and return slowly as well. In case you don't see the graph like me, right click and make sure you're in the speed graph. Okay. Let's exit the graph editor and see how it looks. I love it. Now, let's do the same thing for the bottom layer. Select this pre comp and press you to see its key frames. Then we'll select all the key frames and convert them to ECEs. Now we need to adjust the keyframes for the position like this. And the rotation to behave like that. Let's see how it looks. Now, let's select the middle layer, press you to see its key frames, and unhide all the layers to see them all. Now we'll select all the key frames of this layer. Change them to Ess using F nine and adjust the handles in the graph editor like this. Let's see how everything looks together. It looks excellent. Now, let's create a nice offset for all the layers to create a more interesting animation. But this time, we won't move the key frames in that way because then the layer animations will end at different times. In our case, this time, I want all the windows panels to go back to their original positions at the same time. Therefore, in our case, it's enough to only move the key frames of the rotation parameter of this layer here, and the key frames of this layer here. Let's see it. Okay, I think we need to move this a little bit here. We can also move this keyframe a little bit. Now, let's create a shadow overlay on these windows. To do this, we can use an effect called levels. Let's drag this effect onto the middle layer and change the output white value to 200. Maybe 209. Now let's copy the effect and paste it onto the bottom layer and change the output white value here as well. Our goal here is to create an illusion of shadow. 170 looks good. All right. Let's turn off the grid. We can also close the layers, and let's see how it all looks together. Now let's see where this animation ends. To do this, we need to see where the last keyframe is in this scene. Let's make sure no layer is selected and press you to see all keyframes of all layers. The animation in this scene ends in the second number two. Let's stand here with the time indicator and press to shorten the work area to the position of the time indicator. Now let's see our animation a few times. Okay. I think the animation is moving very fast. Let's see how we can slow down all the keyframes and make the animation play for 3 seconds instead of 2 seconds. For this, let's move the work area here for now. Now let's place the time indicator at second number three. Now, we will select all our key frames. Hold down the ult key and drag one of the last keyframes to the side. In order for the keyframes to snap to the position of the time indicator, we need to press shift. Now let's press, again, to shorten the work area to the new position of the time indicator. Let's see what it looks like now. I think it's much better. Now we're ready to render the animation we created. But before that, let's press you to close all the keyframes. Let's unhide the hidden layers and delete the layer of the color palette. Then turn off the background of the previous screen. Now let's press Control M. In the output module, we choose quick time. Here in format options, we choose animation. Let's click and in channels. Question, what do we need to choose here to export the video without a background. We need to select GB plus Alpha. Let's click and choose to render it to our sample folder. We already rendered a file in MOV format, so we can see this video here. Let's make sure the name is good, click save, and render. You can click here to see the render. And now let's learn how we can integrate the animation we rendered into a long video. So let's go back to our main composition. Bring back the project panel. We can already close all the open precomps from here. Let's also close the effects panel, and we are ready to move on. 23. Make it Play Endlesley for Long Videos: So in order to see how we can integrate this in a long video. Let's create a new composition using the shortcut Control. We will call it video for a channel. Let's set the dimensions to 1920 by ten 80 pixels, leave the frame rate at 30, and change the duration to 5 minutes. Now let's change the background to black and press. Now, let's say we are currently working on a completely new project. So let's exit this composition and import the long video of the CT located in our assets folder here. Let's drag the video into our composition, and here we see the entire video. Now, let's trim the work area to the end of the video, we will cut out all the unnecessary part by right clicking on the work area and then selecting Trim Comp to work area. Now, let's imagine that this is a video we want to upload to one of our social media channels, and we want to add, let's say, a logo animation to it. Let's use the animation we created to learn how we can make the animation play seamlessly till the end of the video. So first of all, let's import our render. We can find it in the samples folder, select it, and click Import. Now, let's drag the render into the composition above the video layer, there we see that the video is indeed without a background, which is excellent. However, because the duration of the animation is only 3 seconds, we stop seeing this layer at this point. I need this animation to play until the end of my video. Let's zoom in a bit on our timeline and see how to do this. Since our animation plays in a perfect loop, meaning it ends and starts exactly at the same point, we can use a cool trick to make it play endlessly. For this, we need to place the time indicator here while holding the Shift key. We can turn off the video layer for now. Now, let's right click, go to time, and choose enable time remapping. Now we need to make sure that the time indicator is one frame before the key frames we see. If you are standing on the keyframes, move one frame back like this. And now we will create another keyframe at this point in time by clicking here. Now we need to delete this keyframe. And now we will create an expression for these keyframes. Expression is a piece of code that you can use to automate and control various properties of your animation. It is a powerful tool that enables you to create complex animations without having to manually keyframe every single element. In order to create a new expression, we need to hold down the Alt key and click on the stopwatch of the time remap parameter. This will open up the expression line code. Don't worry. We don't need to write anything. We will use a built in expression. To do this, let's click on the small arrow here. Go to property and choose this expression. To finish the action, let's click here on the side. We can step back a bit, and now let's extend this layer to the end of the composition. Now, everything that happens between these keyframes, which is basically our entire animation will repeat itself until the end of the composition, and there you have it, our animation playing endlessly. We can now turn back on the video, and now let's press S and scale down the layer. Let's move it here to the side. We can shrink it a bit more. Let's press the apostrophe key to see the grid. This will make it much easier for us to know where to place the animation. And here on this side, you can add the address of your website. You can place it here. Let's close the grid. So basically, we have created an animation that can be your channel's logo, which can play until the end of your video. Okay. Now, let's create the infinite loop again. But this time we'll use the composition of this animation instead of the rendered file. Let's turn off our render file and insert our main composition called animation for a channel. But before that, let's enter it and trim the work area to the end of the animation because we don't need the rest of the timeline. Otherwise, the expression won't work. So right click and choose Trim Comp to work area. Now, let's go back to the video composition and drag the animation here, just like we did with the rendered file. We need to place the time indicator here while holding the Shift key. Now, let's click, go to time and choose enable time remapping. We need to make sure that the time indicator is one frame before the key frames we see. Now, we'll create an additional keyframe at this time by clicking here. Now we can delete the last keyframe and while holding down the Alt key, click on the stopwatch of the time remap parameter. Now, let's click on the small arrow here, go to property, and choose this expression. To finish the action, let's click here on the side. We can zoom out, and now let's extend this layer until the end of the composition. Now, you may be asking, why didn't we do this from the beginning. Why did we have to render it as a MOV file without a background and not use the composition itself. The reason is that if we use the original composition, it will slow down your computer and your editing workflow. Especially when you are working on long videos, such as screen recordings of computer games or podcasts. Therefore, I do not recommend using compositions directly. It's better to render your animation and use the MOV files in your video editing projects. Okay, so I'll place this composition here. And before we finish, let's organize the project panel. First, let's make sure we don't select anything and create a new folder called assets where we will put the solids folder, the color palette, the video, and the render of our animation. Next, let's make sure again that we don't select anything and create another folder called prep. We'll put all the precomps we created in the project in it, except for the main composition, which we in blue. Now we can close this composition from here. Now, let's render this animation as a high quality MP four file that we can share on social media. But before that, let's create a background. To see the palette, we will open the assets folder and select the palette so that we can see it from here. Now, let's create the solid and color it in this color. We will click Okay, move this layer below all layers, and now let's press control M. We can see here the previous render. We can close it now. This is the new render. Let's choose H 0.2 64 40 MBPS, and now we will choose to render it to the samples folder. We will delete the number one from the name and click Save and render. Let's see what we've got. It looks excellent. Now you can share the animation you created on social media and post it on your portfolio website. If you enjoyed the course, I would greatly appreciate it if you could rate this course according to your experience. Also don't forget to leave a review so that I know if you learn something interesting in the course or not. All right, let's press escape to exit the video. We will return to the project, exit from here and close it. Before you close the project, let's not forget to save it. Let's press control, and that's the end of the lesson. I hope you enjoyed it. You are welcome to share your video in our private community group, and of course, you can ask me questions there. I promise I will answer any questions you have. We will meet in the next and final lesson of this course, in which we will create an exciting loader animation and see how we can present it on our portfolio website like a prose. But before that, I highly recommend taking a ten minute break. Get up from your chair, do some light stretches, make some tea or coffee, and come back refresh for the next part. 24. Section 3: Project Task: All right. And now to practice what we learned. Please create this animation. You can use different colors than mine, but try to keep the animation the same. This task is meant to help you remember and understand what you've learned. Don't worry. The task won't take up too much of your time. It's designed to be doable in 2 hours only. If you have any problems or questions, feel free to ask me or your classmates for help in our closed community group. 25. Section 4: Loader Animation for Your Portfolio: S S Hi, everyone. In this lesson, we will create a super cool loader animation and learn how to present it in our portfolio website. This lesson is divided into four parts. In the first part. We will design the scene and start to animate it. In the second part. We will learn advanced methods to improve the animation. In the third part. We will create the ending of the loader animation. Then in the fourth part. We will prepare the animation for sharing in our portfolio. Finally, we will render it in high quality MP four format and organize the project before we close it. After that, at the end of the lesson, you will get a small task for you to do. The task is meant to help you remember and understand what you've learned. Don't worry. The task won't take up too much of your time. It's designed to be doable in 2 hours only. If you have any problems or questions, feel free to ask me or your classmates for help in our closed community group. All right. Enough with the talking. Let's begin. 26. Let's Begin to Design the Scene: Okay. Let's open the after effects software. As usual, we can exit from this window. I will enlarge the software window. Now let's click on default so that we can all see the same panel layouts. And now let's create our first composition. We will call it downloader animation. We will work in a square format of ten 80 by ten 80 pixels. This time, we will work at 60 frames per second. The duration of the composition will be 10 seconds. Finally, we will select a gray background color and click here. Now, let's bring back the project panel. If you don't see it from here, then just click on the arrows and shoes Project. Now, let's save the project. Let's find the folder we opened for the lesson. Go into the A folder and name the project animation for portfolio. We have no problem with the file name being different from the name of the first composition we created. Now let's import our color palette into the project. Double click on the gray area in the project panel. Now we can find the folder we created for the lesson and go into the assets folder. Let's select the color palette and click Import. Let's drag the layer into the composition, Press and adjust the size of this layer to 30. We'll place it here and to avoid it getting in the way. We can lock the layer and hide it from the panel. For those who don't see the shy function icon, you can click here. Let's mark the layer as a hidden layer and hide it by clicking the icon located here. Now, let's start creating the large circle on which the smaller spheres will move. To do this, we'll press and hold the rectangle tool, then select the ellipse tool. Let's turn off the fill. And color the stroke black from our palette. For now, we'll change the stroke weight to ten. Of course, we can change this later. Okay, let's create the circle while holding down the Shift key at about this size. Now let's center the circle to the composition center using the control home shortcut. Now let's increase the stroke weight. We'll change it to 30. Now we can go back to the selection tool, so let's press V and change the name of this layer to stroke. We can close the layer and lock it because we won't touch it anytime soon. Now let's create the first small sphere. Let's select the ellipse tool, and this time we'll turn on the fill. We'll color it blue and turn off the stroke. Now let's zoom in a bit to the large circle and try to create the small sphere with the same size as the stroke weight of the large circle. Something like this. Let's press V to return to the selection tool and change the name of the layer to sphere one. If this circle doesn't come out at the right size, you can press to scale it down. I will not change the size, so I'll press control Z. Let's return the screen to fit. Now, let's animate the sphere. It will move to the big circles form like this. Okay, let's get closer. Press the space bar, hold it, and drag the screen down to see the top part of the screen. Press the apostrophe key to open the grid. Now let's place the sphere here and use the align tool to center it in the composition. M get a little closer and move the circle here. And now to make the sphere move, we will create key frames for the position parameter. Let's select the layer and press P. At the beginning of the animation, we know that the sphere needs to be in the position it is currently in. Let's create the first keyframe at second zero. A second one, let's move the sphere here. To place it exactly in the center of the composition, we'll use a line, and now at second two, we'll move the sphere here. Again, we'll use the line to center it in the composition. Now let's get a little closer and move the sphere slightly to the left. All right, let's move on. So now at second three, let's move the sphere here. And with the line, we'll position it exactly in the center of the composition. We can lower the sphere a little. And now at second four, we want the sphere to return to its original position. To do this, we can copy the first key frames and paste them here. Let's see how it looks. Obviously, it doesn't look very good because the path we created for the sphere animation is straight and not rounded. Let's see how we can round the path of this animation. First, let's go to the point on the timeline where the sphere is not on any of the keyframes, so we can see all the points of the path. Now to round the corners, we need to use a tool called convert vertex tool. Let's long press on the pen tool, and here it is. We can choose the tool from here or use a shortcut. Let's do it using the shortcut. Let's say we didn't choose the Pen tool and we're using the selection tool. All we have to do is select one of the points. Hold down the control and Ault keys, and then click the point once. And now this point has become rounded. With the handles we have now, we will control the curve of the corner. We'll do this again in a moment. Okay, so for now, let's also select this point. Hold down the control and Ault keys and click this point once. Now, let's drag this handle to the right while holding down the shift key to move the handle in a straight line. Let's do it on this side too. Let's do it here as well. We can press alt and the apostrophe key to bring out the proportional grid. That way, we can see that we move the handles relatively accurately. And besides that, we can always check how it looks while in motion. I see that in certain parts the sphere is deviating from its path. For this, we will continue and arrange its path. In the meantime, let's turn off this grid. Let's press alt and the apostrophe key. Now, let's get a little closer and see how we can fix it. Okay, so at this point, this sphere is already starting to deviate from its path. So let's grab this handle and adjust it. If we can't adjust the path properly with one handle, we can also make this point rounded and navigate the curve with its handles. Let's select it, hold Control and Alt and click on this point once. Now we have an additional handle that we can control. Let's do the same on this side. Let's select it, hold control and alt and click on this point once. But as you can see, we didn't get a handle like before. That's because there are two points one on top of the other. In the meantime, we can move this point here. Let's make it a regular point and not rounded. Let's hold control alt and click on it once. Now let's select this point and make it rounded. And let's adjust it together with this point. And most importantly, when we're done, we need to return this point exactly to its original position. This way, we avoid jumps in the animation loop we'll create soon. Okay, let's set the screen to fit. Let's stand here with the time indicator and shorten the work area here using the n key. Now let's see the animation playing in a loop. I see there's a little problem here. We can zoom in and rearrange the handles. Now it looks great, and we can move on. Now I want to shrink this sphere a bit. Let's get a little closer. Select the layer, press, and let's shrink it to 85. This way, this sphere will always appear within the circles path. Okay. So after we've fixed the path of the small sphere, let's improve its animation. We can this layer, set the preview screen to fit, and move on to the next part. 27. Advanced Animtion Methods: So in order to improve the animation we created, we will first smooth out the keyframes by convert them to EZ Es keyframes. Let's select the layer, press you to see all the keyframes, select them, and press F nine. Let's see how it looks. Okay, now the animation doesn't look so cool. Let's see how we can improve this. Let's get closer. We'll move the screen over here and learn how to do it. First thing, I know that in this keyframe, this sphere needs to move very quickly upwards. To do this, let's go into the graph editor. Make sure we're on the speed graph. And now let's drag this handle over here and this one over here. This caused the sphere to move very quickly at the beginning of this keyframe. Now I want this sphere to descend quickly when it reaches this keyframe. Let's select this keyframe, drag this handle over here, and this handle of this keyframe over here. Let's see how it looks. Looks great. Let's change the sphere's color to white for now, so we can see it better. Now let's select the position parameter again from here, so we can see the keyframes and continue. Now I want this sphere to not stop at this point. To do this, let's select this keyframe, press it twice and select continuous. Click Okay and move this keyframe upwards. Let's see how it looks. I raised it too much. Let's get closer. And now let's lower it a bit. Now it looks great. After that, at this point, the sphere needs to continue its movement quickly. Let's see how we can do that. Let's exit the graph editor. We can turn this keyframe into a continuous keyframe to achieve this. I will zoom in on the keyframe so we can see what we're doing. As you can see, the keyframe is currently an ease and keyframe. If we hold down the control key and click on the keyframe once, it will return to a regular keyframe. But if we click on it again while holding down control, it will change to a continuous keyframe. So let's see how it looks. So when the sphere reaches this point, it doesn't stop, it continues its movement. Now, I also don't want there to be a stop in this part. So either we will turn this keyframe into a continuous key frame or return it to a regular keyframe. We'll hold down control and click on this keyframe once. Let's see how it looks. One more time. It looks good. But now let's try to make this keyframe a regular keyframe and the other one, a continuous keyframe. I think it will be better this way. Let's leave it like this and move on. We will turn the last key frames into a continuous. We'll hold down control and click at once. Let's see how it looks. Okay, I think we'll return this keyframe to continuous and this one to normal. I intentionally show you this process because when we animate something, we always change the key frames until we find something we like better. This is a normal workflow and after effects. Okay, after we're done with the keyframes, let's time the animation and move them on the timeline until we reach the animation speed we're satisfied with. So, first of all, right now, this animation lasts for 4 seconds. That's too long, which causes the entire animation to look slow. Let's shorten this entire animation. For this, let's select all the key frames we have. We'll stand at the second number two with the time indicator, hold down the alt key and drag the last keyframe while also holding down the Shift key. Let's see how it looks. Now, I want all the motion happening in the lower part of the circle to speed up. For this, let's select the last three key frames. Now, hold down the Alt key and drag the last keyframe. Let's say to frame 30. Let's see how it looks. I think it's great. Now, let's make this sphere repeat the same animation again. I want this sphere won't stop when it reaches this point. I want it to keep moving upward. For this, we can select this keyframe and all the keyframe that come after it. We'll copy them by pressing Control C, and paste them here for now in the second two. Let's see how it looks. Looks nice. Now, for better movement, let's convert this keyframe to a continuous key frame. Question, how can we convert a key frame to a continuous key frame? To do this, we'll hold down the control key and click on this keyframe once, and then again. Let's see what comes out. I also notice that there will be a small problem here because the keyframe here are of a different type. Let's make it continuous too. And the last one continuous. Let's see what comes out. Now let's make the sphere do in another jump. First, let's extend the work area. And as we did before, when we copied all the animation from this key frame. We can now copy these keyframes from here because it's when the sphere starts to rise, stays in the air, and then quickly descends. Now, let's go to frame 30 and paste them here. Somehow these keyframes became easy ease. It's not a problem. Let's convert them to continuous keyframes. Now let's see how everything looks together. In my opinion, the animation is slow. Let's shorten it a bit. For this, select all the key frames. Let's say we want the entire animation to last until second number four. Hold down the lp key and drag the last keyframe while also holding down the Shift key. Note that as we move this keyframe, it became easy ease. For now, it doesn't bother us. We will take care of it later if needed. For now, we are just checking the speed of the entire animation. It looks great. Now I want the animation that occurs in the bottom part to be fast and smooth. What we can do is to bring these keyframes close to each other like this. Let's do this in all the parts where the sphere is in the bottom of the animation. Let's see how it looks. In my opinion, we can speed this up even more. Let's get those key frames close to each other even more. Let's see it again. Okay, now it looks much better. Let's make this sphere do another rotation. For this, let's go to second and 30 frames. We will copy all the key frames from this sphere and paste them to the position of the time indicator. Let's change these keyframes to continuous key frames. After we finish with this animation, let's make the sphere enter the frame in some way because it can't just stand here and then jump. It doesn't look good. For example, from this point in time, we can create a scale animation for the sphere. Let's press S and create a first keyframes here. Now, let's press you to see all the keyframes on this layer. Now, let's go back in time a bit, for example, to here and make the sphere size zero. We'll convert these keyframes to asyEas and see how it looks. I think it looks good. Now that we're starting to see the sphere from this moment, we don't really need all the beginning part. But to save the animation and prevent damage, we won't delete the key frames. We'll just shorten the layer. We can either manually shorten the layer or use the short cut lt and left bracket. And now what we can do is create an animation of the disappearance of the sphere. For this, we can copy the key frames of the scale parameter that we previously created. After that, paste them at the end of the animation and reverse their order by right clicking on one of them, accessing the keyframe assistant and selecting time reverse keyframes. Because at this point, we no longer see the sphere, we can cut the layer. Let's stand here with the time indicator and press Alt and write bracket. Now let's improve our animation with a cool effect that we used in the previous lesson, called echo. Let's go to the effects and presets panel. Type echo in the search bar. Drag this effect onto the sphere. Here we write -0.001. Here we write 30, and here we change it to maximum. Now, when the sphere is moving at high speed, we will see a cool trail effect. This effect can be a bit heavy on your computer, so be careful not to overuse it with too many duplicates. Now let's color the sphere in blue, just like it was at the beginning. We'll select the layer, go to fill, and sample the blue color using the eye dropper. Then we'll press enter. Excellent. Let's zoom back in and now let's duplicate our sphere two more times. But before that, let's arrange the preview screen for a better workflow. And now, we'll select the layer. Next, we'll press Control D. Finally, we'll color the new sphere in yellow. After that, we'll duplicate it again and color it in red. Now let's create an offset between all the spheres. Let's move those two layers over here. To be precise, we can count how many frames we moved exactly, using a shortcut. We'll hold down the control key and press the right arrow on our keyboard. Okay, so we move ten frames exactly. Now let's select only the layer of the red sphere. Now, move it ten frames using control and arrow keys on the keyboard. Now let's move the layer over here. Let's see how it looks. Looks great. Now I want to teach you something important. Let's say we decided to reduce the thickness of the stroke of the big circle to ten. Now the smaller spheres are too big compared to the new stroke. If we reduce these layers through the scale parameter, because this parameter already has key frames, we will create unnecessary key frames and ruin the animation. Let's see how to do it correctly. The right way to do it is to open the contents of layer and reach the transforms of the ellipse itself. We can do this quickly for all layers together by selecting all of them, typing scale in the search bar, pressing enter, and shrinking the spheres through the transform of the ellipse and not through the layer scale. You see, there's no keyframes on the scale parameter. We'll write 50 here. We'll write this also in the second and third spheres. Now we can close the search bar, and there we have shrunk the spheres without affecting the animation. All right, let's move on. Now let's increase the stroke thickness of the large circle. Maybe to 20. It's too big. Let's write 15. 15 is excellent. Now I see that the offset I created is too large. So let's bring the layers closer together like this. That's better. Looks nice. By the way, if you don't like the effect, you can turn it off from here. Let's see how it looks. Okay, I like how it looks with the effect. That's it. We have animated the spheres, and now let's proceed to animate the stroke of the large circle. But before that, I highly recommend taking a ten minute break. Get up from 28. Finishing to Create the Loader Animation: So first, let's label this layer with any color so we can distinguish it from the other layers. Now to animate our stroke, we will open the layer, open the contents as well, select the ellipse, and add an effect called trim paths. Let's position the screen so we can see the circle. Now, when we open the effect, we see a parameter called end, which we will animate. Let's go to the beginning of the animation and set the value of the n parameter to zero. In second number one, we'll change it to 100. Let's see how it looks. Excellent. Now, as you can see, the corners of our stroke are straight. I don't think that looks very nice. Let's see how we can round them. To do this, we will open the stroke parameters and change the line cap to round. Let's change it here to round as well. Now it looks a bit better. Okay. Let's close the stroke and improve the animation we created with ***. Select the key frames and press F nine. Now, let's hold down the Alt key and double click one of the key frames to access keyframe velocity. We'll change it here to 85 on 85 and click Okay. Let's see how it looks. Okay, let's close it and continue to create the V icon animation. The animation of the V icon is supposed to start when the small spheres finish their last rotation. Let's stand at the point where the blue sphere finishes its animation. Let's get closer. Make sure we are not selecting any layer and choose the pen tool. From this point, we will create the shape of the V shape. We can move these points later on. In the meantime, let's turn off the fill for this shape, and let's choose that the stroke will be in blue. Next, we will change the thickness to 15, and we will round the corners of this shape as we did before. For this, we will open the stroke parameters and change the line cap to round, and so that the connection will also be round. Let's change it here to round as well. Now it's rounded here too. Let's close the layer. Now, press enter and change the name to V one. This layer is supposed to start from here, so we don't need all this part here at the beginning. Let's cut it to the position of the time indicator by pressing Alt and left bracket. And to animate this shape, we will use the trim paths effect again as before. So let's open the contents, select the shape, go to add and choose trim paths. Again, we will create keyframes for the nd parameter. We can adjust the composition panel for a better workflow. At this point in time, let's create key frames with a value of zero. And now let's move 1 second forward. If we are now on the fifth and 19th frames, let's move to the sixth and 19th frames. Let's create key frames with a value of 100. Now, let's make the key frames as this time, we will change the velocity through the graph editor in such a way. What we just did now is time the animation of the v icon to the animation of the sphere's ending. That is, when the blue sphere shrinks down, the first v shape begins to appear. Now, let's focus on this part of the shape. We don't want this part to stay here. This part needs to be inside the sphere. Let's see how to do it. First of all, let's go back to the selection tool. And now let's also adjust the start parameter. We want the shape animation to be as it looks now up to this point. So let's create a keyframe here with the current value. And when the shape completes its animation, we want this part to move inside a bit. Let's write 20. Let's also convert these keyframes to Easy Ease and see how it looks. I think this animation should start earlier. That looks better. And now we can also change the velocity of this animation through the graph editor like we did before. Let's check how it looks. All right. Let's move on. Okay. So now if we want to change the shape a bit, we can take the pen tool, select one of the points, and move it wherever we want. Let's move this to, something like that. Now, let's duplicate this layer two more times. But before that, let's cut this layer to the point the animation ends. The animation ends here. Let's press alt and the right bracket to cut it. Now close all the layers. Go back to the selection tool, and duplicate the shape. Now let's change the color of the new V shape to yellow. One more time, let's duplicate this layer and change the color to red. And now, I want the blue v to be on top of everyone, so let's move the layer of the yellow V underneath it, and we'll place the red V below the yellow V. Next, let's create an offset for these layers in this way. Let's move it a bit further away. Let's see it again. I think this whole animation is running very slowly. So let's select all of these layers. Press you. Select all the key frames. And now, hold down the Alt key and drag the last key frames of these layers here. Now it looks better. If you want to keep these layers for a bit longer, you can extend them like this. Let's see it again. Okay, now let's finish this animation by closing this circle. We'll do it using the trim paths effect. Let's adjust the preview screen and close these layers. Now, select the circle and adjust the composition panel like this. Now, let's open the layer and for those who can't see the trim paths effect. You can open all the parameters here until you see the effect. This time we will animate the start parameter. Let's decide that the closure will start at the point where all the V shapes disappear, which is at 6 seconds and 50 frames. At this point in time, we will create key frames with a value of zero. Now let's adjust the work area a bit. Now we'll move 1 second exactly forward. If we are now at 6 seconds and 50 frames, let's reach 7 seconds and 50 frames, and we will create key frames with a value of 100. Now let's convert these keyframes to asys And this time will change the velocity through the graph editor in a way that the animation will start slowly and towards the end, it will increase in speed. Now, in order to make the animation we created play in a perfect loop, let's go to the point in time where we can still see a small part of the stroke of the large circle. This is a good point in time, because as you can see, we see a little piece of the stroke. And now let's shorten the work area to this point in time by pressing in. Okay. Now let's go back to the beginning. Press you and move those two keyframes back a bit so that the animation starts where we can already see this small part. What will happen now is that when the animation ends, it will start smoothly from the same point it ended. Now, I want to show you what it would have looked like if we didn't do this and finish the animation when the stroke completely disappeared from the screen. Also in the beginning, if we didn't move the keyframes a bit. I will bring the animation back to how it was in the beginning. You don't need to do it with me. It would have looked like this. Pay attention to the animation when the video ends. There is a small and unpleasant cut in the animation. Let's see it again. That's why we finished and started the animation when we see this small piece. All right, I will bring it back to normal now. And with this, we've finished preparing the loader animation. Let's press control to save the project and move on to see how we can present this animation in our portfolio like a P. 29. Share it on your portfolio like a pro: In the first step, let's create the shape of the iPhone. To do this, we will use the Rectangle tool. Now, let's make sure we are not selecting any layer and change the fill color to white. Next, we will color the stroke in light gray from our palette. One important thing to know before creating the iPhone is that if we want to create a shape and specific dimensions, in our case, 1,920 pixels in height than 1080 pixels in width, to create the shapes symmetrically and then change the dimensions of its path. I will show you what I mean. So let's create a symmetrical square shaped by pressing the shift key regardless of the size. Now, let's open the parameters of the shape we created here. We will open the path and enter precise dimensions in the parameter called size. Let's open the lock of the dimensions. And now here in width, we will write 1080 and in height we will write 1920. Now, let's lock the dimensions back again and reduce it through one of the values. That's enough. From here, we can round the corners. 60 seems perfect to me. Now, let's increase the stroke to 30. After that, Let's press Enter and change the name of the layer to iPhone. Let's move it below all layers. Now centered this layer to the composition using the aligned tool. Let's see if it fits well with our animation. In case we want to increase the height of our iPhone, we can go back to the size parameter of this shapes path, will unlock it and change its height from here. Now let's lock it back again and close the layer and move on. The next thing we'll do is to group all of these layers into one pre-comp. So let's select all the layers. Press Control, Shift C, call this pre-comp iPhone screen and press. Okay. Now let's go back to the selection tool. And as you can see, we have a lot of empty space here. Let's reduce the size of this precomp. For this, we'll enter the pre-comp. We can turn off the background, then press Control K and reduce the width of this composition. 540 looks good to me. And now, since this entire section in the timeline is unnecessary, we can cut it off. For this right-click on the work area and choose trim comp to work area. Let's go back to the main composition and move on. The next thing we'll do is change the size of this composition we're currently in. For this press Control K, change its width to 1920 pixels and press Enter. It's important to note that we didn't change the size of the iPhone pre-comp. This pre-comp is the size we set it earlier. We change the settings of the composition called downloader animation. Alright, let's move on. Now let's enlarge this pre-comp selected and process. Let's scale it up to 200. Let's place it here. And now, if I get closer, Note that the quality of objects within this precomp has decreased. Question, what should we do to maximize the quality? For this, we need to activate the collapse function, which can be found here. Let's click here and immediately we can see the difference. Okay, let's continue. I think this size is too big, so let's reduce it to 150 or maybe 130. Now let's press the apostrophe key to see the grid. This will make it much easier for us to design the scene. Now let's create three spheres here. We can create it using the ellipse tool. Let's press and hold here, released to click and select the ellipse tool. Now let's make sure we don't select any layer. Because if we select a layer and tried to create a sphere will end up with a mask, and that's not what we want. Let's press Control Z to undo the action. Now, let's make sure we don't select that layer and create a sphere around here. Let's turn off the stroke. Choose the fill color and blue. Next, let's select it in process, then change the value to 50 or 30. That looks better Now let's go into the contents of this layer, select the Ellipse and duplicate it. But before, let's zoom in a bit and adjust the preview screen so we can see the sphere is better. Now select the Ellipse and press Control D. Next, let's open the transform of the new ellipse and move it using the position parameter. Finally, let's change the color of the sphere to yellow. Before we duplicate it again, we must select the Ellipse Path first, then select the Ellipse and press Control to duplicate it. Finally, let's move the new ellipse here and change the color to red. Now, let's change the name to three spheres. Next, let's take the text tool. Set the preview to fit and write loading screen for an app. Let's press Control a to select all the text, choose your font we like. Change the size and adjust the leading a bit. Now, let's press Control Enter to exit the text line. Let's color the text with our light color from the palette and place this layer below all the other layers. Finally, let's go back to the selection tool and move the text down here. Let's align the spheres here. We can center them using a line. Now, let's duplicate the text layer. We'll move it up and here you can change the text to your name. Will reduce the font size, will change the weight to something lighter. Now, let's click here. We'll choose the selection tool and move this text here. At this point, we no longer need the color palette. So let's display it in the layers panel and delete it from here. Now we can hide the grid. So let's press the apostrophe key. Now, let's create a solid that will serve as our background. For this. Let's press Control Y will make the background color blue but slightly darker. Finally, let's place the solid layer below all the other layers. Now let's improve the look of our scene using an effect called drop-shadow. We will apply this effect to the iPhone's precomp. Now sample the background color and make it darker. Next, Let's increase the opacity up to 100. Distance, will change it to zero and will increase the softness, let's say up to 300. I think the color is too dark. Let's brighten it a bit. With this. We finished the design of this scene. Before rendering it, let's review the entire animation from start to finish to check for any errors. I noticed the spelling error. So let me fix that quickly. Let's see it again. And now let's use this opportunity and practice one more time to adjust the thickness of the stroke of the big circle. So let's select the Selection Tool and go into the iPhones precomp. Now let's zoom in a bit, select the desired layer and increase the thickness to 25. And now, we also need to increase the size of the spheres. Remember, we need to enlarge them through the transforms of the shape and not the transforms of the layer. To do this quickly on all layers, Let's select all the spheres, layers, and type scale in the search bar. And of course, we won't scale it through the layers scale, but through the shape scale. Change it to 85. Let's close the search bar. Now because we enlarge the spheres, we need to adjust the size of the V shapes accordingly. So select that layer and increase the stroke to 25. Finally, let's also change the stroke size for these two layers and see how it looks. It looks great. So now we can close this pre-comp from here and rendered the animation we made. So let's press Control M to access the render panel, we'll choose to render it in high-quality h point to 64 format, which is high-quality mp4 and will choose to render it to our samples folder. Let's just change the name to animation for portfolio and click on Render. Let's wait a few moments. Okay, now let's see what we've got. Looking good. Now you can share the animation you created on social media and post it on your portfolio website. Presenting a loader animation like this is much more impressive than using it as a static image. And if you enjoyed the course, I would really appreciate it if you read it, it based on your experience. You can also write a review so I know if you learn something interesting in the course or not. Okay, let's go back to our project and organize it. Before we close it, Let's create a folder called assets. Next, let's make sure we don't select anything and create another folder called pre-comps. Now inside the Assets folder, we will drag our color palette and the solids folder. And into pre-comps, we will drag the iPhone pre-comp. Finally, let's label our main composition in blue. And now you can click here to make the arrangement even more organized. Now let's press Control S to save the project. And now you can close it 30. Section 4: Project Task: All right. And now to practice what we learned. Please create this animation. You can use different colors than mine, but try to keep the animation the same. This task is meant to help you remember and understand what you've learned. Don't worry. The task won't take up too much of your time. It's designed to be doable in 2 hours only. If you have any problems or questions, feel free to ask me or your classmates for help in our closed community group. M 31. Closure: And with this, we have finished the course. You can be proud of yourself because you have taken the first step in the world of motion design and have learned a lot of new things that you already can use in your next project. You can share your video in our private community group, and of course, you can ask me any question there. I promise to answer any question you may have. I hope you enjoy this course, and I can wait to see you in the next one.