1 [PS]Photoshop Tutorial Designing a Clan Template3/3 Mon Sep 20, 2010 10:03 pm
Admin
Admin
[You must be registered and logged in to see this image.]
Making a Clan Template Part 3
[You must be registered and logged in to see this image.]30. Oct, 2006 [You must be registered and logged in to see this image.]12 Comments
google_protectAndRun("render_ads.js::google_render_ad", google_handleError, google_render_ad);
[You must be registered and logged in to see this image.]
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).
[You must be registered and logged in to see this image.]
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.
Lastly for this bar, using the pencil tool draw a small pixel arrow at the bottom in the middle, then add your text.
[You must be registered and logged in to see this image.]
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)
[You must be registered and logged in to see this image.]
Lower the fill opacity for this layer to about 5-10% then apply the following layer styles:
[You must be registered and logged in to see this image.]
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.
[You must be registered and logged in to see this image.]
Last thing to do here is add in your match details, like what I’ve done below:
[You must be registered and logged in to see this image.]
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.
[You must be registered and logged in to see this image.]
(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 [You must be registered and logged in to see this image.]
Finally I added the footer with the copyright.
[You must be registered and logged in to see this image.]
You can view my final result here.]
Making a Clan Template Part 3
[You must be registered and logged in to see this image.]30. Oct, 2006 [You must be registered and logged in to see this image.]12 Comments
google_protectAndRun("render_ads.js::google_render_ad", google_handleError, google_render_ad);
[You must be registered and logged in to see this image.]
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).
[You must be registered and logged in to see this image.]
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.
- Add highlights, top and bottom.
<LI sizset="23" sizcache="4">Apply Gradient Overlay.
<LI sizset="24" sizcache="4">Add shine.
Lastly for this bar, using the pencil tool draw a small pixel arrow at the bottom in the middle, then add your text.
[You must be registered and logged in to see this image.]
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)
[You must be registered and logged in to see this image.]
Lower the fill opacity for this layer to about 5-10% then apply the following layer styles:
- Gradient Overlay
<LI sizset="26" sizcache="4">Inner Shadow
[You must be registered and logged in to see this image.]
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.
[You must be registered and logged in to see this image.]
Last thing to do here is add in your match details, like what I’ve done below:
[You must be registered and logged in to see this image.]
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.
[You must be registered and logged in to see this image.]
(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 [You must be registered and logged in to see this image.]
Finally I added the footer with the copyright.
[You must be registered and logged in to see this image.]
You can view my final result here.]