Step 1: Creating the Workspace:
Start with a 150 x 300 document. Set the background colour as #FFFFFF
Step 2: Create our first Navigation button link:
Get your rounded rectangle tool set the radius to 5px and make a shape like so:
Next apply some filtes:
Take note of the opacity setting on the gradient, make sure it's 98% otherwise you won't be able to see the pattern overlay we will be used in the next stage of the tutorial.
The pattern above can be found in .zip file that will be with the tutorial or you can learn how to create it yourself using the next step.
Step 3: Creating the pattern File (optional):
It's all well and good providing the pattern file so the user can simply download it and use it, but if your's serious about using Photoshop your going to probably need to know how to create patterns, so follow this step if you want to know the magic behind it all follow this step. If you don't want to then simply download the .zip thats with this tutorial and for the file named userbar.pat, installation details are in the readme.txt that comes with the tutorial.
OKay so let's create this beast!
Start by creating a 6x6 document and zoom into your document all the way until Photoshop won't let you go in any further
We need to make sure that Photoshop is using it's default settings that are loaded in on start up of the application,so before we start making the pattern press D on your keyboard, this will change your colour pallette to default as well as some other settings which aren't show in this tutorial
Grab youor pencil tool and set the size to 1px making sure the colour of the pencil will be black. However resetting the colour pallette should of done this for you.
With your pencil tool start by clicking in the top right hand corner of the zoomed 6 x 6 document:
Repeat this by making another pencil mark like so:
Repeat until you have something like this:
Now instead of savingthe document by going to File > Save as you will be doing something a little bit different.
Instead go to Edit > Define Pattern and name is something like "Diagonal line pattern"
Then click ok.
Now returning to step 2 above, you should now see the create patterned when you come to select in your patterns menu.
So now everyones up to speed in the creation process our first button should look like this:
Step 4: Add text and open/close links:
So we've got the first look at our navigation button. Now add some text to your button. For this tutorial I will be using Trecbuchet MS size 12pt:
Now just add a + size onto this button to signify it's closed:
The first navigation button is ready!
Step 5: The Drop down button
Okay so start by duplicating the button we created and change the text link to something else like "About" then change the + sign to a - sign to indicate a open tab:
Now make a new layer and make a selection like so:
On your new layer add in this gradient setting:
Now add 1 px stroke with color #000000 to give you this effect:
In this new box write in some sub links like so:
Consider using a smaller font than the navigation button text to indicate that the links in the open tab box are sub-links. The >> also show that there links of the main navigation link
Step 6: Your turn!:
I've gave you the settings you need for this tutorial. Now it's time for to get creative. You can choose what to do next, but I'll show you what I came up with:
Following consitency I just let old habits of mine create this, but you could change things yourself like change the colour of open tabs like so:
It's really up to you, play around with settings create something awesome!
The Final result:
