Her

Home Photoshop Tutorials ImageReady Animation Conceptual Animation for Directions

Conceptual Animation for Directions

Author: Invano.com Author's URL: www.invano.com More by this author

Start by creating a new file. Fill the background with the black color. Create a small rectangle using rectangular shape tool.

image 1

Duplicate the layer several times and place as shown in the image below.

image 2

Select all the rectangle layers and duplicate them. Create some more duplicates and place as shown.

image 3

Open animation window. For the first frame hide the small squares to create left arrow shape. Follow along the images below to decide about the squares to hide.

image 4

Duplicate frame. This time hide the squares to create an up arrow shape.

image 5

Duplicate frame. Similarly hide the squares to create an right arrow shape.

image 6

Repeat the above step to create a down arrow shape.

image 7

Create a duplicate of first frame and move it at the end of the frame sequence.

image 8

Select the first two frames. Press tween button in animation window. Apply settings as shown.

image 9

Select the 7th and 8th frames. Similarly tween and create additional frame.

image 10

Select the 13th and 14th frames. Similarly tween and create additional frame.

image 11

Select the 19th and 20th frames. Similarly tween and create additional frame.

image 12

Adjust delay durations as shown in the images below.

image 13

image 14

Press Ctrl+Alt+Shift+S to save an optimized animated GIF.

Conceptual Animation for Directions