Create Your Own Animated Pre - Loader in Photoshop

Create an animated pre-loader gif for your next UI project

Andrew Wilson is going to create a little animated gif that can be used for a multitude of widgets, anytime ajax content is being requested, files are being uploaded, whatever you fancy. Feel free to mix-in your own styles and variations to the loader as you go along. There are three major sections you will be undertaking: creating the loader shapes, styling the loader shapes and animating the loader.


Begin by setting up the canvas size, and add a quick background to get started. Create a new document 100px by 100px. Double click on the BG layer and convert it to regular layer. Set its color to dark gray #3d3d3d. Just for kicks, Andrew Wilson will add a lined pattern to his background, and then start work on the loader. Create a new transparent document: (7px by 7px). Draw a diagonal line with a 1px black pencil tool (click the top left pixel, hold down shift and click the bottom right pixel). Define and name the pattern (Edit menu > Define Pattern). That done, jump back to the original document and create a layer style of “Pattern Overlay” on your gray background layer: (Layer menu > Layer Style > Pattern Overlay). Choose your pattern from the pattern box, and lower the opacity.


Be the first to write a comment

You must me logged in to write a comment.