» The Pen Tool - Curved Navbar Photoshop Tutorial- tutorial blog

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!