Welcome to The Helpful Art Teacher, an interdisciplinary website linking visual arts to math, social studies, science and language arts.

Learning how to draw means learning to see. A good art lesson teaches us not only to create but to look at, think about and understand our world through art.

Please click on my page to see my personal artwork and artist statement: http://thehelpfulartteacher.blogspot.com/p/the-art-of-rachel-wintembe.html

Please contact me at thehelpfulartteacher@gmail.com. I would love to hear from you.

Friday, September 21, 2018

Create a bouncing ball animated GIF in Photoshop

I created the video below to show you how to create your first simple animation using Photoshop. First, create a PSD with two layers. The ball should be in one layer and the background in another. Move the ball gradually around the screen,  saving  the image as a PNG file, each time you move the ball. Your objective is to show the movement sequence. Make the balls go in a cycle. In other words, the last image should have the ball  positioned almost back to where it started. If you do it correctly, the animation will be able to loop continuously.

After you have the PNG images you need, save the PSD file (just in case) and close it. Then click file, scripts, load files into stack.

If you cannot see the timeline, click Windows at the top and make sure 'timeline' is checked off. Click on the timeline and 'Create frame animation'

Your next job is to click on the small lines at the bottom right corner of your work area and click 'Make frames from layers' on the pop up menu.

The video will walk you through saving your animated GIF, resizing it and changing the speed of the animation.

Below is a GIF that I created from a sequence of photographs of my own drawings, created with Sharpie marker on tracing paper, and photographed using the Turboscan app on my iPhone. 
Now that you understand how an animated GIF works, try creating a more complex sequence of images. Try creating a cartoon of a  person with growing hair, beard or mustache, planets orbiting, the moon and sun rising and setting or any other simple movement cycle you can think of. Next, try animating a walk cycle:

Here are some walk cycles from animations I have created:

Click here for my complete digital technology supply list.

No comments:

Post a Comment