1. I am using a 600 x 150 pixel document and a #EDEDED coloured background.
2. For this layout I am using this "Cityscape" picture. Click the thumb for the fullsize image if you want to you it also.
3. I just added this image to the centre of my canvas.
4. Next make a selection on the inside of the cityscape image, just shy of the top and bottom but the full length.
5. Set white as your foreground colour.
6. Create a new layer.
7. Select the gradient tool and choose Foreground to Transparent, then fill your selection.

8. Set the opacity for this layer to around 70%.
9. Create a new layer on top of the others.
10. Select the pencil tool and select a 2px white brush.
11. Draw 1 vertical line either side of your cityscape picture.
12. Now select a 5px pencil with the colour #DCDDDF as your foreground.
13. Draw 2 vertical lines on the outside of the white lines (look at mine below).

14. For the logo I simply typed the letter Z using the Type tool, then changed the font to Wingdings.
15. Finally add some text of your choice. I added a title, and a subtitle in a pixel font below. Then applied a 1px white stroke to both.
16. Voila! Now to use this layout, just repeat the same border (the white and grey) down the page, and put your content between that. Enjoy!
2. For this layout I am using this "Cityscape" picture. Click the thumb for the fullsize image if you want to you it also.
![]() Click to enlarge |
3. I just added this image to the centre of my canvas.
4. Next make a selection on the inside of the cityscape image, just shy of the top and bottom but the full length.
5. Set white as your foreground colour.
6. Create a new layer.
7. Select the gradient tool and choose Foreground to Transparent, then fill your selection.

8. Set the opacity for this layer to around 70%.
9. Create a new layer on top of the others.
10. Select the pencil tool and select a 2px white brush.
11. Draw 1 vertical line either side of your cityscape picture.
12. Now select a 5px pencil with the colour #DCDDDF as your foreground.
13. Draw 2 vertical lines on the outside of the white lines (look at mine below).

14. For the logo I simply typed the letter Z using the Type tool, then changed the font to Wingdings.
15. Finally add some text of your choice. I added a title, and a subtitle in a pixel font below. Then applied a 1px white stroke to both.
16. Voila! Now to use this layout, just repeat the same border (the white and grey) down the page, and put your content between that. Enjoy!
![]() Click to enlarge |

10 Random Photoshop Web Layout :
10 Random TutorialKit Materials:














More Photoshop: