Designing a Clan Template Part 2

In the 2nd part of this series I’m going to show you how to design a cool set of navigation buttons, like the one shown in the below image.

1. Open your Document

Let’s get started! First of all open up the PSD you created from the last tutorial. Now create a selection on your canvas the same width as the header graphic, but only about 40 px in height.

Now you’ve made your selection, smooth it by about 5 pixels by going to Select > Modify > Smooth.

On a new layer fill this selection with the same color as the background, in my case it’s #262626. Now apply this Gradient Overlay to add more detail to the navigation bar.

2. Adding Details to Navigation

Hold ctrl and click the main layer, this will make a selection around the whole layer. Create a new layer and draw a White/Transparent gradient from above the top of the selection to the middle or bottom, or you could just fill the selection with white, not much difference.

Now, since the navigation bar is 40 px in height, make a selection at the bottom containg 20 pixels of the gradient, press delete to delete the bottom part of the gradient.

Next, lower the opacity for this layer to about 20% and change the layer mode to either Soft Light or Overlay.
Again select the main layer and create a new layer. Fill your new selection with white (#ffffff) and move the selection up one pixel, press delete.

Lower the opacity for this layer to about 20-35% and change the layer mode to, again, Soft Light or Overlay.
Repeat that for the top line, except when you’re done, move the line down one pixel. This is just for the sake of small details.

3. Creating Buttons

Now it’s time to start making the buttons! Firstly, make a selection inside of the bar, make it a healthy-sized button -the selection of my button was 100×26 pixels. You should/can also smooth your button selection by 2-4 pixels (Select > Modify > Smooth)

Now, fill the selection with a yellowish gradient - the colors I used for my gradient were #d3bd3e and #76551e.

Right-click your layer, go into the Blending Options apply the following layer styles to your button layer:

1. Inner Shadow
2. Inner Glow
3. Color Overlay
4. Gradient Overlay
5. Pattern Overlay (Download pattern from here: Warning Tape.)
6. Stroke

You should be left with a nice, industrial-styled button pretty much like this:

Not bad for just a few layer styles, huh?

4. Button Detailing

If you want to give your button a few extra details, follow this step. On a new layer draw a red (#ff0000) line from one end of the button to the other.

Using the eraser tool, using a large, soft brush erase the left and right sides away.

Now apply the following Drop Shadow and Outer Glow to this red line layer.

To finish off the button add your text. I used Tahoma, 11pt, Bold, No Anti Aliasing, #ffffff, also with this Outer Glow applied.

Merge your button layers together (not including the text layer) then duplicate the two remaining layers and move them along the line. Repeat this as many times as you want, depending on how many buttons you want. I ended up with 7 buttons, after finishing off, you should also center all of the buttons in the navigation bar.

Thanks for reading this part of the tutorial! If you want to continue, click one of the links below.

Designing a Clan Template Part 1
Designing a Clan Template Part 2
Designing a Clan Template Part 3

Again, you can freely download the PSD file for the navigation part of this tutorial from here: Designing a Clan Template Part 2

You must be logged in to post a comment.