AK Productions Studios  
Home Forum Downloads Submit
Tutorials
Welcome Guest!
Another extreme template tutorial, based on creating high quality professional templates using the simplicity of the Photoshop selecting tools!
Author: AK
Difficulty: 8/10
 
Extreme Template 05
   

Result:
Click here to view!

Part 1: The Head - Covers the making of the header of the template.
Part 2: The Neck - Covers the making of the navigation bar and the banner.
Part 3: The Body - Covers how to design the body and structure of the template.
Part 4: The Foot - Wraps it up by covering the finishing components of the template, the footer.

Part 1: The Head
This section covers the making of the header of the template.

1. Lets start with a fresh new canvas, then fill it with white, then make a new layer and fill it with the diagonal pattern, which can be found at our downloads page. Once you've filled it, lower the layer opacity to 18%. next we are going to make the inner background for our template. So make a new layer and using the rectangular marquee tool (m) make a large selection for the top of you canvas to the bottom, make sure its centered and a width of about 600-620. Once you've made the selection, fill it with white and then take out the layer style window for the layer and use the following settings:
Image

2. Next we are going to make some nice looking borders, so make a new layer and using your Single Column Marquee Tool (m) make a selection about 5 pixels away from the border
of the bg you just made (Inner Background) fill it with #a5a5a5 and then make a new layer, and using your rectangular marquee tool (m) make a selection from the top of your canvas to the bottom, and about 1 pixel away from the previous border you made-- to the right of it. The width of the selection should be roughly around 8-10 pixels. And then fill it with #a2ca00 and use the following layer style options to give it a nice
style:
Image

3. About 2 px to the right of the last border we made, make another selection like the green border we made but with a width of 4 px. Now fill it with the diagonal pattern and lower its opacity to 25%. Now we will make one more border, 2 px away to the right of the last border, and fill it with #a5a5a5 and lower its opacity to 65%. And that's it with the borders, now do the same with to the other side of the template! Here is how your borders should be aligned and colored:
Image

4. The template is already starting to look good and we haven't even started! Now we are going to work on the header. So make a new layer and using your rectangular marquee tool (m) and make a selection and fill it with #a5a5a5 and then lower its opacity to 50%, look at the following screen shot for more details:
Image

5. Next we are going to make another border, the same as the one before except under it about 1-3 px, and fill it with the diagonal pattern, then lower its opacity to 18%.
Image

6. Now using your Single Row marquee Tool (m) make a selection about 2 px under the previous selection and fill it with #a5a5a5. Now that we have made somewhat of a boundary for the header, you can now add your header with some text, logo, and buttons on the side like mine:
Image

Part 2: The Neck
Covers the making of the navigation bar and the banner.

1. Lets start by making a new layer and a border line to limit the size of our navigation bar and banner, so using your rectangular marquee tool (m) use the same procedures done in the previous section where we make horizontal border lines, like so:
Image

2. Now we will work inside the box, so make a new layer and using your rectangular marquee tool (m) make a selection and fill it with #a2ca00, in the following screen shot ill show you the sizing and where to put it:
Image

3. Next add a banner I didn't do much to mine:
Image

4. Now we will work on the Navigation Bar! So make a new layer, and add in text representing your buttons:
Image

5. Now, as you can see I haven't done something very graphical this time like in my previous template tutorials as I tried to keep it as simple as possible! So I added small 1 px lines under my buttons which you can make easily with the Single Row Marquee Tool (m) and then just fill them with #535353. Now for the little box-in-box graphic, here's how I did it:

a) Make a new layer and get your rectangular marquee tool (m). Before we even start, you may also want to zoom in to about 500%.

b) Next make a small rectangle that is 7 px in height and 9 px in width, this is just the selection, do NOT fill it with anything!

c) Once you have your selection on, give the selection a stroke with the following settings:
Image

d) Now make a new layer and using the rectangular marquee tool (m) make a smaller rectangle selection inside the previous rectangle with 3 px in height and 5 px in width. So it should look similar to this, after you had gave it a stroke with the same settings as the previous rectangle:
Image

e) Now just merge the 2 layers and lower its opacity to 40% and then align it with the buttons!

Part 3: The Body
Covers how to design the body and structure of the template.

1. I hope you know what to do by now, if you don't, well, your not paying attention! You should make the borders for the content to give it, its limits. I won't be explaining how to do it as you should already know, if you don't know, look back at section I or II!
Image

2. Next we are going to work on the News Bar, so make a new layer and starting from the right side of your content space leave about 400 px of space and then using your rectangular marquee tool (m) make a selection of a rectangle, that will be the background for your 'Latest News' Header.
Image

3. Now that you have an idea of what we are trying to make, we will make the rest of the 'Latest News' bar backgrounds.
Image

4. And now just add some text and you're done! I added those extra separators which can easily be done with the single row marquee tool (m) and then just fill it with #a5a5a5!
Image

5. Now that we have our News Bar, let's finish up the content. So make a new layer, we will be making some more separators. So get your single row marquee tool (m) and make a selection, then deselect the extra selection, so its about 380-400 px long, and align it.
Image

6. Next, using the same technique for the previous separator made, make another one, with the same vertical alignment, but at the bottom of the content box.
Image

Part 4: The Foot
Wraps it up by covering the finishing components of the template, the footer.

1. Now we are going to make the 'Newsletter' Bar and the 'Partners' Bar. Let's begin by making a new layer and using the rectangular marquee tool (m) to make 2 rectangles, the first for the 'Partners' Bar and the second for the 'Newsletter' Bar, and align the selections like the following screen shot:
Image

2. Once you've made your selection, still with it, right click on it and click on stroke, use the following settings:
Image

3. Now you have a nice stroke on both bars. Next add text and that's it! Here is my finished result:
Image

4. Next make a border, like so (I won't explain how to do it, because we've made tons of them in the previous sections!) And then add some text under the border and you're done!
Image

This concludes our tutorial, you should have something similar to this:
Click here to view!

This tutorial's .PSD file is only valid to forum premium members! So why not register today and become a premium member?

Comment
Tell A Friend
 
       
       
Home | Tutorials | Forum | Submit | Articles | Downloads | Affiliates | Topsites | Contact | Site Map
Copyright © 2004 - 2006 AK Productions Studios. All Rights Reserved. hit tracker