Animate your images to attract attention and fight the static boredom. This section contains tutorials to help you master the animation process.  Home Photoshop ImageReady Animation Conceptual Animation for Directions

Conceptual Animation for Directions


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 Tutorial: Final Result



Author's URL: Invano.com
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Conceptual Animation for Directions"

Only registered users can write comment

Reader's comments