08.23.2007

Clean Portfolio Layout Tutorial

This Adobe Photoshop tutorial will show you how to create a clean looking layout for your personal portfolio website. The effects use here are very simple and novice Photoshop users should be able to follow this tutorial fine. I will be using Adobe Photoshop CS2 for this tutorial. I plan to upgrade to CS3 later this week, so look for more CS3 tutorial in the future.

Start with a new document 900×900 pixels with a background color of white.
Photoshop Portfolio Layout Tutorial

Now fill the background with #b2b2b2 by selecting the color as your foreground color and press ALT+Backspace. Then create a new layer and draw a large rectangle using the Rectangle Marquee tool. Fill your square with white.
Photoshop Portfolio Layout Tutorial

Now right click on the layer and select Blending Options to open the Layer Styles window.
Photoshop Portfolio Layout Tutorial

Apply the following layer styles to your rectangle layer:

Drop Shadow:
Photoshop Portfolio Layout Tutorial

Gradient Overlay:
Photoshop Portfolio Layout Tutorial

Here is the gradient I used (double click the gradient bar to open this window):
Photoshop Portfolio Layout Tutorial

Now create a new layer. Draw a small rectangle through the white part of you gradient. Fill the rectangle with black (#00000).
Photoshop Portfolio Layout Tutorial

Now open the Blending Options and apply the following settings:

Drop Shadow:
Photoshop Portfolio Layout Tutorial

Gradient Overlay:
Photoshop Portfolio Layout Tutorial

Here is the gradient:
Photoshop Portfolio Layout Tutorial

Apply the changes and your image should look something like this.
Photoshop Portfolio Layout Tutorial

Other Related Tutorials

Comments

  1. Sunite on November 28, 2007 at 3:07 pm

    WOw Nice man cool :D

    [Reply]

  2. Daniel on January 30, 2008 at 2:08 am

    Good one

    Regards Daniel

    [Reply]

  3. Web Design Romania on June 7, 2008 at 4:09 pm

    Pretty basic, but usefull for those who want to learn how to use gradients :)

    [Reply]

  4. Marocplus on February 22, 2009 at 5:53 am

    Very good tuto
    thanks

    [Reply]

  5. CodeDude on March 28, 2009 at 10:51 am

    looks too boring and would put clients off

    [Reply]

  6. Jakub Lédl on November 21, 2009 at 11:58 am

    Looks very cheap and stupid. Such design could be cool in 2001, but not nowadays.

    [Reply]

  7. berkeleysamson on January 24, 2010 at 11:45 pm

    thanks for this.. nice tutorial.. i will apply this one.

    [Reply]

  8. berkeleysamson on January 24, 2010 at 11:45 pm

    very simple yet useful.. thanks

    [Reply]

  9. Naab on March 10, 2010 at 7:46 am

    So two years ago

    [Reply]