How to Create Animated Dribbble Shots
"How did you create that animation?" This is a question I get a lot on Dribbble as well as inbound email inquiries from curious minds alike. After responding individually to a dozen or so people, I figured I should write out my process for future reference.
TL;DR
- Animate in Flash
- Export as
.mov - Import Video Frames as Layers in Photoshop
- Save as
.gif - Done
It All Starts with Design
Animation won't save a poorly executed design. It will only reveal its crappiness. Make sure you spend the proper amount of time getting your idea and pixels just right before jumping into animation. Design is the cornerstone for a great animation.
Once you have realized a great design, animation can really give it a little bump up to 11. Animation is good for communicating interaction ideas, transitions, etc. and I've found that a simple animation can go a long way when it comes to explaining your ideas to coworkers and clients.
Flash is Dead, but I Still Use It
Flash might be dead as far as web publishing goes (except for video, games, copy and paste buttons, etc.), but it's still a valuable and powerful animation tool.
Disclaimer: The only reason I use Flash is because that is how I started back in the day and still know the software fairly well. It's what I'm most comfortable animating with. If you know After Effects, use that. Keynote junkie? Use that. The key is, use what you're comfortable with. The software doesn't really matter.
I import my psd, or pieces of it, into Flash and create a timeline based animation. If you do use flash, all of the animation needs to be on the root timeline with no nested animations. This is because you need to export a .mov and exporting this format only captures root level animation.
Flash exports gifs, but the quality is pretty bad. When you're done with the animation, export it as a .mov file instead. If you're interested in a quick and simple Flash animation tutorial let me know and perhaps one day your wildest dream will come true. Until then, here's a high speed video showing how to create simple animations.
Back to Photoshop
After the animated .mov is exported, crack Photoshop open, go to File > Import > Video frames to layers. It's kind of mind blowing that this is possible.
This creates lots of layers in your document and creates a frame animation in your timeline. Choose File > Window > Timeline and you'll see how all of the frames are already in place based on your mov. To make sure your gif never stops, set it to Forever if it's not already.
Once this is done, Save for Web as a .gif and you're all set!
Here's a video showing a quick animation done in Flash.