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.

Click to enlarge
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:

Click to enlarge
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:

Click to enlarge
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:

Click to enlarge
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:

Click to enlarge
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:

Click to enlarge
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:

Click to enlarge
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:

Click to enlarge
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.

Click to enlarge
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:

Click to enlarge
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:

Click to enlarge
Click to enlarge


Author's URL: Akpro.net
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
Browse Pages: 2  > >>
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Extreme Template Layout"

Only registered users can write comment

No comments yet...