Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Personal Portfolio Template

Personal Portfolio Template


1. The Background

First thing to do is create a new document, for this tutorial I'm using a 740x740 document. I filled the background with #400529.

After you filled your background, apply Filter > Noise > Add Noise with these settings:

image 1

You'll be left with a basic, noisy background.

image 2

Now in the filters menu, go to Filter > Render > Lighting Effects, use these settings ...

image 3

The main option you need to use there is Light type: Omni, that will give a very cool, unique effect to the background.

Click to enlarge
Click to enlarge

2. Main Box

Next thing to do is add the main area for your website. Create a new layer then make a box with the Rectangular Marquee Tool. Use these settings for the marquee tool …

image 5

Make the selection around the middle of your document then fill it with white.

To center the box in the document, I always use this method: Select all, (CTRL+A,) copy, (CTRL+C,) paste (CTRL+V,) then delete the old layer.

Click to enlarge
Click to enlarge

3. The Nav Bar

Next on the list to do is the nav bar!

First off create a new layer, then with the Rectangular Marquee Tool, make a 618x60 selection at the top of the main box, just 1 pixel from the edges.

image 7

Fill the selection with a similar purple as the background.

image 8

Next apply Gradient Overlay.

image 9

Next thing to do is find a classy pixel pattern, I used the top left pattern on this page on SquidFingers.

image 10

Make a new layer and select your main navigation layer, fill the layer with the pattern and set the layer mode to Soft Light.

image 11

Since that's too strong just like that, use either a layer mask or a large, soft eraser to erase away the top and bottom of the pattern. I used a layer mask and a few gradients.

Click to enlarge
Click to enlarge

Next on the things to do is add dividers and text links.

Make a new layer then with the Rectangular Marquee Tool make a very small (1x40) selection inside of the navigation bar.

image 13

Now fill the selection with white (#FFFFFF.)

image 14

Now duplicate the slit layer and move it over one pixel (right-key once.)

Now press CTRL+I to invert the layer, now merge the two layers together (CTRL+E.)

image 15

Apply Filter > Blur > Motion Blur with an angle of 90 and a radius of 5.0 to this layer.

image 16

Change the layer mode to Soft Light and lower the opacity to 70%.

image 17

Duplicate this layer then move it about 82 pixels to the right (right-key twice, then hold shift and press the right key eight times.)

Repeat that a few times, I did it 4 times.

image 18

Now add your text links in-between every two lines.

I used Tahoma, 11pt, Bold, No AA.

image 19

I also added a drop shadow to my text.

image 20

In the end I moved the lines and text 10 pixels to the right, so they were all 20 pixels from the left side.

image 21

4. The Header

In another group/layer, make a selection a bit bigger than the navigation bar, just one pixel underneath the navigation bar. My selection was 618x100.

Click to enlarge
Click to enlarge

Now find a stock photo for the header, I'll just be using this stock photo.

Click to enlarge
Click to enlarge

Add it into the header and make your adjustments. I just desaturated mine and added a slight pink tint.

Click to enlarge
Click to enlarge

5. Sidebox

On the left, 1 pixel from the header and corners, I added a black box, the size of it was 160x276. I filled the selection with black (#000000) and lowered the opacity to about 20%.

Click to enlarge
Click to enlarge

Next I added text and images to my text, having in mind this would be for recent work etc.

Click to enlarge
Click to enlarge

The font I used was Tahoma, 11pt, Bold, No Anti-Aliasing, Underline, #676767.

6. Updates Area

In a similar way to the sidebox, add a dark box inside of the template and lower the opacity to about 15%.

The size of my box/selection was 457x276.

Click to enlarge
Click to enlarge

Lastly add text and more text in the updates area text box. Maybe add some basic copyright underneath the main template.

Personal Portfolio Template Tutorial: Final Result (Click to enlarge)
Click to enlarge

Thanks for reading everyone, I hope this tutorial was enlightening!

If it wasn't completely enlightening, you can download the PSD file from here.



Author's URL: PhotoshopStar
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Personal Portfolio Template"

Only registered users can write comment

Reader's comments