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.
+1 for screenflow.
Thanks, great info!
- I create the animation in After Effects or Flash
- Export as a Quicktime .mov
- Open this video in Photoshop
- Save for web, then spend an inordinate amount of time adjusting the GIF options to squeeze the best quality out of it.
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.
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/
- AE Render
- PS 800x600 Composition > Render Video
- GIF Brewery 3 for Mac > 64 - 128 colors
- ImageOptim for Mac (makes a .gif around 30% smaller)
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