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 #4

Portfolio Layout #4


Create a new document 900x800, fill your background layer with a linear gradient using the colors #1f1f1f & #000000. Create a new layer above your background layer and label it "pattern" Create a new document 4x4pixels with a transparent background. Select the pencil tool with a 1pixel brush size. Zoom in 1600% and create these markings.

image 1

Now goto "edit > define pattern" save your pattern and return back to your orginal canvas. Select the fill tool, then at the top change from "forground" to "pattern", select your pattern in the box next to this option. Fill your "pattern" layer with your pattern.

image 2

Now select the rectangle marquee tool and draw a rectangle the whole length of the canvas but only about 70 or so pixels wide. Fill with a linear gradient using light grey. Add this drop shadow.

image 3

Now over the top of this rectangle create another smaller rectangle using the colors #fe1176 & #ff056c and the linear gradient tool. Also add your portfolio text.

image 4

Now select the rounded rectangle tool, at the top of the canvas create a small naviagtion bar, add these layer styles to your naviagtion.

image 5

image 6

image 7

You should have something like this.

image 8

Now using the rectangle and circle marquee tools and the layer mask tool add two highlights over the naviagtion. Would also be a good time to add our naviagtion text.

image 9
Click to enlarge

Now select the rounded rectangle tool and create a box under your navigation box, add the same layers styles as your navigation.

image 10
Click to enlarge

Now add your content box title. The colors i used were white, #8fc101 and #ff066d.

image 11
Click to enlarge

Now duplicate the pink and green text, right click the duplicated layer and goto "rasterize". Drag your duplicated layer underneath your orginal layer then goto "edit > transform > flip vertically". Place the text underneath so it resembles a reflection. Add a layer mask and drag a linear gradient over the top.

image 12
Click to enlarge

Now add your content box content.

image 13
Click to enlarge

Repeat the above steps for every other content box you create.

image 14
Click to enlarge

image 15
Click to enlarge

You should have something similar to this.

Portfolio Layout #4
Click to enlarge


Author's URL: Hv-Designs.co.uk
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 #4"

Captcha