Jan 18

Design a Sleek Textured Blue Portfolio

Mon, 01/18/2010 - 23:25 — julie

Final Image

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

bluep22 Design a Sleek Textured Blue 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.

Step 1

Create a new document (1080X1200px).

We’re going to use guides in order to set out our layout. In order to set a guide, go to view>new guide and then specify either horizontal or vertical, as well as a distance for your guide. The default guide setting is in cm, but you can simply type in px.

To start with we’re going to set out our main content area’s width, and so set vertical guides at 90px and 990px. This will mean that we have a 900px wide content area, which is 90px away from each side of your canvas.

bluep1 Design a Sleek Textured Blue Portfolio

Step 2

Now we’re going to lay out the rest of our layout’s guides. These will all be horizontal guides and need to use the following measures:

20px
170px
200px
650px
1000px
1165px

You can see the final canvas with all guides visible below:

bluep2 Design a Sleek Textured Blue Portfolio

Step 3

Now we can start building up the design! Create a new layer called ‘gray background’. Select your entire canvas and fill it with B2B2B2. Then select top half of your canvas (from the 650px guide upwards). Create a new layer called ‘blue header’ and fill your selection with 0BA5D1.

You can see the basic layout below:

bluep3 Design a Sleek Textured Blue Portfolio

Step 4

Create a new layer called ‘main content area’. Then use your shape tool to create a rounded rectangle shape, with background: EFEFEF and corner radius: 10px.

Create this rounded rectangle so that the bottom starts from the 1000px guide, going upwards, and that the top of the shape disappears beyond the top of your canvas.

bluep4 Design a Sleek Textured Blue Portfolio

Step 5

Now apply the following blending options to your ‘main content area’ layer:

Drop Shadow – 25% opacity, distance 3, size 0, color: black

bluep5a Design a Sleek Textured Blue Portfolio

Outer Glow – Blend Mode: Normal, Opacity: 5, Spread: 40, Size: 30, Color: black

bluep5b Design a Sleek Textured Blue Portfolio

Inner Glow: Blend Mode: Normal, Opacity: 5%, Choke: 40%, Size: 30px, Color: black

bluep5c Design a Sleek Textured Blue Portfolio

Stroke: Size: 1px, Opacity: 60%, Color: White

bluep5d Design a Sleek Textured Blue Portfolio

You can view the results of these steps below:

bluep5e Design a Sleek Textured Blue Portfolio

Step 6

We’ll continue building up the layout now.

Create a new layer called ‘top bar’ and use your marquee selection tool to select from the 20px guide upwards. Fill this selection with darker blue than your blue header: 007BA4.

Create a new layer called ‘blue header cover’ and select over the remaining main content area, that is covering up the blue header area. (See below image for what I mean). Fill this selection with the same blue as your original header area.

Now create a new layer called ‘footer’. Select from the bottom guide downwards, and fill this with a darker gray than your main gray background. I used: 8F8F8F.

I also reduced the opacity of the ’stroke’ effect on my rounded rectangle layer to 20%.

You can see the updated layout below:

bluep6 Design a Sleek Textured Blue Portfolio

Step 7

Create a new layer called ‘header lights’. Then grab a large, soft paintbrush and randomly apply markings over your blue header area. The idea is to create random highlight ‘light spots’ to break up your blue surface a bit. When you’re done, changing this layer’s blend mode to ‘overlay’ and reduce it’s opacity to 40%.

bluep7 Design a Sleek Textured Blue Portfolio

Step 8

Create a new layer called ‘header shadows’. Use the same technique but using black paintbrush markings. Use layer mode: overlay, and layer opacity: 30%.

bluep8 Design a Sleek Textured Blue Portfolio

Step 9

Download this great Old Paper Texture, courtesy of Bittbox.com.

Resize it to 1080px wide, and the paste it onto a new layer in your layout document called ‘paper texture’. Then go to image>adjustments>desaturate to grayscale the texture. Change this layer’s blend mode to ‘overlay’ and reduce it’s opacity to 50%. Finally, go to filter>sharpen>sharpen more just to really bring out the detail of the texture:

bluep9a Design a Sleek Textured Blue Portfolio

bluep9b Design a Sleek Textured Blue Portfolio

Step 10

The ‘header highlights’ and ‘header shadows’ layers are looking a bit too obvious, we can’t to blend them more subtly into their blue background. To do this, select each layer and then go to filter>blur>motion blur. Apply a motion blur at 25 degree angle, and 150px strength.

bluep10a Design a Sleek Textured Blue Portfolio

bluep10b Design a Sleek Textured Blue Portfolio

Step 11

Now I want to start adding some cool details to my layout. The stroke from my rounded rectangle shape is providing a nice subtle white border for my inner blue header area. However, I want to add a messier border effect.

I create a new layer called ‘white border left’. Make sure that this layer is below your paper texture layer, but above all other layers (so it should be your second to top layer). I select a 1px white paintbrush, hardness: 100% and draw a really wavy line going over my current straight border line.

Now go to edit>transform>free transform. Drag in the sides of your wavy line shape, until the line becomes thin, yet still a bit messy. Doing this will make your line fainter, as you’re making it thinner than it started off. To make it a little bolder duplicate this layer, and merge the duplicate down with the original wavy line.

bluep11a Design a Sleek Textured Blue Portfolio

bluep11b Design a Sleek Textured Blue Portfolio

Step 12

Duplicate your wavy line layer and move the duplicate to cover the right side of your inner blue header area. Then use the same technique to draw in wavy dividing lines for the dark blue top bar area, as well as darker wavy lines for your main content area.

I draw out sketchy lines dividing each section of the layout, duplicating some of the lines in order to save myself time.

bluep12a Design a Sleek Textured Blue Portfolio

bluep12b Design a Sleek Textured Blue Portfolio

Step 13

Download this free stock image of clouds.

Paste a section of it into your document. Make sure that this layer is beneath your paper texture layer.

bluep13a Design a Sleek Textured Blue Portfolio

Change this layer’s blend mode to ‘multiply’ and reduce it’s opacity to 50%. Then use a large, soft eraser brush (100%) opacity to erase away parts of the image. You want to leave a subtle, cloud heading in your blue header section.

bluep13b Design a Sleek Textured Blue Portfolio

Step 14

Using your guides, identify the area meant for your menu (it should be between the 170px-200px horizontal guides). Use your type tool to type out your menu links. I used 14pt Arial (-50 kerning), bold, for my text. Make sure that your menu text layer if ABOVE your paper texture layer.

Create a black rounded rectangle (5px radius) behind the word ‘home’, on a layer beneath your text layer. Reduce this shapes layer to 25% to make it more subtle. This provides a hover effect for your menu item.

bluep14 Design a Sleek Textured Blue Portfolio

Step 15

Add some further header content, by including a logo and design related quote to the top of your header.

bluep15 Design a Sleek Textured Blue Portfolio

Step 16

Now add in some more content to the bottom of your layout. I used Arial as the font, and used icons from this fantastic free set, courtesy of
Tutorial9:

30 Web Icons – Hand-drawn Icon Pack

The bottom area of the layout would be used for client logos, but I’ve simply used low opacity icons:

bluep16 Design a Sleek Textured Blue Portfolio

Step 17

Now paste in an example of your work into the center of your blue area.

bluep17 Design a Sleek Textured Blue Portfolio

Step 18

Now create a selection above your work image. Create a black to transparent gradient going down over the image. For the areas of the selection that jut out to the sides of the image, use an eraser brush to fade these into the background. Finally, reduce this layer’s opacity to 35%.

Then duplicate your gradient layer, and go to edit>transform>flip vertical. Move the flipped gradient to overlap the bottom of your work image. The resulting effect should be that your work image appears to be contained within your blue area, and slightly sunken.

bluep18 Design a Sleek Textured Blue Portfolio

Step 19

We’re going to create buttons that will allow the user to scroll through featured examples of the designers work.

Start by using your circular marquee tool to create a circle selection that fits over the left half of your featured work image. Hold shift as you create your selection in order to create a perfect circle. Then fill your selection with dark gray, and go to select>modify>contract. Contract your selection by 2px, and then fill your inner selection with a light gray gradient. You can see the result of this below:

bluep19 Design a Sleek Textured Blue Portfolio

Step 20

Now create a dark gray arrow pointing left. Merge this new shape layer down onto your button layer. Then apply the layer blending options shown below:

Drop Shadow: Opacity: 30%, Distance: 2px, Size: 5px.

bluep20a Design a Sleek Textured Blue Portfolio

Inner Shadow: Opacity: 30%, Distance: 2px, Size: 5px

bluep20b Design a Sleek Textured Blue Portfolio

Here is the result:

bluep20c Design a Sleek Textured Blue Portfolio

Step 21

Now duplicate this layer, and go to edit>transform>flip horizontal. Move the flipped button to cover the adjacent side of the featured image.

Then create a new layer called ‘button shadows’. Make sure that this layer is BELOW your work example layer. Use a low opacity, soft black paintbrush to brush in shadows, either side of your arrow buttons. This should give your buttons more depth, and make them stand out.

bluep21 Design a Sleek Textured Blue Portfolio

Step 22

Finally, create a new layer, just above your blue header area layer, called shadows/highlights. Use a large, soft brush to add in additional shadows and highlights where you see fit. This should enhance your overall layout, making it bolder with more definition.

bluep22 Design a Sleek Textured Blue 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:

FULL SIZED FINAL IMAGE.

bluep22 Design a Sleek Textured Blue 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 Textured Blue Portfolio

Copyright 2009. E-mail Me
Auto Spare Parts