BarsClubsCoffee/CafeContact UsDevonshire QuarterHomeHotelsLeopold SquareMenusPhotosPubsRestaurantsSportTheatres etc.TransportWeatherWest Street

Photoshop Neon Text

There are many ways of creating realistic-looking neon in Photoshop. Some are extremely basic, but here we'll show you a few tricks that should help you achieve a look of photo-realism. At the end, we'll throw in a bit of ImageReady and light up your sign!

1. Start by creating a new document 500 wide x 300 high. 72 dpi. Create a new layer and fill with white. Now go to the Text Tool and create some text. What you "write" doesn't matter but we'd advise that you follow these instructions to begin with and then add your own interpretations later.

Here, the "Bates Motel Open" was created in Arial Black 90 pt, centre justified and the tracking and leading altered via the character palette (WINDOW...Character). This is important as we need some free space between the characters. (BTW, the tracking was set at 10 and the leading at 90). Link the white layer and the text layer and go to LAYER...Align Linked and make sure that the horizontal and Vertical alignments are set to put the text in the centre of the canvas. Now link the White layer and the text layer and merge them (LAYER...Merge Linked) (important!).

neon text 1
2. With these two layers merged, use FILTER...Blur...Gaussian Blur...3px.
blurred neon text

3. Then go to IMAGE...Adjustments...Levels and drag the black triangle (shadows) and the white triangle (highlights) towards the middle as shown.

So why the blurring and levels? The easy answer is that we need to create rounded corners on the text to mimic the bending of neon tubes. The blurring gives the rounded corners and the use of the levels tightens it up and makes the edges of the text sharp again.

This effect only works when the text has been merged into a white layer; if the text had simply been blurred on its own there would have been no effect.


neon text -levels

4. Select each text character by using the Magic Wand Tool and with Shift pressed down to keep all previous selections. With marching ants going round each character, create a new layer, change your Foregound Color (we used RGB Magenta from the Swatches palette) and go to EDIT...Stroke...3px). Deselect.

At this stage you can hide or even discard the original text layer - we've done with it!

5. Select the Eraser Tool Eraser Tool, and with a small hard-edged brush (5px) zoom in and carefully erase parts of the "tube" to add some more realism. In the real world, each character is made from a single bent glass tube so it needs a break at each end. neon text - eraser

6. Ctrl + click on the text layer you've been working on to get the marching ants going, create a new layer and move it directly below this layer (the one you've used the Eraser Tool on). Now go to SELECT...Modify...Expand...4px Fill this enlarged selection with the same Foreground Color (Magenta in our case), and go to SELECT...Feather...2px and then FILTER...Blur...Gaussian Blur...3px.

Now's a good time to add a background with shadows if appropriate -don't sweat on this too much if you're not sure how to add brickwork with lighting effects, a plain dark color will do or click here. just make sure this layer is under both text layers.

1, 2>>