Making a Clan Template Part 3


Advertisement


color palettes
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).
recent matches selection bar
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.
pixel arrow text added

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)
white selection filled
Lower the fill opacity for this layer to about 5-10% then apply the following layer styles:

  1. Inner Shadow
  2. Gradient Overlay

after applying 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.
duplicated bars
Last thing to do here is add in your match details, like what I’ve done below:
added text to bars
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.
duplicated recent matches
(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 ;)
content/updates area
Finally I added the footer with the copyright.
footer
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.

No related posts.

Follow Photoshop Star

If you want to receive updates from PhotoshopStar, please consider subscribing our RSS feed. You can also follow us on Twitter or on our Facebook page.

If you prefer, you can also subscribe to our monthly Newsletter.

Share this Post

12 Responses to “Making a Clan Template Part 3”

  1. :O Very nice

  2. 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

  3. A very cool and helpful tutorial :)

    Booked Mark the website

  4. 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!

  5. Cool template&design.

  6. very very cool and helpful 5*

    Booke Marked :D

  7. I have a question about the header how do I render the size I can’t quite figure that out?

  8. Very good tutorial, helped me a lot thanx.

  9. 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

  10. Very useful!
    Thanks so much!

  11. Awesome tut thanks :D

  12. hey nice i like it i should it it liked dat thanks!