After a few tests to find the right colors and lights, I've created a nice image for this tutorial. I'm gonna show you here a few steps to create neon effects on Fireworks. The process is really easy, and for the cheers of everyone, we're going to use lots of overlays, color dodges and lots of glow!

We've got our image at sxc.hu, and it's already separated in the tutorial final archive (neon_files.zip), but if you want to use another one, feel free.

STEP 1 - BACKGROUND

To begin, open a 750 x 500px file. We're going to use the "image1.jpg" file, which you may use from the final archive. After importing the image, let's darken it a little bit, and to do that, make a rectangle with Gradiente Radial with the color #000 in both sides, in the middle, make the opacity 40%. After that, apply the Overlay blend in this rectangle.

STEP 2 - SET THE BACKGROUND

Now let's darken a little bit more to make a better looking contrast when the neons start glowing. Create a shape as shown in the color #000. After that, apply a 88 Feather and blend Overlay.

STEP 3 - WOOD SIGN

To start creating the wood sign where we read Abudzeedo, pick the file "image2.jpg". Import that image and also make a 375 x 100px rectangle as shown in image 1. Now let's use the rectangle as a mask, and for that, select the wood image, cut it (CTRL + X), select the rectangle and paste it inside (CTRL + SHIFT + V). Done that, let's apply a little shadow in this object with values as shown.

STEP 4 - SIGN FRAMES

The next step will be to duplicate the layer before the sign. Done that, on the top layer, apply a Inner Bevel (Ruffle type), and apply values as shown in image 1. Apply the Overlay blend in this wood.

. After that, duplicate this layer, so we can get a better contrast for this sign. Look at the end who our layer should be. Tip: If you wish to make another type of framing, test the different types of bevel along with other values.

STEP 5 - LETTERING

In this step, we're going to right Abduzeedo in the sign; Create a #000 text. After that, apply a Overlay blend and a 100% #FFF Glow, as shown in image 1, so we can get the effect we want.

STEP 6 - LETTERING LIGHTS

In order to increase the lights a little bit, let's create a "light ball" in some points of the wood sign. For that, create 2 ellipses, one #000, the other #FFF. After that, apply a 15 Feather in each one and put one above the other. After that, group these 2 ellipses and apply Color Dodge in this group. You'll see that this will create a light effect. Now you should copy it and apply a few time in different points next to the text. In image 5 we show you where we put ours.

STEP 7 - PINK NEON

To create the Neon effect, we're gonna need 2 layers everytime, with equal texts overlayed, but if different effect in each other. Create the first text and duplicate this layer. The top layer we'll call Pink 1, and the bottom one Pink 2. Use the values we're showing you and try duplicate the effect. The colors we're using in each layer are:
Pink 1: #FFF - Glow #FF33FF
Pink 2: #F5C4D9 - Glow #FF33FF

STEP 7 - YELLOW NEON

We'll be doing the same process from step 6. We're gonna have 2 overlayed layers with the same text (Yellow 1 and Yellow 2). Try to use the right colors, blend and values in each Glow. The colors we're using in each layer are:
Yellow 1: #FFF - Glow #FFFF00
Yellow 2: #FFFF33 - Glow #FFFF33

STEP 8 - BLUE NEON

Same as before. The colors we're using in each layer are:
Blue 1: #FFF - Glow #00CCFF
Blue 2: #FFF - Glow #0099FF

Look at the end of the image who the layers order of the neons should be.

FINAL RESULT

All done, we can play a little bit with the neon colors, other backgrounds, etc. What we're doing here is playing with the tools and trying to reach a result where lights are soft but they contrast the background.
Blue 1: #FFF - Glow #00CCFF
Blue 2: #FFF - Glow #0099FF

Look at the end of the image who the layers order of the neons should be.

About the author

I'm from Brazil, co-founder of Zee with Fabio. Nowadays I like to play with Fireworks, Photoshop and improve my skills in CSS. If you wanna request some posts, please feel free to contact me or follow on Twitter.

Sponsored Links: