Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Wordpress portfolio layout

Wordpress portfolio layout


Create a new document 960 pixels by 900 pixels

image 1

Next step is to select the background layer

image 2

Press on CTRL+J to duplicate this layer

image 3

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

image 4

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

image 5

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

image 6

Use the following settings

image 7

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

image 8

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

image 9

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

image 10

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

image 11

I will go to Edit > Transform > Perspective

image 12

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

image 13

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

image 14

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

image 15

This is my result.

image 16

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

image 17

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

image 18

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.

image 19

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

image 20

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

image 21

Then for each shape I will add a simple layer styles

image 22

image 23

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

image 24

Let's place some text with Horizontal Type Tool

image 25

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 )

image 26

I will press one time right over my text logo

image 27

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 %

image 28

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

image 29

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

Wordpress portfolio layout



Author's URL: grafpedia
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials


Like us to: