Images and Animated Gifs


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.



Screen Shot 2014-10-27 at 12.42.54

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.


Screen Shot 2014-10-27 at 13.07.51 Screen Shot 2014-10-27 at 13.10.01

I clicked the tween and add 10 frames and the ball bounced up and down.


Screen Shot 2014-10-27 at 12.42.59   Screen Shot 2014-10-27 at 12.44.10

This is timeline that I created to bounce the ball.


Screen Shot 2014-10-27 at 12.43.31 Screen Shot 2014-10-27 at 12.43.38

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:

Screen Shot 2014-10-27 at 16.10.51

Screen Shot 2014-10-27 at 16.07.08


I knew how to put the ball on a website using this code  <img src=””> via images in the web folder.

Ball website 

I have made the website of  the ball and added heading, images, animated, background, colour and text.


Screen Shot 2014-10-27 at 16.06.21

This is how the website looks.



Screen Shot 2014-10-27 at 15.56.28Screen Shot 2014-10-27 at 15.56.14




Screen Shot 2014-10-27 at 15.56.31Screen Shot 2014-10-27 at 15.56.42


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:








Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s