Submit Your Article
Home Articles News Tutorials Videos Add An Article
Topics: Design Photoshop Programming PHP CSS Java Database Web Development Javascript Ajax
– Close + Open

Find Out More About DevWebPro!

Sign up for the newsletter


» Terms & Conditions

Welcome to the New DevWebPro!

DevWebPro Includes:
  Hundreds Of Tutorials   Developer News
  Unique Gadget Videos   Tons of Topics to Discuss
  Expert Advice   We Will Publish Your Articles

Create a Neon Sign Easily with These Steps

By: John Overbee
Monday, February 25th, 2008
Text: Decrease Font Size Increase Font Size | Print Print Article | Share: Delicious Digg StumbleUpon Post to Twitter Post to Facebook

I am going to show you an easy tutorial on how to make a neon sign in Photoshop. This will show you some tricks with the pen tool and a few blending options to make this effect. This might be a way you could make a logo for your site or just something fun to mess around with.

First I am going to start off with a 600X300px canvas to give me plenty of room
to work with. On a new layer create text and I wrote “Neon Sign” with Formal436
BT font and size 60px. Just use whatever font you want that you like the shape
of.

Other neon sign tutorials I have seen in the past just used regular font to make glow, but I didn’t like the effect as much as the method I am going to show you in the next steps.

Instead of me using the actual font to make the neon glow I am going to use the pin tool to trace inside of each letter. To me this gives more of the look of an actual neon sign you would see at a restaurant or anywhere else.

Before I start tracing I need to pick a color and size brush to use so click on your brush tool and pick a 9px size. Then just pick a bright color you want to use for the path stroke. I used the color #00B4FF, which is a brighter blue color.

Now start a new layer to trace in and I zoomed in on the text about 400% by hitting ctrl and the plus (+) sign. You don’t have to zoom in that much, but I did just to give you a nice view of what I am talking about.

Now click on your pin tool and make sure it has these settings:

After that I am going to click at the bottom center of the first line of the “N” using the pen tool, then click again straight above the first one at the top of the letter like this:

You want to just get the basic shape of the letter. My final outline of the first letter looks like this:

After that right mouse click with the pin tool on the line you just created and a little menu should pop up. Click on “Stroke Path…”

After you click that another window will pop up and just click OK.

My stroke path result:

Pages: 1 2 3

Topics: , ,

About the Author:
John Overbee is a graphic designer for the iEntry Network.

Leave a Comment

DevWebPro is an iEntry Network ® publication - © 1998-2010 All Rights Reserved