Making your own portfolio web page
April 23rd, 2008 by ART-D Posted in Adobe Photoshop, Web Layout
Insert the corresponding photos. Each photo should be situated upper than the layer itself reserved for it (on the layers’ panel). Press Alt button to make a mouse click between the photos’ layers and the layer reserved for the photo for the last one to be applied in the layer’s limits: 
Make a copy of the filter’s layer, applied five times for the photo of the author. Place the filter’s copy – layers above each photo (on the layers’ panel). Press Alt button when making a mouse click between the filter’s layers and the photo’s layers for the filters to be applied in the limits of the photo’s layers. 
Create a new layer and use on it the Pencil Tool (B) (brush 1 px) to represent a kind of pattern like the next one, colored with #363331 
Edit>Define Pattern
Choose next step the Line Tool (U) to draw the scrolling, colored with #38322C 
The layer’s parameters: Blending Options>Stroke 
Select now the Rectangle Tool (U) to represent the mobile element of the scrolling, colored with #67584A 
Introduce now the rest of the text: 
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
rostar
15/03/2010
Beutiful design I must say. I am sure going to try this one out myself.
About people asking how to convert the design into a web page and it’s just simple html/css coding really. Just save all the images you need to use (background, menu buttons, the headlines and the scroll bar, if you want to use it. I would recomend using the “opacity” property in css or save just 1px of the content background as an half transparent image (.png) and use that as background. You don’t want to save the entire content background as an image because then you have alot of work to do if yoy want to extend your page with more content.
There are a lot of css-tutorials out there and it’s mostly just divs with the properties padding, background, float, width and height you need.
Good luck to you!