A ARTE DE GUACIRA SAMPAIO ROCHA 2008

"Make your buttons, ladies and gentlemen!"

 

Let's make buttons? Follow the next steps to produce one of the most common buttons in the web, and the most easier to do, as I'll show you. As complement, we will "animate" that button, showing you how to give a pleasant movement in your web pages and e-mail backgrounds.

The procedures that will be presented to you were prepared in Paint Shop Pro7, and Animation Shop 3, that comes together the PSP. However, you can work with similar procedures on your favorite animation and graphic edition softwares.

Follow the steps:

1
come along looking these graphics: Open a New image, transparent, and draw a circle with the preset shapes tool , Antialias checked, line "1", and the same color in foreground and background (on Colors Palette). Keep pressed the Shift key while drawing to obtain a perfect circle).




2
Select the circle (Selections/ all, and click the center of the circle with the Magic Wand). Click on the background color palette and set a gray dark color, with White color to foreground. Click on foreground palette and choose the 'gradient' icon. Apply the sunburst (that one that looks like a circle), "foreground/background", vertical and horizontal fields with 35px, and set the flood fill tool options to: blend mode: normal, match mode: RGB, tolerance: 200, opacity: 100

 

3
Click Selections/ Modify/ Contract/ and set it with 15px. One part of your image will be automatically selected. Do not deselect it...

4
Click Image/ rotate/ right/ 180°

5
Contract once more, 2px this time.

6
At this point you've done your first frame. Press the Shift+D keys to make a copy, and minimize it. Return to the original image to continue working.

7
With the central image still selected, rotate it again, the same way you did previously.

8
Click Colors/ Colorize and set the parameters of your choice. By example: hue: 26, saturation: 200. Apply

9
Up to here you have two frames, with this last one. Bring them all to 'stroll' in Animation Shop. Follow the appropriate steps at the tuto "Cataventos animados" to make your button animation.

If you want an effect alike the first one of those I present bellow, make regular rotations of 45°, right, on the salient circle, as much as necessary, and bring them (all) to the AS.

Some examples:

 

 


back to the top

Have fun!

Guacira Sampaio Rocha
rights reserved
previous next

back to tutorials

home
galeria
arte virtual
scrijpts
Página 2
imagens digitais
links
guest book

 

A ARTE DE GUACIRA SAMPAIO ROCHA 2008