Making your own portfolio web page

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

Making your own portfolio web page in Photoshop CS3

Create a new layer and try to represent on it a pointer situated on the left side of the menu’s buttons’ titles. In this case we must use the Pencil Tool (B) of white color (brush 1 px). The pointer near the home page title should be represented on a separate layer. The rest of them should be represented on a single one, near the rest of the buttons’ titles:

Making your own portfolio web page in Photoshop CS3 

Making your own portfolio web page in Photoshop CS3

We shall set the same parameters for the pointers as we did in case with the buttons’ titles:

Making your own portfolio web page in Photoshop CS3

Next step includes choosing the Rectangle Tool (U) and representing the zone for the auxiliary buttons, having the color #36322D

Making your own portfolio web page in Photoshop CS3

Create a new layer on which we shall apply the earlier used instrument – the Pencil Tool (B) (brush 1 px) for representing the icons of the auxiliary buttons. Their color is #998D7B

Making your own portfolio web page in Photoshop CS3 

Making your own portfolio web page in Photoshop CS3

Make a copy of the earlier made layer containing the photo of the site’s author and choose Free Transform option to place the layer the same way demonstrated on the picture, changing the parameters for the copy – layer. The color in this case is #2A251F

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 

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