How to Easily Design an Attractive Portfolio Web Template

Time for a portfolio web template tutorial. This kind of web designs are suitable for personal websites of Photographers, Graphic Designers, Artists and such individuals running a small business. This is a super-easy well defined tutorial so even if you are not a pro, you should give it a glance.

As usual, we are making this web design in Adobe Photoshop and 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.

You can download the PSD of this layout here

Final Result

This is what we are making.

Free Photoshop Template


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

Free Portfolio Layout


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

Free Elegant Design of Portfolio Layout

Background Result

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

Portfolio Layout


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.

Photoshop Template

Menu Styling

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


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.

Free Photoshop Template

Add Gradient in the navigation bar.

Photoshop Web Layout

also give it a Solid Black Stroke.

Elegant Web Template

Menu Bar Result

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

Photoshop Web Template

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.

Free Photoshop Template

Adding Gradient.

Free Web Layout

Menu Bar Final Result

Now we made ourselves a very elegant Navigation bar.

Free Photoshop Web Template


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

Photoshop Template

Social Icons BG

Added some Inner Shadow and Stroke in this box.

Portfolio Layout

Free Photoshop Web Template

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.

Free Design of Photoshop Template

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.

Free Photoshop Tutorial

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.

Photoshop Tutorial of Layout

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.

Easy Tutorial of Web Layout


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.

Photoshop Easy Tutorial of Web Layout

Banner Result

Now we get an elegant Header and Featured area.

Tutorial of Photoshop Template

Content Area

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

Photoshop Web Tutorial

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.

Free Tutorial of Photoshop

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.

Free Tutorial of Porfolio Layout


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 🙂

Free Tutorial of Photoshop

Final Result

Free Photoshop Template

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.