Part 3 - iPhone Breathalyzer - UI Animation in After Effects

[Music] hello Gary Simon of designc course.com today is January 26th and we are going to take our design from Photoshop from yesterday and go ahead and make it an animated reality in After Effects so as always check out designc course.com if you haven't yet we're going to have courses there and also all of our videos are there for free of course as well and the project files are available for free in the description below this video in YouTube and also for sure if you haven't yet go ahead and subscribe to the YouTube channel all right let's get started all right so get uh Adobe After Effects open go to comp composition new composition and 1280 x 720 I 30 seconds long down here and we'll call this breath and we'll hit okay all right so I'm just going to zoom out here um 50% works pretty well for my resolution we want to import our necessary files and mine what's called let's see this is one I'm going to hold control and then left click the other ones and those three hit import our perspective view is the one that we want to start with here so if we put it down here and we scale it hold shift that's too much yeah right around there is good to start then what we want to do is create a make sure nothing's deselected we'll go over here create a rounded rectangle tool hold shift and make sure that radius I think it was four that we had it at actually let me delete that I got to make sure this is correct yeah it says zero oh wait that's for the uh I'm sorry the stroke yeah hold shift we'll select uh it doesn't the size doesn't have to be specific just just around this size and what we want to do is yeah and that that border radius does work out cuz that's basically the same as our other one so what we want to do now is pre-compose this so that basically means like putting it in a layer group so you go to layer precompose we'll just call this UI all right so now when you uh double click on this it opens up a new tab and this is where we're going to create our UI reason we did that is because we're going to use uh an effects an effect called corner pin to get this on here uh in a correct perspective so I'm going to take UI hit T to get opacity so we can turn this um opacity down just so we can see underneath it and now we have this corner pin thing and this is going to be tricky so H it's going to be tough so over here we have these four little circles that are around here we have to use these to get everything in here correctly uh and if you do this as you see it doesn't work quite correctly so we have to kind of pull them out even across the screen until we can get this thing properly into view here you may have to move things around it it it's a pain there has to be an easier way I just don't know about it unfortunately and I was using my scroll wheel just to you know see that other one so I'm zooming up here and this doesn't have to be perfect because ultimately we're not going to be using that that this layer this is just kind of a placeholder really so we can get the correct perspective all right so that looks good okay all right so now uh if we go if we double click on UI we bring this up we can see that this hasn't been distorted itself so that's good now now what we want to do is recreate some of those elements so I'm going to go over here and select the ellipse tool and hold shift and yeah just shift here and roughly around this size we'll take the fill change change that to a radial gradient hit okay and then up here we can edit that radiant radiant radiant to uh the proper green color and I'll just hit okay so now if we switch back we can see that is right there although that looks bad because we have that layer showing so if we hide it we can see that that looks a lot better now and my mouse is about to die so let me pause this all right I plugged it back in um now if we just select right here you can see this little dragger thing that's for the gradient it's so hard to see uh basically if you you zoom up and you hold your space bar you can get a better View and now you just pull that thing in and we'll go back to breath and that way it looks better and not so you know sharp all right so I may want to increase the size of this thing uh just holding shift that's better and maybe move it well let me zoom out here we'll get our container layer back yeah that's fine here all right so the fun part okay so I I'm going to basically come back to photoshop and what I want to do is hide these layers create a new one underneath control shift n we're going to make it black it already is well maybe I'll make it like like a a dark gray just so we can see underneath here all right so if I zoom out you know this is real large what we want to do is take everything all those layers h control T scale it up quite a bit now the one thing that we're going to be importing is the this ring not this stuff in the middle so I'm just going to get rid of those all right now when you scale up and something's a a stroke in Photoshop it won't scale it proportionally so just come back here and scale this back up to around there all right so the idea is is to take this this ring and we're going to create two of them one's going to be red and what we'll do is create this so that when we bring it into as an image or a Photoshop document into After Effects I we'll use an effect that will reveal it in a radial fashion so uh what we want to do is come over to photoshop and I'm going to take the mask hit contrl H just so we can see the points and view if if your grid showing up don't show that okay okay so now I'm going to take this down just so this is a little bit more correct in terms of the angle all right and what I can do is right click this we're going to go rasterize and I'm going to create a new layer right uh underneath this one hit okay take the uh brush tool you want to be pretty big maybe not that big 800 I think that will work well and we're going to color drop this uh color right there and we want to make it slightly darker hit okay and then just click right here might be able to go a little bit darker over here and that way it just kind of gives it some like a like a gradient so once we've done that I we can take these three holding shift hit Group contrl G so this is going to be good as in you're under the limit right click this duplicate the group or hold control shift d this is going to be bad and we're going to change the color here by going to image adjustments Hue and saturation oh let's take both of those actually real quickly before I do that I want to take this because obviously this will go higher and contr H you know what I'm backing up sorry about that I want to have it be able to distinguish that this is the safe line if you're under you're good if you're over you're bad but also depending on how how much a person's over well they want to know that too so the way we can do this is take this and take the opacity down and we'll create a new layer control shift n and then just tab space for that uh clipping mask and then we'll create one that goes right here right here and this one's going to be black so now once we take let's see here I think we just take all of them hit control e image adjustments Hue and saturation and now we want we basically want to get to a red color what is happening there is a slight if I hit colorize is that just my eyeballs or is there a a very annoying thing going on down there let's see no not nothing that I can see let me pause it yeah that was just I think an illusion because I don't see it if you get to image adjustments human and saturation you do not see that or maybe you didn't even get to see it in the video but I I certainly saw it right around there hit okay uh let me go back to zoom out all right so this is our second one um so what we want to do is I'm going to take I'm going to hide this group take this just select on group and hit contr e and we'll take this oops hit control e all right so we have our two layers good and bad so basically hit control a and then contrl C contr A will select everything and then contrl C copies it we'll go to file new all right and then we will save this and I'll call this I you see I already have this up there ring good I'll just overwrite that and then right my thing's being slow okay and then we'll go ahead crl a contrl c and then we'll go to contrl n enter contrl V oops we don't want we don't want to save for web just hit control s and then reading bad hit yes now switch back to After Effects go to Project file new and or import rather what am I doing and then we'll take ring bad and ring good import now we want to import this ring good right here now it's too big so we'll hit shift and scale that down right around there and there we go looks like crap because of uh this bottom layer showing up all right looks a bit better all right so now what I want to do is add an effect and this is kind of called I'm just going to type in wipe no wait no I'm not I'm going to type in radial we see transition radial wipe and we'll put that on there and if you go to transition complete and play with this you'll see how this will work in a way but it needs to wipe counterclockwise there we go so uh now what we want to do is go ahead and um we're going to add the numbers first so I'm just going to change that to zero going get back this layer over here just to get an idea of where I'm at take the type tool type in zero or 0 Z or 74 how's that okay change this here to take click on this and think right around there hit okay Source SS proos is what I'm using I'm going to I'm going to choose extra light and then bring in the letter spacing a little bit all right maybe a tab it bigger all right so now we have to create an expression and I found this on the internet I'm just going to copy and paste the thing in and so I'm going to provide in the link if you uh look at the description below this video um there will be a link to probably a service like ppin where I copy and where you can just click on it and you can copy it and then you can paste it where I tell you okay so once you have that copied we'll go down here and we'll click on that click on text then we have Source text so what we want to do is alt click right on that little timer icon and then contrl V to paste that in and I do want to make a change you may not have to do this because I probably pasted in the correct one but basically you have like a let me pull this up you have variables so you can specify the duration and also the end count so what we want to do is take this 130,000 and put it to 74 if that's already there in that c the text you don't have to worry about doing that part so just click out of there and what we'll do is let me go ahead and bring this back down you'll see it now counts 4 seconds gets to 74 okay so let's add another text this will just be that period get it into position H using my down arrow key that looks good and then we'll create another text BAC blood alcohol content change this to light yep think I had this white all right let's move some things over holding shift and selecting them both this the text is a little bit too close together so I'll just pull that out all right let's go hide this background and let's go to breath okay all right cool let's go back to UI and now we want this to line up the animation you know based on this right here so basically we're going to have to set a key frame right at 74 based on where this transition complete part is so to do that what we'll do is Select yeah make sure it's selected we'll find it here and that's called ring good pull this down and well actually we'll go ahead and set a transition first right there and then click right here to create a key frame come down here and hit U and that shows you any key frames that you have associated with that layer and then over here we'll go to the beginning and then we'll change this to zero wait no 100 sorry about that 100 and then real quickly to show the rest you don't really have to do this to show that black part but I'm going to uh I'm just going to hit zero so let's go back to breath here and zoom out a little bit now I'm going to hit zero on the number pad and it's going to get this ready to play back so it's going slower than it actually would be so this is it at full view let me zoom up all right pretty cool all right that's how you do that then so real quick what I also want to do is add in some other text good to drive all right um we'll change the uh text to Green right around there hold shift all right and then let's scroll up to the top here we want this to show maybe right around here so we'll drag this over here we'll hit t for opacity set a key frame change this to zero and maybe change this to 100 all right so now if we hit zero on the number pad we can see how that will slowly fade in in cool and then another thing I wanted to add is kind of like a a gradient so let me bring this back here and we could probably use this in and of itself to create that radial gradient so let's change the uh fill oops over here to a radial let's drag this up right around there and we're going to change the uh color here well you know what we could just change the opacity so where's that at oops no it's down here what am I doing yep I will hit T now we're going to to basically maybe we'll start right here create an animation so at zero when it's at zero we're going to create a key frame there and then maybe boost it all the way up up I'm going to put it at 20% just see what this looks like there so we'll go ahead and animate that all right and this is the actual result Perfect all right so now what we can do is we're going to have to duplicate some things so I'm going to pull this up so we can get a good view of all our layers and collapse them and so basically I'm going to take all these layers composition now go a layer pre-compose like we did before we'll call this Good UI and then we're going to to uh duplicate this so shift d or control D rather I'm going to switch back up here to project view now where it says good UI we want to duplicate that as well so control D so this is called good UI too um what we want to do is with this top selected here and this selected over here hold alt and drag it over so now we have a duplicate version and we can edit good UI too which is actually bad you could rename that if you want to bad and now we can change everything to red and also replace the foot this footage to uh where was that ring bad so to we'll do that first so we'll select this ring good ring bad hold alt hover over sweet and and I think yeah when we're right about here we want to make sure we're directly over this real quick over this wait what am I doing I was looking at the wrong one sorry about that we're going to hit uh you with ring bad selected yeah there it is and you want to make sure you're directly over that and we'll go back to effects oh this is transition complete actually that's why okay what we want to do before I edit this sorry I'm being slow um we're going to go over here to that 74 layer get down that Source text we're going to scroll up here end count we're going to put it like 94 that means like they're over or whatever so there's that and let's take this right opacity here oh wait no sorry yeah this right here we want to adjust this so that make sure I'm right over it we want to adjust it so that uh the a the transition complete is actually right here there all right so I'm going to take this layer and I'm going to zoom up here and this one make it red baa we're going to leave there we're going to change that text to don't drive make this red take this change the gradient to red and and then finally we actually we have this uh thing down here make this red hit okay all right so now if we go back into the UI we have both of these and they're going to play at the same time we don't want that so what we want to do is just move this this forward and maybe to right around there all right so let's see well first we have to let me just drag this around here we'll take the opacity put a key frame there go forward a little bit hit zero and then this one we'll put right here hit T opacity will be zero and then it's going to go to 100 all right hit zero it's going to render out I'm just going to pause it until it gets all the way so we can see it you know when it's ready to go and this is the actual speed all right cool all right so that part's done uh now what we want to do is first real quick I kind of wanted to push these in a tab bit I think it stayed there a little bit too long and then just put this right around here okay all right that's good now what I want to do is so that would be like the first scene so what we'll do is back here on our main composition we're going to hit uh s for scale and we're going to create a key frame key ah key frame what am I key frame a key frame right around here and we're going to scroll just to where that is finished and put another one right there and what we want to do is go from small to larger so the way this will work is yeah actually you know what I'm going to delete that we're going to take both these layers hold shift go to layer precompose and call this first View and then we're also going to hit F4 and click on this little middle icon right there actually I'll dclick it just to show unclick it rather just to show you what that does uh if we scale this we wouldn't see anything else but if you click on this you see everything else outside of the composition all right so basically we want to start the animation right around this size right here so we'll go to click on first view hit s put a key frame there that's actually 120 it's going to look distorted so let me actually no I was wrong one second let me go to 100% yeah we're going to scale that down let me go to 25 again sorry right around there and then I'm going to go here to the end and scale up just a little bit to right around there that way there will be some movement all right so now I'm going to go to layer new solid and just hit okay and this is going to be like a transition type thing so we're going to move this over here just before there and then I'm going to take opacity hit T it's going to start it's going to hit 100% around there go to the beginning hit zero and come out right around the same area and hit zero so this is what happens so once we have that right there take the end of this and just get rid of it right around that same area so if we go all the way we can make sure it's right on that frame so now becomes plank blank after it looks like it doesn't fade but background's white too so now what we want to do is go back to project and put in top view we'll scale that down and leave it right around there now in my first video that I did um when I did this project I had just some text in here you can add that if you want I'm not really going to worry about it you know how to do that so we're going to move this over we'll hit uh come on over there now we want to go to T actually I'm not sure if that's necessary yeah we'll drop this beneath there we go and then what we'll do is scale this up so we'll we'll take I hit s we'll put one there maybe right around there I think that might be too much if you double click on one it'll bring you up um the scaling properties I I have it starting at 75 I'm just going to put 80 well maybe 78 okay control D can do this again and let me go over here oops actually let me get this and pull in so we can see it oh wait it's right around there no no sorry all right so basically want that to end right there and then we'll do the same thing for side view so we drag this in right around there oops let me go ahead and and just take this in in size and we'll drag this beneath here and we'll do the same thing with the scaling here and so we'll leave the uh we'll hit s put a key frame there and come out to around here and then just barely all right so now what I want to do I'm going to go to I'm going to move things out of the way and I'm going to render this I'm going to hit zero and I'll pause uh because it has this way to go all right and here it is at the regular speed all right just very subtle uh scale and size here oh that's quick you'll have that so what we can do is kind of change some things around over here uh this is where it changes so what I want to do is I'm going to move this back maybe to around here move this back over here we had this one up here here this layer that looks good and there's an issue here that's coming in too early there all right so let me go ahead and hit zero so here's the full speed it probably be worth having this sped up a little quicker but that's fine that's no big deal okay cool okay so I now what I would do is um this is the song file so I've linked to that uh in the description you would just drag it in and if you wanted to have your own voice over let me drag this up you would want to take the audio down just a little bit maybe to like negative eight decb and so now when you play this I don't know if you can hear that that through my speakers or through the system audio or not but and then you would record your voice talking and saying whatever you want cool all right so uh to to basically export this uh you can go to first of all you want to make sure you take your your timeline down here and you drag this wherever you want it to end oh you know what I forgot about one thing I forgot about the text up here that's kind of an issue so let me I mean you I would imagine you know how to do that already because we've done it once but it's worth finishing so let me go ahead and get things into view here there's not enough room up here let me see if um the size of this can be adjusted at all I'm going to get rid of the scale here yeah that's like the best we can get away with probably because I didn't position that right I think we just add one line of text up there and be fine so I'm going to back up contrl Z we're going to get our things back and then we'll leave it right there and we we will go ahead and type what was it I forget what I had up there yeah know your limit we'll make that white text maybe it would look even better right there oops Yeah and then what we would do is I hit T and then for opacity we'd make it zero CR key frame 100 all right so now we zoom out pull this stuff down move this over hit zero and now let it run through and then it will stop and the scale and then that will come down there cool all right we are almost done with the full Mega tutorial uh tomorrow we're going to get started with creating the actual uh website design uh for this product in Photoshop so that will be fun all right as always visit designc course.com subscribe uh here on YouTube if you haven't yet and I will see you tomorrow goodbye [Music]