Making your own portfolio web page

April 23rd, 2008 by ART-D Posted in Adobe Photoshop, Web Layout

Choosing the Rectangle Tool (U), try to create the layers reserved for introducing the titles of the sections and the lateral menus:

Making your own portfolio web page in Photoshop CS3

Insert the titles for the sections and for the lateral menus. The titles consist of two words, each of them situated on a separate layer:

Making your own portfolio web page in Photoshop CS3 

Making your own portfolio web page in Photoshop CS3

We should set the same parameters for the first words of the titles: 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

It’s time to write a welcome slogan for our personal page. The words welcome to should be written on a separate layer and the next words – my page – on another one:

Making your own portfolio web page in Photoshop CS3 

Making your own portfolio web page in Photoshop CS3

For the last layers we shall apply the same parameters we have applied for the site’s name:

Making your own portfolio web page in Photoshop CS3

Take now the Rectangle Tool (U) to represent the layers that will contain the photos of the site’s author.

Making your own portfolio web page in Photoshop CS3

Set the same parameters for the new layers: Blending Options>Stroke

Making your own portfolio web page in Photoshop CS3

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

  • Web designers

    04.23.08

    Very nicely and personally presented tutorial really good.

  • roko

    04.23.08

    great tutorial. i have to try this

  • Timo Körber

    04.23.08

    very nice layout and great tutorial…

  • Behnam

    04.23.08

    Awesome scheme… Thx

  • strony internetowe

    04.23.08

    Realy Beautiful website:)

  • Arminder

    04.23.08

    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

    04.23.08

    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

    04.23.08

    Marvelous, keep on the good work

  • hulek89

    04.23.08

    ok, this really looks good, but how long does it take to open a website with that amount of heavy graphics!?

  • Eview

    04.23.08

    Nice and simple layout good tutorial thanks mate