Really wicked Photoshop glow lighting effect and Pen tool introduction

Hey guys,

I’ve been playing with glow effects lately for an upcoming website redesign, and I’ve been noticing quite a bit of work being done with Photoshop’s pen tool and cool lighting effects, so I figured I’d share some introduction to the pen tool itself as well as a glow/lighting technique which can be used in many, many ways with you guys. Sit back, relax, and enjoy another Photoshop tutorial.

Just as a sneak peak, this is what we are going to be creating…

Okay, Let’s start from the top!

If you’ve never used the pen tool in Photoshop before, you are definitely missing out. The pen tool is great for working with vectors as well as creative bezier curves.

Considering the pen tool in itself is usually classed as a intermediate/advanced tool in Photoshop, we will just touch up on the basics so you can get going with this tutorial.

The Pen Tool

The Pen tool has the following five options:

1. The Pen tool is mostly likely going to be the main tool you use. The ‘Pen Tool’ allows you to create straight lines and curves that make up most your paths.
2. The Freeform Pen tool is designed to let you create paths quickly by just drawing freehand with the mouse. The main downside is that it’s hard to create accurate paths and especially curves due to the nature of drawing with a mouse.
3. The Add Anchor Point Tool allows you to insert additional anchor points into your path, basically splitting a line segment into two. This helps you when you have already started a curve but you want to convert this into a more complex shape.
4. The Delete Anchor Point Tool removes anchor points from your path. What happens as you remove an anchor point is that the anchors on either side of the removed anchor join up to form one longer line segment, as if you have just snapped them into a single line. This tool helps you when you have too many anchor points on your path.
5. The Convert Point Tool allows you to convert a smooth anchor point to a corner anchor point, and convert a corner anchor point into a smooth one.

Even though that was a gentle introduction to the pen tool; today, we will mainly work with the Pen tool itself - so create a new document, 460×460 and let’s go! Try to create the following easy curves and lines by following the simple steps.

If you can get these down-pat, it’ll make the next part easy as anything! NB: I have created a little compass to help you with the angles of the curves. :0) Good luck!

If you have made it this far, I’m assuming that you can now make a straight line, a simple curve, and take a curve a little bit further and create a wave of sorts! Well done..

Okay, let’s create a new document, 460×460 and set background colour to black, #000000. Before we get kicking, let’s make sure we have some settings where they need to be.

Firstly, when you click the pen tool or press P on your keyboard you should see the preceding options on the top of your screen. Make sure you select the second option of the three ’squares’ - the ‘Paths’ option highlighted in green above. Then make sure that ‘Pen tool’ is selected, which should be on by default anyway. Finally, click on the down-ward arrow after the custom shape icon; the star-looking icon. This buttom (down-ward arrow) is tool settings, and as you can see there is a ‘Rubber Band’ option.

What’s the Rubber Band option for?

The Rubber Band option is used to help show you where the curve is heading and how it’s looking before you click to set it on the next segment or anchor. This is a good option for beginners because it helps to show you where the path will go next. The Rubber Band option might be hard to begin with, because even when you are done with a curve, the line just ‘follows’ you. Click escape, ESC, on your keyboard when you are done with a curve and that will get rid of the stalker!

Just a little tip - when you are done with paths and this effect, and you want to draw shapes, make sure you select the first of the three squares, or ‘Shape Layers’ and not ‘Paths’. Obviously we can keep ‘Paths’ on for now because we need this option.

So back to your 460×460 canvas with a black background.

Making sure to incorporate a new layer for each object, draw three objects on the canvas, separating them across the canvas if you can. We want to draw what we have just learnt; a straight line, a curve and a wave.

Don’t worry about the foreground colour for now because we will apply layer styles later to dress each one up. So obviously, create a new layer, call it ’straight line’ or something, draw the straight line and then create a new layer for the curve, and another for the wave. If done right, you should see something like below.

If that’s what you see on your screen, well done! Let’s keep going.

Click the brush tool and select a soft round brush, 5 pixels in size - or if you have a later version of Photoshop, simply select the brush tool, (press B), and then right click on the canvas and change the ‘Master Diameter’ to 5px and leave hardness at 0% (obviously! it’s soft, right!). Select white, or #FFFFFF [thanks Hank!] for the foreground colour for now so we can straight away see a result, then click back into the pen tool.

This is the fun part! You might be wondering why we setup the brush? Well worry no longer, we are about to find out why!

Get the Flash Player to see this player.

Okay, let’s recap.

If you right click on the paths you should see a ‘Stroke Path’. What this will do is just what it says; Stroke the path you have made using the option you tell it to. Because we edited brush settings beforehand, we choose ‘Brush’ and make sure we keep ‘Simulate Pressure’ ticked. After that, you’ll want to right click again and ‘Delete Path’ because we now have a stroked layer in its place and don’t need the ‘guide’ anymore!

What exactly is simulate pressure?

Simulate pressure simply gives the curve a more realistic stroke. It does this by tapering-off the ends of the curve/line as if the pressure has started off light, and then eased-off on the end of the curve. Trust me, you want to keep this selected - it makes everything look much better!

Okay, if you followed the video, you should now have something like below.

Cool hah? Okay, let’s get some glowing happening.

If you apply the following Layer effects to your now-stroked paths, your glow should start forming.

When you select the above layer styles; if the paths are all on one layer (even though we talked about splitting them up before), as an example, should start looking something like this:

Cool hah?

Quick Tip 2.0

If you want to make your life easier, you can click the “New Style” button as seen in the above Layer style selection screens; immediatly under ‘Cancel’. This will let you clone all the settings that are open on the current Layer style screen to be used on another layer/path, etc. When you want to re-use the settings, go to: ‘Layer > Layer Style > Blending Options’, click on the ‘Styles’ tab, on top of ‘Drop Shadow’, and ‘Inner Shadow’, etc - and then select your new style from the list; press ‘OK’ and you’re done!

So there you go! Experiment with your curve, brush master diameter and type, and also your lighting (fill/layer effects) and you could come up with something like below…

So there you go people, hope you learnt something about the pen tool today and some effects you can create using stroke paths.

Enjoy and drop a comment if you liked the tutorial or you need something explained - or feel free to share it with your mates. Get on the RSS Feed to keep up to date about when I next post!

Thanks for reading, Cheb.