Making your own portfolio web page
April 23rd, 2008 by ART-D Posted in Adobe Photoshop, Web Layout
Need personal web page? In this tutorial we will learn to create nice personal portfolio web page.
Start working by creating a new file (File>New), having 770×750 px and 72 dpi. We shall use on this new made file the Rectangle Tool (U) to represent the background of the site’s page to be.
Set the next parameters for this layer by making a mouse click on the layer we work with on the layers’ panel: Blending Options>Gradient Overlay
Gradient’s parameters:
Choose again the Rectangle Tool (U) to represent that place reserved for the author’s portrait and the lateral menu. Firstly we have to represent the common primary layer and then press Alt button to divide the zones, applying the same tool, used before.
The layer’s parameters: Blending Options>Inner Glow
Take now the site’s author’s photo and insert it on the picture. Don’t forget to apply Free Transform option to place the photo the same way indicated next image:
Press Alt button and make a mouse click between the photo’s layers and the prepared zone (on the layers’ panel) for the photo to get in the frame’s limits. Create also the lateral menu.
Next make a click on the bottom part of the layers’ panel on Create new fill or adjustment layer> Photo Filter 




















Web designers
04/09/2009
Very nicely and personally presented tutorial really good.
roko
19/09/2009
great tutorial. i have to try this
Timo Körber
20/09/2009
very nice layout and great tutorial…
Behnam
27/09/2009
Awesome scheme… Thx
strony internetowe
04/10/2009
Realy Beautiful website:)
Arminder
15/10/2009
It is a great tutorial, and very well explained. However like many other tutorials around the web it lacks the next stage - converting this design to XHTML and CSS. It would be nice to see how the concept can be made into reality.
DMVP
22/10/2009
Yes, where could I go to learn how to convert a design such as this to XHTML / CSS ? I would like to use Joomla as the CMS..
lor
01/11/2009
Marvelous, keep on the good work
hulek89
01/11/2009
ok, this really looks good, but how long does it take to open a website with that amount of heavy graphics!?
Eview
04/11/2009
Nice and simple layout good tutorial thanks mate
Paige
09/12/2009
How do we insert the content/make working links for this? It looks like it’s a layed background >.<
Roempoen
18/12/2009
Awesome…
Thanks Dude…
nosisme
27/12/2009
Great Tutorial, it help me alot
.
car lock out
06/01/2010
Wow really good flow tutorial. Easy to learn and gain ideas.
Ltd. gründen
17/01/2010
Well, it could have been a bit more detailed.
maria
19/02/2010
Great tutorial now how would you make that LIVE on the web??
Umar
01/03/2010
excellent tuorial but it will be more then excelent if u also go further and tell us how to convert it into web pages