February 25th, 2009 in Photoshop Tutorials by Richard Carpenter
Portfolio Layout #10
15 Votes, Rating: 4.53
Loading ...Hello, welcome to my next tutorial on hv-designs sorry for the slight delay its been abit hectic. In this tutorial were going to be creating a simple straight to the point portfolio. Ive had tons of emails requesting for a portfolio layout. So here it is.
Il also be showing you how to code this layout in the next tutorial. Right lets get started, create a new document 800×750 pixels double click your background layer then press ok when the box pops up. Your background layer should now be unlocked and editable. Add this gradient overlay to your background layer.
At the top of your canvas create a rectangle about 33 pixels in height and the same width as the canvas, you can create the rectangle using the rectangular marquee tool or the rectangle tool. Fill your rectangle with any color then add these layer styles.
You should have something like this.
Select the rounded rectangle tool with a radius of 10px, Draw out a fairly decent size rectangle, move the rectangle to the top of your canvas on the left.
Right click the rectangle and goto “fill path” color doesnt matter at this time. Then select the pen tool, right click your rectangle and goto “delete path”. Add these layer styles to your rectangle.
Set layer blending mode to 50%, you should have something like this.
Inside the box add your name and the word digital portfolio, the font i used is arial with a style of black (after bold). On the right hand side in the little bar add your portfolio sections.
With the rounded rectangle tool once more create a bigish rectangle underneath everything eles.
Add these layer styles to get it looking like mine.
For this next bit we need to make a diagonal lines pattern, create a new document 25×25 pixels copy the pattern below.
Once you’ve copied the pattern got to “edit > define pattern” Close your document and head back over to your orginal document, create a new layer above your content box layer. Click the little thumbnail image in your content box layer whilst holding down the CTRL key on the keyboard this should load a selection. Select your new layer and the paint bucket tool at the top of your document change forground to pattern, select your pattern from the drop down box and fill your selection. Set layer opacity to 21% and give the pattern a white color overlay from within the layer styles window. You should have something like this.
With the rounded rectangle again create another rectangle inside your big rectangle.
Add these layer styles to your inner rectangle to match mine.
Click the thumbnail in your layers pallette on the inner rectangle layer whilst holding the CTRL key, this will load the selection. Goto “select > modify > contract”. Contract the selection by 8 pixels. Copy your desired thumbnail preview to the clipboard, now goto “edit > paste into”, your desired image will now be pasted within the boundries of your selection.
Add a simple inner glow to your thumbnail image user the settings below.
On the right side of your image add your descriptive text, title, created date and the program your created it in.
Duplicate all the content layers as required, although you only really need one as it can be duplicated using CSS when coded. Duplicate your top bar and drag to the bottom of the canvas, add your copyright information with the bar. Your end result should looke something like this.
In the next tutorial il show you how to code this into a working CSS website. See you in a day or two. Dont forget to subscrive via twitter and our RSS feeds.
Be Part Of The Community!
Become part of the hv-designs community.
Subscribe Via RSS or Follow Us On Twitter.
25 Responses to “Portfolio Layout #10”