Portfolio Layout #11

Hello everybody welcome to another tutorial by hv-designs, in this tutorial il show you how to create a colorful yet elegant portfolio layout.

 

Creating Your Document

Create a new document 1200 x 1200 pixels with any color background.

Step1

Creating The Background

Duplicate your background layer then add these layer styles.

Step2

Step3

With your duplicated layer selected press CTRL + T to go into free transform mode, go to the bottom middle anchor point and drag it up about 100 pixels.

Step4

Creating The Footer

Underneath your duplicated background layer create a new layer called footer, select the rectangular marquee tool and make a selection covering the area which is now visible from where we resized the background.

portfolio layout 11 step5

Fill the selection with any color. Select the colors #0b0b0b and #222222 then with the gradient tool using a radial gradient, drag from the center towards either the left or the right of the canvas.

Step6

Create another new layer this time above your footer layer, select the elliptical marquee tool and make a selection like the image below.

Step7

Fill the selection with the color black (#000000). Now apply a guassian blur by going to “filter > blur > guassian blur”, use the settings below.

Step8

Set the layers opacity to 75% finally you should have something like this.

Step9

Creating The Title

Using the type tool add your website title and slogan too the top of the layout.

Step10

Im using a “Helvetica” style font using the settings below.

Step11

Creating The Navigation Bar

For our navigation were going to use the rounded rectangle tool, the radius of the rounded rectangle can be changed at the very top under the default menu bar. Change the radius to 10px.

Step12

Drag out the navigation shape next to your website title, fill the rounded rectangle with any color.

Step13

Add these layer styles to your navigation bar.

portfolio layout 11 step11

Step15

Once you’ve added the layer styles add your navigation links.

Step16

In between each navigation link add a separator using two 1px lines next to each other.

Step17

Make a selection around half of the navigation, fill the selection with the color white.

Step18

Keep the layer selected in which your white rectangle is on, click your navigation layer whilst holding down the CTRL key, this will load a selection around the navigation. Go to “select > inverse” then hit the delete key, set the layers opacity to 8%.

Step19

Creating The Featured Area

In the same way you created the separator lines for the navigation bar, do the same and create one for the featured area.

Step20

Using the rectangular marquee tool create a selection along side the two 1px lines, make sure the selection is the same height as the two lines.

Step21

While the selection is active select your background layer then go to “edit > copy merged”, on a new layer above everything else go to “edit > paste” if the selection is still be active (which it should) the background will be pasted in the same place it was copied from. Create a new layer above the copied background piece, keep the selection active then select the gradient tool with radial gradient. The gradient colors should be set to white – transparent.

Step22

Drag the gradient over the background piece on the new blank layer, drag it from the right towards the left. Add a layer mask once your done then drag a linear gradient from the left to right. Make sure the gradient is reset to the default colors. You should have something like this.

Step23

Underneath the background piece layer that we copied, create another layer, using the elliptical marquee tool create a small ellipse.

Step24

Fill the selection with the color black then using the guassian blur filter, blur it by about 2-3px. Set the layers opacity to 75%, then remove any excess shadow from the top and bottom of the two 1px lines. Your looking for this effect.

Step25

Finally if your top and bottom parts don’t blend in like mine do then add a layer mask to the shadow and two 1px lines, drag a reflected gradient from the middle of the elements upwards, for this to work properly you need to set your foreground to white and background to black.

Creating The Featured Buttons

Using the rectangular marquee tool create 4 rectangular buttons, slot each one into the featured area, make sure all the layers are underneath the featured area layers that we created a few steps ago.

Step26

For the first button add these layer styles.

Step27

Step28

Step29

Step30

For the rest of the buttons add these layer styles

Step27

Step28

Step31

Step30

Creating The Featured Image

Next to the featured buttons on the left create a black rectangle by using the rectangular marquee tool.

Step32

Once you’ve made the rectangle go to “edit > transform > warp”. When the warp option is selected there should be a button at the top which says “custom” change this to “bulge”.

Step33

Once bulge is selected you’ll be able to change the amount the rectangle bulges out by. Change the bend to 15.

Step34

Press the enter key to apply the changes. Load the selection around the bulged rectangle by either clicking its layer whilst holding down the CTRL key or by going to “select > load selection”. Once you’ve loaded the selection go to “select > modify > contract”, contract the selection by 15px. Once the contraction has been applied hit the delete key and apply this outer glow.

Step35

You should have something like this.

Step36

Finally add your featured image inside the featured image frame, to the right of the featured image part add your featured content text.

Step37

Directly underneath your featured image, using the elliptical marquee tool make a selection like the image below.

Step38

Fill the selection with black then add a guassian blur of about 2-3pixels, finally set the opacity to around 45% Your end result should be something like this.

Step39

The Content Area

The hardest part of the layout has been completed, the content area is a little too easy as its just text. Using a combination of white and black text, black for headings and white for paragraphs assemble something like the image below. The icons are from a free set on smashing magazine.

Step40

Dont forget to add your footer text in the footer area.

Step41

The Finished Layout

Finished

Thanks for reading, looking forward to your comments.

 

Enjoy