How to Easily Design an Attractive Portfolio Web Template

This is what we are making.

Preparation

Open a blank PSD file. This is the standard web template size 1000px wide and of course, I am using resolution of 72DPI.

Background

Now we come at Background Layer, so first we apply Vertical Gradient on the background layer.

Background Result

This is what we should get as the result background after applying the gradient.

Menu

After this we move on to the Navigation Bar, so first thing first, we chose the Rounded Rectangle Tool and create a base for the bar.

Menu Styling

We have the base, now let’s add some styles.

Note:

Below we are adding an Inner Shadow, a Stroke and a Gradient Fill. The same styles containing the same values will be repeated wherever we need a dark background in the design.

Add Gradient in the navigation bar.

also give it a Solid Black Stroke.

Menu Bar Result

After applying those effects, this is what we should get.

Menu Button Hover

In navigation bar one more element to include is hover effect. We select a Rounded rectangle tool and draw a box. You can fill it using the same gradient we filled in the background.

Adding Gradient.

Menu Bar Final Result

Now we made ourselves a very elegant Navigation bar.

Socialize

We move to next step of adding Social Media Icons. . I selected my favorite Rounded Rectangle Tool again for making space for the icons.

Social Icons BG

Added some Inner Shadow and Stroke in this box.

Final Header Result

Cutting the long story short, this is the header we get in the end. A pretty navigation bar, social media icons and a space of a your beautiful logo. The design is elegant, fast loading and minimal.

Featured Area

After this, we move on to featured area. Select a Rectangle Tool and draw a block. Add a Stroke of 1 px solid black.

Featured Slide

I added an image in this area and also an overlaying layer for the title and/or description. Opacity of this layer is 50% and it is filled with solid black.

Featured Area Result

Made a few boxes on the right side and filled them using the same styles we used for the Nav-Bar BG. The text is plain, no effects and solid white color.

Banner

Down to the featured area we draw a banner. This banner could hold anything, from an advertisement to a an update of your twitter status. I’m putting a “hire me” sign here. Fill this bar with Gradient. You already know the values.

Banner Result

Now we get an elegant Header and Featured area.

Content Area

Select a Rounded Rectangular Tool and Draw a box with 1 px Stroke value.

Filling Data

In this box we are now adding thumbnails of the Artist’s works. Of course this area will be adjusted according the needs.

Content Area Result

Now we get a simple content area, added some description in the content area and this content is the heart and soul of a Portfolio of any artist. As you can see, we did do anything too flashy, its just the color scheme and the method of working which makes this style look classy. I also added a testimonial below the thumbs, but that’s optional.

Footer

Almost everything is done. So let’s also complete the footer. Choose a Rounded Rectangular Tool add same Gradient and stroke. Just type “Copyrighted Material” over it and the footer is ready

FINAL RESULT

We will publish the downloadable PSD file in two days. So stay updated with the latest postings on Designzzz by Subscribing to our RSS or Following us on Twitter.