Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
31st August 2012

Create electric type effects

How to give type a neon and lightbox feel with some simple and quick effects

Create electric type effects

This tutorial is designed to show you how to use simple effects in the Photoshop arsenal to convincingly add a light-based finish to your type. We’ll show you two methods to first create a simple neon sign, then move on to techniques that help you give type the appearance of a glass or Perspex illuminated sign, similar to that which you’d see on buildings. While the lettering itself can be created easily in Vector, Illustrator just doesn’t have the features to add the effects shown here so quickly and easily, so Photoshop is the ideal tool due to its powerful handling of colour blending and the ability to create realistic light by layering options found in the effects menu.

Tools: Photoshop
Expert: Steven Bonner

Sketch your layouts

Create electric type effects
Regardless of the image you’re looking to create, always start your design with a plain old pencil and paper. You’ll be able to very quickly rough out ideas and layouts, allowing you to visually determine what’s working and disregard what isn’t. You don’t need to be amazing at drawing to work out a rough sketch like this to work from.

Vector your words

Create electric type effects
One you’re happy with your rough layout, start drawing the type. If you’re using Illustrator (or indeed in Photoshop), use the Pen tool to trace over your sketches until you have a series of pleasing curves emulating the style you want to achieve. Remember that neon signage tends to have a lot of breaks, so design your type around that and find interesting ways to link your letters together to form a pleasing ‘whole’.

Add signage details

Create electric type effects
Once you’re happy with your paths, thicken up the strokes and add a round cap to the lines so they appear more tubular. Next, draw an encasing shape around your word, which will form the basis of the sign frame that the neon lettering will sit against.

Lightbox lettering

Create electric type effects
Next, you can either draw or use a font to create the lettering for the glass/Perspex lightbox letters. Try to use something quite thick and chunky to contrast the finer lines used in the neon tube lettering.

Create a frame
Create electric type effects

The last thing you need to draw in Vector is a frame for the letters to be attached to. Simply use the Line tool (\) and draw a straight vertical line, then hold Shift+Alt and click/drag the line across to duplicate it. Now select both lines and use the Blend tool (W) to create a blend of lines between the two. Repeat this process to draw some more lines horizontally, and make them slightly thinner this time.

Organise in Photoshop
Create electric type effects

Once you’ve drawn all your elements, copy and paste them into a new 235 x 302mm RGB Photoshop doc as Smart Objects, and position the layers so they appear as per your initial layout – clearly labelled so you’ll find each one later (make sure you copy and paste the vertical and horizontal groups of the frame as separate layers). Group the neon lettering, the sign shape, the lightbox letters and the frame in their own folders, and add a folder for the background.

Add a background
Create electric type effects

Next, create a new layer in the Background folder and name it ‘BG’, then use Alt+Delete to fill it with black. You can use any colour you like, or a subtle gradient if you prefer, as long as it’s dark. Open up the Assets folder and drag the ‘concrete texture’ image onto your background colour, then set its blending mode to Soft Light. Add a layer mask and using a soft brush, paint away some of the texture so it fades to the background colour around the edges.

Texture the frame
Create electric type effects

All effects menu values should now be kept at their defaults. Click the vertical bars layer and apply the following: Drop Shadow (Multiply, Opacity 75%, Distance 15px, Spread 0px, Size 27px), Inner Shadow (Multiply, Opacity 75%, Distance 4px, Choke 0px, Size 10px), Satin (Multiply, Opacity 50%, Distance 18px, Size 13px, Contour: Gaussian), Colour Overlay (white). Then copy the layer style and apply it to the horizontal bars, ensuring they’re underneath the vertical lines in the layer order.

Add fixings to the frame
Create electric type effects

Turn on the Frame group and for the moment make the lightbox lettering layer visible, and where the lettering covers the overlaps between the lines of the frame, use a hard square brush to paint fixings onto the frame. Then in the effects menu, add a Drop Shadow (Multiply, Opacity 75%, Distance 4px, Spread 0px, Size 10px), and an Inner Shadow (Multiply, Distance 4px, Choke 0px, Size 10px). This will add a sense of realism to the semi see-through nature of the lettering we’ll be adding. Turn the lightbox lettering layer off again.

Making the neon sign box
Create electric type effects

Make the sign group visible and duplicate the sign layer. Open up the file ‘Scratched Metal’ and drag it onto your doc, then mask it inside your sign layer copy, changing it’s blending mode to Hard Light and its opacity to 80%. Above this, we’ve added a Hue/Saturation Adjustment Layer to give the metal texture a darker, bluer colour.

Finish off the sign frame
Create electric type effects

Now, one the original sign layer (organised at the top), add effects settings as follows: Drop Shadow (Multiply 75%, Distance 30px, Spread 33px, Size 180px, Noise 5%), Inner Shadow (Colour Burn, Opacity 75%, Distance 0px, Choke 50px, Size 50px), Inner Glow (Screen, Opacity 43%, Noise 6%, Choke 0px, Size 40%, Contour: Half Round), Bevel & Emboss (Pillow Emboss set to Chisel Hard, Depth 410%, Direction down, Size 13px, Soften 16px, Shading angle -90, Gloss Contour: Half Round with highlight set to Soft Light, and Contour switched on), Satin (Opacity 22%, Angle 90, Distance 13px, Size 13px, Contour: Gaussian), Stroke (Size 7px, Position inside, Opacity 85%). Now set the whole layer to a blend mode of Multiply.

Neon lettering
Create electric type effects

Switch on the neon lettering group and make a copy of the lettering layer. On the top layer, set the following: Outer Glow (Soft Light, Opacity 86% with orange blend colour, Spread 14%, Size 145px), and Inner Glow (Source centre, Choke 53%, Size 13px). Now on the copy below, add an Outer Glow set to Overlay with an Opacity of 60%, a Spread of 11%, and a 30px Size, then go to the Filter menu and add a Gaussian Blur of 10px.

Glass/Perspex Lightbox effects
Create electric type effects

Make your first letters visible (in our case the ‘TY’) and go into the Effect menu. In Advanced Blending, reduce the Fill Opacity to 0%, then add an Inner Shadow (Blend mode Normal, filled with white, Distance 24px, Choke 0%, Size 60px, Noise 5%), Outer Glow (Soft Light filled with a vivid pink/purple, Opacity 100%, Spread 25%, Size 250px), Inner Glow (Overlay filled with white, Opacity 55%, Choke 30%, Size 250px, Quality Contour set to an inverted cone), Bevel & Emboss (set to Pillow Emboss, smooth, Depth 430%, Direction down, Size 45px, Gloss Contour double ring, Shadow mode filled with purple), Gradient Overlay set to Hard Light and filled with a mid-purple to magenta gradient, scaled to 80%. Finally, add a stroke of 10px, positioned inside, blend mode Screen, and opacity set to 65%. This will form the base of your glassy letters.

Duplicating effects
Create electric type effects

Now we want to add the same effects to the other letters, so copy the layer style and paste it into the ‘PE’ lettering layer. To change the colour, go back into the layer effects menu and change the shadow mode colour in Bevel & Emboss, and also the Gradient Overlay to shades of vivid blue. Again, this should result in a rather bold and realistic glassy look, if a little dull, so duplicate both the ‘TY’ and ‘PE’ layers to boost the colours and vibrance for a more hyper-real look. Finally, copy and merge both parts of your type, then set the resulting layer to Soft Light before applying the Plastic Wrap filter. You’ll want to play around with the settings here until you find the result that works for your image.

Highlights
Create electric type effects

Next up, make a new layer and call it ‘Highlights’. Set the layer to Screen and take a soft brush and paint in some random highlights. Vary the size of the brush, and concentrate on edges and corners, making some stronger than others. Don’t be too regimented with these, as we want a more erratic feel to this particular step so it looks more natural.

Add a power source
Create electric type effects

To add another layer of realism, the next thing to do is add some power cables running from the letters and the neon sign. To do this, draw the cables with the Pen tool and apply a stroke of around 10px, then add the following effects: Drop Shadow (Opacity 75%, Distance 20px, Size 21px), Inner Shadow (Size 7px, Noise 10%), Bevel & Emboss (set to Pillow Emboss, Direction Up, Size 4px, Soften 5px), Colour Overlay of mid-grey, and a Stroke of 1px set to Outside, with an Opacity of 70%. To give the cable a dirty look, you can also add texture in the Bevel & Emboss effect by checking the standard Bubble pattern and reducing the scale to around 50%, then increasing its depth to around 750%. Add more power cables, taking care to draw realistically how they would sag and dip between fixings.

Add a Lens Flare
Create electric type effects

As much as the Lens Flare filter is a muchmaligned effect, it still has its uses, and in a hyperreal illustration such as this it gives the right vibe. Create a new layer and call it ‘Lens Flare’. Fill it with black and set the blending mode to Screen, reducing the Opacity to around 60%. Now go to Filter>Render>Lens Flare and click OK to select the 50-300mm zoom option. Now position it wherever you feel works best.

Give it a final boost
Create electric type effects

To finish, add a Vibrance adjustment layer and boost the colours and Vibrance level until you are happy. Of course, we always encourage you to experiment, so don’t be afraid to try other adjustment layers and tweaks until you have achieved the result that you are happy with.

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • mina

      amazing.. thx for sharing helpful procedures

    • http://www.vsi-thinking.com VSI

      Great tutorial, thanks for sharing

    • http://www.webdesignreview.co.uk haris awais

      wow, awesome tutorial, i was looking for such step by step tutorials of photoshop , please i want more to practice my design capabilities

    • Lisa Anderson

      I really love this, the tutorial is brilliant thanks for sharing it with us. I like they way things have been layered up!

    • Jason Marnie

      Really good blog its is amazing how photo shop works.

    • Sally Marie

      I like the design and the concept, i just dont like the colours very much. I think in some brighter more fun colours it would look loads better.