Neon Sign on a Textured Surface

Adobe Photoshop Tutorials :

Category: Adobe Photoshop Tutorials
Added: 05/04/2007
Views: 445,086

Neon Sign on a Textured Surface

Neon Sign

Tutorial Goal

We will Design a Neon Sign on a Textured Surface in Adobe Photoshop. The neon color is easily changed. We will use a brick wall for the surface.

Resources Needed

We will need the following resources to create the effect above:
Free Neuropol Font
Free Brick Wall Texture (right click to download)

Step 1 : Preparation & Document Setup

Install the Neuropol Font.

Open Adobe Photoshop and Create a new Image:
Size: 600 x 450px
Background Color: Black

This is larger than necessary to allow you to choose what part of the texture to put the sign over. Also it's nice to have a little elbow room when working.

Step 2 : Creating the Neon Text

Select the Text Tool, Text Tool, change the text properties to:

Text Properties
Text Properties

Click on Stage and type any text you want to be neon. You can also apply the effect to shapes, a Martini glass comes to mind.

Plain Text

Open the Layer Blending Options:
Right click the text layer and select "Blending Options" or
Layer > Layer Style > Blending Options...

Apply the following settings:

Outer Glow: The neon glow

Neon Outer Glow

Inner Glow: Rounds the light tubes and improves glow

Neon Inner Glow

Click OK and here is what we have so far:

Neon Sign

Step 3 : Add the Brick Wall and Light it

Now we have a neon sign but its just floating in space. Let's give it something to hang on and I couldn't think of a more appropriate place than a brick wall.

Select the "Background Layer" and then Place the provided brick wall texture above it.
File > Place... Locate the texture.

Brick Wall

Obviously we need to change the lighting on this brick wall.

Start by reducing the brick layer opacity to 70%, then Select the Elliptical Marquee Tool, Elliptical Marquee, and make a selection around your text.

Brick Wall Selection

Then select Select > Feather... and set it to 20. This will help gradually fade light into dark.

Inverse the selection
Select > Inverse

In the Layers Panel, select the "Brick Wall" Layer and create a new layer above it.
Layer > New > Layer...

Select the Paint Bucket Tool, Paint Bucket, set the foreground color to Black and fill in the selection.

Fill Selection

Reduce the Black Layer Opacity to 30%.

Reduce Layer Opacity

It doesn't seem like it did much, but after we create two adjustment layers you'll see the difference.

Create a new Brightness / Contrast Adjustment Layer.
Layer > New Adjustment Layer > Brightness / Contrast

Brightness / Contrast

Create a new Hue / Saturation Adjustment Layer. If you picked a different neon color, simply slide the Hue until you find the hue that matches.
Layer > New Adjustment Layer > Hue / Saturation

Hue / Saturation

Here is our image so far:

Colored Bricks

Not bad. In the final step, I provide a few recommendations for finishing touches.

Flash Den

Step 4 : Perfectionist Finishing Touches

For most, the current image will be good enough but there a few ways we can improve it.

1. Fade the blue lighting to normal lighting
For a more realistic scene, we should allow the normal brick color to show through as we get further away from the sign.

Select the Hue/Saturation Layer and the Erase Tool, set the opacity of the eraser to 10-20% and start erasing where you want to reduce the blue light.

Normal Lighting
Normal Lighting

2. Neon tubing is connected letter to letter.
It may not jump out at you but neon signs are one or two continuous light tubes. We should connect our letters with darker tubing.

Create new layer under the Text Layer and above the Brick and Adjustment layers. Then with a black paint brush with a size similar to the lettering paint connectors from one letter to another. Below I have selected where I painted my connectors.

Connectors

3. Surfaces parallel to light sources reflect more light.
In this case the bricks provide a great texture to practice highlighting techniques. Highlights will help to make the sign more believable and the bricks more 3D.

Create a new Layer between the Adjustment Layers and the Text Layers. With the paint brush, select a small size 1-2px, opacity of around 20% and a bright hue of your color. Then Zoom in on the image and paint along the edges of the bricks. For example: paint the top edges of bricks that are below your sign. Paint the left edges of bricks that are on the right side of your sign. Just keep in mind where the light source is.

Highlights

4. Pull the sign off the wall
This could have been applied back in step two. Neon tubing is structured in a way that the glowing tubes are not flat against the surface. So let's add a drop shadow to the blending options of your glowing text.

Drop Shadow

There, that's better. The details can push the desired effects.

Neon Sign

Neon Sign on a Textured Wall: Concluding Statements

You should now be able to create any neon sign you can think of. If you start exploring shapes, you might consider looking up neon signs to capture the line styles used. If you're into Flash, my next tutorial will show you how to make the neon sign flicker. In the meantime, check out some of my other tutorials to learn more or for fun take a look through my experiments.

Feel free to send Comments, Questions, and other inquires using the contact page. I hope that you enjoyed the "Neon Sign on a Textured Surface" tutorial. View more of my tutorials here.

Like My Work?

I am a professional freelance web developer & graphic designer. These tutorials are a small sample of what I'm capable of. Check out my client portfolio and feel free to contact me. Whether it's a full blown database driven web application or simply a flashy banner design, hire a professional.

Project Sample

Print & Graphic Design : CD Design Booty Blues CD Art

CD Design
Eddie Kirkland, 2005

Web Development : Interactive Map Tour de Baccalieu

Interactive Map
New Foundlands Business and Tourist Destinations

Web Development : E-Commerce Solution Baby's World Online

E-Commerce Solution
Baby & Teen Store

Testimonials

"I have worked with Max Langdon for almost five years. Max is not only a talented web designer and programmer, but he has an added quality that I find quite rare. He is able to really listen to and understand the client's vision. He asks excellent questions that help you zero in on exactly what you are trying to accomplish. This helps you clarify your goal and allows Max to think through the scope and sequence of the process before beginning to program. This saves him time and saves you money.

Working with Maxwell Langdon and his company, Pixel Hive has been a pleasure. I have always found him to be responsive and helpful. There is no "attitude" when you ask for an explanation or guidance.

I would be happy to speak with anyone who is thinking of working with Max. "

- John Burstein, Slim Goodbody Corporation, Lincolnville Center, ME
View More Testimonials

More Tutorials!