Created with Adobe Firefly

Right Tool for the Job

There are fundamental differences between Photoshop and Illustrator, even if some of the tools look the same. It's a mistake to use the paintbrush tool in Illustrator in the same way we do in other programs. It doesn't mean it has to be harder to create!

Watch on YouTube

Pencils and Brushes

When making custom shapes from scratch, it's a mistake to "scribble" with the wrong tool. To create a path that encloses an area, use the Pencil and move anchor points around afterwards as needed. (The Pen can be hard to master). If it's something you would use a crayon or marker for on paper - it's the Blob Brush tool you want!

REMEMBER : Use the Pencil tool if you want to outline something, use the Blob Brush tool if you want to paint something in. Don't get the two mixed up - you won't get good results!

Placing Images in Illustrator

Scaling designs in Illustrator does not change the size of an inner glow or stroke. Using File --> Place will let you put a separate file into Illustrator, and the Link option will keep that connection live. If you alter the external file and save it, the change will be visible on your artboard soon afterwards!

Simple Emoji Body

A character you've drawn in Illustrator may want features like arms and legs! You don't have to spend too much time on drawing them unless you want to - here's an easy way to create some.

Exporting PNG Files with Transparency

The PNG and GIF formats include "Alpha Channel" information - that's an extra number that says how transparent a pixel is. We really only use the GIF format if we want to make a small animation - the PNG format is Lossless, meaning it does not have a quality slider since it has very little compression. File sizes are larger, but they look better!

The PNG and GIF formats include Alpha channel information - that's an extra number that says how transparent a pixel is. We really only use the GIF format if we want to make a small animation - the PNG format is Lossless, meaning it does not have a quality slider - it has very little compression. File sizes are larger, but they look better!

When you perform a File --> Export As, there are several options for file type. Select PNG, then decide whether you need the image cropped to just your design. If not, check the "Use Artboard" option to get results that are not 1920 x 1080.

Click EXPORT to continue to the next screen:

Medium is a good general Resolution size - it gives nice large results without creating huge file sizes. Use Screen (72 ppi) if you just need a little version, and High (300) or larger (enter your own) if a much larger image is needed (like for printing).

Use Art Optimized unless there is text in your image, although both give really good results, so you can just ignore that setting.

Choose Transparent unless you really need the surrounding pixels to be either black or white. It gives you tremendous flexibility to change the background to whatever you want later.

Step 0

Check Your Layers

Before starting After Effects, review the layers your assets are arranged on and ensure they are clearly labeled. You don't want to make changes to their names, order or grouping once it is in use. Don't rename the file, either! Even moving it can break the connection and it is always tricky to re-establish.

Step 1

After Effects Setup

Introducing... After Effects, the biggest, baddest program Adobe offers, capable of amazing things. We'll scratch the surface with this project in preparation for the big ELAR Monster one coming up.

Step 2

Keyframing Emoji Features

If you only have an emoji face or just want to watch ONE video after setting up the project, this is the one you have to follow.

Students who are truly interested in learning animation have more videos in this series to watch...
Make the arms wave, feet stomp, and bend and warp layers with the puppet pin tool below:

Keyframing in AE

We can keyframe the rotation of the Emoji head so that it bobbles back and forth, but we need to first change the location of the Anchor Point. There's a tool for that!

Step 3

Animating the Arms

We can also keyframe the arms to move up and down with the Rotation property, one at a time or both together. Create your own action - you don't need or want to follow this one precisely.

Step 4

Animating the Legs

There are other properties in the Transform family that can also be keyframed - I just changed the position of one of the legs this time around.

Step 5

Exporting a Looping GIF

No point in doing all this work unless we can share it! There are two formats we use - MP4 is for high-resolution video and the GIF's create an animated image. GIFs should never be 1920 x 1080! When in doubt change it to 400. GIFs are great for placement as an image on your portfolio page. Making them loop perfectly is an art that's worth taking the time for!

Alternate Exporting Video

Here's another video talking about exporting GIF's in more detail, leaving out the technique for perfect loops. GIF's are NEVER 1920 x 1080 and have two modes for transparency, "hard edge" and "dithered". I don't care much for dithering.

Step 6

Keyframing Facial Features

Features like the eyes and mouth can be keyframed inside their own composition; the animation will show on the emoji's face as it bobbles. Here we change the scale of the eyes and introduce the puppet-pin tools to change the shape of the mouth.

Animated GIF version

Short, looping with Transparent background. No audio.

241115 Ping Emoji 8 - Moshue Hicks.mp4

MP4 Video Version

High resolution MP4. Background black unless a separate solid layer is added. Must loop in the player, includes audio.

Page updated

Report abuse