Just about all video on the web is comprised of hundreds or hundreds of thousands of particular person raster photos, or frames. Whereas compression drastically reduces the file sizes, every body remains to be basically 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 carry some great benefits of vector graphics to animation. Lottie animations retailer vector knowledge that’s resolution-independent and permits vector shapes to be animated immediately on a webpage or inside an app. A Lottie animation is ideal for animated logos and components that you simply wish to stand out whereas conserving file sizes small.

On this tutorial, you may be creating this Lottie emblem animation. 

1. What you’ll want

For this tutorial, you may be utilizing Adobe Illustrator and Adobe After Results to create an animated emblem, so that you’ll have to have these put in. With a purpose to create Lottie animations, additionally, you will have to have the Lottie extension put in in After Results. Go to the Lottie Recordsdata for After Results web page and comply with the directions to put in the most recent model of the plugin. With the Lottie plugin put in, you may 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 Brand.ai file in Adobe Illustrator.

Step 2

Create a brand new AI file utilizing the 1920×1080 movie and tv preset. Working on this dimension will be certain that we’ve an appropriately sized form once we transfer it to After Results, in order that we needn’t 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 Brand.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 utterly contained inside the artboard.

Step 3

Most finalized emblem information like this are outlined, that means that they’re flattened shapes with a fill and no stroke. You will want to separate the wings from the flattened form, however there are a number of methods to method it. On this case, because the design lends itself to stroked vector traces and After Results gives much more choices to animate stroked vector traces, we’ll put together it for that form of workflow. Choose the bee form and go to Object > Path > Offset. A adverse offset of -24px ought to transfer the vector traces to the middle of the form.

Click on OK to just accept the offset. Illustrator will make a duplicate of the form with the adverse offset utilized. Choose every thing besides the brand new offset traces, change the fill colour so as 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

Despite the fact that the vector traces are within the middle of the form, it’s nonetheless a defined form with a fill. You will want to wash up the traces 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 traces join with different components of the design, then press the Lower button on the floating toolbar to interrupt the connection. Let’s begin with the pinnacle and separate it from the antennae. Maintain Shift and click on the factors the place the pinnacle connects with the antennae to pick them.

Then click on the Lower button on the floating toolbar to separate the pinnacle from the antennae shapes.

Step 5

Be certain that all of the paths are open. As you’re employed by means of the traces, 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 middle of the unique form. We’ll add a thick stroke to the traces later to get the unique design.

Step 6

Choose all with Command-A, after which swap the fill and description within the toolbar. It will can help you see which shapes are nonetheless closed and should be opened and cleaned up as you’re employed by means of the remainder of the shapes.

Step 7

On the backside, close to the bee’s stinger, the adverse offset produced some messy outcomes. You’ll be able to delete the a number of shapes on the best facet of the stomach, clear up the road on the left of the stomach, after which mirror it.

Lower the traces that make up the stripes of the stomach from the define utilizing the Direct Choice Software (A) and the Lower command that we’ve been utilizing for the remainder of the shapes.

Use the Direct Choice Software (A) to pick the factors on the best facet of the stomach and delete them.

The left facet of the stomach define can be messy, however it’s not less than a single strong 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 traces.

When you’ve gotten a single line for the left facet 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 mirror dialog field to make a mirrored duplicate of the road.

Lastly, transfer the mirrored line to the best in order that the tip close to the stinger snaps to the tip of the left line. Be part of the mirrored line on the best with the left line by dragging a field over each with the Direct Choice Software (A) and clicking Be part of on the floating toolbar.

Lastly, be a part of the stomach with the pinnacle form the identical means. It will create a single closed form from the pinnacle and stomach traces.

Proceed utilizing these strategies to wash up the remainder of the design. It’s also possible to save a while by cleansing up one wing after which utilizing the mirror approach to make the alternative wing.

Step 8

As soon as you have 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)

It’s also possible to improve the stroke weight if you would like to make it possible for it’s near the unique design. Nevertheless, we’ll 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 conserving them within the appropriate place relative to one another. After Results permits us to stick vectors from Illustrator immediately 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 once we create a Lottie animation. They’re vector masks utilized to raster layers. Pasting our vectors from Illustrator right into a masks on a strong layer is a fast strategy to get them into After Results whereas sustaining positioning, although.

Step 1

Choose all the newly cleaned traces and use Command-C to repeat them. Open After Results, shut any tutorials or new file creation dialog bins 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 are able to go away the default colour—simply be sure it’s set to the composition dimension of 1920×1080 and click on OK.

With the brand new strong nonetheless energetic, press Command-V to stick the vector shapes we copied from Illustrator, and they are going to be utilized to the strong as vector masks. Within the timeline, you have to to develop the layer and develop the masks property to entry them individually.

Step 3

You will want to maneuver the vectors over to a form layer. Maintaining them separated gives you essentially the most management over the animation. Proper-click within the house within the left part of the timeline panel, and click on Form Layer. It will comprise our vectors.

Step 4

Now we have to transfer the vectors over from the raster strong layer. Develop the strong layer, develop masks, and develop the final masks on the backside. Then, click on the Masks Path property and press Command-C to repeat the vector path. Now develop the Form Layer that you simply created earlier and click on Add > Path.

Be certain that the playhead is on the first body of the timeline (it ought to be by default). Then develop the trail you simply created, develop the Path property below it, and click on the Stopwatch to create a keyframe. This keyframe is important to comprise the vector knowledge from our masks. Now press Command-V to stick the vector knowledge we copied from the masks.

Be certain that to call the trail. I take advantage of the next conference on this challenge: [Item][side][purpose]. So that you’ll see the left wing is called Wing L.

Step 5

You’ll have to 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 initiatives 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 executed with the strong layer, and you’ll delete it (or conceal it not less than if you wish to preserve it round for some cause).

Step 6

On the Form layer, click on Add > Stroke. This stroke will apply to all the paths above it inside the similar 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 so as to apply a fill or stroke solely to the vectors in the identical group or to all of the teams above it. Utilizing teams permits you to 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’ll use to animate the left wing. Drag the left wing into the group you simply created, and do the identical for the best wing, naming the group Wing R xform. Then drag each teams to the highest of the stack within the form layer. It’s also possible to develop each teams and see that not solely have they got the wing paths we dragged into them, however additionally they have rework properties.

Step 8

Develop the Wing L xform group and develop the rework property inside. We might want to alter the anchor level since we wish the wing to rotate across the final vector level on the best 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 all the 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 best of the place numbers) to the Anchor property.

You’ll see the Place property’s numbers flip crimson, and they need to match the numbers of the Anchor property. The form may even transfer again as much as the place it had been earlier than.

Repeat this step for the best wing.

Step 9

We’ll solely keyframe the left wing, after which we’ll use a easy expression to make the best wing mirror it.

Let’s go forward and animate the left wing so we are able to see that every thing is working once we hyperlink up the best wing. Develop 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 may even create a keyframe below 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 are able to 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 if you press House to play the animation, it is going to loop.

Step 10

Develop 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 at the moment are crimson, indicating that the Rotation property is linked to the left wing’s rotation property. Develop 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 adverse 1.

Step 11

Choose the Form layer and click on Add > Stroke.

Develop it and choose a colour. If you wish to use the colour from the unique illustration (the gold traces), use hex code #D6AC84.

Set the Stroke Width to 51 and the Line Cap to Spherical Cap. Be certain that the stroke is on the backside of the form layer stack, below all the paths and teams, in order that it applies to all of them.

Step 12

The wings will should be stuffed to cowl the traces of the physique beneath when the wings transfer. We have to make modified variations of the wings to get the fill to look appropriate, 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 colour to the background colour 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 are able to add the stroke on prime of the fill later.

Step 13

Develop the Path property within the Wing L Fill group, double-click the purpose on the middle 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 appears to be like like this.

Now the Wing L Fill group is keyframed identical to the Wing L xform group. If you wish to make it procedural, you’ll be able to develop 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, all the animation is managed by a single set of keyframes.

Step 14

Repeat steps 12 and 13 for the best wing.

Step 15

Lastly, simply duplicate the stroke you created earlier twice by choosing 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. It’s also possible to create a gaggle for the physique and a gaggle for the stripes, after which put a replica of the fill within the physique group and a replica of the stroke within the stripes group.

Step 16

Alter the keyframes as wanted to get the look you need in your animation. While you’re executed, go to Composition > Trim Comp To Work Space.

4. The right way to 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. Register if prompted.

Step 2

Examine the field for the Roast Bee composition and click on Render on the backside of the exporter interface. Since we ready all the animation as a vector layer inside After Results, every thing ought to be supported totally by Lottie.

Step 3

Now you’ll be able to click on Add to ship your animated Lottie emblem to your LottieFiles account and embed it in net initiatives from there. It’s also possible to obtain the animation as any of the supported file varieties to be used domestically. 

Conclusion

Lottie is a really highly effective strategy to create light-weight vector animations, nevertheless it requires some vital setup when utilizing After Results, since After Results is a primarily raster-based enhancing software. Getting ready your animation appropriately utilizing vector-based form layers in After Results drastically improves help however requires some setup.

I hope you discovered this tutorial useful. Remember to try this submit from the Envato weblog, and any of those articles from Envato Tuts+!