animation | Shantelle-Ellyse Creative Media

The motion graphic that I created.

Welcome back readers! Today is a rather exciting blog as I am going to teach you how to make a motion graphic, this is actually really cool to do and up above I have posted a clip of the graphic that I created so you can have a quick look at that to see what the final product is supposed to look like at the end of the tutorial!

Step One: Adobe Illustrator

The first part of the process for me was creating each object on Adobe Illustrator, this step can be optional depending on whether or not you want to use your own artwork or if you want to use images for google (in which case you can skip to part 2 and begin from Adobe Photoshop). For me I really enjoy using Illustrator so what I did was I found an image on google of what I wanted , for example the UFO cartoon, and then using the Pen Tool I drew around each segment of it and then used the colour dropper tool to match the colours and then I managed to make the image that I wanted. I proceeded to then also do this with the aliens that I wanted to feature as well. Once you have created your design, delete the google image that you were tracing so you only have your copy on screen and then you want to go to the bar at the top , select ‘view’ and then select ‘transparency grid’. This will make the background transparent so then it will only be the artwork that gets exported. Finally, save your image and get ready for the next step.

Step Two: Adobe Photoshop

In this part, you are basically collating all of your images together on Adobe Photoshop to create the vision of what you want the overall thing to look like. The background image of mine is something that I got from google but then the UFO and the aliens are all what I created on Illustrator and dragged onto Photoshop. I wanted to include some text as well so I used Dafont.com to find a font that would match the style that I was going for, thus ‘Alien Invasion’ was designed. Also, whilst putting it all together on photoshop make sure that each item is its own individual layer as this is important for the final step.

Step Three: Adobe Premier Pro

The final part (AKA the most important part) is where all the magic happens as here is where we take the graphic and add the motion. The programme that I used for this part is Adobe Premier Pro which is really good for editing and making videos. The first thing that you want to do is import your Photoshop file and then when it asks you about layers, make sure to select the option that separates the layers. Your screen will be split into about four different sections but you can adjust the size of each section depending on which part you are focusing on.

In the bottom left corner of the screen will be each item from the Photoshop file that you have imported and you can then drag each item separately onto the timeline in whatever order you want. To keep things simple, drag each item onto a different line so then you can focus on each one easier. From here you can then select each clip and adjust the length of it for however long you want it to last on the screen. In the screenshot below you can see the simple timeline that I created.

Adjusting the videos on the timeline enables a simple motion graphic but to make it more exciting you can play around with different effects on each clip to edit the movement. If you select a clip and then select ‘effect controls’ which is on the upper left of the screen you can then change things such as the position, scale and rotation. You need to actually click on the words (as you can see in the screenshot below they are blue as I have selected them which means that the changes you make will actually work).

Using the effect controls to move the items around.

Then if you notice the blue line going down the screen that indicates the point in the video that the clip is at. If you move the blue line then on the right side of the screen you will also see the video moving. Place the blue line where you want it and then proceed to make your effect changes, for instance if you hover over the numbers next to position and then either increase or decrease them then it will move the item horizontally and/or vertically. It then leaves a small diamond so you can see where effects have been inputted. You can then press the play button and see if you like it or not, if you don’t you can simply delete the effect that you added by selecting the diamond and pressing the backspace button on the keyboard. All you need to do is repeat this over for any other effects that you want on the clips and then you will have created your motion graphic.

*Blog update for my Image Creation module.

Welcome back readers! So my last post focused on creating a header which is featured above but today I am going to teach you step by step how you can be more adventurous with your designs by animating them. It is quite a confusing concept when you initially try it out for the first time so starting with something simple is the easiest way to go. Firstly, you want to take whatever design/image you have chosen to be your header and open it up in Adobe Photoshop.

To start with you want to be ready to put your image into layers as this is important for when it comes to animating later on , I created my layers by deciding that what I wanted was to use the background of my header and focus on having the petals appear in the water and then have the writing appear later on.

Firstly, I turned off the visibility of the writing so then on screen it was only the background image present to work with. If you look at the image above you will notice a small icon in the shape of an eye next to each layer , the eye symbol means that it is visible so if you click on it it will turn off the visibility which is the first step that I took.

Secondly, as you can see I have fewer petals visible in the image above. That is because for this step I used the magic wand tool to trace around petals in the original image and then copy and pasted them. This puts the petals into separate layers which is ultimately what you want.

Additionally, another important step to take is making the background a plain layer in itself. Notice how all of the petals have been removed in the image , to do this you select the stamp tool and hold down the alt key then using the mouse you gently click down the left button and slowly colour over the sections of the image that you want to remove (in this case the petals) and it is replaced by the colour that you originally clicked on.

The final step to bring your animation together is to put it into a timeline , to do this click on ‘window’ which will be along the bar at the top of your screen and then select the timeline option. This will then bring up all of your layers as you can see in the image above.
Once you have got the timeline set up it is up to you to change the sequence of events to go however you want it to, so for me I wanted the petals to appear and then disappear simultaneously which is why I adjusted the duration of each frame to go in a canon-logical order.
After putting the timeline in the order that you want it to be in all that is left to do is click the play button and watch your animation back to see if you like it and if you don’t then you know how you can change it!

Now you have your animation finished so if you want to use it for anything online like your own WordPress blog then all you have to do is export the file and click the save to web option and make sure the setting has it in the format of a GIF. If you are using it as a header on WordPress like I am then what you need to do when you click on uploading is make sure that you skip the cropping option because if you click crop then it will break the animation and we don’t want that to happen!