Do the gifs look good on any background?
The gifs all come with a transparent background. Unfortunately, the gif file type has some restrictions – which is where the Photoshop file comes into place.
The way transparency works with gifs is that a pixel is either fully transparent or fully opaque.
For example, take a static image showing a circle on a transparent background. At the edges of the circle where the circle blends transparently to the background, there are usually pixels that are semi-transparent to smoothen the transition. This smooth transition can’t fully be reproduced with gifs – resulting in ugly jagged edges.
To avoid this, the gifs are saved with a ‘background matte’ for all those semi-transparent pixels. This means those pixels that are not fully transparent get their color calculated as if they were on top of the background color. A gif saved with a white background matte will therefore look best on a white background.
The Micro Animations can be purchased with a white matte (#fff) and a black matte (#000). The closer your background is to any of these, the better the gif will look.
If you want to save them to your exact background color (recommended for brighter colored backgrounds), take the Photoshop file and save it with your matte color. Learn how to do that here.
What’s included in my download?
Each animation is offered in two versions:
Includes the animated gif file suitable for a light themed prototype (matte #fff). All relevant static png starting and ending state images are included to further smoothen your prototyping process. The Photoshop source file is included too, which enables you to save as a gif with your custom matte color.
Includes the animated gif file suitable for a dark themed prototype (matte #000). Also includes all relevant static png starting and ending state images, and the Photoshop source file.
What license comes with my purchase?
All gif animations and png images are royalty-free, which means they can be used in final apps and sites if desired, as long as you don’t re-distribute the Micro Animations with your app/site.
How do I get started?
The templates come as a .zip file. Decompress the file on your Mac or PC, then open them in your favorite design tool and load them onto a new canvas to create your animated prototype.
For a more detailed explanation, find step-by-step guides for different prototyping tools in the tutorials.
Can I sell my own animations on your website?