Loading...

How to Create an Awesome Portfolio Layout in Photoshop

As a designer creating an awesome portfolio will get you or land you a job, this is the very first step every web designer should do if they want to gain more clients. Since it's our portfolio will be the basis of our skill, we need to push ourselves a little bit

Today we will create an Awesome Portfolio Layout in Photoshop with the Ramotion blog we will be using a two-column layout using different textures and details.

Before we start, there are a couple of things that we need to download / set up.

Things that we need:

Final Product

Amos-web-portfolio-layout

Download the PSD here

Let's Begin!

How to Create an Awesome Portfolio Layout in Photoshop 2

Open your Canvas and set the size to 980px width and 1692px height.

How to Create an Awesome Portfolio Layout in Photoshop 3

Fill the page with the wood texture, duplicate it (CTRL + J) to cover the entire page. Make sure that the wood lines go seamless. Next is grab your Marquee Tool (M), create a new layout (CTRL + SHIFT + J) and draw a rectangle shape near the top left of the page fill it with #403E3E.

How to Create an Awesome Portfolio Layout in Photoshop 4

Select Pen Tool (P) and CTRL + R to display the ruler, set those guides so you know the middle part of it. Draw the arrow-like shape at the tip of the rectangle layer and right click > Make selection. Now hit CTRL + I this will inverse the selected area and press DEL.

How to Create an Awesome Portfolio Layout in Photoshop 5

Here is the cut version.

How to Create an Awesome Portfolio Layout in Photoshop 6

In Blending Options > Inner Shadow set the foreground to #751a10 and -90 on angle, size and distance to 3px.

How to Create an Awesome Portfolio Layout in Photoshop 7

In Gradient Color Settings, copy the colors above and hit ok.

How to Create an Awesome Portfolio Layout in Photoshop 8

In Gradient overlay settings, set the style to reflected and angle at 0.

How to Create an Awesome Portfolio Layout in Photoshop 9

Stroke, change the foreground color to 7a1b11 and size to 4px.

How to Create an Awesome Portfolio Layout in Photoshop 10

Use our Leather texture and put it above the logo layer, hold CTRL and click the logo layer, press CTRL + I to inverse the selection and hit DEL.

How to Create an Awesome Portfolio Layout in Photoshop 11

In leather texture layer we set it to overlay and opacity to10%. This is what it should look like.

How to Create an Awesome Portfolio Layout in Photoshop 12

Grab your Ellipse Tool (U) and draw a circle shape, hold SHIFT to create a perfect circle.

How to Create an Awesome Portfolio Layout in Photoshop 13

In Blending Options, Drop Shadow set the foreground to #fff, angle to 90 and distance, size to 1px.

How to Create an Awesome Portfolio Layout in Photoshop 14

For Inner Shadow's foreground color #741b11 and angle -90 distance  and size 1px.

How to Create an Awesome Portfolio Layout in Photoshop 15

Outer Glow foreground color is #801f14 and the rest are default

How to Create an Awesome Portfolio Layout in Photoshop 16

Inner Glow foreground is #00000 and leave the rest

How to Create an Awesome Portfolio Layout in Photoshop 17

Here is our complete circle logo

How to Create an Awesome Portfolio Layout in Photoshop 18

On the font logo, we use Ballpark on the A text color is #ffffff and 71pt, drop shadow is set to default.

Next is we will create a new line, grab the Single Row Marquee Tool (M) and click just below the circle logo. Fill in using foreground color #7b1d12, duplicate the layer and fill it with #ffffff opacity 50%. Duplicate this layer again and drag it below.

How to Create an Awesome Portfolio Layout in Photoshop 19

We now have this, next is the navigation

How to Create an Awesome Portfolio Layout in Photoshop 20

We added the navigation, font was Georgia 22pt color #ffffff.

How to Create an Awesome Portfolio Layout in Photoshop 21

Drop shadow for the navigation, foreground #000000 size and distance to 1px.

How to Create an Awesome Portfolio Layout in Photoshop 22

Duplicate the logo layer and go to Filter > Blur > Guassian Blur and set it to 5.7px

How to Create an Awesome Portfolio Layout in Photoshop 23

For the content post, grab your Rounded Rectangle Tool (U) radius to 5px, foreground to#ffffff.

How to Create an Awesome Portfolio Layout in Photoshop 24

In Blending Options > Drop Shadow foreground color is #adadad, distance and size is 1px.

How to Create an Awesome Portfolio Layout in Photoshop 25

Stroke's foreground color #9b9b9b and size is 1px.

How to Create an Awesome Portfolio Layout in Photoshop 26

Duplicate the layer (CTRL + J) two times, and press the CTRL + arrow key down two times so it will go down 2px for each layer.

How to Create an Awesome Portfolio Layout in Photoshop 27

Next is to grab any image that is big enough, I use my old tutorial for this case. Right click on the layer > Rasterize the image. Now hold CTRL + click on the content post layer and hit DEL after. It should delete the excess on the image.

How to Create an Awesome Portfolio Layout in Photoshop 28

This is the complete content post image that we have.

How to Create an Awesome Portfolio Layout in Photoshop 29

Here is the finished content post, we duplicate the layers and changed the images. Neat!

How to Create an Awesome Portfolio Layout in Photoshop 30

On the footer, create a new layer (CTRL + SHIFT + N) and grab Marquee Tool (M) fill it with #000000 Opacty 44%.

How to Create an Awesome Portfolio Layout in Photoshop 31

On the left part bottom part of the page grab your Rounded Rectangle Tool (U) and fill it with #000000, Opacity 20%.

How to Create an Awesome Portfolio Layout in Photoshop 32

We added some text, font used was Georgia 15pt color #ffffff.

How to Create an Awesome Portfolio Layout in Photoshop 33

We also added a drop shadow to the text, set your foreground to #000000 distance and size 1px.

How to Create an Awesome Portfolio Layout in Photoshop 34

In the middle we use twitter widget, use the twitter image from iconarchive and duplicate the rounded layer. Text are the same format as the first one, we also a line to display the link.

How to Create an Awesome Portfolio Layout in Photoshop 35

To create an arrow-like for the twitter widget. Select your Pen Tool (P) and draw an arrow like and then right click > make selection and copy the opacity on the background layer.

How to Create an Awesome Portfolio Layout in Photoshop 36

As for the pop up, use the same technique we did with twitter arrow bubble. For the social media icons, we just aligned them and we are done!

Copyright © All Rights Reserved