Creating a Neon Sign
This page contains instructions on how to create a neon effect using the GIMP (although any image manipulation program that allows you to work with layers would do the trick). The end result should be something like the navigation buttons at the start and end of every page.
Step 1.
Create a new image, 100px x 100px, on a white background. The white background makes it easy to see the selections you use at different stages of the picture and you can of course adjust the dimensions to suit.
Step 2.
Open the Layers & Channels dialog box and add four new transparent layers. I have called them Dark Colour, Colour, Highlight and Higher Highlight, which roughly indicates the function each one will perform.
Step 3.
Selecting the Colour layer to work on, draw your basic graphic shape. Something solid is best - I've used my initial in a large, bold font. This was done in black on a transparent background.
Now use Select by Colour from the Select menu to make a selection of all the black areas on that layer. In this case you could equally well use the Magic Wand tool but Select by Colour would also work if your pattern was made up of several separate shapes.
Save this to a channel for future reference, using the Save to Channel option on the Select menu. Now, making sure that the Colour layer is selected, remove the basic graphic (if necessary, reloading the selection from the new channel you just created).
Step 4.
With the Colour layer selected, pick a smallish brush (5 px, hard edged, is used here) and use Edit | Stroke to draw round the outline of the selection. This defines the basic width of your 'neon' bars. Before you do this, make sure you have selected that layer and aren't accidently drawing on the selection channel instead.
If you are working on a larger image or plainer shape, you may be able to use a larger brush. However, don't use one with a fuzzy edgy. We will add the blurriness at a later stage.
Step 5.
As in step 3, select the black area and save to a new channel. Now move to the Dark Colour layer and use Select | Grow to enlarge the selection by 2 pixels. Fill this enlarged selection with a dark shade of the neon colour you wish to achieve.
Step 6.
Move to the Colour layer. Go to channels and load the second channel to selection (or you could shrink your selection by two pixels instead). Fill this area with your base colour.
Step 7.
Move to the highlight layer and shrink the selection by one pixel. Fill with a lighter colour.
Step 8.
Move the higher highlight and shrink the selection by another pixel. Fill with white or a very pale colour. Now use Ctrl-Shft-A to remove all selections. You might also want to hide the background layer so you can see the rest of the image more clearly.
Step 9.
The next stage is to apply an increasing level of blurring to each layer, starting with the Higher Highlight and moving down. I used the Filters | Blur | Gaussian Blur effect with the following settings:
| Higher Highlight: | 1 pixel |
| Highlight: | 2 pixels |
| Colour: | 4 pixels |
| Dark Colour: | 6 pixels |
Step 10.
Putting this on a black background, you can see the neon effect clearly.
Notes:
The most important skill is always knowing which layer or channel is active - otherwise you start applying fills and blurs without seeing any changes on screen... and then find that you have wiped out another layer!
You can choose whatever colours you like - the most realistic neon effects will use successively lighter tones of the same colour, but you could experiment to see what mixing the colours looks like.
You might find it easier to work on a larger image and then scale it down afterwards. Otherwise you will find that shrinking the selection results in no selection at all on the thinner lines!
Finally, it wouldn't hurt to save after each step (although I didn't do this when putting together the shots for this demo).