Today's Posts
Register
     
 

EvoGFX \ Graphics \ PS Tutorials \ Layout Tutorials \ Tabs (Using the pen tool)

Layout Tutorials Want to learn how to create some layouts in photoshop? Come on in.

Reply
 
Display Modes
Old 08-21-2007, 12:08 PM   #1
PicoDeath
 
Join Date: Jun 2005
Location: England
Posts: 10,156
PicoDeath is a diamond in the dirtPicoDeath is a diamond in the dirtPicoDeath is a diamond in the dirtPicoDeath is a diamond in the dirtPicoDeath is a diamond in the dirtPicoDeath is a diamond in the dirtPicoDeath is a diamond in the dirtPicoDeath is a diamond in the dirt
Default Tabs (Using the pen tool)

After getting the basics of web design down you'll want to improve on your design skills and the pen tool will come into a lot of it. You can create any curve you can think of with the pen tool and I'll show you in this tutorial how to create some pen style tabs(Navigation buttons).


Step 1
Firstly create a new document and fill the background with a light color and select the pen tool .

You'll also need to check your pen settings, once selected they are located below the 'File', 'Edit' and 'Image' tabs.



Step 2



Now you must start to use the pen tool and be warned at first it can be extremely stressful and you'll want to just give up, but it'll be worth it. In order to keep the line straight hold shift and click where you want it to start and then click where you want it to end, this will be a straight line.

Step 3



Next you want it to take more of a shape, whatever your foreground color is your tab will be. Next hold shift and click where you want your tab to end(In height).

Step 4



Creating where the curve begins and ends is the stressful part once you understand the very basics of the pen tool. You don't want to hold shift here. Clicking slightly lower than where you curve will start is how we do this.

Step 5



Here we have to click slightly lower again but hold the click and drag it around a little to see how smooth you can make your curve. This can take some fiddling around with to perfect it.

Step 6
Now we should actually make this into a sub navigation, in this tutorial you should have learned how to use the pen tool at the very basic level. I've now added some extra effects, blending options and done some simple web design to show you what you can now do.



Hopefully this has helped you in understanding how to create buttons like this because I've not come across a tutorial which could teach it.

If you created your own buttons/navigations using this tutorial please post your results and join in with the discussions here at EvoGFX.

Click here to register for free!
__________________
SEOContest2008
---------------------------------------
Gamernade - 360sigs - Fresh Myspace

Last edited by PicoDeath : 08-22-2007 at 08:37 PM.
PicoDeath is offline   Reply With Quote
Old 08-22-2007, 08:43 PM   #2
P4R
Banned
 
P4R's Avatar
 
Join Date: Nov 2005
Location: Georgia
Posts: 3,493
P4R has a spectacular aura aboutP4R has a spectacular aura aboutP4R has a spectacular aura aboutP4R has a spectacular aura aboutP4R has a spectacular aura aboutP4R has a spectacular aura aboutP4R has a spectacular aura about
Send a message via MSN to P4R
Default Re: Tabs (Using the pen tool)

pretty damn smexy
P4R is offline   Reply With Quote
Old 08-22-2007, 09:26 PM   #3
KnFC
i like turtles
 
KnFC's Avatar
 
Join Date: Jun 2005
Location: the places where i hustle every day
Posts: 2,340
KnFC has a spectacular aura aboutKnFC has a spectacular aura aboutKnFC has a spectacular aura aboutKnFC has a spectacular aura aboutKnFC has a spectacular aura aboutKnFC has a spectacular aura aboutKnFC has a spectacular aura about
Send a message via MSN to KnFC
Default Re: Tabs (Using the pen tool)

making the curves needs to be better explained, but good end result.
__________________

Son, we live in a world that has walls,
and those walls have to be guarded by men with guns.
Who's gonna do it? You?
KnFC is offline   Reply With Quote
Old 08-22-2007, 09:29 PM   #4
PicoDeath
 
Join Date: Jun 2005
Location: England
Posts: 10,156
PicoDeath is a diamond in the dirtPicoDeath is a diamond in the dirtPicoDeath is a diamond in the dirtPicoDeath is a diamond in the dirtPicoDeath is a diamond in the dirtPicoDeath is a diamond in the dirtPicoDeath is a diamond in the dirtPicoDeath is a diamond in the dirt
Default Re: Tabs (Using the pen tool)

How can i explain clicking and then dragging any better?
__________________
SEOContest2008
---------------------------------------
Gamernade - 360sigs - Fresh Myspace
PicoDeath is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump





Evogfx.com is an Privacy Policy and Legal
Forum skin by ForumMonkeys. Powered by vBulletin® Version 3.6.4
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.