over 8 years ago from Michael Knepprath, Front-End Developer
I've been seeing a lot of great animations on Dribbble - I'm exciting to start submitting some myself. Just curious about what you guys are using to create/export them? Thanks!
Here is a good writeup of how you can make animated gifs.
http://blog.invisionapp.com/7-tips-for-designing-awesome-gifs/
+1 for screenflow.
Thanks, great info!
Create GIFs with Sketch - Timeline plugin
Starting with a limited palette seems to have the biggest impact on how good my gifs look. Flat UI animation always works well.
Compare the limited colour of this animation: https://dribbble.com/shots/1478345-Bunny-Strut-walk-cycle-v1
To the dithering needed to squeeze this one out: https://dribbble.com/shots/1851534-Final-animated-and-composited-with-video
Any tips on improving on the quality of the last gif would be appreciated.
I use GifBrewery to fine tune gif rendering. http://gifbrewery.com/
Looks interesting. Thanks!
+1, my process too.
Has no idea people still used the Flash app, that's kinda rad (not trolling I promise).
Lots of video game designers I know create their visual assets on Flash.
You might also try uploading your .mov to imgur as a gifv. The quality is great and the file size is much smaller.
http://imgur.com/blog/2014/10/09/introducing-gifv/?forcedesktop=1
Create GIFs with Sketch - Timeline plugin
You can create gifs like 
in Mokup. https://mokup.me
Upon recording your interactions you can choose to save file as GIF or MP4 and select an export template: flat or perspective.
My problem is sizing!
Every time I try to upload a gif, I'm not allowed because the size isn't right and I don't know how to make it the exact size so I give up!
There is an application that does just that: https://www.mokupframes.com/
Webm format is the future!
Dribbble should support video. Why a poor-quality gif with a massive files size over a high-quality video with a small file size?
you can create gifs, videos, html5 and animated svgs
After Effects all the way!
GIF Brewery is nice, but for all of these I just render the video out to After Effects, open the video as layers in PS, drop every second frame and fine-tune in Save for Web.
I've started using Adobe Edge Animate. It's almost a crossover between Photoshop and After Effects.
A great free alternative for creating GIFs out of video or image sequences is Adapter. It also does many other conversions. http://www.macroplant.com/adapter
Adobe After Effects & Photoshop.
I use frame by frame animation in Photoshop to do someting like this https://dribbble.com/shots/1916170-100-music
We use these 3 depending on the purpose:
LICEcap is great for quick screen recordings (http://www.cockos.com/licecap/)
AfterEffects + Photoshop for web animations
ScreenFlow if it needs to be edited
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now