Portfolio Web Layout #2

Create a new document "850x650" pixels color the background with a gradient. I've uses #181818 and #5c5c5c. Drag the gradient from the top left corner to the bottom right corner.

Find a suitable narrow picture to fit the right hand side. Scale and crop if you have to.

Now under your picture, to keep the line going down create a rectangle underneath using the "rectangular marquee tool". Fill with the color #181818, I've also added a small reflection, by duplicating the picture, flipping it vertically and adding a mask. Merge all the layers apart from the background layer and add a 2 pixel stroke using the color #595959. You should have something like this.

Lets add our title, select the type tool and type your site name, address and logo if needs be. See image below.

Lets also add out site section in a list below.

Now lets create some nice little circles to go by the side our menu. Select the "elliptical marquee tool" and draw out a circle, fill with an orange color, while it is still select goto "select > modify > contract" contract by about 4 pixels then hit the delete key. you should be left with this.

Still a little boring so add this layer style.

Your menu now should be like this.

Still needs something else. Select the type tool and just type out a row of dots using the full stop button duplicate many times and rotate them and place like so. I've also added a slight layer mask to make it blend in more.

Now select the "rectangular marquee tool" and draw out 3 lines Color the big one #606060 and the 2 little lines color #ffa800.

Join them together, merge the layers and place like so, these will act as our dividers.

Add some menus above your dividers.

That's it all done, and with some content it shall looks as stunning as the image below.

Click to enlarge