Extreme Template Layout

13. Now back to the template! So we are done with the header, lets begin on the content and navigation bar. So get your rectangular marquee tool (m) and on a new layer, make a selection right under the banner bg and fill it with #383f44. Next type in your text for the buttons and make sure its aligned and spaced out proportionally.

Click to enlarge

14. Next we are going to make the little outlines, so make a new layer and using your rectangular marquee tool (m) make a selection of a rectangle around a text that you had made earlier to represent your button, like so:

Click to enlarge

15. Now fill the selection with white, and then still with the selection live, go to select > Modify > Contract A window will come up and put in 1 as the setting. Then press delete after you have press ok for the window. And now you should have a little outline, but that isn't what we wanted, so make another selection.

Make sure that both left out parts of the white box from your select are equal

You might want to zoom in on this one too

Click to enlarge

16. After that delete the selection, and then make another selection, this time horizontally:

Click to enlarge

17. Now press delete and viola! You should now have your nice little outline, now duplicate this layer and put one for each text that you made. And now we are done with the navigation bar!

Click to enlarge

18. Next we are going to make the content bars. So get your rectangular marquee tool (m) and on a new layer make a selection and fill it with #383f44 like the following:

Click to enlarge

19. Now still with the selection, go to Select > Modify > Contract... and set the setting as 5 and press ok. Next press ctrl+shift+I to inverse and on a new layer fill the selection with white. Now go back to the layer before, select it and press ctrl+shift+I. Next click on the second layer and press delete and you should have this after deselecting the selection, a little neat border:

Click to enlarge

20. Now set the opacity of the white border to 50%. And using the same technique as we did with this small box, make a bigger one with a faded border, like the following:

You can also add in the little ticks/switches that we made earlier to this too!

Click to enlarge

21. Finally, we are almost done! We are going to finish it up with the footer. So, make a small selection on the bottom of the template, or the left out space on your BG2 layer.

Click to enlarge

22. Now press delete, now make a new layer and make another selection, and fill it with white:

img21

To make your bar look like the one in the above, take out the layer style options of the layer and use the following settings:

23. Next just add a shadow from the top of the footer, and you should know the technique by now and you could also add another shadow overlapping it and lowering its opacity to about 5-15%

This concludes our tutorial, you should have something similar to this:

Click to enlarge