Home
Photoshop
Web Layout
Extreme Template Layout
Level: Experienced Software:
Photoshop
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.
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:
3. Now name this layer 'BG2' take out the layer style window of that layer and use the following settings:
4. Next make a new layer and get your rectangular marquee tool (m), now make a selection like the following:
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:
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:
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:
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:
9. Now this is where your creativity comes in, add in some text and brushing and you should have a sweet looking banner:
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.
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:
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:
More Photoshop: Most Popular Materials | Fresh Materials
| TutorialKit New Photoshop Tutorials