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.

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.

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

Apply the following layer styles to your rectangle layer:

Drop Shadow:

Gradient Overlay:

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

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

Now open the Blending Options and apply the following settings:

Drop Shadow:

Gradient Overlay:

Here is the gradient:

Apply the changes and your image should look something like this.

Other Related Tutorials

• May 10, 2007 -- How to Add Users in Windows XP (4)
• March 30, 2008 -- Changing Thumbnail Size in Windows XP (3)
• September 6, 2007 -- Make an invisible folder on the desktop. (6)
• July 30, 2007 -- Review: iPod Shuffle 1GB MP3 Player (0)
• July 26, 2007 -- Team Tutorials - Famous Blog of the Day (0)