Images and Animated Gifs

Animated 

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!

champions-league-ballBall-Animated-forever

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:

Ball-Animated-forever

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.

Images

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:

http://www.minimise.org/student14/saadserver/Ball%20Amianted/

 

 

 

 

 

 

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s