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

Portfolio Layout #9


Create new document 900 x 870 pixels, set forground color to #4d92b9 and background color to #8bbfd9. Select the gradient tool with a linear gradient. Start from the top of the document and drag downwards to apply the gradient. Were looking to archieve something like the image below.

Portfolio Layout #9 image 1

On a new layer create a selection using the elliptical marquee tool.

Portfolio Layout #9 image 2

Fill the selection with the color white. Deselect the selection then goto "filter > blur > guassian blur" enter 80 as the blur amount.

Portfolio Layout #9 image 3

In the top left corner of the canvas create a rounded rectangle using the rounded rectangle tool. Fill the rounded rectangle with the color white then add these layer styles.

Portfolio Layout #9 image 4

Portfolio Layout #9 image 5

Goto "edit > transform > free transform" rotate the rounded rectangle slightly like the image below.

Portfolio Layout #9 image 6

Duplicate the rounded rectangle and rotate again.

Portfolio Layout #9 image 7

Duplicate the rounded rectangle again and rotate once more.

Portfolio Layout #9 image 8

Ontop of the rounded rectangle add your website title, slogan and maybe logo, to the right of the canvas add your RSS icons/feed information. Im using an icon from dryicons (icons not included in the PSD).

Portfolio Layout #9 image 9

Select the rounded rectangle again, on a new layer create a long rectangle. Fill with the color white then with the rectangular marquee tool square off the bottom of the rectangle like the image below.

Portfolio Layout #9 image 10

Now add these layer styles to your rounded rectangle.

Portfolio Layout #9 image 11

Portfolio Layout #9 image 12

Portfolio Layout #9 image 13

Add your navigation text then add this layer style to the text.

Portfolio Layout #9 image 14

Using the rectangular marquee tool create two 1 pixel lines next to each other. Its best if you zoom in quite abit. Duplicate the line across the rest of the navigation.

Portfolio Layout #9 image 15

Portfolio Layout #9 image 16

If you have only a short menu then fill the space with a search field. A simple search field can be created by creating a rectangle then add this layer style.

Portfolio Layout #9 image 17

Next select the rectangular marquee tool and create two content boxes underneath each other. Right-click your navigation layer and goto copy layer style, right-click your content boxes then goto paste layer styles. Underneath your two content boxes add your little footer, just duplicate your navigation bar and flip it vertically by going to "edit > transfrom > flip vertical". You should have something like this.

Portfolio Layout #9 image 18

Theres nothing really special about the next few steps, only really adding your content to each box. Heres my content.

Portfolio Layout #9 image 19

Portfolio Layout #9 image 20

Portfolio Layout #9 image 21

Thats it all done.

Portfolio Layout #9 Tutorial: Final Result



Author's URL: Hv-Designs.co.uk
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Portfolio Layout #9"

Only registered users can write comment

No comments yet...