Home
Photoshop
Web Layout
Extreme Portfolio Layout
Level: Experienced Software:
Photoshop
Result:
1. First, start with a new canvas, I'm going to start with 800*600. Now on the first layer, fill it with the color #3e4550 using the Paint Bucket Fill Tool and make a new layer, now fill it with a pattern I'm going to use a square pattern, if you want to use my pattern take a look at our Pattern Downloads page, once you've picked your pattern and filled it, set the blending option to 'Soft Light' and the opacity to 7%.
2. Next, get the Rectangular Marquee Tool (M) and select about 160 pixels down from the top of the canvas select a selection about 10 pixels in height and the width should be the width of your canvas. Once you've made the select on a NEW layer fill it with #838c9b. Try to make it look like the following screen shot:
3. Now, make a new layer, and get your rectangular marquee tool (m) and make a selection on top of the last selection you made, except make its height about 30 pixels and the width should be the same width as the whole canvas, after you've made your selection fill it with #68707b, your selection should look like this now:
4. Now double click on the layer you just made, to take out the Layer Style and go to Stroke, your settings should be the same as the following settings and once your done, click ok:
5. Now we've just finished the Header, lets move on to making the Navigation Bar. Make a new layer, and make a selection about 90-100 pixels in height and the width should be the same width as your whole canvas. Now fill it with #555c65.
6. Next double click on the last layer you made (should be the navigation bar layer) to take out the layer Style window and use the following settings, once your done click ok:
7. Now we are going to make our content bg. So make a new layer, and get your rectangular marquee tool (m) now make a selection 220 pixels in height and the width should be the same width as your whole canvas. Once done with the selection fill it with #3c414d.
8. Next, double click on the layer to take out the layer style window and give it a stroke with the following settings, once you are done click ok:
9. Now we are going to work on the footer of the page. So make a new layer and make a selection using the rectangular marquee tool (m) and starting for the very bottom of the page and up to 50 pixels in height and the width, as always the same width of your whole canvas. Once you are done the selection fill it with #68707b. Try to make it look at the following screen shot:
10. After your done, make a new layer and select from the top of the last layer you made, and select about 10-15 pixels upward in height and the width, the same width as your canvas. After your done the selection fill it with #838c9b.
11. Now double click on your last layer to take out the layer Style window and give it a stroke with the following settings, after you are done, click ok:
12. Now this is how your template should look like or it could look a bit similar to this:
13. Now we are done with the boring steps, lets get to the fun parts! Now go back to your header layers, and make a new text layer on top of the bar that is the top bar of the whole template. For the text i am going to use the font called 'IRR3V3RSIBL3' and I'm going to make my text 2 colors, the first word is white and the second is #cdcdcd with its blending option to overlay.
14. Next lets go to the Navigation Bar Layers. Now make a new layer, you can add a logo, like what i did on the left side of the bar. And next make another new layer and get your Single Marquee Tool, and make a line and fill it with white. And then make another layer, fill it with white. Put the lines just like in this screen shot:
15. Now go to your navigation bar layer and select it.
16. Now, still with the selection of your navigation bar layer, hold shift+ctrl+I or go to Select > inverse. Now this will inverse the selection, once it is inversed, press delete. and your lines will be cut up for everywhere except where it is at the navigation bar layer. Now go back to your lines layer and change the blending option to Overlay. This is how mine turned out:
17. Now we are going to make the buttons. So, lets first make an arrow, so make a new layer and get your Custom Shape Tool (u) and pick the arrow shape.
18. Now right some text beside the arrow, i wrote 'home' using Bitdust_2 as my font. Now duplicate your arrow and make as many arrows as how many buttons your want. So if you want 6 buttons, duplicate 6 arrows. Then write the text beside them with NEW layers! And remember Align the text and arrows so they don't look out of place!
19. Now you can add some brushes to give it more life, and if you do, set the blending mode the overlay and the opacity around 5-20%.
This concludes our tutorial, you should have something similar to this:
Download this tutorials .PSD file here.
More Photoshop: Most Popular Materials | Fresh Materials
| TutorialKit New Photoshop Tutorials