I decided to write this tutorial while creating graphics for my website's forum. It is basically a flashing LED light I use for new topic's.
Requirements:
GIMP 2 (
http://www.gimp.org)
This assumes you have some experience creating simple animations, though it may not be neccessary, I have tryed to make it as easy to understand as possible.
So this is what I have come up with after a little experimentation. In the end, you should have something similar to the graphic below:
or as seen on the forum with a stonelike background:
This graphic has been shrunk down for use on the forums, I find it easier to work big then shrink afterwards.
Contents:
1.) New Image/Ruler Guides
2.) Setting Ruler Guides
3.) Shading
4.) Glow Layers
5.) Highlights
6.) Merging Bulb Together
7.) Background
8.) Time Delays
9.) Viewing
10.) Optimizing
1.) New Image/Ruler Guides:
The first step will be to open a new image, here I use 400 x 400 pixels with a transparent background. After opening the image go to the GIMP window and make use of the elliptical selection tool while holding the shift key. This will make a symmetrical circle like seen in the next screen shot down.
2.) Setting Ruler Guides:
Sometimes to get the best results, you need a little help. Thats where the ruler guide comes in. Click on the top ruler bar and drag a couple ruler guides down over the circular selection. Do the same with the side ruler bar until you have an image like in the screen shot below:
The above ruler guides will help us go through the gradients on each layer, making slight changes for each layer frame. In the end when adding the ruler guides, the more evenly apart they are for each frame, the smoother the animation will turn out.
3.) Shading:
Create about 5 or so new transparent layers. These will be used for our several stages of light.
A> Now go to the gradient tool and select "FG to BG," setting the foreground to lime green, and the back to solid black.
B> Set the gradient type to "radial."
C> Select a starting layer.
D> Use the ruler guides to drag the gradient from left upper crossed ruler guide to the bottom right crossed ruler guide.
E> Now select the next layer up and do the same, changing the end point of the gradient to the next crossed ruler guide to the upper left of the last.
F> Repeat this step MAKING SURE to change to the next layer each time.
In the screen shot below I mark the end points for each gradient layer in red.
4.) Glow Layers:
Make sure the large circular selection is still there and create 5 more transparent layers. Enable the fill tool after selecting one of the new blank layers. Fill each new blank layer with lime green in the circular selection, and place one above each of our original layers.
Go to the select bar and hit "select none" to disable the circular selection as we no longer need it.
These new lime green circles are about to become our "glow." Make sure you have your layers in order from "brightest looking" to "darkest looking," and place one of our green circles above each shaded circle layer. Now select the first lime green circle layer and prepare to do a gaussian blur on each new lime circle. Go to filters, blur, then gaussian blur and start with the blur radius '15,' and for each green circle layer add increments of 15 more to the setting. So for the least bright glow, it will be a radius of 15, and as it goes on it will continue from 15, 30, 45, 60, 75. This will make the transition smooth enough for an animation.
5.) Highlights:
After matching up the glows to the stages of light in the bulbs we will be ready to add a highlight to the bulbs. Add a new layer. Take out your selection tool and make a wide selection just under the top edge of the bulb, use the below figure for an example. After making the selection, grab your gradient tool and set the gradient type to "FG to Transparent." Set the Foreground to white. Drag from the top of your new selection to the bottom. It should look as shown in the screen shot below:
Duplicate the highlight layer 5 times. Add one duplicate overtop of each of the bulb layers.
Changing Opacity: Over the brightest bulb, leave the opacity setting the same. Over the next brightest bulb layer, set the opacity to 85, then 70, 55, 40, 25, moving 15 down for each highlight layer's opacity. So at the end you have an opacity of 25 for the darkest bulb.
6.) Merging Bulb Together:
(As an option, you may drop a shadow below the bulb layer, to give it some depth on the surface, this is not necessary but I have done so on the stone example at the top)
Now merge each bulb/highlight/glow layer in the following order: highlight, bulb, glow. Do this for each set of three.
7.) Background:
for the glow to showup, we will need some type of background. Add a new layer or just color in the background layer existing with a texture or color of your choice.
Make duplicates of the background for each bulb layer and place one background behind each. Now merge each bulb layer down over it's background.
8.) Setting time delays:
To make a successful animation we need to set consistent time delays. The more frames you have the longer apart these time delays can be while maintaining the smoothness of the animation. Since I only have 4 or 5 frames, I will set the time delays to 100ms. To do this we tag on to the end of each layer's name (100ms) where 100ms is whatever time you wish to use.
9.) Viewing:
If you would like to see how your animation is going to look, go to Filters --> Animation and finally select "Animation Playback." Click Play/Stop.
10.) Optimizing:
For the last and final step go to Filters ---> Animation, and "Optimize for Gif." After that you are ready to Save as a Gif file, make sure to select Save as Animation and not Flatten Frames. Thats about it. Hope You got something out of this because it sure took a long time to write
