PSDFan Extra

Design a Clean Corporate Website Layout

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


About the Author:

Tom is the founder of PSDFAN. He loves writing tutorials, learning more about design and interacting with the community. On a more interesting note he can also play guitar hero drunk with his teeth.

Leave a comment

17 Comments:

  1. neat and clean web design tutorial.

  2. e11world says:

    I like the area where the picture and headline are in the middle. Really well done!

    • Tom says:

      Thanks e11world. I wanted to try something a little different with that area, so it was fun to implement the textures/patterns and add more depth.

  3. Great tutorial on web design. This is a very clean and modern look, and the tutorial is easy to follow. Great post.

    • Tom says:

      Thanks Roberto, I’m really glad you enjoyed this one. I tried to keep things very clear, yet detailed to help explain each step properly.

  4. Dustin H says:

    I’m having trouble with Step 16. How did you create that line with transparency? I used the Line Shape tool and tried a Gradient Overlay, but with a transparent overlay, it will show the color used underneath. Can you clarify this?

    • Tom says:

      Hi Dustin. I used the marquee tool to create a 1px wide selection, and then filled this with a linear gradient using the gradient tool. Thanks for pointing this out, I’ll be more specific in future tutorials.

  5. tirath says:

    Awesome tutorial with nice web layout with Grate color combination & superb usage of pattern.
    overall excellent
    really u make Photoshop more interesting & Enjoyable
    keep up the good work
    God bless you :-)

  6. Very similar to the techniques that we use. Good post!

  7. söve says:

    Very nice tuto.Thank u for sharing.

  8. snowflake says:

    Nice tutorial…
    you can go forward with the interface coding part :)

  9. priyam says:

    can u pls tell me wat is the tool dat u have used here..? i am a beginner and have literaly no idea where to start. I went thru ur tutorial and found it very interesting.. please help me.

  10. Musaddiq Usman says:

    Excellent Tutorial and very simple..

  11. beozhang says:

    why I can not Download Source File for this Tutorial ??

Leave a Comment:

Related Posts

Your Design Work, But More Awesome:

Do you know the basic tools in Photoshop but feel that your work is still looking average? Join our creative community at FanExtra and get the direction you need to take your work to the next level.

JOIN OUR FANEXTRA COMMUNITY TODAY