This is a Tutorial on How to Make A Realistic Bouncing Ball Animation Gif.

First start a new photoshop file. Under preset, select Web. Then you come a page with width, height and resolution option. Insert the value as follows:-

Width x Height = 200 x 200 pixelsResolution = 72px/inchColor = RGB 8-bit

Using the marquee tool, create a circle (hold shift and drag to make a perfect circle), and fill it with any color.

To fill color, choose your color and then press Alt+ Backspace.

Holding ‘alt’, click and drag the ball to duplicate it. This will create the ball in a new layer.

Ball 1

Ball 2

You may rename the layers if you like (example: ball 1, ball 2) as we will be dealing with more duplications later on.

Here, we’re going to start making frames of the animation. First of all, for a realistic looking bouncing ball, we’re going to transform the shapes. Using the free-transform tool (ctrl+T), manipulate the shape of our blob (like in the diagram) to create the illusion of a bounce.

Keep on making copies of the ball and transform them if needed, until you get the full action of the ball bouncing from top to bottom. Align them properly and make sure you put some good distant between each ball. If you can’t see properly the position of the ball, you can use the opacity tool to lighten the ball or just uncheck the eye icon on the layer column.

Satisfied with the alignment, you then go to Windows > Animation. It will pop out at the bottom of the screen the animation bar with timeline.

Click on the small box on the right hand corner of the animation bar. If you do not do this you will not be able to see the small box on the left.

First of all, I’ll explain what does the box mean. The box is an animation frame. Like in flip cartoon, each frame has its own action. By arranging many animation frames together, you can make the object move.

Therefore, for each frame just uncheck all the eyes in the layer column except on the one you want to show. In this example, I have uncheck all the layers except the layer which is the starting point of the ball.

Make a new frame by clicking the Create New frame icon beside the trash can icon. Continue doing this until you get the full animation by unchecking and checking the eye on the layer column.

After you got all your sequences right, that is the ball is bouncing from bottom to top, you can adjust the time of each frame to make the movement of the ball more realistic. Click at the bottom of the frame where it indicate time. There is no hard fast rule for this. You can keep experimenting with the best time for each frame until you are satisfied.

Use the play button on the lower left of the screen to check whether you have got the bouncing sequence correct.

Here I just show you that I rename all the layer so that it would be easy for reference. If you haven’t done it yet u might want to try to organize it.

You can set the animation to play once, three times or forever by using the option here.

After you are satisfied with the result you got. Go to File>Save for Web & Devices to save your file. You can also press Alt+Shift+Ctrl+S to go straight to the page.

Before that you can also save a copy of the editing file as PSD format for future reference.

Make sure that you save the file in GIF format or else it won’t animate.

Then make sure your animation is properly animated by using the function here. Choosing looping option forever will make the ball bounce indefinitely.

Click save, name your file and you are done. Double click on your gif and it will play on the internet browser.

And then you will have your first self-made animated bouncing ball.