The Pen Tool – Curved Navbar Photoshop Tutorial
January 1, 2006 by Anthony · 14 Comments 
In this tutorial you will learn how to manipulate a Photoshop shape by using some basic principles of the pen tool. We will cover adding and moving reflex points on a shape and how if used right can create a very attractive curved navigation bar for your website.
Step 1
As always, the first thing you need to do is create yourself a new canvas in Photoshop (no, not Paint, Paint is for the pros [/sarcasm]). Once you have your new canvas click and drag out a rectangle shape and give it a random colour, any colour is fine but for this tutorial we’ve used red. We just love red. You should have something looking like this:
Now that we have our shape, it’s plain sailing from here. No more layers, No more shapes. Just the magical pen tool ready to do it’s little tricks for you.
Step 2
For those of you who aren’t familiar with what the pen tool actually is, it’s the little icon which appears on the toolbar that looks like:
To see the added options like above you must click and hold the left mouse button on the pen tool icon.
Now that you know what and where the pen tool is, you are familiar with where to go in future if you ever need to use it. For now we need to use the “Add Anchor Point Tool,” so select that.
Adding anchor points to shapes can be tricky, especially when you’re trying to get them in the right places. It’s important that for creating smooth curves that you space your anchor points apart properly, otherwise the edges will be too sharp and not look very smooth. Space your points out like shown below:
The spacing shown above will give us enough leverage to create a smooth curve and not cramp the overall design.
Step 3
Now that we have placed out anchor points (or reflex points) all we are required to do is manipulate them to generate a smooth enough curve to be happy with for our navigation bar.
For this part, we need to select the empty arrow tool from the toolbar. It looks like this:
Once you have this selected, all you need to do is click on the anchor points on your shape and you can move them around as you please. For this exercise, click the first anchor point that you made (to the left side) and while holding shift hit the down cursor key four times. Do the same with the left corner anchor point. You should end up with this as a result:
Now that you have successfully edited your shape using the pen tool, you know the basics of editing shapes for the future. If you wanted to spiff this bar up a little bit, head on over to the Adding Gloss tutorial and learn how to give your shapes that little bit of an extra wow factor!
I could not get the anchor points to add to the corner, not sure where I have gone wrong but I will park this one.
The first time I did this, the anchor points worked, now they won’t appear. *confused*
Very easy.. Good idea.. Congratilations…
I can’t get the anchor points set down… i click down when anchor point is selected but nothing happens
i like it … thanks dude
Odizzle > using “Direct Selection Tool” it’s for Selects and moves paths and parts of paths.
I like it … thanks dude
But how can i insert link to the text via photoshop?
Thenks
i like it.
if we click resterize layer we can not treat image. how can again and again treat image.
solve problem anybody
thx
Nice introductory.
For those who can’t add the points the problem is you are probably inserting the wrong type of rectangle. In Photoshop 7 as least you are givin the choice to create a shape layer, path, or fill pixels (toolbar menu toolbar). Make sure you create a shape layer only then can you insert points.
Brilliant
It seems to me difficult to do like these stuff. But by following the tutorial I learned some new techniques. I am new bie in photoshop so need some good tutorials like this to become a professional. thanks
simple – effective – love it. im slowing moving from fireworks to photoshop.
Nice tutorial!
You can download lots of free navigation bars similar to this at http://www.stemplate.com/navigation