Get it right from the start
Okay, so although you can make changes to your animations when you’re working on them, it’s always easier and better to get your documents and compositions setup correctly before you begin.
The biggest question to ask yourself is where you want your animation to end up, and in what format? A gif? On a 4 or 5k screen? Instagram? YouTube? And then ask what size your gif or video should be, and perhaps at what frame rate.
Most of the platforms you upload videos to will compress your videos after upload, so video file size isn’t normally an issue. If you have a slow internet connection or are worried about file size then render videos as .mp4s, or using the H.264 format.
Gifs are images and should be as small as possible, especially if you’re planning on sharing them online. Just don’t sacrifice too much quality. The smaller the dimensions the smaller the file size. Anything under 1mb is great. I try keep mine under 2mb if possible, but lately I’ve been quite lazy and want to retain as much quality as possible.
Videos dimensions are flexible, but the 2 most common dimensions are:
- 1280px wide x 720px high
- 1920px wide x 1080px high
Instagram has a max width of 1080px and a max height of 1350px, and requires videos to be between 3 and 60 seconds in length.
Dribbble accepts images (including gifs) in 2 dimensions:
- 400px wide x 300px high
- 800px wide x 600px high
I’d opt for the bigger one, just because 400 x 300 is tiny, especially on Retina displays.
Skillshare project images have a max width of 578px, and I think a max file size of 2.1 mb.
So those are the dimensions and file sizes to consider.
You can animate at whatever frame rate you like, but there are a few that make more sense:
25 fps, 30 fps, 60 fps
- There are some pretty hefty technical reasons and a few non-technical ones.
- If you’re worried about file size, use a lower frame rate.
- If you want your animation to appear smoother, use a higher frame-rate.
- I like 30 fps because it’s easy to divide up into smaller sub-units of animation, isn’t as crazy big as 60 fps, and still looks pretty smooth.
- Also, in After Effects, you can always opt to use motion blur to give your animations a more realistic look. But small gifs aren’t big fans of motion blur – just so you know.
- If you're creating a stop-motion animation use 10 or 15 fps.