Design a Bold and Vibrant Portfolio

Step 1

Create a new document (900X900px).

Create a new layer called 'orange header'. Make a selection that's 900X450px and fill it with an orange gradient:

Step 2

With your header selection in place create a new layer called 'header clouds'. Go to filter>render>clouds to fill your header area with clouds. Then change your layer mode to 'color dodge' and reduce your opacity to 10%.

Step 3

Now download this great texture set from PSDFAN:

Texture Thursday: Damage

Paste one of the textures into your header selection. Call this layer 'header texture'.

Then reduce this layer's opacity to 20% and change the layer's blend mode to 'overlay'.

Step 4

Now use your radial gradient tool to create a white to transparent radial gradient in the right area of your header.

Then reduce the opacity of this layer to 20% and the layer blend mode to: 'color dodge'.

Step 5

Create a new layer called 'lighting 1?. Use your lasso tool to create a triangular shard like selection in your header. Fill this selection with a white to transparent gradient.

Then reduce the opacity of this layer to 5% and the layer blend mode to: 'color dodge'.

Step 6

Repeat this technique to create a collection of light shards in your header.

Step 7

Create a new layer called 'menu'. Create a 60px high selection at the top of your canvas. Fill it with black, and reduce the opacity of this layer to 40%.

Then, to create a 1px white line under your menu apply a drop shadow (settings below):

Step 8

Add some menu text, as well as some 1px dividers between the menu items.

Step 9

Download this Macbook Pro vector set:

Macbook Pro vector set

Paste in your Macbook Pro vector, and position it the right half of your header.

Then apply the following layer blending options to your Macbook Pro layer, including a color overlay, in order to make the laptop blend better with it's background:

Step 10

Now create a new layer called 'macbook shadow'. Create an oval selection beneath your Macbook Pro and fill it with black. Then apply a gaussian blur to your shape. This should give the impression of your laptop casting a downward shadow.

Step 11

Write out some large header text (I used the free font Museo).

Then apply the blending options shown below:

Step 12

Add some more text to your header, this time using Arial as your font, and select a color that is a darker version of your header background color.

Step 13

Now work on creating a form in your header section. Create a rounded rectangle shape for your form input (radius 10px), and apply the blending options shown below. This should make your form look embedded in your header background.

Step 14

Now work on creating a form in your header section. Create a rounded rectangle shape for your form input (radius 10px), and apply the blending options shown below. This should make your form look embedded in your header background.

Step 15

Now create a button for your form:

Step 16

Add some text for your form elements:

Step 17

Add text to the white area beneath your header, I've just used filler text/images as an example:

Step 18

Create a new layer called 'footer'. Create a selection at the bottom of your canvas and fill it with light gray.

Step 19

Create a new layer and create a circle in the bottom middle of your canvas. Fill it with the same light gray color as your 'footer' layer. Then merge this layer down with your 'footer' layer. Apply a gradient overlay (settings below):

Step 20

To finish up, add some text to your footer, adding a subtle drop shadow:

And We're Done!

I really hope that you enjoyed this tutorial and would love to hear your feedback!