Steam Community :: Guide :: How to animate a character for your steam profile using After Effects

> Guides > Quip's Guides

340 ratings

How to animate a character for your steam profile using After Effects

By Quip

In this guide, you will learn how to easily create your own animated artwork for your steam profile !

Award

Created by

Quip
Offline

Category: Achievements, Gameplay Basics, Modding or Configuration, Secrets, Story or Lore, Trading, Workshop

Languages: English

Content Descriptors: General Mature Content, Some Nudity or Sexual Content

Posted

Updated

Jul 18, 2024 @ 2:32pm

Sep 6, 2024 @ 11:23am

13,528	Unique Visitors
513	Current Favorites

Guide Index

Overview

Selecting a background

Setting up After Effects

Adding the character

Animating the character

Exporting the video and converting to GIF

Uploading to steam

Rate and Favorite !

Comments

Selecting a background

First, go to Steam.Design (link was removed, sorry about that) to select a background you want from your inventory and download the zip file containing the cropped images.

Setting up After Effects

Open a new project in After effects and drag the Artwork_Middle.png straight into the left panel where your assets are

You can then drag it in the panel below to add it to a new composition. It should automatically set the settings correctly and you should have something like this.

Adding the character

Now, you need to find a character you like or create your own. It should have its limbs a bit separated from its body (you can still fiddle around if it doesn't, but you will have less freedom) and have a transparent background (you could also use an image editing software to remove the background).

I will be taking this anime guy

Simply repeat the same process that we did for the background and resize the character to fit in the background.

Animating the character

Now comes the fun part. We need to animate the character. For that, we can use the puppet effect to animate the limbs.

Select the pin icon in the tool bar

and put a few pins on the limbs and body parts. The ones we don't animate will serve as holding down the rest of the character when the limbs move. We don't need to worry about pinning outside the character since it has a transparent background. For me, these pins will look like this.
Now, move your timeline a bit forward and move the pins (hold shift to select multiple) according to where you want them to be after that time. When you're happy with the positioning, press F9 to smooth out the animation keyframes.

Then go search your selected pins under your image>mesh>deform and copy the first keyframe and paste it where you want your animation to go back to its original state.

Repeat the process for other parts you want to animate and you should get something like this.

Now, I know this is not the best animation, but this was simply for tutorial purposes. Spend more time on it and you will have a better result. You can also add other effects such as glow, a global translation to give it more dynamic, etc. Also, separating the character's body parts before hand in different images that have overlaps, you could have way better results too !

Exporting the video and converting to GIF

Great, now that you are done with the animation, you can go ahead and select File>add to render queue. Now you can click on the name of your exported file to select its location and by clicking on the Output Module, you have to select png sequence as the format.

Now we need to open photoshop to create the gif. Go to open and select the first frame (xxxxx_00000.png) and check image sequence then enter the framerate at which you exported your video (should be 30 by default)

Now that it is opened in photoshop, make sure you have the timeline panel opened by going to window>timeline.
If you press space, you should see your animation.

Now, to export it as a GIF, go to file>export>save for web (legacy).
In the new window, you can play around with the Dither, Number of colors and Lossy settings to get your artwork below 5mb (it used to be 8mb but hey ♥♥♥♥ you steam). This way, you have much more control over your compression rather than fiddling around a compression website that will randomly increase back its size.

Press save when you're done. Congrats, you made your first character animation for steam !

Uploading to steam

Finally, go to this page and make sure you are logged in through steam. Upload your artwork and give your artwork a title, a description if you want to. Make sure it is set to public so it can be displayed on your profile and check the Rights and ownership section at the bottom of the page.
Before uploading, if you have a long image like me, open the dev tools (F12 on chrome or Shift+Ctrl+C on opera) and select the console. Type this in

document.getElementsByName("image_width")[0].value=1000;document.getElementsByName("image_height")[0].value=1;

and you should get a return value of 1 if it worked properly, like such.