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.

Making your own portfolio web page in Photoshop CS3

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

Making your own portfolio web page in Photoshop CS3

Gradient’s parameters:

Making your own portfolio web page in Photoshop CS3 

Making your own portfolio web page in Photoshop CS3

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.

Making your own portfolio web page in Photoshop CS3

The layer’s parameters: Blending Options>Inner Glow

Making your own portfolio web page in Photoshop CS3

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:

Making your own portfolio web page in Photoshop CS3

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.

Making your own portfolio web page in Photoshop CS3 

Making your own portfolio web page in Photoshop CS3

Next make a click on the bottom part of the layers’ panel on Create new fill or adjustment layer> Photo Filter

Making your own portfolio web page in Photoshop CS3

Post Pages: 1 2 3 4 5 6 7 8 9

  • 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 :D .

  • 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!

  • Iñaki

    17/03/2010

    For those who ask about converting the design to html, I found a photoshop plugin that supposedly makes it a 5-minute-job. Haven’t tried it, but I’m about to. It’s called Divine, and here’s the link

    http://www.divine-project.com