Making a Clan Template 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.
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).
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.
- Apply Gradient Overlay.
- Add shine.
- 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.
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)
Lower the fill opacity for this layer to about 5-10% then apply the following layer styles:
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.
Last thing to do here is add in your match details, like what I’ve done below:
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.
(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 
Finally I added the footer with the copyright.
For learning purposes only, you can freely download the PSD file for the finished clan template from here: Finished Clan Template Design (2.3mb) And you can view my final result here.
Designing a Clan Template Part 1
Designing a Clan Template Part 2
Designing a Clan Template Part 3
Thanks for reading everyone, I hope you enjoyed it.
You must be logged in to post a comment.
12 responses
:O Very nice
Good job. Love the tutorial will use psd to learn and to create a template i need for a business with this method. It looks really nice
A very cool and helpful tutorial
Booked Mark the website
Nice, I made a website for friend almost like that, and it’s very nice. They are quite good CS 1.6 proclan. Another guy is making a CMS and I made design. Will be up and coded for Christmas!
Cool template&design.
very very cool and helpful 5*
Booke Marked
I have a question about the header how do I render the size I can’t quite figure that out?
Very good tutorial, helped me a lot thanx.
very nice, and that is a perfect design for a clan site, an old site i made looked somewhat like this, i might just go edit a few things now
Very useful!
Thanks so much!
Awesome tut thanks
hey nice i like it i should it it liked dat thanks!