FanExtra Network

sleekportythumb200

Members Area Tutorial: Design a Super Sleek Web Layout

Final Image

Here is a preview of the image that we are going to be creating:

Step 1

Create a new document (1000X1000px).

Start by creating some guides to help set out your layout.

Vertical Guides:

50px, 100px, 450px, 500px, 900px, 950px

Horizontal Guides:

50px, 250px, 300px

Step 2

Now fill your canvas with f2ede2.

Call this layer ‘page background’.

Step 3

Now apply a pattern overlay to this background layer. I created a custom pattern using the FanExtra logo, but you can use whatever background pattern is relevant to your site.

Pattern Overlay Settings:

Blend Mode: Luminosity
Opacity: 8%
Pattern: Custom pattern (FanExtra logo)
Scale: 100%

Step 4

Now create a new layer called ‘background highlight’.

Drag out a white to transparent radial gradient from the top-center of your canvas. Then change this layer’s blend mode to ‘overlay’ and reduce it’s opacity to 30%.

Step 5

Now create a new layer called ‘menu’.

Using your guides, select the top 50px of your canvas. Fill this selection with a linear gradient ranging from 179fdc to 0174a9.

Now create a new layer called ‘menu highlight’. Drag out a white to transparent radial gradient in the center of your menu. Then change this layer’s blend mode to ‘overlay’ and reduce it’s opacity to 25%.

Now create a new layer called ‘menu under’. Create a 5px high blue strip (b9e4f8) and a 1px white line underneath this.

Now create a new layer called ‘shadow under menu’. Ensure that this layer is beneath your ‘menu under’ layer but above your ‘menu’ layer. Select the 5px underneath your light blue strip. Fill this with a linear gradient ranging from black to transparent.

Now apply a layer mask to your shadow layer. Drag a linear gradient across your canvas ranging from black to white to black. This means that the sides of your shadow will be masked off, whilst the center will remain unmasked. You can see the result of this below:

Step 6

Now apply some text in the center of your menu.

Menu Text Settings:

Font Face: Proxima Nova
Styling: Bold
Size: 14pt
Kerning: -50
Color: ffffff

Now apply a subtle drop shadow blending option to your text layer:

Drop Shadow Settings:

Blend Mode: Multiply
Color: 000000
Opacity: 35%
Angle: 90
Distance: 1px
Spread: 0%
Size: 0px

Step 7

Now apply some logo text in the center of your header.

Logo Font Settings:

Font Face: Proxima Nova
Size: 60pt
Kerning: -50
Color: 0475ac

Now apply a drop shadow, inner shadow and gradient overlay blending option.

These will help give your logo text a really modern, clean look.

Drop Shadow Blending Option Settings:

Blend Mode: Multiply
Color: 000000
Opacity: 7%
Angle: 90
Distance: 2px
Spread: 0%
Size: 0px

Inner Shadow Blending Option Settings:

Blend Mode: Multiply
Color: 000000
Opacity: 27%
Angle: 90
Distance: 1px
Choke: 0%
Size: 0px

Gradient Overlay Blending Option Settings:

Blend Mode: Normal
Opacity: 100%
Gradient: 0175ab to 1cb3e2
Angle: 90

Step 8

Now apply a slogan beneath your logo.

Slogan Text Settings:

Font Face: Georgia
Size: 18pt
Kerning: -50
Color: 239bd2

Now create a blue (b5d6e0) 1px line either side of your slogan.

Step 9

Using your content guides, create a white rounded rectangle (radius: 5px). Call this layer ‘content area’.

Now duplicate your content area. Delete the area from 620px upwards, so that you’re left with a bottom part to your content area.

Call this layer ‘bottom of content area’. Apply a color overlay blending option:

Color Overlay Blending Option Settings:

Blend Mode: Normal
Color: f2f2f2
Opacity: 100%

Now return to your original ‘content area’ layer and apply an outer glow blending option:

Outer Glow Blending Option Settings:

Blend Mode: Normal
Opacity: 10%
Color: 000000
Spread: 0%
Size: 5px

Step 10

Now paste in an example of some of your design work into the top left of this content area.

Step 11

Now apply some text to the right of your featured design image.

For the headline text simply copy/paste the text layer styles from the logo to your headline text.

For the text underneath your headline apply these text settings:

Text Settings:

Font Face: Proxima Nova
Size: 18pt
Kerning: -50
Color: 6d6d6d

Step 12

Now use your rounded rectangle tool (radius: 5px) to create a button shape beneath your text. Apply a drop shadow, inner shadow and gradient overlay blending option:

Drop Shadow Settings:

Blend Mode: Multiply
Color: 000000
Opacity: 10%
Angle: 90
Distance: 5px
Spread: 0%
Size: 5px

Inner Shadow Settings:

Blend Mode: Multiply
Color: 000000
Angle: 90
Distance: 3px
Choke: 0%
Size: 0px

Gradient Overlay Settings:

Blend Mode: Normal
Opacity: 100%
Gradient: Ranging from ffae00 to ffcc00
Angle: 90

Step 13

Now option+click on your button layer in your layers palette. This will select your button shape.

Now, with your selection in place, create a new layer called ‘button highlight’. Drag out a white to transparent radial gradient from the top-center of your button.

Then change this layer’s blend mode to ‘overlay’ and reduce it’s opacity to 30%. This should give a nice highlight to your button, make it jump out at your visitors more:

Step 14

Now create a new layer called ‘lines’. Use your rectangular marquee tool and paintbucket tool to create a series of 3px high black lines over the top of your button. Then apply a layer mask and use a soft black paintbrush to mask off the bottom lines, fading them into your button.

Then reduce your ‘lines’ layer opacity to 10%. This creates a great subtle detail for your button, making it stand out against loads of other websites:

Step 15

Now repeat step 14, applying a blue button to the right of your orange button:

Now apply some text over your buttons.

Button Text Settings:

Font Face: Proxima Nova
Styling: Bold
Size: 14pt
Kerning: -50
Color: 3c3c3c

As this is a design where we’re paying attention to the details, we want to give our text a little more definition. Apply a drop shadow blending option.

Drop Shadow Settings:

Blend Mode: Normal
Color: ffffff
Opacity: 100%
Angle: 90
Distance: 1px
Spread: 0%
Size: 0px

Step 16

If you look at the white content area, and bottom content area the two images aren’t clearly enough defined.

To define them further, apply a 1px gray line (dcdcdc) to act as a content area divider:

Step 17

Now apply some text in the bottom of your content area. The text settings are laid about below:

Gray Heading Text Settings:

Font Face: Proxima Nova
Styling: Bold
Size: 30pt
Kerning: -50
Color: 373737

Blue Text Settings:

Font Face: Proxima Nova
Styling: Normal
Size: 24pt
Kerning: -50
Color: 0886ba

Smaller Text Settings:

Font Face: Proxima Nova
Styling: Normal
Size: 18pt
Kerning: -50
Color: a0a0a0

Step 18

Now create a circle next to your text.

Now paste in your ‘man photo’ over your circle. Then go to layer>apply clipping mask. This will clip your photo to fit to the shape of the circle:

Now return to your circle layer and apply a subtle drop shadow blending option:

Drop Shadow Settings:

Blend Mode: Multiply
Color: 000000
Opacity: 5%
Angle: 90
Distance: 5px
Spread: 0%
Size: 0px

This adds a little extra depth to your circular photo area:

Step 19

Now apply some text to the bottom-right of your content area, documenting your latest blog posts. Use the same text settings as your about section:

Step 20

Finally, apply some text to your footer, and a Facebook/Twitter icon from the social networking icons set in the resources for this tutorial.

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.

VIP Download

Download the original .psd file for this tutorial here:

DOWNLOAD .PSD FILE

Leave a comment

0 Comments:

No comments have been posted yet. Be the first!

Leave a Comment:

Related Posts