How to Make 3D Neon Light

This is a new addition to the VideoCreative section. This is a super creative tutorial with a professional results.

Learn how to create dynamic 3D Neon lettering with a hefty dose of Photoshop techniques and a dash of Illustrator know-how. Learn more at the jump!

Tutorial Details
  • Applications Used: Photoshop
  • Difficulty: Intermediated
  • Estimated Completion Time: 1h +
  • Updated: December 8,2013

Download Source Files

Source files for this tutorial are available to Premium members.
Get a Premium Membership

Final Product What You’ll Be Creating

New Exclusive Premium Tutorial Glowing with Creativity

This new Tutorial is titled “How to Make 3D Neon Light Typography,” by VideoCreative Group. He is a digital artist and illustrator who has written tutorials for us before and created VideoCreative material, such as a unique artistic brush set. You can find him on Behance here.

This tutorial will take you through how to create a unique piece of digital artwork. You learn how to compose the 3D type and then add effects and imagery to achieve the final results. The great thing about this technique is the fact that it is very easy to apply to all sorts of neon lights. You can choose to make 3D typography, as in this tutorial, or stylized neon tubes in abstract compositions.

Step 1

To create the text, we’ll begin in Illustrator. So, open a new AI file and download this font, called Shine On. Using the Type Tool (Command + T), type in your first letter ("N") and choose a light color (#ABDCD6).

Step 2

Now let’s add a 3D effect. Go to Effect > 3D > Extrude & Bevel. When the window pops up, input the settings below. To be able to view the light settings, press the More Options button. Feel free to play around with the position of your letter, however in order to get the same result, use the same settings for the Extrude & Bevel section.

The letter has two colors. One is the font color (#A8E5DC) and the other is the shading color found in the 3D menu. To be able to access it, select Custom under the Shading Color drop-down menu. Choose a lighter cyan (#E1FFF7).

Once you feel that your letter is finished, repeat the process to stylize and position the following three letters. As soon as you are finished, copy (Command + C) the first letter.

Things to keep in mind while positioning the letters:

1. Keep the weight of the font in mind. This is a thin font, so find a layout that creates a readable word. You may choose to make the letters float, as I did, or align them symmetrically in order to make them look like a sign. If so, then type the entire word before creating the 3D effect, or type the rest after applying the effect to one letter.

2. If you are not pleased with the angle you’ve given it, there is no need to start over. Go to Window > Appearance and double click on the effect found in the list. It’s best to do this after creating all the letters.

Step 3

Open a new Photoshop Document, make it 1280 pixels by 768 pixels at 300 ppi. Fill the background color with black and paste (Command + V) the first letter. Once positioned, double-click its layer and create the layers styles shown below. The first one is an Outer Glow. The assigned color is #64FFF2.

Step 4

Now add an Inner Glow with the color #96b2BA.

Step 5

The next one is Satin with another shade of cyan (#65DBD7).

…and that’s the end of the preview!

View The Tutorials

Enjoyed this Post?

Subscribe to our RSS Feed, Like on Facebook or simply recommend us to friends and colleagues!

Other posts by tuts
Related Articles
Leave a Reply