How to Easily Design an Attractive Portfolio Web Template

AD

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

Preparation

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

Background

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

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.

Photoshop Template

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.

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

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.

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

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.

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

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 🙂

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.

create free website wix below post

Further Related Readings

Comments
  1. تصميم مواقع June 4, 2011 at 12:25 pm

    good tips thank you…..

    1. Jawad February 14, 2012 at 6:11 am

      you’re most welcome 🙂
      and thank you for the comment

  2. Ganesh Kumar August 19, 2011 at 12:01 am

    Really nice bro

    1. Jawad February 14, 2012 at 6:12 am

      thanks bro

  3. Steve Kettering February 12, 2012 at 6:36 pm

    Thanks for sharing these good concepts.

    1. Jawad February 13, 2012 at 3:47 am

      You’re welcome, and thank you for the comment.

  4. kitanasam February 14, 2012 at 5:48 am

    thanks but what about psd to html i am trying to find it in your website tutorial section but there is nothing ……….pls guide me

    thx

    1. Jawad February 14, 2012 at 6:14 am

      Hmmm….. actually I never made an HTML tutorial of this one. This was my first post on Designzzz.
      Would you like me to make an HTML5 tutorial now?

  5. kitanasam February 15, 2012 at 10:35 am

    well, thx alot for your reply, if you are able to make, it would be really gr8 for all of us newbies………..

    thx

    1. Jawad February 17, 2012 at 12:45 am

      Your wish is my command… We’ll be publishing your tutorial on Friday 24th Feb 2012 (we publish web design tutorial on fridays).
      To stay up to date with our postings,
      You can follow us at Facebook: http://facebook.com/designzzz
      You can also follow us at Twitter: http://twitter.com/designzzz
      Stay tuned 🙂

Comments are closed.

Copyrights © 2016 - Designzzz. All Rights Reserved