How to Create an Awesome Web Portfolio Layout in Photoshop

LIKE & SHARE

Final Product What You’ll Be Creating (Click to view full-size image)

How to Create an Awesome Web Portfolio Layout in Photoshop

In this tutorial we will create a web portfolio layout using Photoshop; everything will be done from scratch and some icons, and images from different resources. I hope you’re ready because these will definitely a great learning experience for all the newbie’s out there.

We will base our design from latest design trends in web design to avoid the worst web design trends with a use of images from famous Photoshop tutorials or articles that we will use.

Tutorial Assets

Before we start, we need to download everything that we need. The following resources were used during this tutorial:

Once you installed the font in your computer, and saved all the images in a folder we can move on to the very first step.

Let’s begin.

Step 1

Open your Photoshop, select your canvas and set the size to 980px by 1392px.

How to Create an Awesome Web Portfolio Layout in Photoshop

Step 2

Fill the background with the wood texture that you saved before we start. Duplicate (CTRL + J to duplicate) the layer to fill those background.

How to Create an Awesome Web Portfolio Layout in Photoshop

Step 3

We will create the logo, on the very top left of your canvas draw a rectangle using Marquee Tool (M) and fill it with #bf3d2b, name this layer body.

How to Create an Awesome Web Portfolio Layout in Photoshop

Step 4

Duplicate the body layer name this one body-shadow. Fill it with # 484848, move body-shadow below by pressing the arrow down key. Next, CTRL + T right click select warp and drag the bottom up. See the image above.

How to Create an Awesome Web Portfolio Layout in Photoshop

Step 5

Go to Filter > Blur > Gaussian Blur and select 3.7% hit ok afterwards.

How to Create an Awesome Web Portfolio Layout in Photoshop

Step 6

Hit Right Click > Stroke on the body layer and set your foreground color to #bf3d2b, size is 1px and hit OK.

How to Create an Awesome Web Portfolio Layout in Photoshop

Step 7

Change the Opacity to 39% and this is what you should have.

How to Create an Awesome Web Portfolio Layout in Photoshop

Now, we created a new layer named inner-body and fill it with #ffffff.

Step 8

Type in the text, I use League Gothic 45pt. The first word was filled with #333333, while the second one is #bf3d2b.

How to Create an Awesome Web Portfolio Layout in Photoshop

Step 9

Next, grab your pen tool and draw a line above the logo. After that, right click > stroke, select brush and hit ok. Make sure you’re brush is set to 1px. Name this string.

How to Create an Awesome Web Portfolio Layout in Photoshop

Step 10

We will add a shadow, same with what we did with body-shadow duplicate the layer, move it below and hit Filter > Blur > Guassian Blur, same 3.7%. Make sure you name this string-shadow.

How to Create an Awesome Web Portfolio Layout in Photoshop

Step 11

For the life of me, I can’t find the same nail head image. Since I used this image on a client site before, I stock all the images that I used and re-use (a tip from a web designer). Go find some in Google, search for “nail head” anything will do though.

How to Create an Awesome Web Portfolio Layout in Photoshop

Make sure you cut everything and leave the head, place it in the middle of the string so it will look like its hanging. Create a nail shadow, same for the nail shadow, I bet you know by now how to do it.

Step 12

Here is the complete logo. Let’s move on to navigation, I use Arial Bold # 484848, all capital letters.

How to Create an Awesome Web Portfolio Layout in Photoshop

Step 13

For the navigation text drop shadow, set your foreground to #FFFFFF, distance and size to 1px. This will create a sunken effect on the text.

How to Create an Awesome Web Portfolio Layout in Photoshop

Step 14

I added a couple of text navigation, for the drop shadow effect right click on the homepage layer and select copy layer, now select the other layer and right click paste layer. This way you won’t have to do the drop shadow for each text, saves you time!

How to Create an Awesome Web Portfolio Layout in Photoshop

For the icons, I pick some of them from Jigosoar Icons (link is added in the tutorial assets above). You can pick whatever you think that fits them.

Step 15

Moving on the content section, we filled the middle part with # b5804d and set the opacity to 59%.

How to Create an Awesome Web Portfolio Layout in Photoshop

Step 16

On the very top of the content between the filled color and wood texture meet, select Single Row Marquee Tool (M) and draw the line. Create a new layer, name line-light fill the line using a brush foreground is #ffffff and another layer name line-dark foreground color for that is # ad8151.

How to Create an Awesome Web Portfolio Layout in Photoshop

Step 17

You should have the same as above.

How to Create an Awesome Web Portfolio Layout in Photoshop

Step 18

Select Rounded Rectangle Tool (U) and set the radius to 3px and draw the shape on the top left of the content section.

How to Create an Awesome Web Portfolio Layout in Photoshop

Step 19

Right click on that layer and select drop shadow, foreground is #adadad, distance and size is 1px.

How to Create an Awesome Web Portfolio Layout in Photoshop

Step 20

On stroke, foreground is #9b9b9b and size is 1px.

How to Create an Awesome Web Portfolio Layout in Photoshop

Step 21

Now duplicate (CTRL + J) the layer 2 times, select the two and move it below the first layer. Move them by 2px by pressing the down arrow keys on your keyboard.

How to Create an Awesome Web Portfolio Layout in Photoshop

Step 22

What we did is resize the last two layers, by pressing CTRL + T and resizing it from right to left by 1px, same with the left side.

How to Create an Awesome Web Portfolio Layout in Photoshop

Step 23

Here is the finish design for that, pretty cool huh?

How to Create an Awesome Web Portfolio Layout in Photoshop

Step 24

Grab the Leonidas image (That image is part of “King Leonidas of 300 Illustration Artworks and Fan Arts“) and set him at the center of the body background (just like the image below) and press CTRL + SHIFT + I and DEL to remove the excess of the image.

How to Create an Awesome Web Portfolio Layout in Photoshop

Step 25

Move it a little, remove the bottom part using Marquee Tool (M) and you should have something like this.

How to Create an Awesome Web Portfolio Layout in Photoshop

Step 26

Let’s add some text. The title is League Gothic 27pt, foreground is #bf3d2b. For the body text, Arial regular 12pt #333333.

How to Create an Awesome Web Portfolio Layout in Photoshop

That’s it! All you have to do is group the body layer CTRL + G and duplicate that folder (Right Click > Duplicate folder), insert the images that we downloaded and align them properly. When you’re done, let’s do the footer!

Step 27

For the footer, it is really simple. We added text on the left side, I use League Gothic for the title and arial for the body text. Color is #333333 and it has the drop shadow of the navigation, so copy the layer style and paste layer style on the title layer.

How to Create an Awesome Web Portfolio Layout in Photoshop

For the social media icons we use elegant themes social icons, we just align them properly. You can add as many as you want.

Step 28

For the middle footer, put the twitter bird. Add some text and underline for the link.

How to Create an Awesome Web Portfolio Layout in Photoshop

Step 29

Twitter bird drop shadow is #939393 and distance, size is 5px.

How to Create an Awesome Web Portfolio Layout in Photoshop

Step 30

Duplicate the twitter bird, and add more text / tweets.

How to Create an Awesome Web Portfolio Layout in Photoshop

Final Image

There you have it! Our Awesome Web Portfolio Layout using our best friend Photoshop, I hope you learned a few tricks and use it to be a better designer with better layout.

How to Create an Awesome Web Portfolio Layout in Photoshop


If you think you can do better or upgrade the layout, I am interested to see what you come up with. Please leave a link in the comments so we can see.

I was thinking of converting to HTML5 / CSS, if the demands are high enough I will post the second part.

Source File: Web Portfolio Layout (PSD)

You may want to play with the settings, tweak some designs or recreate something out of this so here’s the source file for this tutorial.

Download Exclusive Freebie

You want this freebie? Like, Tweet or +1 to download the file.

2600+ Facebook Covers - Facebook Timeline Covers | GraphicRiver

Written by Sanjay Khemlani

Sanjay is a Web Designer from Philippines, interested in Web Interface, UI, and Wordpress tricks he shares a lot of freebies from his blog. You can also follow him @sanjaykhemlani.

COPYRIGHT © 2012 DESIGNRSHUB | ABOUT | ADVERTISE | CONTACT US | SUBMIT NEWS | WRITE FOR US
Designrshub.com. Created and Designed by Manuel Garcia.
Reproduction without explicit permission is prohibited. All Rights Reserved.