Photoshop

Clan Template Designing Part 3

In this part (3rd and last part) of the tutorial you’ll learn how to make the recent matches and whatnot boxes, and also the footer bar.

Clan Template Designing
1. Creating the First Bar
Firstly open the clan template file you were working with before, then make a selection underneath the header for the Recent Matches bar. My selection is 280×24 pixels in size (a little wide, but I had to use up all of the space).
Clan Template Designing
Smooth this selection by 5 or so pixels by going to Select > Modify > Smooth and inputting the number. Now we’re basically repeating what we did with the navigation bar in the last tutorial, so you can look back at the navigation bar to see what you did to it.
1.    Apply Gradient Overlay.
2.    Add shine.
3.    Add highlights, top and bottom.
Lastly for this bar, using the pencil tool draw a small pixel arrow at the bottom in the middle, then add your text.
Clan Template Designing

Clan Template Designing

2. Creating Smaller Sub Bars
Next thing is to create a new layer then make a selection underneath the main bar, make your selection the same in width but a bit smaller in height (mine was 280×14 pixels). Now smooth the new selection by about 2-3 pixels, lastly fill the selection with white (#ffffff)
Clan Template Designing
Lower the fill opacity for this layer to about 5-10% then apply the following layer styles:
1.    Inner Shadow
2.    Gradient Overlay
Clan Template Designing
Now you can duplicate this layer and move it down 1 px underneath the first one. Repeat this until you have 6 or so bars, your choice.
Clan Template Designing
Last thing to do here is add in your match details, like what I’ve done below:
Clan Template Designing
What do you think? Not bad in my opinion.
3. Footer Bar, Etc
Group all of the Recent Matches layers together then duplicate the group, move it over so there’s about 10 pixels space in between. Repeat again once.
Clan Template Designing
(click image for full size)
Using the same steps, make a content/updates area for the template. In the end I also added a bar underneath the Recent Matches, etc. boxes that shows you where abouts on the website you are
Clan Template Designing
Finally I added the footer with the copyright.
Clan Template Designing
For learning purposes only, you can freely download the PSD file for the finished clan template from

Part 1 Part 2

About the author

NadeemSMB

2 Comments

Leave a Comment


*