Photo Portfolio Web Page Layout
February 13th, 2008 by ART-D Posted in Adobe Photoshop, Web Layout
This tutorial will show you how to create a clean looking web layout for your portfolio.
Create a new file (File>New) with 766×750 px and 72 dpi. Next use the Paint Bucket Tool (G) to paint the new layer with this shown color - #0F1715
Find in Internet a kind of pattern, like this one:
Edit>Define Pattern. Create a new layer and select this option Edit>Fill, to insert the pattern on our main picture.
Make a mouse click on the same layer on Add a Mask option that may be found on the lowest part of the layers’ panel. Next choose the Brush Tool (B) and Opacity of 20% of black color to clean out the upper part of the picture.
Select for this layer these parameters: Blending mode-Soft Light
The Rectangle Tool (U) is helpful in drawing a thin stripe on the lowest part of the picture. The element’s color is #0F1715
Using the same instrument, it’s possible to represent the menu’s panel, reserved for the site’s header.
Apply the next parameters by making a mouse click on the layer we work with on the layers’ panel.
Blending Options>Gradient Overlay
Gradient’s parameters:
Use the Rounded Rectangle Tool (U) with a radius of 10 px to draw on the menu’s panel a button. Next stage we should hold on Alt button while using the Rectangle Tool (U) and cut out the unnecessary elements. 




















Web designers
04/09/2009
Cool design with refreshing look to make someone ’s day as sunny as sunflower.
rich
09/09/2009
nice job ,
very creative
kartit
26/10/2009
Very nice tutorial Thanks a lot , keep it up!
Club Penguin Secrets
12/11/2009
Very nice and clear tutorial. I am going to try it now with some modifications. thanks alot for the effort!
dare2go
19/12/2009
Looks very nice - BUT
absolutely not what you want for a website!!! Everything is in form of graphics, which SEARCH ENGINES cannot read. You need text on a web page in order to get spidered (and a good page rank)with any search engine. And don’t start with ‘alt text’ - it will never replace decent text. PLUS: copyright 2007 - do you really want to change/update this image every year to keep it current? Or are you planning to design a new site every year?
Web pages done by designers usually look very good, and work very badly - sorry to say so
admin
19/12/2009
@dare2go
article was posted in February 13th, 2008
Gajanand Sharma
16/01/2010
It is very nice.
Regards
Nanovor
24/01/2010
Very nice and clear tutorial. I am going to try it now with some modifications. thanks alot for the effort!