Jan 27

Design a Sleek Bokeh Styled Portfolio

Wed, 01/27/2010 - 01:56 — julie

Final Image

As always, this is the final image that we’ll be creating:

sleek16 Design a Sleek Bokeh Styled Portfolio

If you want access to the downloadable .PSD file for this, and every other tutorial at PSDFAN, then join our members area for just $4.95 per month.

Bokeh Effect

Yesterday I posted an article about the popular Bokeh effect:

Inspirational Examples of the Bokeh Effect

Today I’m going to show you how to integrate this effect into the header of a sleek portfolio website.

Step 1

Create a new document (900X800px) and create a new layer called ‘brush layer’.

Create a black circle anywhere on your canvas. To make a perfect circle hold shift as you drag out your marquee tool. Then change your layer’s fill opacity to 50%. Apply a 1px black stroke blending option (this should be darker than your actual circle as it’s at 100%).

sleek1 Design a Sleek Bokeh Styled Portfolio

Step 2

With your background layer hidden, and your circle layer active, go to edit>define brush preset. Save your brush as ‘bokeh brush’.

sleek2 Design a Sleek Bokeh Styled Portfolio

Step 3

Create a new layer called ‘header’. Apply a gradient diagonally across your selection ranging from dark blue to dark purple.

sleek3a Design a Sleek Bokeh Styled Portfolio

sleek3b Design a Sleek Bokeh Styled Portfolio

Step 4

Now create a new layer called ‘header bokeh 1′. Select your paintbrush tool and select your ‘bokeh brush’. Then apply the brush settings below:

sleek4a Design a Sleek Bokeh Styled Portfolio

sleek4b Design a Sleek Bokeh Styled Portfolio

Step 5

Apply your bokeh brush (make sure you make the color white) over your header.

sleek5a Design a Sleek Bokeh Styled Portfolio

Then change this layer’s blend mode to ’soft light’ and reduce it’s opacity to 10%.

sleek5b Design a Sleek Bokeh Styled Portfolio

Step 6

Create a new layer called ‘header bokeh 2′ and apply the same technique, this time making your layer 70%. Finally apply a third layer ‘header bokeh 3′, keeping your layer opacity at 100%.

sleek6 Design a Sleek Bokeh Styled Portfolio

Step 7

Now merge all of your bokeh brush layers together, and reduce this merged layer’s opacity to 60%.

sleek7a Design a Sleek Bokeh Styled Portfolio

Now apply white to transparent radial gradients on a new layer called ‘highlights’. Change this layer’s blend mode to ‘overlay’. This should give your header some great highlight lighting effects.

sleek7b Design a Sleek Bokeh Styled Portfolio

Step 8

Apply some light blue logo text to your header, and give it drop shadow and outer glow setting (see values below):

sleek8a Design a Sleek Bokeh Styled Portfolio

sleek8b Design a Sleek Bokeh Styled Portfolio

I also went to image>adjustments>hue/saturation and altered the hue of my header background to make it more than blue/green.

sleek8c Design a Sleek Bokeh Styled Portfolio

Step 9

Now use your marquee selection tool to create a menu bar beneath your header. Fill this selection with a dark blue – dark green gradient and add some menu text.

sleek9 Design a Sleek Bokeh Styled Portfolio

Step 10

Create a layer above your menu bar and below your text layer. Create a white-transparent radial gradient below the ‘home’ link. Change this layer’s layer opacity to 50% and it’s blend mode to ‘overlay’.

sleek10 Design a Sleek Bokeh Styled Portfolio

Step 11

Add a headline to the top left of your white area. I used size 48pt Arial with -50 kerning. Then I apply a drop shadow and inner glow blending option (settings below):

sleek11a Design a Sleek Bokeh Styled Portfolio

sleek11b Design a Sleek Bokeh Styled Portfolio

sleek11c Design a Sleek Bokeh Styled Portfolio

Step 12

Add some further text and a screenshot of one of your designs:

sleek12 Design a Sleek Bokeh Styled Portfolio

Step 13

Create a new layer called ‘button’. Create a rounded rectangle shape (radius 10px) and apply a gradient overlay, inner shadow and drop shadow effect (see details below):

sleek13a Design a Sleek Bokeh Styled Portfolio

sleek13b Design a Sleek Bokeh Styled Portfolio

sleek13c Design a Sleek Bokeh Styled Portfolio

sleek13d Design a Sleek Bokeh Styled Portfolio

Step 14

Now copy the bokeh circles from your header and paste them over your button layer. Repeat the techniques to create the header effect, but this time over your button, including adding your radial gradient highlights (remember to change their blend mode to ‘overlay’.) Reduce the opacity as necessary:

sleek14 Design a Sleek Bokeh Styled Portfolio

Step 15

Add a gray footer area to your design:

sleek15 Design a Sleek Bokeh Styled Portfolio

Step 16

Now to finish off your design simply add a smaller version of your logo to the footer and a menu/copyright notice.

sleek16 Design a Sleek Bokeh Styled Portfolio

And We’re Done!

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

If you want to view the full sized final image, then click here:

sleek16 Design a Sleek Bokeh Styled Portfolio

Don’t forget! If you want access to the downloadable .PSD file for this, and every other tutorial at PSDFAN, then join our members area for just $4.95 per month.

 Design a Sleek Bokeh Styled Portfolio

Copyright 2009. E-mail Me
Auto Spare Parts