SIMPLE ANIMATED BUTTON, STEP BY STEP

     I started out with a simple dark blue square and "cross-hatched" it with a white x.  I then filled in the colors in examples 02 and 03.   The next step was to rotate the square 90% four times and save each rotation as in examples 03 (first fully colored square), 04, 05, and 06.   I made each of these squares smaller in Photo Impact - 07, 08, 09, and 10. The final step was to import these smaller squares into the GIF Construction set to create the final animated gif, example 11.  Please note that the sizes in these examples are larger for demonstration purposes than they would be in making a usable button.  See the gold button below that returns you to the graphics main page for an example of actual size used in pages.

CLEAR DOT USED FOR SPACING

01.  BLUE SQUARE WITH WHITE CROSS BARS, MAKING FOUR TRIANGLES
02.  SAME SQUARE WITH THREE DIFFERENT SHADINGS OF BLUE, LOOKS 3 DIMENSIONAL
03.  SAME SQUARE AS ABOVE WITH WHITE CROSS HATCHINGS COVERED IN LIGHT BLUE, THIS IS SQUARE #1
04.  SAME SQUARE AS ABOVE, ONLY TURNED 90 DEGREES, SQUARE #2
05.  SAME SQUARE TURNED YET ANOTHER 90 DEGREES, SQUARE #3
06.  SAME SQUARE TURNED 90 DEGREES YET AGAIN, SQUARE #4
07.       SQUARE #1 MADE SMALLER
08.       SQUARE #2 MADE SMALLER
09.       SQUARE #3 MADE SMALLER
10.       SQUARE #4 MADE SMALLER
11.       FINAL ANIMATED BUTTON MADE BY PUTTING SQUARES 1,2,3,AND 4 TOGETHER IN GIF CONSTRUCTION SITE WHICH PRESENTS THEM QUICKLY ONE BY ONE

gold bullet   Return To Graphics Main Page