Nav Bar Pen Tutorial

This is a beginning photoshop tutorial about how to create a base shape of a horizontal nav bar with the pen tool, The pen tool is VERY useful when creating interfaces because it lets you make practically any shape you can think of. It's that powerful! So, in order to become a great interface artist, you MUST learn this valuable tool, and how to harness its power. I am not an "expert" by any means, but I can use this tool to make complex interface shapes, and it's helped me out many times.

If you do get stuck on a step, or have questions about ANYTHING, please contact me at: , or post on the tutorial message boards I will be more than happy to answer your questions about how to do a technique or step. Also, the units used in this tutorial are pixels, and if you see something like this "File -> Save As" it just means go to the top menu bar and select "File", then select "Save As".
Thanks and have fun!

You may download the zip version this tutorial. Please open your copy of NavBarPen.psd in Photoshop so you can have it handy and be able to use it as a reference when you need to. This helps you to see where a certain element of needs to be on the document. A tip I recommend is to set your screen resolution to 1152 x 864 or higher. Of course this is not mandatory, but I have found that when working in Photoshop you need all the desktop space you can have.

- Start by creating a new document (ctrl + n). Make the document size 700 x 250 pixels with a white background, a resolution of 72 pixels/inch, and RGB Color Mode.

- Create a new path in the paths palette, similar to how you would create a new layer. Name it "navbar shape".

- Drag the "outline" layer from my .psd file, and place it in your document.

- Now, grab the pen tool and start at the top left point, and just trace around that outline in, adding anchor points in a clockwise fashion (zoom in a little if you have to):

- Remember to hold shift on the straight horizontal and vertical parts, so you can have a perfectly straight path.

- Whenever you are creating a path, you basically want to add an anchor point whenever the shape is going to change direction. Also, try to make your paths with the least number of points possible. Simpler is much better when it comes to making paths, trust me on this one. Only if you can't create your shape without adding more, should you add more sparingly.

- Once you complete that, you should have something like this:

- Now, drag the "final shape" layer from my .psd onto yours, and line it up as shown:

- Now, grab the convert point tool, zoom into about 200%, start at the top left anchor point, and trace the shape as best you can.

- A tip is to hold the shift button, and drag to the right or left to keep things straight. This won't be the case with every path you create, only when you have straight edges you want to keep straight as in this tutorial.

The path tool is a difficult one to master, but once you do, you open up a world of possibilities in regards to being able to make any interface shape you can think of. My best advice is to keep trying and perfecting your skills. I have provided you with a few other shapes to trace in the zip file, called shapes.psd. Please work on these and I guarantee you'll agree that it is time well spent.

Also, play around with making your own shapes and adding anchor points, deleting anchor points, and using all of the sub tools of the pen tool.

Practice, practice, practice, is the only way to become a pro at this stuff, so keep at it!

Thanks for completing the tutorial, and please go to the forums to give feedback and show off your paths and shapes! See you there. Also, please take a look at the other photoshop tutorials to expand your skills.

Sincerely,