How to Create a Realistic Urban-Style Neon Type Effect

POSTED IN Articles & Tuts 2012-01-25

The time has come to present you all a very useful tutorial in which I’ll teach you how to create a realistic urban-styled neon type treat in Adobe Photoshop. We’ll use a bit of Illustrator for the typographic part, as it works with vectors and will provide us with a nicer result in the end. So, let’s start right away!

Used programs: Adobe Photoshop, Adobe Illustrator
Estimated Completion Time: 1 hour
Difficulty: Intermediate


Here is what we’ll create


Things you’ll need today


Stock images



Monoton Regular

Installing fonts is easy both on Windows and Mac. If you’re using Windows Vista or Windows 7, just double-click the .otf or .ttf file to bring up that font’s page and click the Install button at the top of the window. On Windows XP, select Fonts from the Control Panel, and drag&drop the fonts here you want to install. On the Mac, just double-click the given font files, and they are installed right away.


The Tutorial

Create a new document in Adobe Photoshop measuring 2560×1440 pixels at 400 dpi with Transparent background.

Now let’s pick our concrete background [concrete.jpg] and stretch it to the document sizes. You may have to scale it unproportionally, but don’t worry, that’s not a problem. It should look like this.

After this, let’s import the concrete tiled wall image [wall.jpg] to our document and do the same with it. Like this.

Now we can put some color overlay on this. Double-click the layer of the concrete wall to bring up the Layer Styles window. Click on Color Overlay to activate it and bring up its options. Adjust the settings here according to my setup.

When it’s done, let’s fade the wall into the background texture. Click on the Add Layer Mask icon on the bottom of the Layers Palette, then pick a large-sized soft brush (0% Hardness), and set the Foreground Color to Black. We need to mask out the top and bottom lines of the concrete wall, so it will nicely fade into the background.

As our next movement, let’s import our metal texture into our document. We’ll place two of these in the top and bottom parts of our composite. But first, we need to rotate them by 90 degrees and resize them to fit our document’s width. Position it according to the image below.

Now we need to mask out the majority of it, we only need its top part. Grab the Rectangular Marquee Tool (M), and drag a selection over the area you want to keep, then click on the Add Layer Mask icon in the bottom of the Layers Palette.

Now we have our metal texture cut. Let’s darken it by pressing Ctrl+L and adjusting the values as shown in this picture. After you’ve finished, set this layer’s Opacity to 82%.

Now, let’s duplilcate this top stripe layer by pressing Ctrl+J (or Cmd+J on the Macintosh) and move it down to the bottom of the image so it creates another stripe. Make sure its Opacity is 82% still. It should look like this when you’re done.

Let’s add an other border by importing the blackboard stripe image [blackboard.jpg], and adjusting it so it covers approx. 50-50% of the light grey and dark grey edges (We’re working on the top part now). Then add a drop shadow to it as shown in this image.

When done, duplicate this layer and nudge it down to the bottom part, plus, reduce its height a little with the Free Transform Tool (Ctrl+T / Cmd+T). Also, set this new layer’s drop shadow angle to -99°.

Looking great so far. Let’s now do some cosmetics, which we need for the final result. Click on the Create new fill or adjustment layer icon in the Layers Palette and add a Levels and a Black and White adjustment layer. For the Levels adjustment, we need to mask out the top and bottom part, because they’ll get too dark after the effect. So create a layer mask, pick a large enough brush size (500-600 is enough), set the Hardness to zero, and paint over the mask (with black). Here’s a little help.

Here are the setups for Levels. For the Black and White adjustment layer, no need to touch it.

Next step is to add a Color Balance adjustment layer. Adjust these settings here. Here is what we’ll come to.

All right. Let’s now add the image called [paper.jpg]. Rotate it by 90°s and adjust its size to cover the whole artboard. Then, go up to the Filter menu, find Blur and select Gaussian Blur. Crank up the Radius to the max, hit OK, then set this layer’s blending mode to Overlay and finally set its Opacity to 10%.

Great! That’s it for the background; at least for now, we’ll touch it again in the very end of the tutorial.

Let’s now add our typography. It’s going to get a little easier from now on, I’ll provide you with the setups, you apply them… simple isn’t it? And now for the type.

What you write here basically, is totally up to you. So as what font you use. In this tutorial, we’ll use some specific neon-style fonts. You should have downloaded and installed them by now. Get creative with your typography, as this is the most important part of our composite. Use the Horizontal (or even the Vertical) Type Tool (T) to create texts. You should create your texts/words into their own separate layers for easier formatting. Here is our sample text for this project.

You can of course use our example, but again, we strongly encourage you to experiment with your own creative ideas. Now let’s add some setups. Just adjust these settings listed in the next few pictures, and you’ll be fine. (Of course, if you’ve created your texts to different layers, you have to apply these layer styles to all layers.

Allright, now that we have the layer styles set up, let’s add some interesting blur effect to the text. Select all the layers that make up your typography and merge them into one (Ctrl+E on Windows, Cmd+E on the Mac). When done, go up to the Filter menu, choose Blur and Motion Blur. Use these settings to create a cool motion blur effect on the text.


Now in my case (and most probably in yours, too…) the light is too much. We need to reduce it a little. We’ll do that by gently erasing the middle area of the motion blur. Pick a relatively big, soft Eraser (E) brush, and set the Eraser tool’s Opacity to 50%. Carefully erase some areas from the middle of the blur to reduce the lighting. How much exactly? Depending on your own preference… or as they say: “Enough, and no more.”

Next, we’ll add some shadows to the background, creating the effect of the neon realistically glowing. First of all, create a new layer (Ctrl+Shift+N on Windows, Cmd+Shift+N on the Mac) and fill it with black. Move this layer below the text layers in the Layers stack. Now, grab the Eraser Tool (E) again, set its size to about 1800 pixels, and leave the Opacity at 50%. Erase some parts off this black layer as shown in the next picture.

All right, looking good so far. Let’s add an Exposure adjustment layer to the image; use my settings to achieve a really nice effect.

Here is my result after applying the Exposure. Quite rocking, I think.

Cool. Almost done. But before we finish our composite, let’s add some contrast to the image. Click on the topmost layer. Now, on the PC, hit Ctrl+Alt+Shift+E, on the Mac, press Cmd+Option+Shift+E (quite a shortcut, isn’t it?!) to merge all the visible layers into one layer on top of the stack. Now duplicate this layer; Ctrl+J and Cmd+J are the shortcuts. Now, we have two layers that are the copies of our existing work. Select the topmost duplicated layer then set its Blending Mode to Overlay and its Opacity to 50%. It’s a little too much here, so with a relatively big and super-soft brush (about 1200 pixels in size with no hardness), erase some of the parts that make up the dark areas. Kind of like this.

Now select the bottom duplicated layer, and set its Blending Mode to Screen and its Opacity to 50%. We need to do some erasing here, too, only this time it’s enough to erase some parts from around the typo. Of course, if the text still remains too bright, you can erase some areas from inside the text, too, or you can also lower the Opacity of this layer even further. Here is my result after this step.

And this is it! We have successfully built up this neoy-style typographic composite. I hope it was easy to understand. If you got stuck somewhere, feel free to comment here, and I’ll be more than happy to reply and help you guys out! I really hope you enjoyed this tutorial, I’ll be back soon with another astonishing Photoshop tutorial. See ya!

Ah… before I forget! Here is my final result after adding a little more adjustments to the composite. It’s free to download, just click on the picture for an 1920×1080 resolution copy.

[Please see the Original Article on The SzabokaDesigns Blog]

7 hozzászólás

  1. Cobe szerint:

    this is so RAD.. cheers mayne…

  2. Lacza szerint:

    Mayne ? I dont understand this word and same RAD .. anyway, thanks.

  3. davdalx szerint:

    This is an amazing tutorial. I love it!

  4. Lacza szerint:

    Thank you my friend !

  5. Ocean gfx szerint:

    Hey man,nice tut!,haveing problems adding the exposure layer,it just becomes all black when i put your settings,hope u can help me out?,and when i duplicated my textt and made it into a motion blur,it became all ugly so i had to take off the emboss,and affter that i made a black layer,and just erased all of it with 50% opacity,then when i came to put the exposure layer,it just screws up,hope u can reply 🙂

  6. Gie szerint:

    hey dude this is soo cool 🙂 i saw your work on Deviantart 🙂