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:
- 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.
- 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.
- 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.
- 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.
- 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!
[flashvideo filename="http://www.cheb.com.au/wp-content/uploads/2008/04/Untitled.flv" /]
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.
test Filed under Tutorials | Tags: Effects, Inspiration, Photoshop, Tutorial, Web Design | Comments (61)61 Responses to “Really wicked Photoshop glow lighting effect and Pen tool introduction”
Leave a Reply
Super cool tutorial. Thanks
good attempt
Really nice tut, especially for beginners.
Freakin AWESOME! I can finallly say I found a great Pen tutorial.. Very interesting stuff you can do with it.. Thnks as always Cheb!!! 8o)
Laz
Nicely done Cheb. I love how you take your time to explain the mechanisms behind how and why things work.
Thanks mate! I’ve subscribed to your RSS..
GI
Nice tute dude, keep it up.
One thing… did I read correctly:
“Select white, or #000000″ ?
Hey Hank,
Haha, you sure did! I must have been drunk whilst writing that.. It’s funny though, I got it right once! “Okay, let’s create a new document, 460×460 and set background colour to black, #000000″.
I should have noticed that – guess I’ll check hex codes from now on! Thanks for the pick-up mate – It’s fixed!
Thanks for the lovely comments guys!
Brilliant!! Thanks!!
Thanks for the tutorial! I’ve only 1 problem:
Whats the way to get the brushes smaller at the end of the paths? When i try that, the brush is everywhere the same width :S
Can u plz help me?
Hey guys,
@Steinie – Thank you! You’re most welcome.
@Roeltje – Make sure that when you are right clicking on the path and selecting ‘Stroke Path’ that ‘Simulate Pressure’ is ticked/checked! This is what makes the ends tapered.
Also, another reason you might not be getting them tapered on the ends is the type of brush you are selecting to start with.
I recommend trying the soft brush at between 5-10 pixels to begin with; just to make sure you can get it to work first – and then try your hand at experimenting with other brushes!
Not all brushes will give you the tapered look – esp. some brushes you might have made or downloaded yourself.
Feel free to drop another comment if you still have any problems.
Cheers, Cheb.
thnks,can u send me more photoshop tutorials
Dear Cheb,
I have selected Simulate Pressure, but that wasn’t the problem.
I have resetted the brushes and after that, it worked! So tyvm for your support + Tutorial
Well, i have made sure that i have checked Stimulate pressure, and i have selected brush, but i dont get the tapered ends. I don’t really know what a soft brush is? Sorry, i’m a total noob.
Actually never mind i’ve done it. Great tutorial, man!
Excellent work guys!
Glad this tutorial helped!
Loads more tuts coming – stick around.
Cheb.
Whenever I select stroke paths, I only get dots on the anchor points… WTF?
COOL!!!
“Whenever I select stroke paths, I only get dots on the anchor points”
The same thing is happening to me. I’ve tried everything and finally just gave up.
Hey guys,
If you can right click and select stroke path, it would appear you are going in the right direction.
Make sure that when you right click on the path and go to ’stroke path’ you select ‘Brush’ from the drop-down and then check/tick ‘Simulate Pressure’.
Once this is done, you should see the outline of the path and you can now proceed to right click again and ‘Delete Path’ – which should get rid of the ‘dots’ on the anchor points!
Let me know how you go and if possible, the steps you took to get there; if you need more help.
Cheers, Cheb.
I did all that over and over again exactly as described, same result. Only getting the dots.
nice tutorial cheb, when I get an hour, I may try to do it for my site. Though seeing as I am still trying to get my header to link to my homepage, i fear i am slightly behind.
WOW!!!
this tutorial is great!
im a beginner in photoshop.. and this has taught me some stuff already!
thanks =]
Thanks James and Nathannn – glad you guys enjoyed it! Cheb.
@Sarah and Invisible; if you can upload a screenshot or export what you see, we can check what’s going on. Cheers, Cheb.
A colleague of mine is having the same problem!! Whenever she creates a path then strokes it, it’s only stroking the anchor points, leaving a trail of spots!! Very frustrating, as mine works perfectly and I’m creating lovely lines. Can see no differences in set up between hers and mine, help!
I am pleased to say I think I’ve found the solution!!! I found this forum discussion: http://www.photoshopgurus.com/forum/general-photoshop-board/2599-cant-stroke-path-photoshop-cs.html – make sure your brushes have spacing enabled!! Open the brushes window (with your brush tool selected) then choose “brush tip shape” – at the bottom of hte window you’ll see a spacing option – make sure it’s ticked!! Mine is set at 25%. Now try stroking a path – it should be a lovely line! Hope that works for people!
That worked fantastically, thanks claire! Only problem i that now im not getting the tapered ends, even with simutale pressure on…
/
Well there we go! I go away for a few days and the community finds a solution! Thanks claire!
@Sarah – are you trying this with the ’soft round brush’ at around 5px to start off with? You can find out which brush is which by hovering over them.
As mentioned in the tutorial, some brushes won’t work in terms of simulating pressure if you’ve changed their settings; which come to think of it now – would obviously include spacing! Thanks again claire!
Cheb.
thank you, claire. That worked perfectly!
Cheers Great Guide.. Just What i Was looking for with my website…
Yes, I have a 5px 0% hardness brush, still no tapered ends. Grr…
Sarah, I have sent you an email with screens of the brush settings. Hope it helps! Cheb.
hey i love this tutorial, but for some reason when i rightclick the path, the option to stroke path is grey(unavailable) know any reason for this?
Wicked, i always wanted to know how to do the neon glow, now i can fix up my starcraft 2 site finally
Demondrive, make sure that you have selected ‘Path’ when you click on the pen tool and not ‘Shape’ – refer to the 4th image from the top of the tutorial.
Cheb.
@AWD – There you go! Starcraft 2 it is!
)
There is an alternate way to do this which is a little bit more difficult but gives you more control.
After you draw your shapes, create a layer on top of this and fill it with white. Go to the shape layer and use “ctrl” + “click” the layer icon to select the visible pixels in the layer – you should now see a selection outline of your shape. While the selection is active, select the layer you created (filled with your glow color) and create a layer mask of the selection by clicking the “Layer Mask” tab (it is a circle inside a square). Once you have done this a layer mask will appear to the right of the layer icon and everything outside the selection will disappear. Select the new layer mask icon and apply “filters” > “Blur” > “Gaussian Blur” to blur the mask by as many pixels as you want.
You should now have something resembling a glow. With the layer mask still selected you can use the dodge and burn tools, paint brush or gradients to increase or decrease the amount of glow by painting on the layer mask. this way your glow doesn’t have to be the same for the whole shape (say if you are making a filament in a glowing light bulb which drops off).
Nice explanation aaron! That works too. Great smoke effect on your site.
Good stuff.. Thanks for dropping by, Cheb.
I can’t find the new style button, for some reason. I’m using Photoshop CS2, does that have anything to do with this?
Have you tried double clicking on the layer icon?
The layer icon?
Yes.
So in your layer panel double click the icon for that layer (i.e. the thumbnail image for the layer). That will bring up the styles dialogue.
Oh, OK! Thanks!
Wow man thank you so much.. i’ve been looking for a good tut for this effect and you finally captured an idiots mind for photoshop. Thanks and continue with great tut’s.
hello , my name is Michael and…I have the same problem. I have made all the settings that you’ve said 5 pixel and 0 hardness round brush. It has 25 spacing, i selected the stimulate presure buton and deleted the path. It is very unclear and full of points, it’s an interupted line and the ends ar definitivelly not tapered
. i don’t know what to do next 
please help. i can send screenshots . i would really like to achieve the glowing lines.
I am waiting for a reply.
Thank you in advance cheb
Michael
hey, im extremely confused. i tried using the pen tool, but im absolutely horrible at it, when ever i use it, it looks like crap!!! and im extremely confused!!!
please help!
but great tutorial though!
Annalise; which step is confusing you, exactly?
I love this tutorial, and I have been following it exactly as I am told to, I have tried this one, and others, but I STILL cannot achieve the “tapered” look at the end. I am desperate, please Cheb, help me!
Caroline and others – if you can upload your working PSD for me somewhere I will gladly take a look and hopefully help you fix the problems.
Cheers, C.
hey guys………..i had the same problem…..now i found out a solution. :X
the problem is youre brush palete settings. I don’t know how but….something is wrong there. You can try and set all that is there…or you can make these settings….
under brush presets is brush tip shape. Click on the brush tip shape and set the hardness to 0 , select spacing but set it to 1
now …..for the most important: click on the shape dynamics and use these settings ( they worked for me but you can set them how you like )
size jitter : 0
choose pen pressure
minimum diameter : 25
angle jitter 100 %
choose again pen pressure
roundness jitter 100 %
choose again pen pressure
and minimum roundes : 100 %
then click on smoothing
if you have problems with the settings contact me at blue_magic_addict@yahoo.com
i want everybody to achieve the tappered end .
P.S. great tut Cheb 10x a milion
Michael,
Thank you for the great feedback and tactics. Hopefully this will help other readers on C2. Thanks for the visit and you are more than welcome.
Cheers, C2.0.
[...] 18. Glow Lighting and Pen Tool Introduction [...]
[...] 18. Glow Lighting and Pen Tool Introduction [...]
[...] 18. Glow Lighting and Pen Tool Introduction [...]
@49: Yep, in the brushes palette, make sure that the “Shape Dynamics” box is checked and the “control” drop-down box is set to “pen pressure.”
hi i was following your tutorial to a “t” but unfortunatley i am not getting the desired effect. ummm….HELP!!!!
never mind!!! i got it!!! i had to go select “pen pressure” in “control” under “shape dynamics”.
Thanks though!!!!
whole time i was looking something like this ..
thx
When I make my designs with the pen tool, it fills in with the default color, so I can’t make a design.
Brilliant. Thanks,
Adrian
….i am very thankful who made this tutorials it works great for me because after long time i’ve searching this kind of effect at last i’ve found it…thank you so much ….i owe you a lot…actually i am only a beginner in photoshop and i want to learn more….
Very very nice tutorial. i have been looking for this all over the net. Thanks you. Very helpfull