The Tutorials Online

In this 10 Part Course of Tutorials I will Show u different kind of styles, how we can design animated banners with Photoshop and Image Ready. I will start from a Basic tutorial. We will call this Part -1 .

All you need is a Photoshop with Image Ready. I am making tutorial on Photoshop CS2 9.0

Ok so first step we will take a Canvas of size 200 ( Height ) X 100 ( Width ) in pixels with white base.



Step 1 :- Now we will make something good so that we can show reflection of ball bounce. so we will take Dark to Light gradient over canvas. Get the Gradient tool and expand the canvas so that we can make something realistic.



Step 2 :- Implement the Gradient



Step 3 :- now we need a ball , so we will either make a ball or will do Google Image search to get a ball. Bcoz to save time here i will do search a ball on google and will use that .

Ok so i got a good ball i will show u how i will clear its unwanted canvas which is fixed with the ball in its background.

we will take the ball in Photoshop and then select the magic wand and apply that in unwanted parts and delete them.



Step 4 :- Our ball is cleared now so we deleted the unwanted background from the ball image.



Step 5 :- Oh , unfortunately the ball is bigger in size then our canvas width so what we will do ?

yep right , we will make it smaller then the canvas so that we can give it good look. here we go



then make it under 100 width so lets go for 90



Step 6 :- ok then we copied ( CTRL+A then CTRL+C ) the ball and pasted ( CTRL+V) on the Canvas.

so result will come like this



upto this it looks good ?

ok lets move on

Step 7 :- time for some fun so we will Duplicate the ball layer by selecting the layer and press CTRL+J so it will become Duplicate.



Step 8 :- select the move tool and and move the layer to bottom



Step 9 :- then make the layer Flip Vertical so that it reflects the bottom or first image. EDIT > TRANSFORM > FLIP VERTICAL



Step 10 :- now we will go to make this layer transparency to 10% so it will look nice like a reflection of ball.



So our template is ready now the next work will start on Image ready.

we will move the canvas to Image Ready by pressing



IMAGE READY STARTED WE WILL START ANIMATION NOW

Step 1 :- On the animation bar ( Window > Animation )





Step 2 :- we will duplicate the frame





Step 3 :- Now select the first frame and off the reflection layer



Step 4 :- now go to second frame and on the reflection layer and move the main ball layer upto reflection image layer so it got match the tip to tip. like this



Step 5 :- Select both frame and set the time to 0.2 and do Save Optimised as





So here is the result



This was the idea u can implement more ideas and make it more real by adding more frame in short intervals or can adjust more bounces heights etc.

I hope u enjoy this part. Will meet in next part for Text Animation.

Take care Enjoy