Animated Sprites:

Sprite: A sprite is a graohic image, usually a character or object incorporated into a larger scene. Sprite sheets are used for animation purposes to speed up the process of displaying images to the screen.

Turning a sprite sheet into a GIF animation:

Firstly I loaded up this pre-made sprite sheet into Photoshop and separated each image into its own layer.

sprite-sheet-example

Then I lined them up on top of each other and used to ‘Timeline’ feature (under ‘Window’) to turn each layer into a frame. After that I set each frame to 0.04 seconds (around 24fps) and saved it as an animated GIF (File/Export/Save for Web).

bird-flyingbird-flying

Creating an animated loading circle symbol GIF:

Similarly, using the ‘Custom Shape Tool’ I created a basic ring shape.

Then, using the Gradient tools in Blending, I created a yellow and blue (complimentary colors) gradient.

I duplicated this frame 24 times and would rotate the angle by 15 degrees as seen below.

presentation1presentation1

In the same method as the bird, I animated each frame to 0.033 seconds per frame (around 30fps).

loading-circle

 

 


Leave a comment