Just about all video on the web is comprised of hundreds or hundreds of thousands of particular person raster photographs, or frames. Whereas compression tremendously reduces the file sizes, every body continues to be primarily a raster picture that’s resolution-dependent, and the video itself is frame-rate-dependent. You can not make the video bigger or add extra frames after it’s rendered.
Lottie makes an attempt to deliver some great benefits of vector graphics to animation. Lottie animations retailer vector knowledge that’s resolution-independent and permits vector shapes to be animated straight on a webpage or inside an app. A Lottie animation is ideal for animated logos and parts that you simply wish to stand out whereas protecting file sizes small.
On this tutorial, you can be creating this Lottie brand animation.
1. What you’ll want
For this tutorial, you can be utilizing Adobe Illustrator and Adobe After Results to create an animated brand, so that you’ll must have these put in. With the intention to create Lottie animations, additionally, you will must have the Lottie extension put in in After Results. Go to the Lottie Recordsdata for After Results web page and observe the directions to put in the newest model of the plugin. With the Lottie plugin put in, you can be able to create a Lottie animation!
2. Put together the vector file in Adobe Illustrator
Step 1
Obtain the Roast Bee file from Envato, extract the compressed zip file, and find the AI folder inside. Open the Roastbee Emblem.ai file in Adobe Illustrator.
Step 2
Create a brand new AI file utilizing the 1920×1080 movie and tv preset. Working on this measurement will make sure that we have now an appropriately sized form after we transfer it to After Results, in order that we need not refine it an excessive amount of to make the animation work. Put it aside as Roastbee for Animation.ai
Choose the form of the emblem within the Roastbee Emblem.ai file, copy it, and paste it into the brand new Roastbee for Animation.ai file you simply created. Tweak the dimensions and place to ensure it’s centered and fully contained throughout the artboard.
Step 3
Most finalized brand information like this are outlined, that means that they’re flattened shapes with a fill and no stroke. You will have to separate the wings from the flattened form, however there are a number of methods to strategy it. On this case, because the design lends itself to stroked vector strains and After Results offers much more choices to animate stroked vector strains, we are going to put together it for that form of workflow. Choose the bee form and go to Object > Path > Offset. A unfavorable offset of -24px ought to transfer the vector strains to the middle of the form.
Click on OK to just accept the offset. Illustrator will make a duplicate of the form with the unfavorable offset utilized. Choose all the pieces besides the brand new offset strains, change the fill coloration in an effort to see the offset shapes on prime of it, and lock it within the Layers panel in order that it can’t be accessed.
Step 4
Though the vector strains are within the heart of the form, it’s nonetheless a defined form with a fill. You will have to scrub up the strains so that there’s a single open-ended vector line for every form.
Take into consideration which components you wish to animate individually. Use the Direct Choice Software (A) to pick factors the place these strains join with different components of the design, then press the Reduce button on the floating toolbar to interrupt the connection. Let’s begin with the top and separate it from the antennae. Maintain Shift and click on the factors the place the top connects with the antennae to pick them.
Then click on the Reduce button on the floating toolbar to separate the top from the antennae shapes.
Step 5
Be sure all of the paths are open. As you’re employed via the strains, you will discover that a few of them are closed paths. Choose factors on the tip of the form, and delete them to get a single open line roughly on the heart of the unique form. We are going to add a thick stroke to the strains later to get the unique design.
Step 6
Choose all with Command-A, after which swap the fill and description within the toolbar. This may mean you can see which shapes are nonetheless closed and have to be opened and cleaned up as you’re employed via the remainder of the shapes.
Step 7
On the backside, close to the bee’s stinger, the unfavorable offset produced some messy outcomes. You’ll be able to delete the a number of shapes on the fitting aspect of the stomach, clear up the road on the left of the stomach, after which replicate it.
Reduce the strains that make up the stripes of the stomach from the define utilizing the Direct Choice Software (A) and the Reduce command that we’ve been utilizing for the remainder of the shapes.
Use the Direct Choice Software (A) to pick the factors on the fitting aspect of the stomach and delete them.
The left aspect of the stomach define can also be messy, however it’s no less than a single stable line. Delete the factors that create a closed define so that you’ve a single open line, as we did with the antennae and different strains.
When you’ve got a single line for the left aspect of the stomach, choose it, after which use Object > Path > Simplify to scale back the complexity as a lot as potential whereas retaining the curve of the stomach define.
Replicate the road with Object > Rework > Replicate and click on Copy on the replicate dialog field to make a mirrored duplicate of the road.
Lastly, transfer the mirrored line to the fitting in order that the tip close to the stinger snaps to the tip of the left line. Be a part of the mirrored line on the fitting with the left line by dragging a field over each with the Direct Choice Software (A) and clicking Be a part of on the floating toolbar.
Lastly, be part of the stomach with the top form the identical means. This may create a single closed form from the top and stomach strains.
Proceed utilizing these methods to scrub up the remainder of the design. You can even save a while by cleansing up one wing after which utilizing the replicate method to make the other wing.
Step 8
As soon as you’ve got cleaned up the remainder of the design, there ought to be a single line for every of the next:
- Left antenna
- Proper antenna
- Left wing
- Proper wing
- Stomach & head mixed (that is the one closed line)
- Stripe 1 (the higher stomach stripe)
- Stripe 2 (the decrease stomach stripe)
You can even enhance the stroke weight if you would like to ensure that it’s near the unique design. Nevertheless, we are going to add the stroke in After Results, so it’s not essential to do it in Illustrator.
3. Animate in After Results
We have to get the vectors from Illustrator to After Results whereas protecting them within the right place relative to one another. After Results permits us to stick vectors from Illustrator straight into After Results as masks, however sadly masks lack the management of form layers on the subject of animating.
Masks are additionally not vector layers, which we’ll want after we create a Lottie animation. They’re vector masks utilized to raster layers. Pasting our vectors from Illustrator right into a masks on a stable layer is a fast strategy to get them into After Results whereas sustaining positioning, although.
Step 1
Choose all the newly cleaned strains and use Command-C to repeat them. Open After Results, shut any tutorials or new file creation dialog packing containers that it opens, and click on New Composition.
Then use the preset for Social Media Panorama in HD at 1920×1080, setting the size of the animation to about 5 seconds.
Step 2
Create a brand new Strong Layer by clicking within the timeline panel and urgent Command-Y. Within the dialog field, we will depart the default coloration—simply be sure that it’s set to the composition measurement of 1920×1080 and click on OK.
With the brand new stable nonetheless energetic, press Command-V to stick the vector shapes we copied from Illustrator, and they are going to be utilized to the stable as vector masks. Within the timeline, you’ll need to increase the layer and increase the masks property to entry them individually.
Step 3
You will have to maneuver the vectors over to a form layer. Holding them separated will provide you with probably the most management over the animation. Proper-click within the area within the left part of the timeline panel, and click on Form Layer. This may include our vectors.
Step 4
Now we have to transfer the vectors over from the raster stable layer. Broaden the stable layer, increase masks, and increase the final masks on the backside. Then, click on the Masks Path property and press Command-C to repeat the vector path. Now increase the Form Layer that you simply created earlier and click on Add > Path.
Be sure the playhead is on the first body of the timeline (it ought to be by default). Then increase the trail you simply created, increase the Path property underneath it, and click on the Stopwatch to create a keyframe. This keyframe is important to include the vector knowledge from our masks. Now press Command-V to stick the vector knowledge we copied from the masks.
Be sure to call the trail. I exploit the next conference on this mission: [Item][side][purpose]. So that you’ll see the left wing is known as Wing L.
Step 5
You’ll must repeat the earlier step for every of the shapes. On this case, there aren’t that many, so it doesn’t take lengthy. For bigger tasks with extra vectors, there are plugins that can automate the method, however determining which form is which and organizing them nonetheless takes time.
As soon as all of the shapes are copied over, you’re performed with the stable layer, and you may delete it (or conceal it no less than if you wish to preserve it round for some purpose).
Step 6
On the Form layer, click on Add > Stroke. This stroke will apply to all the paths above it throughout the identical group.
It’s price mentioning how essential teams are in After Results. Teams have Rework Properties that management all the shapes inside. Teams can even separate fills and strokes in an effort to apply a fill or stroke solely to the vectors in the identical group or to all of the teams above it. Utilizing teams lets you management shapes independently and collectively, and it additionally simplifies rigging.
Step 7
Click on Add > Group (Empty) and identify it Wing L xform since that is the group we are going to use to animate the left wing. Drag the left wing into the group you simply created, and do the identical for the fitting wing, naming the group Wing R xform. Then drag each teams to the highest of the stack within the form layer. You can even increase each teams and see that not solely have they got the wing paths we dragged into them, however in addition they have rework properties.
Step 8
Broaden the Wing L xform group and increase the rework property inside. We might want to regulate the anchor level since we wish the wing to rotate across the final vector level on the fitting the place the wing and proper wing contact. 2D rework properties in After Results are listed in alphabetical order: X (horizontal) and Y (vertical). Click on and drag on the second quantity on the rework property for the Vertical Y Anchor Place to maneuver the anchor level so it’s over the right level. Set it to about -67.
Sadly, this implies the complete form has moved down to the anchor level. It’s a simple repair, although. Click on and drag the Place property’s pickwhip (the little spiral to the fitting of the place numbers) to the Anchor property.
You’ll see the Place property’s numbers flip purple, and they need to match the numbers of the Anchor property. The form will even transfer again as much as the place it had been earlier than.
Repeat this step for the fitting wing.
Step 9
We are going to solely keyframe the left wing, after which we’ll use a easy expression to make the fitting wing mirror it.
Let’s go forward and animate the left wing so we will see that all the pieces is working after we hyperlink up the fitting wing. Broaden the Rework property of the left wing if it isn’t already expanded. Click on the Stopwatch on the Rotation property to begin computerized keyframing. This will even create a keyframe underneath the playhead. Transfer the playhead ahead about 5 frames and set the Rotation to about -14 levels.
Transfer the playhead ahead one other 5 frames, after which choose the primary keyframe and press Command-C to repeat and Command-V to stick on the playhead in order that the wing returns to its preliminary state.
Then transfer the playhead ahead one other 5 frames and set the Rotation Property to about 23 levels. We will refine these values later.
Transfer the playhead 5 extra frames ahead, choose all the keyframes you created, and press Command-C to repeat and Command-V to stick all of them and get an extended cycle. Transfer the playhead to the final keyframe and press N to set the tip of the work space in order that while you press Area to play the animation, it is going to loop.
Step 10
Broaden the rework properties for the Wing R xform group, after which click on the pickwhip on the Rotation property and drag it to the Rotation property of the Wing L xform group.
This copies the precise values however doesn’t fairly give us what we wish. Discover that that the values are actually purple, indicating that the Rotation property is linked to the left wing’s rotation property. Broaden the Rotation property to see the expression linking it to the Wing L xform Rotation property. Click on the expression and add *-1 to the tip to multiply by unfavorable 1.
Step 11
Choose the Form layer and click on Add > Stroke.
Broaden it and choose a coloration. If you wish to use the colour from the unique illustration (the gold strains), use hex code #D6AC84.
Set the Stroke Width to 51 and the Line Cap to Spherical Cap. Be sure the stroke is on the backside of the form layer stack, underneath all the paths and teams, in order that it applies to all of them.
Step 12
The wings will have to be crammed to cowl the strains of the physique beneath when the wings transfer. We have to make modified variations of the wings to get the fill to look right, although. Choose the Wing L xform group, press Command-D to duplicate it, and rename the brand new wing group Wing L Fill.
Then, with the brand new group energetic, click on Add > Fill. Set the fill coloration to the background coloration of the unique illustration, #1A2632. Additionally, you will want to ensure the Wing L Fill group is beneath the Wing L xform group in order that we will add the stroke on prime of the fill later.
Step 13
Broaden the Path property within the Wing L Fill group, double-click the purpose on the heart of the form to pick it, after which press Delete on the keyboard to delete it.
Proceed deleting factors as much as the highest of the wing till it seems to be like this.
Now the Wing L Fill group is keyframed similar to the Wing L xform group. If you wish to make it procedural, you possibly can increase the Rework properties of the Wing L Fill group, delete the keyframes on its Rotation property, and pickwhip it to the Wing L xform group’s Rotation property. This manner, the complete animation is managed by a single set of keyframes.
Step 14
Repeat steps 12 and 13 for the fitting wing.
Step 15
Lastly, simply duplicate the stroke you created earlier twice by deciding on it and urgent Command-D, and put one copy in every of the Wing L xform teams so as to add a stroke over the fill. You can even create a bunch for the physique and a bunch for the stripes, after which put a reproduction of the fill within the physique group and a reproduction of the stroke within the stripes group.
Step 16
Regulate the keyframes as wanted to get the look you need in your animation. Whenever you’re performed, go to Composition > Trim Comp To Work Space.
4. How you can create the Lottie animation
Step 1
Now, let’s begin creating our Lottie animation. Go to Window > Extensions > Lottie Recordsdata to open the Lottie exporter. Check in if prompted.
Step 2
Verify the field for the Roast Bee composition and click on Render on the backside of the exporter interface. Since we ready the complete animation as a vector layer inside After Results, all the pieces ought to be supported absolutely by Lottie.
Step 3
Now you possibly can click on Add to ship your animated Lottie brand to your LottieFiles account and embed it in net tasks from there. You can even obtain the animation as any of the supported file sorts to be used domestically.
Conclusion
Lottie is a really highly effective strategy to create light-weight vector animations, nevertheless it requires some important setup when utilizing After Results, since After Results is a primarily raster-based enhancing software. Making ready your animation appropriately utilizing vector-based form layers in After Results tremendously improves assist however requires some setup.
I hope you discovered this tutorial useful. Be sure you try this publish from the Envato weblog, and any of those articles from Envato Tuts+!
