Bright Lights, Neon Sights…
Even if you haven’t been to Las Vegas, you’ve seen those vibrant lights that stand at the top of Casinos, hotels, movie theaters and just about everything meant to attract consumers. Nowadays they are very popular in all kinds of entertainment, from movie posters to commercials and album covers to music videos. This tutorial will teach you how to make two styles of these lights that will look great on your Avatars, Survivor games, ATRL countdown designs etc. In addition to this you will also be learning how to use many of the features of Photoshop for other uses you may have in the future. This version of Photoshop is CS2 v9.0, but you should still be able to follow along if you have a different version.
NOTE: All text in grey are meant for beginners in Photoshop. It’s just a way to make sure that everyone can follow along. Experienced users can skim the grey text. Hell if you’re an expert in Photoshop you may only need to look at the screenshots.
To start off, it’s always good to look at real life references. Here is a couple I found on Google Images:
You’ll notice that there are mainly two different styles of lights being used. One is a traditional round bulb(for lack of a better term) and the other is a neon bulb. In this tutorial we will cover both.
ROUND BULBS
First, open Photoshop and make a new document
(File > New or Hit CTRL + N on PC Keyboard). It’s always best to start with a big document and resize it later if necessary, so we’ll go with
800px x 600px.
Change the background to black
(CTRL + I or manually fill it with black using paint bucket) 
We’re creating a sign that says ATRL, so the next step is to choose a font for the sign. I’m going with a simple one called
“Impact” and setting the size at
300pt with
#66593e as the color.
(For this exercise, try to stick with a simple font, but in other projects you can use anything you want)
Now we need to light it up, but we can’t do that until we have made a bulb, so create a new document and give it a size of 40 x 40. Make a new layer then delete the layer called “Background”
(If done right you should have a checkered background instead of the plain white one). Select the
Elliptical Marquee Tool from the Toolbar
(Make sure it’s the Circle). Now look at the top of the screen and it should say “Style”, click that and choose
“Fixed Style” . Right next to that is the
Height and Width, set them to
30px each.
Now just click once on your empty stage and a flashing circle should pop up, first make sure you center the flashing circle in the middle (It doesn’t have to be exact). Fill that circle with WHITE.
Hit
CTRL+ D on your keyboard to deselect the white circle. Now hit
CTRL + A to select the entire stage.
Go to Edit > Define Pattern. It will ask you to enter a pattern name to which you can enter “Bulb” or whatever name that works for you. (What we’ve just done is saved a pattern that we will use later on) Now, close that window off and go back to the document with the ATRL sign (There is no need to save the document with the bulb). Make sure the ATRL layer is highlighted and go to
Layer > Layer Style > Pattern Overlay. The default style is usually blue bubbles, so you will want to click on that drop down menu and scroll to the bottom where you will see the bulb you created.
Select it and set the
Scale to 25%. Before you close the window, click
New Style to save it in your library. You can name it “Bulb Set”.
Once you’ve done that, click close and you should see a spotted ATRL sign on the stage. In the layers menu, your “ATRL” layer should now have an “f” symbol to the right of it.
Right click that and choose
“Create Layer” from the menu that pops up.
(What we did here was separate the bulbs from the text, so now it’s acting independently and this way we can add lighting effects directly to the bulbs)
At this point a new layer has appeared in the layers menu called “ATRL’s Pattern Fill”
Click on that layer and go back into Layer Styles
(Layer > Layer Style > Drop Shadow)
Use the settings shown in the image
(Make sure the settings are EXACTLY the same for this tutorial): Color is
FFF000 
Next go to Outer Glow and use these settings: Color is
FFF000
Next go to Inner Glow and use these settings: Color is
ffff5e
Finally, go to Color Overlay and use these settings: Color is
fffeed
Click on
New Style at the top to save this style for future use. You can name this effect “Bulb Glow”.
TIP: Get into the habit of saving styles you create in the Layer Style. Once you save it you don’t have to do the whole process over again next time you need it. If you need the same effect again in the future, click Window > Styles. The last one you made is usually at the bottom.
Click OK to close the Layer Style Window. It’s now starting to look like bulbs but it’s not quite there yet. Click on the “ATRL” layer which should be right below your current selected layer. Go to the Layer Styles
(Layer > Layer Style > Outer Glow)
Use these settings for Outer Glow: Color is
ffffbe
Use these settings for Inner Glow: Color is
ffffbe
Click on
New Style to save the effect. You can name this effect “Frame Glow” Click OK to close the Layer Style Window.
While this may look good enough, there are some other things that we can add to give more realism. If you look at the reference image at the top, some of the bulbs in the set are dim or just completely off. This could be either of two reasons; there are some bad bulbs in the set, or its flashing. Either way, it’s a nice way to add contrast and realism so lets dim some bulbs!
Make a new layer at the top of all other layers and call it “Dim Bulbs”. Select the Brush tool. Next right click on the stage and a window should pop up with a selection of different brushes. Choose one of the circular brushes and make sure the hardness is set at
0% and the size is set at
20px.
Choose
black as the color to paint with and turn the opacity down to about
80%.
Now you’re ready to start dimming some bulbs.
Make sure to zoom in so you can be precise with the dimming. With the brush that you just made, hover over any random bulb, center the brush cursor on it and click once. If done right the bulb should now be dimmed out.
Dim about 6 or 7 bulbs on
each letter at random areas. Next, change the
Opacity setting to 50% and start dimming a few more bulbs.
Zoom back out to see how it looks. At this point it should look something like this:
If it looks anything like this, good job! You’re done with the first bulb style.
Make sure and experiment with everything you have learned and overtime you will find even better ways to create this kind of look. Try different colors, fonts and styles of lighting to get your own unique look.
On to the next bulb style!
NEON LIGHTS
Traditional round bulbs are nice when it’s done but creating them can be a bit boring sometimes. Neon lights can be one of the most fun processes when you know what you’re doing. If you take a look at the references, you’ll notice they appear right alongside the round bulbs. They form letters, symbols and even illustrations of people. For this part of the tutorial we’re going to stay on the same ATRL document because we’ll be combining the two bulb styles.
Make a new layer on top of the “Dim Bulbs” and call it “Neon Lights”. Zoom into the ATRL sign and choose the
Pen tool on the toolbar.
The top of the screen now has some options. At the top you’re going to make sure that
“Paths” is selected.
Now start to make lines that wrap around the ATRL Sign
(To make path lines, click once on any desired area, then move the cursor somewhere else and click again. If you click and drag you can make very smooth curves).
If you look at the reference image up top you’ll notice that the neon lights are usually multiple long bulbs connecting together with space in between. So when you’re making your lines around the ATRL sign, as the above image suggests, hold
CTRL and click the stage to end a line. Then start a new one with some space in between. When you come across curved letters like “R” click and drag the point so it smoothens out. Final should look something like this:
Ok now we need to check our brush settings. Choose the
Paintbrush Tool in the Toolbar window and right click the stage. When the window pops up make sure the brush is a simple round brush with a hardness of
100% and size of about
4px and make sure the color is set to
White.
Go back to the
Pen Tool now and if any of the lines look highlighted, Hold CTRL and click the stage so they are all deselected. Right click the stage and choose “Stroke Path” Make sure the “Simulate Pressure” box is
NOT selected
The path lines should now appear to be on top of a white line that wraps around the ATRL sign. We don’t need the path lines any more so with the
Pen Tool still selected, hit
Delete on your keyboard to remove them and you should be left with just the white lines.
Now we need to light it up so go into
Layer > Layer Styles > Drop Shadow and add these settings:
Drop Shadow: Color is
ff126b 
Outer Glow: Color is
ff126b 
Inner Glow: Color is
ff126b 
Color Overlay: Color is
ffddea 
Click
New Style to save this style for future use. You can name this as “Neon Bulb Pink”
Congratulations! You’ve just made one groovy Neon Sign. Now when you look at signs that appear in Las Vegas and other places, you should be able to see a blueprint behind it and how you can make it in Photoshop.
Remember to
EXPERIMENT EXPERIMENT EXPERIMENT! (Seriously, don’t hold back)
FAQs
Question: I want to make a new sign now. Do I have to do everything over?
Answer: No! If you saved the layer styles as instructed, you can easily use the styles you already made by going into
Window > Styles (The ones you made will be at the bottom of the styles window.
Question: I want to change the color of my bulbs. How can I do that?
Answer: In the Layers window, double click the “f” symbol on the “ATRL’s Pattern Fill” layer or the “Neon Bulbs” layer depending on which one you want to change. Just simply go through the checked settings and change the colors as needed. You can also make the glow brighter or dimmer by changing the
Opacity, Spread & Size on the
Drop Shadow and Outer Glow effects. Make sure and do the same with the “ATRL” layer too.
Question: Is it possible for me to get the
.PSD file you made for this tutorial?
Answer: All ATRL 101 tutorials come with the sample file so you can go in, see exactly what I did and play around with it. Just scroll to the bottom of the post for it.
Question: I’d like to save this tutorial to my computer so I can read it later. Is that possible?
Answer: Yes! All ATRL 101 tutorials will come with a PDF file so you can save it on your PC for future reading. Just scroll to the bottom of the post for it.
Question: My question isn’t in the FAQs! Can I ask you a question if I need help learning this?
Answer: Of coarse, that is a big part of what ADB is for. There is no such thing as a stupid question, so if you’re stuck on
anything, just ask away and I’ll get to you as soon as I can.
[SIZE="4"]
. 
I wish I could give myself that kind of money right now. Xmas shopping broke my wallet
@ ADB logo 
its amazing!
