PSDFan Extra

Final Image

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

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.

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:

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:

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.

Step 5

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

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

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

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

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

You can view the results of these steps below:

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:

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%.

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%.

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:

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.

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.

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.

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.

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.

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.

Step 15

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

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:

Step 17

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

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.

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:

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.

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

Here is the result:

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.

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.

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.

Download Source File for this Tutorial

Related Posts

• Design a Clean Corporate Website Layout
• Design a Professional Portfolio Web Layout
• Design a Trendy Yet Professional Website Layout