Gimptalk - Premier Gimp Community: Tutorial: Flashing LED - Gimptalk - Premier Gimp Community

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Tutorial: Flashing LED

#1 User is offline   grimR 

  • Newbie
  • Pip
  • Group: Members
  • Posts: 5
  • Joined: 06-January 06

Posted 17 February 2006 - 05:53 PM

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:

Posted Image
or as seen on the forum with a stonelike background:
Posted Image
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:

Posted Image

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.

Posted Image

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.
Posted Image

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.

Posted Image

Posted Image

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:

Posted Image

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.

Posted Image

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.

Posted Image

Posted Image

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.

Posted Image

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.

Posted Image

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.

Posted Image

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 :)
0

#2 User is offline   fencepost 

  • Retired Staff
  • PipPipPip
  • Group: Retired Staff
  • Posts: 2,643
  • Joined: 01-March 05

Posted 17 February 2006 - 06:21 PM

Very nice job. I'm looking forward to trying this out later. I'll post my results.

Art
0

#3 User is offline   Ali Imran 

  • Owner
  • Group: Administrators
  • Posts: 2,305
  • Joined: 06-December 04

Posted 17 February 2006 - 08:09 PM

Indeed very nice and with very well organized steps.

Thansk for sharing.

regards
ยป GIMP TUTORIALS - Largest Database on Internet
0

#4 User is offline   Chocolate570 

  • Retired Staff
  • PipPip
  • Group: Retired Staff
  • Posts: 361
  • Joined: 16-December 05

Posted 17 February 2006 - 08:18 PM

Beautiful tutorial! Very useful for bulliten boards. Great job. :)
0

#5 User is offline   grimR 

  • Newbie
  • Pip
  • Group: Members
  • Posts: 5
  • Joined: 06-January 06

Posted 25 February 2006 - 05:37 AM

Thanks for the comments :)
0

#6 User is offline   FanG 

  • Newbie
  • Pip
  • Group: Members
  • Posts: 3
  • Joined: 14-September 06

Posted 25 September 2006 - 01:16 AM

Very cool Tutorial, I used the the concept in a square bar. I changed the timing on several copys to get a fill type bar.

Posted ImagePosted ImagePosted ImagePosted ImagePosted ImagePosted ImagePosted Image
0

#7 User is offline   maretaga 

  • Newbie
  • Pip
  • Group: Members
  • Posts: 6
  • Joined: 09-April 07

Posted 22 July 2007 - 05:39 PM

Dude, ur screenshots dont work anymore :m: I dont understand a thing u are talking about :m: Can you find a way of placing the screenies back?
0

#8 User is offline   Ibizzle 

  • Member
  • PipPip
  • Group: Members
  • Posts: 36
  • Joined: 07-August 07

Posted 27 August 2007 - 04:01 AM

Would you consider re-hosting the pictures for your Tutorial: Flashing Led. Thanks.
:h:
~+~+~+~+~+~+~+~+~+~+~+~+~+~+~+~+~+~+~+~+~+~+~+~+~
Posted Image
0

#9 User is offline   Alz 

  • Member
  • PipPip
  • Group: Members
  • Posts: 32
  • Joined: 16-April 07

Posted 27 August 2007 - 04:03 PM

Re-host your pics, please.
0

#10 User is offline   Ibizzle 

  • Member
  • PipPip
  • Group: Members
  • Posts: 36
  • Joined: 07-August 07

Posted 30 August 2007 - 07:28 AM

:s:
~+~+~+~+~+~+~+~+~+~+~+~+~+~+~+~+~+~+~+~+~+~+~+~+~
Posted Image
0

#11 User is offline   Pixkid 

  • Member
  • PipPip
  • Group: Members
  • Posts: 325
  • Joined: 20-June 07

Posted 04 September 2007 - 03:08 AM

Re-host the pix please.
pixkid@macmini~$ open -a Gimp.app
bash: you want fries with that
pixkid@macmini~$ echo No thank you, I am on a diet.
bash: you make me feel unloved with your excuses
pixkid@macmini~$ echo What? Are you insinuating that I do not eat your food? When did shells ever execute commands relevant to cooking?
bash: shells duh ever think of seafood
pixkid@macmini~$ echo No fair, stop searching puns, you have Lynx and Google to use!
bash: ugh you humans are so annoying
bash: logout

[Process completed]
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic