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

Personal Portfolio Layout #2


Create a new document 850x790 pixels, fill your background layer with the color #080808. Create a rounded rectangle by using the rounded rectangle tool, make it slighly smaller than 850 pixels so its fits nicely on the canvas. Place the rectangle at the very top.

image 1

Find yourself a nice image to use as your header, im going to use the same image i used in one of my previous tutorials located here. Copy and paste your desired image to the clipboard. Head back over to your canvas click your rectangle layer whilst hold the Ctrl key on the keyboard, this will load the selection. Now goto "edit > paste into" you image should now be inside the rectangle, you can still resize the image while its inside the rectangle, resize the image to suit. Heres mine.

image 2

Ive also desaturated my image to make it black and white, ive also added some layer styles which are listed below.

image 3

image 4

Select the rectangle marquee tool and create a small selection to the left of the header.

image 5

Fill with the color white and set opacity to 12% now add these layer styles to it.

image 3

image 4

Add your website title and slogan inside the box. Now select the rounded rectangle tool and create a your navigation under your header, make sure the two shapes align nicely on the sides. Add these layer styles to your rectangle.

image 3

image 4

image 10

You should have something like this.

image 11

Create a selection on top of the navigation like in the image below, fill with the color white then lower opacity to about 18%, add your navigation text, and add two 1pixels lines between each bit of text for a divider.

image 12

image 13

Thats the header and navigation sorted now for the content boxes. For this bit your going to need some diagonal line pattern, im not going to show you how to make the pattern as there are loads of tutorials out there already for that, althou i shall include the pattern file in the PSD download. Select the rounded rectangle tool and create a square.

image 14

Fill with the color black then delete the rounded part from the top of the square using your desired cutting tool then add these layer styles.

image 3

image 4

You should be left with this.

image 17

Still with the rounded rectangle tool create a selection like this.

image 18

Fill with the color black then add this stroke to it.

image 19

Now click your rounded rectangle layer that you just created (the small one out the two) whilst holding the ctrl key on the keyboard to load the selection, create a new layer and select your diagonal lines pattern, fill the selection. If your diagonal lines are black you might want to add a white color overlay to it, then lower opacity to around 8%.

image 20

Repeat the steps above to create more content boxes. Im going to add a further 3 to this layout.

image 21

Label your content boxes with the type tool, ive used a small arial font using the colors white (ffffff) and the green color (#afd107).

image 22

Now begin to add your content to each box.

image 23

Now for the footer, select the rectangular marquee tool and create a rectangle across the bottom of your canvas fill with the color black then add a simple stroke layer style.

image 4

Fill your footer box also with the diagonal lines pattern and add your copyright text.

image 25

To the right of the footer add a 1 pixel green line (#afd107).

image 26

Now select a small arrow from photoshop's custom shapes libary and add that to the line, fill the arrow with the same green color as the line then add a black 1 pixel stroke to it.

image 27

Thats it all done.

Personal Portfolio Layout #2



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 "Personal Portfolio Layout #2"

Captcha