Create stunning neon glow text in Photoshop CS4

When creating banners and other image elements for your webpages, you have complete freedom when it comes to designing text. Using Photoshop, you can create all sorts of effects. Today we're going to look at how to create a neon glowing effect in Photoshop CS4.

Start by opening Photoshop and creating a new document. For this project, we want a dark background so the text stands out more, so click on the second color swatch on the Tools panel on the left side of the workspace. Make sure to change the color to black (#000000 in hexadecimal). Then click File and New. Make sure the canvas color is set for the background color, and set the size to something like 500 px by 500 px.



When the document opens, click on the Text tool on the Tools panel. Use the font drop down to choose a text. Generally, a neon glow looks nice on a thin, sans serif font; for this tutorial, I've downloaded a free font called Steiner. Change the font size to something large and change the color to white.



Now create a duplicate layer. To do this, click on Layer then Duplicate Layer. Once the layer is created, go to the Layers panel and uncheck the box with the eye in it to hide the duplicate layer. We'll come back to it later.



Go back to the first text layer, then click on the color swatch on the Tools panel. Choose the color you want the glow to be. In my case, I've chosen a blue-green.



Next, we want to add some styles to our layers, so navigate to the bottom of the Layers panel and click on fx, then Blending Options.



The Layer Style dialogue box will pop up. Click on Color Overlay and then click the color swatch. Use the eye dropper tool to choose the color in the color swatch on your Tools panel.



Since this is going to be our glow layer, we need to blur the text to give it that nice, fuzzy look. Go to the top bar and click on Filter, Blur, then Gaussian Blur. A box will pop up telling you the layer has to be rasterized; just click OK. For different fonts, the size of the blur differs, but for this font I've chosen to change the value to 5.0.



Now click on the checkbox next to the duplicate layer to unhide it. Once you've done that, you might want to make the text a little smaller to bring out more glow from behind it. To do this, click on Edit, Transform, then Scale. Hold down Shift while dragging the corners of the bounding box to make it proportional. Just make it a little smaller - not much, though. Then use the arrow keys to nudge it into place in front of the glow.



Once again, navigate to the bottom of the Layers panel and click on fx, then Blending Options. This time, when the box pops up, look for the Advanced Blending options. Change the fill opacity to 0%.



Click on Outer Glow and change the blend mode to Color Dodge. Color Dodge will allow you to take a given color and make it look brighter. Once you've done that, change the opacity to 50% so it won't be completely white, then change the color to white.



Next, click on color overlay and then the color swatch. Change the color to white to give it that white hot middle. Now we've created beautiful neon glow text that can be used anywhere you'd like.



About CODANK Web Design

CODANK is a top rated Web Design and Internet Marketing firm located in Charlotte, NC. We are dedicated to providing the highest quality, cost effective custom software development services, delivering a broad range of business consulting and outsourcing services.

For more information, visit us at www.codank.com