|
Last Updated: Apr 15th, 2008 - 18:38:37 |
|
We will create a '.gif' bouncing ball, using Adobe Photoshop only. This tutorial will guide you through detailed steps and high quality image illustrations are provided to ensure that you grasp the facts and procedures.
Tools used throughout this tutorial:
*Elliptical Marquee Tool
 |
| Bouncing Ball |
|
As part of the 'Marquee Tool' family, the 'Elliptical Marquee Tool' serves its purpose well. You can create oval and circle shapes with this tool, and alternate them to suit your preferences. This tool can be found on the 'Tools' panel *or you can access it by pressing 'M' at any time during your design. Once you have drawn a circle with this tool, you can right click inside the shape with the tool still actively selected, in order to choose the preferences, such as 'fill', 'stroke', etc.
*Gradient Tool
 |
| Bouncing Ball |
|
|
This tool can be found on the 'Tools' panel, with all the other tools. It is mainly used to create smooth or sharp color-flow gradients on certain areas of your design. It uses both the primary – and secondary colors in conjunction, in order to create the flow. To create a gradient, click at one point, which will be the beginning point of the primary color, then drag the cursor to another point, and where you release the cursor, will be the point where the secondary color ends. *Access this tool by pressing 'G' as a keyboard shortcut.
Creation and Implementation:
Create a new '.psd' file on which you will start you new design. You can do this by going to 'File > New…' *or by pressing 'Ctrl' + 'N' as a keyboard shortcut. This will open a prompting dialog on the workspace, which allows you to specify the preferences, sizes and color schemes of the new document. View Figure1 as an illustration to the exact values which needs to be inserted.
 |
| Bouncing Ball |
|
|
Name your document according to your personal choice. Set the width of the document to 250px and the height to 300px. Ensure that the measurements are set to 'pixels', and not 'centimeters', 'inches' or something else.
The resolution field has to be set to 800dpi to ensure that your design will be top quality. The higher the value in this field, the more pixels your design will contain per inch, thus giving you a finer detail design. Press 'Ok' to continue creating your document. You will notice a new, blank design window opening on the workspace.
Select the 'Elliptical Marquee Tool' in the 'Tools' panel *or press 'M' to select it. Now click anywhere on the design window and drag to create a circle. Your circle should be more or less 140px in diameter. In order to allow Photoshop to create a perfect circle, you can hold the 'Shift' key while dragging with the 'Elliptical Marquee Tool'. By doing this, you create a perfectly round circle.
You should notice that the circle you have created is just a basic dashed outline. We will now fill the circle with the desired color. Move over to the 'Tools' panel and select the color you would like to use by setting it in the color box. Once you have set the color which you are going to use, right-click on the shape with the 'Elliptical Marquee Tool' still selected. Select 'Fill...' and press 'Ok' on the dialog.
You circle has now been filled with the desired color. See the 'Layers' panel. If the 'Layers' panel is not visible on your workspace, press 'F7' to make it visible. You should notice that you have one layer, named 'Layer1'. You can rename this layer as 'circle'. See Figure2 as an illustration to how your design should look at this moment in time.
 |
| Bouncing Ball |
|
With the area of the 'circle' layer still actively selected, you will now create a new layer, and rename this new layer as 'shading'. Select the 'Gradient Tool' situated on the 'Tools' panel. Before you apply a gradient, you need to reset the colors in the 'Color Box' to black and white. You can do this by pressing 'D' and then press 'X' to switch white as the primary color.
Now click on the top-left edge of the circle layer, and drag the cursor down to the bottom-right edge where you will release the mouse. Change the blending mode of the 'shading' layer from 'Normal' to 'Multiply' and then reduce the opacity to 60%, thus making the layer 40% transparent.
Create another new layer, and name this layer 'highlight'. Do exactly the same as you did with the shading layer, except three differences. The gradient will be dragged only half the diameter of the 'circle' layer, the blending mode will be set to 'Screen' and the opacity will be set to 70%.
View Figure3 as an illustration to how your design should look at this moment in time.
 |
| Bouncing Ball |
|
Your ball is now complete, and we need to create a shadow. To create a realistic looking shadow, you will select the 'Elliptical Marquee Tool' and draw a flat oval underneath the ball. You will then select the 'Gradient Tool' and apply a black and white RADIAL gradient to the marquee shape. View Figure4 below as to how the shadow should look.
 |
| Bouncing Ball |
|
We are now ready to start the animation. Read the paragraph below as guidelines to how the animation will be executed.
Animation in Photoshop works with frames. You can also use motion tweens to allow certain objects to change position, shape or opacity over a range of frames. The ball will go up slowly, and the shadow will become more transparent, as the ball moves away from the surface. The ball will then reach a top end, and come down fast, with the shadow regaining its opacity. Let's get this started.
Go to 'Window > Animation' to open the animation panel. You should see one frame, no1, with the design. Now duplicate that frame. The second frame will look exactly like the first one, but you now need to move the 'circle', 'shading' and 'highlight' layers upwards on the second frame. Also set the opacity of the 'shadow' layer to 25% on the second frame. Now duplicate frame no1 again, and move the frame to the position of frame no3. Click on frame no2 and create a motion tween between frame no2 and no1. Then do the same with frame no3 and no2.
You can now add the finishing touches, such as letting the ball go up slower and come back down faster.
To export the file as an animated '.gif' file for use on the web, go to 'File > Save for web...' and save the layered animation as a '.gif' file.
And you are done with your own animated '.gif' bouncing ball.
 |
| Bouncing Ball |
|
Top of Page
|
