Mar 01

Design a Clean Corporate Website Layout

Tue, 03/01/2011 - 02:07 — julie

Design a Clean Corporate Website Layout

Final Image

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

Step 1

Create a new document (1000X1000px). Fill your canvas with ebe4ce.

Step 2

Then create a new layer called ‘top highlight’.

Fill the top 100px of your canvas with a linear gradient ranging from white to transparent. To make the effect more subtle reduce this layer’s opacity to 80%.

Step 3

Now it’s time to create a cool header!

Create a new layer called ‘highlight behind logo’. Drag out a radial gradient (white to transparent) in the top-left corner of your canvas.

Then reduce this layer’s opacity to 40% and change it’s blend mode to ‘overlay’.

Now paste in your logo.

Take the icon part of your logo, and copy/paste it behind your actual logo. Go to image>adjustments>desaturate. Then enlarge it, and change this layer’s blend mode to ‘overlay’.

Step 4

Now paste in the social networking icons from your resources section into the top-right of your canvas.

Step 5

Now type out some text next to each icon which will act as links to your social networking profiles.

Font Settings:

Font Face: DejaWeb
Font Size: 14pt
Font Styling: Bold
Kerning: -50
Color: 323332

Step 6

Create a new layer called ‘pattern area’.

Use your marquee selection tool and paintbucket tool to create a colored area beneath your header area. Fill this area with whatever color you want.

Then go to layer>layer mask>reveal all. Use a large, soft black paintbrush at a low opacity to mask off the edges of this area.

Step 7

Now apply a pattern overlay blending option to your ‘pattern area’ layer.

Pattern Overlay Settings:

Blend Mode: Normal
Opacity: 100%
Pattern: (pick any suitable pattern from SquidFingers.com)

Then reduce this layer’s opacity to 15%.

Step 8

Download the fractals brush set from the resources section for this tutorial.

Apply some of the brushes from the set (using a white paintbrush) over your pattern area.

Then go to layer>layer mask>reveal all and mask off the hard edges left by your brushes:

Step 9

Paste in your photo of a woman sat at a computer (or another relevant photo of your choosing).

Mask off the edges of this photo so that you can blend it seamlessly with your patterned backdrop.

Step 10

Now apply some text to the right of your woman photo.

Font Settings for Header:

Font Face: DejaWeb
Font Styling: Bold
Font Size: 42pt
Kerning: -50
Color: 383838

Font Settings for Under Header Text:

Font Face: DejaWeb
Font Styling: Regular
Font Size: 14pt
Kerning: -50
Color: 585858

Font Settings for ‘See Our Work’ Links:

Font Face: DejaWeb
Font Styling: Bold
Font Size: 18pt
Kerning: -50
Color: ffffff

Step 11

Now create a rounded rectangle behind your ‘See Our Work’ link and another behind your ‘Learn More…’ link. Make sure each rounded rectangle has a 10px radius.

Then apply a gradient overlay blending option to each rounded rectangle.

Gradient Overlay Settings for First Rounded Rectangle:

Gradient ranging from: e95a74 to d63451

Gradient Overlay Settings for Second Rounded Rectangle:

Gradient ranging from: 3dafde to 1b91c1

Step 12

Using your guides create a 10px radius rounded rectangle above your middle welcome area.

Apply a drop shadow, inner shadow and gradient overlay.

Drop Shadow Settings:

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

Inner Shadow Settings:

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

Gradient Overlay Settings:

Blend Mode: Normal
Opacity: 100%
Gradient: Ranging from 01658e to 014764
Angle: 90 degrees

Step 13

Now duplicate your menu layer. Cut off the left side of the menu, just leaving the part of the menu from 650px in remaining. Keep all blending options the same, but make your gradient overlay darker. This will provide a search area for your menu bar.

Step 14

Now in your dark search area create two smaller rounded rectangles.

Fill the left with a color overlay (d0e9f3) and the right with a gradient overlay ranging from 1c90c0 to 06729f.

Step 15

Now apply some text over your menu bar. Use DejaWeb once again as your font.

Step 16

Now create dividers between your menu items. Each divider should be comprised of a 1px line ranging from white to transparent, and then a 1px line just to the right of this ranging from black to transparent. To make the effect more subtle reduce your divider line layers to 20%.

Step 17

Now use your guides to create an area underneath your middle area.

Create a white rounded rectangle (10px radius). Then apply a stroke blending option to give this area more definition:

Stroke Blending Option Settings:

Size: 1px
Opacity: 100%
Color: cec6ae

Step 18

Now apply some content over this area.

For your font settings replicate fonts used elsewhere in the design. For the learn more button simply duplicate the ‘See Our Work’ button created earlier. The icons used are available in the resources for this tutorial:

Step 19

Now create some footer content, duplicating your top menu links and applying a copyright notice:

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.

Download Source File for this Tutorial

Copyright 2009. E-mail Me
Auto Spare Parts