Design a Super Clean Blue Portfolio Website

Step 1

Create a new document (1000x800px).

We want to start by laying out some guides for our content areas. Go to view>new guide and then create 2 vertical guides, at 50px and 950px (creating a main column for your content that's 900px wide).

Now create horizontal guides at 130px, 250px, 500px and 800px.

Your document, complete with guides should look like the image below:

Step 2

Now use your custom shape tool to create an arrow shape in the top left of your header. Then go to this layer's blending options and apply a gradient overlay ranging from 58bee4 to 87d0eb.

You can see the result below:

Step 3

Now duplicate your arrow layer, moving the duplicate below the original. Then go to edit>rotate>rotate 180 degrees clockwise. Edit your gradient overlay, changing the gradient to range from b4e458 to cfe458.

Step 4

Now create some logo text. I used the fantastic free font Chunkfive.

It looks better if you reduce the kerning of your text for the purpose of this logo, so I reduced kerning to -60.

Step 5

Now add in some menu text (Arial, Size 14, 969595 color, -50 kerning, bold).

Step 6

Now paste in some social bookmarking icons to the top right area of your canvas. I used the great icons from this free icon set: We Function Social Icon Pack.

After this, I used my marquee/paintbucket tools to create a 'top bar' layer, whereby I filled the top 5px of my canvas with 6dc6e7 (blue).

Step 7

Create a 1px light gray line beneath your header area (in line with your 130px horizontal divider).

Now create some larger headline text to welcome your visitors. I used Chunkfive for the text (48pt size, 6dc6e7 color, -50 kerning).

Step 8

Using your guides create a rounded rectangle area on a new layer called 'main area'. Make sure to create your shape with your corner radius set to 15px. Then fill it with a gradient overlay ranging from cdcdcd to e8e8e8.

Then apply an inner shadow effect (opacity: 10%, distance: 4, choke: 0, size: 0).

Step 9

Now download this fantastic pie chart icon:

Pie Chart Icon

and paste it into your 'main area':

Then go to image>adjustments>vibrance and increase the vibrance to +25 and the saturation to +20:

Step 10

You'll notice that parts of your pie chart are going outside of your 'main area' gray section. To fix this, option+click on your 'main area' layer within your layer palette. This should select all data on this layer (i.e.: your rounded rectangle shape). With your selection in place, go to select>inverse to invert it, and then change to your pie chart layer and hit 'delete'.

Then repeat the same steps with this Bar Graph image. However, this time, let one of the bars of the graph remain outside of the main gray area, without deleting it:

Step 11

Repeat these steps, finally pasting in a screengrab of a favorite website of yours. I resized and rotated my screengrab, fitting it between my chart/graph layers, and then deleting any excess that went outside of my gray area:

Step 12

Now, we want to create a subtle highlight to our gray area's background.

Create a layer above your gray 'main area' layer, but beneath all of your graph/screengrab layers. Call this layer 'radial gradient'. You want to grab your radial gradient tool, setting a white-transparent gradient. Then simply pull downwards from near the top of your 'main area' shape.

It's important to use the inverse selection technique of deleting any data that goes outside of the edges of your 'main area' shape. You can see from the images below, the first image shows the gradient after it was created. The second shows the part of the gradient outside of our main shape deleted, and the gradient layer's opacity reduced to 50%:

Remember, it's always important to keep lighting effects and design touches such as this subtle.

Step 13

Now write out some text for the left side of your 'main area'. I used a combination of Chunkfive and Arial, with varying shades of gray for my text:

Step 14

Now create a button beneath your text. I used my rounded rectangle tool (10px radius) and then filled my shape with a gradient overlay (6dc6e7 to 4a9fbe).

Then add some 12pt arial text over your button (d9f0fb in color):

Step 15

Now add in 2 more vertical guides (at 350px and 650px). These will define your 3 bottom columns of content.

Then proceed to add in headers (using Chunkfive font) and text for each column (Arial):

For the buttons simply duplicate your previous button layer.

Step 16

Finally, add some footer content. Add some text (Arial) for a copyright notice, and then copy your logo, moving it to the bottom right of your canvas. Grayscale the logo (image>adjustments>desaturate) and reduce it's opacity to around 45% to create a kind of watermarked effect:

And We're Done!

You can view the final outcome below. I hope that you enjoyed this tutorial and would love to hear your feedback on the techniques and outcome: