Fullwidth Preloader idea I put together for my website (currently building on localhost)
Tools/Technique Used:
AFTER EFFECTS 2014
-Twitch
-Color Change
- Key Color
- Text Hacker
Rendered out at 24 FPS with Apple ProRes 422 (HQ) Codec. Disable Audio Output.
I've found this is a great method in going about perfecting a seemless loop. This final GIF is actually made via Photoshop.
PHOTOSHOP 2014
-Import AE Render Loop
-Save For Web
-Select GIF Format, set loop to "Forever"
GIF's can get pretty hefty in size. Especially one intended for the full width of a screen.I would have preffered to set the initial composition render settings to 1920x1080, but the outcome in file size is simply not plausible to create a GIF from. Instead, Render out at 1200x720 (or 1200x 680). This render is managable. Select GIF Dither 64. Depending on your animation sequence, try and reduce the file size by tweaking the various settings. Increasing the "Dither" will add more clarity to the pixels on screen, removing grain. This will also typically increase your file size output. Increasing the "Web Snap" slider will alter your color output to a web friendlier color pallete, decreasing the final output. However, this will also effect the overall quality of the image. You can also change the color amount to 32, 16, 8, 4, or 2 instead of 64. Know that the more colors you restrict your GIF from having in the output, the worse off your final look will be. It is, however, highly effective in reducing the final output size. As a final trick, try selecting individual colors and choosing the "transparency" option. You can "hack" your way through your GIF and remove some of the extra colors that are only taking up needed data space.
Remember, think about your animation and what you are really trying to get across artistically. Using Twitch and other grungy filters in After Effects gave me leeway while tweaking the final GIF settings in Photoshop. Because I went with a more grungy/edgy feel, picking up some excess grain to reduce the final file size ended up working in my favor.
-Cheers!
Branden Dane
Full Stack Developer
