How to Create Lottie Animations pt.1 - Adobe Illustrator Tutorial

all right guys you have asked for it and i will deliver now this is a hamburger so the the first frame is the frame that it rests on so like if you were to go to the website where i used this here we go webflow is slow but these are hamburger icons right so these are different ways that you can you know you've got like this three stack and then it transforms into an x and there's a lot of a lot of options out there and then you've got a few that actually look like hamburgers it's funny um but uh yeah there's a lot of different ways to do this there's a lot of free options out there already and but i wasn't happy with any of these i wanted something unique organic something more fluid that was pretty fluid but i didn't like the the round edge like the squareness of it i wanted something with the round edges right um and uh yeah so i just wanted something a little bit more fluid and so i created i created uh this right here so that's that's that's that so that's what we're going to create today here you can see it in action and i'll do uh it'll be a separate video but i'll show you how to implement it into a web flow so here we go mobile and boom there it is so hamburger you click on it turns into the x click on the x again it turns back into a hamburger i'll show you how to do make that happen in webflow and but to get started on this you're going to need uh illustrator so if you're not paying for illustrator or the creative suite illustrator you're going to need illustrator and after effects so both of those programs are required you're also going to need to install body moving which is uh by airbnb and so here's what i created right here and i'll just pull this up um so you can see it i've got three layers the first layer is is just the hamburger itself um now to we're gonna take all this over here so to create this uh well to create it it's very simple you take your pen tool you click one spot you drag it over and you hold shift right and then click another spot you create a straight line hold press v you select uh your selector and then you can you got your straight line now once you have your straight line you might think okay well you can hold alt i need to duplicate this hold alt you'll see this this the cursor change and you can duplicate it i hold shift so i don't go left or right it like kind of locks it up and down hold shift and alt at the same time and then release okay and then you hold ctrl duplicate to make that same thing happen again control duplicate i meant control d for duplicating it and now you have your thing now i wanted it to be a perfectly square box and so i used a i used a uh you can grab the square tool hold shift get a perfect box boom take this cancel out the fill right and so you can say okay cool this needs to be on on the corners right so you can see how well this is if you hold shift you can kind of get kind of get right there on the on the edges right and then you can see how this is not this needs to be in the center and this needs to be on the very bottom is that centered okay that looks centered okay so i was using that to create the perfect square um then i didn't like the proportions so i moved down some and that that gave it a little bit more of like a beefy proportional feel okay now if you know what you want your animation to do and what i want my animation to do is kind of like kind of like fly into the centerpiece i'm gonna need a stroke and a path that resembles that animation and what i actually found out later was i didn't need to do both sides because what i was going to do is i was going to just use one side right so really what i need to do here is i need to get a circle right and and develop this circle right there and that's not so we're going to intersect that with this one and then we're going to intersect it with that one and then i'm going to press a to select this uh direct selection tool and i'm going to click on that one delete it so there we go there is our half of the pie and then you might be thinking okay well this is a path and this is a path and this is a path what you can do is you can select them all and go to edit and path or sorry object and path and then join so now this is one path okay so whereas it was not one path it is now one path um we're actually gonna undo that little bit there because we need to duplicate this whole thing because i do want the hamburger alone and now we can we don't need this and now we can object path join path okay so and now we need the x okay and so for my x all i wanted to do was take this and we're going to uh i'm gonna command copy right edit copy and then i've already copied it copy but then paste in place that's what i want to do so when i grab the new one and i hold shift and rotate it i get my x so when you hold shift it locks it into the 45 degrees boom you're there and so that's it that's this is these are the elements that we will use in order to create this now to get these all centered and aligned accordingly i'm going to right click i'm going to select all these right click and then hit group so these are now in a single group and i'm also going to put these on their own layers so this is going to be one layer this is going to be another layer and then this is going to be another layer right now they all need to be centered together on the artboard now actually this artboard is way too big and so i'm going to create a new artboard and do something like that right just around this guy and i'm actually going to click the artboard tool again and delete this guy because that's really all we need so we got our new artboard and we're going to take this i'm going to come here oops oops that's uh that's interesting how that's not okay so our board needs to actually be a little bit bigger just something like that okay and then we're gonna right click this group and we're gonna take this over here and it's gonna intersect perfectly so this is our this is our final product this looks a little bit different than my final product when i did it and that's because i learned from my mistakes and there was some trial and error but realistically this is all you need and this is it so when i bring it into after effects right we're going to we're going to delete this guy well actually we'll go ahead and delete this we don't need it so now we've got this guy we're going to do file save as hamburger tutorial and i'm going to go into my folders here where i've got all my different folders and i'm going to do um adobe illustrator series i guess we'll do that new folder and we'll do ham burger set okay so we got our asset saved okay just hit save and then we go into after effects all right close this out hey everybody i wanted to um stop this video here as it's already long enough and if you'd like to continue watching you absolutely can follow the playlist follow the video series on how to make this hamburger tutorial i just don't want the videos to go over too long because you know it gets hard and it's easier to do whatever like and subscribe please it's free and it uh it helps me out a lot comments um if you just write anything it works really great for the algorithms of youtube and um you know if you want to request something i'd be happy to do something for you you know just write a request and i'll re i read every comment so you know i'll definitely see what you have written and uh i do most of what people request so um yeah just let me know thanks so much really appreciate it and uh if you don't want to continue the video and you just want to purchase the hamburger icon you totally can i'm going to sell it for five dollars and uh you know save you a couple hours save you know i get five dollars and it makes me really happy and i can continue doing what i do instead of going and getting a real job so that's very helpful thank you very much

Channel: Visual Finesse

Views: 1,692

Keywords: webflow tutorial, Webflow, Lottie, JSON, BodyMovin, after effects animation tutorial, After Effects, Illustrator Tutorial, Illustrator Animation Tutorial, Adobe, Lottie Animation Tutorial Webflow, Visual Finesse, Michael Foster, html5 animation software, After Effects Lottie Animation Tutorial, Vector Animation, SVG Animation, website animation, webflow interactions, webflow interactions tutorial, webflow interactions 2.0, lottie animation, lottie tutorial

Id: 6ATpVrOE68Q

Length: 10min 50sec (650 seconds)

Published: Mon Sep 28 2020