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

Portfolio Layout


Create a new file of 640 x 480 px having 72 dpi resolution and RGB mode. If you like you can use your own size for this.

Fill the background with #1F1F1F color.

image 1

Go to edit>fill and fill the background with this pattern. First, select this pattern :

image 2

Set the opacity to 80% and Mode to Multiply as shown :

image 3

This is what you will got after filling the background with pattern :

image 4

Now, select image 5 and draw this shape. Choose any color of your choice as it will be changed after applying the gradient overlay :

image 6

Adjust the nodes as shown

image 7

Now, apply these layer styles :

image 8

Gradient colors #6F1700 & #F0980F :

image 9

The full view of the file after applying above layer styles :

image 10
Click to enlarge

Now, control+click on its layer name in layer palette to select it. Create a new layer by pressing shift+ctrl+n together. Fill this layer with similar pattern, but this time reduce the opacity of this layer to 10%

image 11

Again with rectangle tool, draw this shape :

image 12

Again, adjust the nodes as shown :

image 13

Apply these layer styles :

image 14

image 15

image 16

Full view of the image can be seen below :

image 17
Click to enlarge

Now, rasterize the layer and select the part of the layer with rectangular marquee too and press delete :

image 18

Again create a new layer, fill the layer with pattern (edit>fill) and reducing the opacity to 10% after selecting the layer by control clicking on its layer name in layer palette.

image 19

Create this shape with rectangle tool. I have used #F09F2F color for this block :

image 20

Place your picture :)

image 21

Create this block with rectangle tool. I have used #521607 color for this shape :

image 22

Reduce the opacity 46%

image 23

Press control+j to duplicate the layer. Press control+t to transform the layer and set the size as shown :

image 24

Draw another block with rectangle tool, use similar color, reduce the opacity to 56% and blending mode to screen :

image 25

Select pencil tool, set the size to 1 pixel and set the spacing as shown :

image 26

Create a new layer, set the foreground color to #F09F2F and draw the line :

image 27

Draw more lines on similar layer, but this time reduce the spacing :

image 28

Now, draw some blocks with rectangle tool. Use red color for these shapes :

image 29

Add link text :

image 30

Add some text in two blocks :

image 31

Add the name, copyright information etc as shown. Our portfolio layout is complete. I hope you will like it :)

Portfolio Layout
Click to enlarge


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

No comments yet...
Add comments to "Portfolio Layout"

Captcha