Grafpedia

In this tutorial we’re going to put together a quick, simple but effective layout. This is a portfolio design, but the techniques and strategies used in this design could be applied elsewhere across the Web as well.

Before we get started, let’s take a look at the layout we’ll be creating.

Preview full screen layout

Want to download this PSD file ? Subscribe for a VIP membership and you will be able to download this layered layout, and also you will be able to download our premium design resources.

Create a new document 960 pixels by 900 pixels

Next step is to select the background layer

Press on CTRL+J to duplicate this layer

I will select Gradient Tool, and I will draw a vertical line with the following gradient colors
# a69376 – #a99679

Start from the bottom and draw the line until you reach the top part of the layout

The next step is to go to Filter > Noise > Add noise

Use the following settings

With Rounded Rectangle Tool, create 3 shapes, and place them with Move Tool like in the following image. On the following screen shot you will have also the color code for each shape

On the top of the website I will add a simple button, with Rounded Rectangle Tool

I will duplicate this button. To duplicate the button first you need to select the layer in your layer palette, then press on CTRL+J.  I will double click on the layer thumbnail, and I will change the color of the shape to # 3f2b11

In my previous screen shot you noticed that my duplicate layer is under the white button. You can drag one layer under the other one with your mouse. This is my result so far

I will go to Edit > Transform > Perspective

I will drag the top right corner of the shape to the right

Hit Enter, to apply the settings. The next step is to use Rectangle Tool, to add some simple shapes over our portfolio layout. I will show you the easy way to create a Polaroid photo. I will create first a white shape with Rectangle Tool

The next step is to add a simple layer style to this shape

This is my result.

Next you need to create another shape with the same tool: Rectangle Tool

Select both layers in your layer palette, then drag both layer to the small “ Create a new layer “ button from the bottom of the layer palette

If you do not touch any other button you will have selected both duplicated layers. We will need the copies of the original layers selected, because we will rotate a little. With the both layers selected press on CTRL+T.

I will duplicate one more time, and I will rotate to the other side

On the bottom of our portfolio layout I will add other shapes

Then for each shape I will add a simple layer styles

I will add the same layer styles for each shape, until I get the following result

Let’s place some text with Horizontal Type Tool

I am almost ready with this design. I will add also a little flare over my logo. You need to create a new layer (press on CTRL+SHIFT+ALT+N). Select Brush Tool, and with a smooth round brush ( 400pixels )

I will press one time right over my text logo

In my layer palette I will change the blending mode for this layer to overlay, and in the same time I will reduce the opacity value to 40 %

I hope you like my design. This is my final result.

If you want you can add some images over the Polaroid photos

If you want to download this PSD layout please apply for a VIP subscribtion . For 49$ you can download the PSD layout for each tutorial, and our entire collection of premium resources.