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

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:

Making your own portfolio web page in Photoshop CS3

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.

Making your own portfolio web page in Photoshop CS3

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

Making your own portfolio web page in Photoshop CS3

Edit>Define Pattern
Choose next step the Line Tool (U) to draw the scrolling, colored with #38322C

Making your own portfolio web page in Photoshop CS3

The layer’s parameters: Blending Options>Stroke

Making your own portfolio web page in Photoshop CS3 

Making your own portfolio web page in Photoshop CS3

Select now the Rectangle Tool (U) to represent the mobile element of the scrolling, colored with #67584A

Making your own portfolio web page in Photoshop CS3 

Making your own portfolio web page in Photoshop CS3

Introduce now the rest of the text:

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