I have created animated gifs using Photoshop. I chose this ball from a google image and made it bounce using the timeline and tween tools and added 10 frames.
This is my bouncy ball!
Ball uploaded into the Photoshop.
When I added the ball in Photoshop I clicked the timeline button to animate the ball. I had to make the ball smaller and put the ball in position from start to end while the ball bounced up and down.
I clicked the tween and add 10 frames and the ball bounced up and down.
This is timeline that I created to bounce the ball.
After that, I clicked the Save for Web in the file button and clicked to save in GIF. Also clicked the looping options to show the ball bouncing forever.
Taa-daa, here is the Animated Ball that I have made:
I found it easy to understand how to animate in Photoshop. I always thought photoshop was used only for still images but got quite a surprise to find I could create moving objects. Loved doing this!
Upload into Website
I decided to put the animated ball into a website I created using Coda because I wanted to experiment with how much I have learnt already.
I have added images of the ball and animation of the ball into this website. The code that I used was:
I knew how to put the ball on a website using this code <img src=””> via images in the web folder.
I have made the website of the ball and added heading, images, animated, background, colour and text.
This is how the website looks.
I have added the code on Coda for heading, images, animated, background, colour and text and also know about CSS and how to add colour, size and text-align of heading.
I understand now how to add images using Coda and create animated gifs.
Here is my website link: