Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Extreme Template Layout

Extreme Template Layout

Browse Pages: 2  > >>

1. First off, start with a new canvas, my sizes are around 740*745, and fill it with #383f44. Next make a new layer and fill it with this pattern, you can use your own, but if you want to use my pattern, you can download it here.

image 1
Click to enlarge

2. Next make a new layer and get your rectangular marquee tool (m) and make a rectangle in the middle of your canvas from top to bottom but about 550 pixels in width, and fill it with white:

image 2
Click to enlarge

3. Now name this layer 'BG2' take out the layer style window of that layer and use the following settings:

image 3

image 4

4. Next make a new layer and get your rectangular marquee tool (m), now make a selection like the following:

image 5
Click to enlarge

5. Now get your gradient tool, make sure your foreground color is black and just do a small gradient from right to left, do steps 4 and 5 on the other side of the template, and you should have this:

image 6
Click to enlarge

6. Next we are going to work on the header. So make a new layer and call it 'HeaderBG'. Now using your rectangular marquee tool (m) make a selection of how big you want your header to be. Like so:

image 7
Click to enlarge

7. And fill it with white. Now get your gradient tool, make sure your foreground color is black and start making VERY light gradients on your banner, make sure your banner is selected too. Make a gradient from the bottom, and from both sides, try to make it similar to this:

image 8
Click to enlarge

8. Now you may want to add a shadow from the bottom to the top for your banner, use the same way we did with making the side shadows for the template:

image 9
Click to enlarge

9. Now this is where your creativity comes in, add in some text and brushing and you should have a sweet looking banner:

image 10
Click to enlarge

10. If you want to add little switches or ticks like how i did, here's how you can make them. Make a new layer, call it switch1, get your single column marquee tool and make a selection, anywhere it doesn't really matter. Then get your rectangular marquee tool (m) and change it to 'Subtract from selection' and start subtracting from your selection, you may want to zoom in, just leave about 50-70 pixels of selection.

image 11
Click to enlarge

11. Now get your gradient tool, make sure your foreground color is white and make a white to transparent gradient from the top of your selection to the bottom. You should have this:

image 12
Click to enlarge

12. Next duplicate this layer and go to Edit > Transform > Rotate 90 CCW Now move your duplicated version to make it sort of like an upside down 'L' shape and press ctrl+E to merge. Your end product should look like the following:

Extreme Template Layout
Click to enlarge


Author's URL: Akpro.net
Browse Pages: 2  > >>
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Extreme Template Layout"

Captcha