Photoshop

Clan Template Designing 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.
Clan Template Designing
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.
Clan Template Designing
Now you’ve made your selection, smooth it by about 5 pixels by going to Select > Modify > Smooth.
Clan Template Designing
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.
Clan Template Designing
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.
Clan Template Designing
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.
Clan Template Designing
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.
Clan Template Designing
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.
Clan Template Designing
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)
Clan Template Designing
Now, fill the selection with a yellowish gradient – the colors I used for my gradient were #d3bd3e and #76551e.
Clan Template Designing

About the author

NadeemSMB

Leave a Comment


*