After Effects Tutorial - HUD Animation

head-up display also known as the hot animation is a method by which information is visually related to the player as a part of a games user interface her animations are not only used to display information but they play a very important part in making the UI look more complex and futuristic so today we will learn how to create a dynamic head animation in After Effects without using any plugins we will build up our design by only using shape layers and with that said I am The Cure from the emotions and without any further ado let's get started all right so here we are in After Effects let's start by creating a new composition which is gonna be 1920 by 1080 let's make this 30 fps and 10 seconds should be good enough I'm gonna rename this to mein kampf hit OK let's create one more composition for our HUD design I'm gonna call this HUD and for the width I'm gonna set this to 1000 by 1000 height hit OK and let's start designing our HUD so the first thing that I'm gonna do is go ahead and select the ellipse tool we don't need any fill so I'm gonna go into the fill and set this to none for the stroke I'm gonna set this to 50 and then I can just double-click to create an ellipse just like that go into the ellipse one and lips path 1 and bring down the size to around let's go with 650 now to animate the circle I will be using a trim path so let's go ahead and add a trim path and now we can animate it just like so so let's set this to 0 create a keyframe on the end property and I can go to Iran maybe 2 seconds well let's go to that actually 1 second and 15 frames set this to 100 so now we have a pretty simple animation now to make it look a bit more interesting I can select the keyframe hit f9 on the keyboard to easy those keyframes go into the graph editor and drag this point holding the handle just like so so we have a faster animation and then it settles down slowly so this looks much better let's select the layer and hit control D to duplicate the layer hit you 2 times on the keyboard to reveal the properties and then I can increase the size of it and bring down the width or on let's go with 10 pixels and I can make this a bit bigger just like that so we have something like this let's select this hit control D again to create a new copy hit hit you 2 times on the keyboard to reveal to reveal the properties and then I can make this a bit smaller just like that and I can increase the stroke to around let's go with maybe something like 25 then I can adjust this so we have a pretty simple animation let's create one more copy so hit control D hit you 2 times make this smaller and for the stroke I'm going to set this to maybe let's say it's 6 that looks good now I can select all beheading control a hit you so we can close them all up then hit R to bring down the rotation now I'm going to rotate it in a different direction just to make it look more random and a bit more organic so let's start rotating it I'm going to do this pretty randomly doing something like so now the animation would look a bit more complex as you can see looks very very nice now let's go ahead and add some detail to this so to do that I'm going to select the rectangular tool we don't need any stroke right now so I'm gonna set this to 0 we just need to fill I will keep it white hit OK and then I can this draw a rectangle let's align it into the center go into rectangle 1 rectangle path 1 unlink this let's bring this down to around 5 pixels and the height to around let's go with something like maybe 75 that looks good then go ahead and add a repeater to this then I can increase the copies to let's say let's go with hate for now and then go into the transform repeater set the position to zero and then I can rotate them just like that alright but right now it's not rotating the way I want so we need to adjust the position of the rectangles I can bring this up just like that and now I can rotate it depending how we want it to look so now what I can do is actually let's say this two are on will be 220 and now we have eight copies so I'm going to rotate it by 360 divided by eight so it's going to align them very properly so let's type in 360 divided by eight now if you have ten copies you should go with 360 divided by ten alright so now you can see it's not actually properly aligned into the center so we can move this to make it properly into the center I can just zoom in a bit so there we go now we can just make this a bit smaller something like this and then I want to animate the repeater so let's go to one second create a keyframe on the copy so let's set this to zero and create a keyframe go to two second and 15 frames and let's set this up to eight actually let's go with maybe 10 so now we should have something like this pretty nice let's select this keyframes hit f9 to easy ease those keyframes there we go looking pretty good maybe let's just set this to three second I think it's a bit too fast alright so far so good let's select them hit you so again close them up and they we have simple animation now let's go ahead and add some more detail to this so let's select this actually let's first of all change the color so we know that it's a different comp and for this three circles I can set them to red alright let's select this hit ctrl D to duplicate it hit you so we can see the keyframes and let's go into rectangle actually let's go into repeater and now what I'm going to do is let's go right over here with the keyframe ends to ten copies I'm gonna increase this to around maybe 25 copies and we can offset this a bit so actually first of all increase the position now play around the position of bit and move this out just like that let's actually move this out a bit and then I can also play around with the rotation so let's actually create a group let's keep on rotating it till we get the desired look yep I think this looks pretty good and I can also play around offset if I want to let's bring this down to maybe five probably I want kind of dots so as you can see we have this nice dots animating okay let's bring down the position inside just like so select keyframes go into the graph editor and drag the keyframe to the left so we have something like this you can see we have really nice animation let's duplicate this also I'm gonna change the color of this one so we know this is the dot-com which means purple hit ctrl D to duplicate it hit you two times to reveal the properties and I'm gonna bring this up just like so and we can also rotate this in a different direction just so that it looks a bit random so we have a really nice animation as you can see we also have some details let's select this circle and hit control D to duplicate it let's put this up hit you two times and scale this up a bit also bring down the stroke maybe five pixels looks good and then go into the stroke property and add dashes so I can add some dashes and then increase the spacing just like so I think this is looking pretty nice okay so this is looking very very nice now to add a bit more detail what I can do is select the dotted lines I can hit control D to duplicate it bring this on the top of the main circle that we have that is this one let's select this and make this a black color hit you two times bring down the position so that we can see it and increase the width and then you can place it somewhere around there so now we you see we have these black lines on the top of this white circles now I want to make it transparent so I can select the circle line and into the Trackman option if you don't see the track mat you can hit f4 on the keyboard into the track mat I'm going to set this to alpha invert it so now you can see we have this nice cut lines and that is what I'm going for this is looking pretty nice so I think our design is pretty much ready now to add a bit animation to this what I can do is let's select this hit R and I'm gonna add a small expression to keep that to keep the circles rotating so to do that I'm gonna hold alt on the keyboard and click on the stopwatch of the rotation and I'm gonna type in time into five so now it's gonna keep on rotating at five degrees just like that pretty cool let's copy this up hit control C let's select this dots that we have hit our click on the stopwatch by holding alt hit control V to paste the expression but this time I'm going to set this to -5 so it rotates in the different direction as you can see let's select this one hit R and copy-paste the same expression so we have a little animation as you can see and lastly on this - shoes that we have hit our control V inside this 2-5 so there we go there we have a little simple animation which looks pretty nice now also let's go ahead and color this up so I'm gonna select maybe this circle that we have and add a fill to this and give it a really nice sci-fi green or something like that hit ctrl C to copy it maybe I'll like this outer stroke that we have ctrl V to paste this up and you can give it a different color so I'm gonna go with a nice blue color and I think that is pretty pretty much it looks pretty good now let's go into the main comp that we have dragged in the HUD composition so we have something like that let's add a background so it control Y to add a new solid make this BG for background and hit OK put this back and on the top of this I can add a gradient ramp let's make some room right over here so you guys can see it more properly alright let's say this you radial ramp maybe I'll put this right over here swap the colors and for this one I'm gonna go with nice dark P you increase the ramp scatter to around 100 so you don't get any color bendings also I'm walking in the 16 bits per channel you can just hold alt and click on this to change it from 8-bit to 16 bits and then for this one I'm gonna make this really nice and dark blue just like so there we go we will just pull this up part of back a bit okay this is looking much better let's hit ctrl D to duplicate this solid and make this 3d also make the hard layer 3d as well so while this is 3d let's select this delete the gradient ramp and rename this layer to grid and add a CC you great to this let's add a grid to this let's change the size from corner point to width slider and increase this depending on your personal preference I'm gonna set it to around maybe let's go with something like 80 looks good to me and for the body I'm gonna keep it at 1 pixels very very very minimal also let's create a new camera 35 millimeters looks good hit OK create a new null object called this cam control and then we can parent the camera to this null object so make the null object 3d right click and go to go into columns and let's check on this parent and link option then I can select camera and parent this to the null that we just created so now we can control our camera using the null so the first thing that we need to do is select this let's actually close this up the things that we don't need to see and let's start playing with a nice camera angle so let's go to around 3 seconds maybe maybe let's go somewhere around yeah three seconds looks good hit hard to bring down the rotation properties and let's set the rotation of the X to Iran let's go it maybe 35 degrees for y I'm gonna go with 33 degrees and for the Z I can go with 18 degrees so you get this really nice placement for our camera angle and as you can see our grid is getting cropped up so I can select the grid layer go into layer solid settings and I can keep on increasing the size until and unless it fits a complete comp just like so hit OK yep everything is looking pretty good let's select the heart and place it into position that I want maybe something like that also maybe sub it up select create put this a bit back just like so alright then let's say we can control hit our kill keyframe on the orientation XY and z rotation go back to around let's say somewhere around there maybe at one second and ten frames and I'm gonna set the rotation back to zero okay everything is looking pretty good okay we don't need any orientation property I think some just remove that hit P and I can just adjust the position so actually hit you go right oh yeah and then hit P to create a keyframe hit you again so we can see all the keyframes go back and now we can adjust the position so he try to keep it into the center pretty nice so we have this really nice animation now let's select the keyframes hit f9 go into the graph editor and try to create a peak into the center so I can select this point drag the handle holding shift and then drag this one holding shift again so now you see we have this really nice camera animation looks pretty good pretty happy with this but the best part is that lets go into the camera hit a two times to reveal all the properties turn on the depth of field and now this is gonna add some really nice depth to the complete scene and make it look more organic so let's increase the aperture a lot and then I can increase the focus distant till it focuses on our HUD so you can see we have this really nice and we will increase the aperture really high to around 600 or something like that as you can see so pretty good now what I can do is let's select the HUD actually saliba cam control and hit you so you can get the visuals of the keyframe and then we can animate the heart according to that so let's hit P to bring down the position properties of the HUD let's go right over here hit control D to duplicate it hit s and let's scale this down or something like that and now what I'm going to do is I'm gonna hit P on the keyboard to create a position keyframe let's go to around four seconds maybe and bring this up a bit just like that then I can hit control D again hey to you and let's scale this down and bring this up so now we have something like that let's actually select both the layers hit you slip keyframes hit f9 go into the graph editor and pull this handle to the left so you have really nice animation as you can see pretty nice let's set this to full so you can see the high-quality render control shift edge to hide all the guide layers and there we have our really cool design let's go into cam control and hit P for the position you don't need any position keyframe on this one so I think it's looking oh we have the position keyframe on this one the right thing is looking pretty nice let's go right over here maybe I'll zoom in just like a little bit there we go we sure have really nice animation looks pretty good to me now let's go into the camera hit you 2 times hit a two times and let's try to focus our focus distance properly on the HUD so you can see this is looking much better now let's go ahead and add some color correction to this so hit ctrl alt & Y on the keyboard to create a new adjustment layer I'm gonna call this glow and add some glow to this let's increase the glow radius really high and bring down the bring up the threshold actually to around 90% should be good yep that is looking much better maybe I'll set this to around 300 there we go very very nice and create a new adjustment layer again or I can just duplicate the glow so it ctrl D and call this CC for color correction delete the globe and I'm gonna add a photo filter to this set this to a nice gold filter 82 which is one of my favorite one and make it freely light maybe around let's say 5% or let's actually go with 8% yep that is looking much better I think and yeah now you can see at the beginning we don't our HUD is not into the focus alright and the animation is pretty same and similar to each other so I can give it a random rotation to all the huts so I can rotate this in different direction then select this one rotate it in a different direction so something like that and now I can select the camera hit you 2 times or hit a two times and now let's actually go where HUD is in focus maybe somewhere on here create a keyframe on the focus distance go back in the very beginning or maybe ad where the hut starts up and try to focus onto the heart so I'm gonna bring this up a bit till the camera is in focus properly there we go let's select this Hefner easy easy though keyframes and now we have the focus animating yep pretty nice let's actually prickly preview this to see our final result and there we have our professional looking hard animation alright so that is a wrap for today guys I hope you enjoyed this tutorial and if it did and make sure to subscribe comment and like the video also if you guys want to purchase any of the Hodge templates so I'll mention my top 5 favorite hard templates link down in the description so you can go and check them out and I'll see you guys in the next video till then take care and thank you so much for watching don't forget to stay raw stay creative [Music] [Music]

Channel: Dope Motions

Views: 617,949

Keywords: Create HUD Animation in After Effects, HUD Animation in After Effects, dynamic hud in after effects, how to made scifi animation after effects, scifi animation, hud animation, ui animation, gaming hud animation, Head up display, how to make hud animation, after effects cc, after effects cs6, ae tutorial, easy after effects, after effects basics, how to use after effects, after effects tutorial for beginners, After Effects Tutorial - HUD Animation in After Effects

Id: Wr5tXeUyxqk

Length: 23min 17sec (1397 seconds)

Published: Mon Oct 01 2018