Clean Style Business Layout

In today’s tutorial I’ll be showing you how to create a stylish business layout with a cool blue theme.

In Blog, Interface

What We’ll Be Creating

Learn How To Create A Business Style Layout

Resources Used In This Tutorial

Creating The Background

Create a new (Ctrl + N) document 1200 x 1140px with a white background. Select the the “Rectangular Marquee Tool” (M) then make a selection a cross the top half of the canvas. Once you’ve created the selection, fill (G) it using the color black #000000.

Learn How To Create A Business Style Layout

Once you’ve fill the selection add a “Gradient Overlay” using the settings below.

Learn How To Create A Business Style Layout

Next, select the “Rectangular Marquee Tool” (M) again only this time make a selection half the size of the first rectangle, fill (G) the selection with the color black #000000. Once the selection has been filled go to “Filter > Render > Lens Flare”, place the lens flare at the top left of the new rectangle.

Learn How To Create A Business Style Layout

Now that the lens flare has been added set the layer blend mode to “Screen”. You should have something like this.

Learn How To Create A Business Style Layout

Download some cloud brushes from the resource list.

Then add some clouds in the blue part of the rectangle, add some heavy clouds across the white line of the lens flare to hide where the rectangle ends. If you don’t succeed in hiding the edge of the rectangle you can use a layer mask.

Learn How To Create A Business Style Layout

Learn How To Create A Business Style Layout

Don’t worry to much about the edge in the middle as this will be covered by the rest of the header section.

Creating The Featured Area

Select the “Rounded Rectangle Tool” (U) with a radius of about 20px.

Learn How To Create A Business Style Layout

Drag out a rectangle leaving a decent amount of room for the website title.

Learn How To Create A Business Style Layout

We now need to modify the rectangle, to do this re-select the “Rounded Rectangle Tool” (U) then drag out two new rectangles, one at the top and one at the bottom. Make the rectangle at the bottom slightly smaller than the one at the top. To make sure the rectangle adds to the shape layer hold down the shift key before dragging out the two new rectangles.

Learn How To Create A Business Style Layout

On the two new rectangles we need to cut off the corners. Select the “Pen Tool” then change the option at the top to “Subtract From Shape Area”.

Learn How To Create A Business Style Layout

Cut the rounded corner off the top and bottom rectangle, simply hold down the shift key to add to the shape layer then draw a small triangle.

Learn How To Create A Business Style Layout

Now that the corners have been cut, download and open the blue abstract wallpaper.

Copy the wallpaper to the clipboard then load a selection around the featured rectangle we just modified. To load a selection select the layer then go to “Layer > Load Selection”. Once the selection has been loaded go to “Edit > Paste Special > Paste Into”.

Learn How To Create A Business Style Layout

The wallpaper should have been pasted within the rectangle shape and should be able to moved and transformed inside of the rectangle. If this is the case then the paste special command worked, you can now hide the old rectangle shape. Place the wallpaper so the flower like pattern is in the top left corner of the shape then add the following layer styles.

Learn How To Create A Business Style Layout

Learn How To Create A Business Style Layout

Learn How To Create A Business Style Layout

You should have something like this.

Learn How To Create A Business Style Layout

Add Some Text To The Header Area

At the top of the layout over the top of the lens flare add the website title. The font i used is verdana and the color was picked from the blue inside the wallpaper using the “Eye Dropper Tool” (I).

Learn How To Create A Business Style Layout

Next add some text on the right side of the title, this is a good place to advertise your company phone number if you have one. Then add some text inside of the featured area, the bolder the better.

Learn How To Create A Business Style Layout

Creating The Navigation

Select the “Rounded Rectangle Tool” (U) then on a layer behind the featured area drag out a rectangle coming out of the top right, the right side of the rectangle should line up neatly with the featured area.

Learn How To Create A Business Style Layout

Once the rectangle has been created add the following layer styles.

Learn How To Create A Business Style Layout

Learn How To Create A Business Style Layout

Learn How To Create A Business Style Layout

Inside of the navigation rectangle add a textual navigation.

Learn How To Create A Business Style Layout

Finishing Up The Featured Area

Underneath the featured area in the little space add a simple contact us feature. Start off with a rectangle and a sentence about contacting your company.

Learn How To Create A Business Style Layout

To the little rectangle add the following layer styles.

Learn How To Create A Business Style Layout

Learn How To Create A Business Style Layout

Learn How To Create A Business Style Layout

You should have something like this.

Learn How To Create A Business Style Layout

Lastly on the right side of the featured area add 4 small circles using the “Ellipse Tool” (U).

Learn How To Create A Business Style Layout

These 4 circles simulate that the featured area is some what of a jquery slider type featured area.

Creating The Main Content Area

The main content area is made up of 3 boxes filled with content and a small gallery. Starting with the 3 content boxes, select the “Rounded Rectangle Tool” (U)

Learn How To Create A Business Style Layout

To each of the 3 rectangles add the following layer styles.

Learn How To Create A Business Style Layout

Learn How To Create A Business Style Layout

Learn How To Create A Business Style Layout

You should have something like this.

Learn How To Create A Business Style Layout

Fill your 3 boxes with your desired content, I’ve opted for a welcome box, services box and some client testimonials. The titles of each box use a shade of grey and a shade of blue from the website title, doing this is a good way to bring in some color to the layout instead of having just one dull color, mostly grey or black.

Learn How To Create A Business Style Layout

Creating The Gallery

Create 4 rectangles using the “Rectangle Tool” (U), fill (G) each rectangle with the color grey #f1f1f1.

Learn How To Create A Business Style Layout

Load a selection around the first rectangle “Layer > Load Selection” then go to “Select > Modify > Contract” contract the selection by around 5-10 pixels. Copy and paste one of your gallery images into the rectangle by going to “Edit > Paste Special > Paste into”.

Learn How To Create A Business Style Layout

Repeat these steps for next 3 rectangles. You should end up with something like this.

Learn How To Create A Business Style Layout

Creating The Footer

Duplicate the featured shape then move the shape to the bottom of the canvas. Go to “Edit > Transform > Flip Horizontal” to flip the shape horizontally.

Learn How To Create A Business Style Layout

Inside of the rectangle where there is a kind of flap, download and add some social icons from the elegant social icons pack.

Inside of the rest of the footer area add your copyright information.

Learn How To Create A Business Style Layout

Conclusion

Thanks for taking part in this tutorial, if you managed to finish this tutorial I’d love to see some of your results. Feel free to post them up on our Facebook Fan Page.

Learn How To Create A Business Style Layout

Purchase Psd Now

  1. September 7, 2011 at 5:51 PM

    Nice theme ! I will to review and follow it when have more time ! Thanks Richard :) I love your tutorials so much !

  2. September 7, 2011 at 5:53 PM

    I know you first time when following the CV tut :) I come from Vietnam – a amatuer Web development. I am studying design (AI, PS, InDesign,…)

  3. September 8, 2011 at 2:44 PM

    Amazing :)best tutorials, keep up with the good work

  4. September 11, 2011 at 7:05 AM

    very cool and easy to follow..i also like the color combination. keep it up… :)

  5. haring robert
    September 12, 2011 at 2:55 PM

    every single day you get better and better at this. great job!

  6. September 15, 2011 at 2:36 PM

    wow is beautiful layout. nice done;)

  7. October 2, 2011 at 12:20 PM

    Great!!! how coding this?? can`t make a tutorial?? please.

  8. Samuel Kimathi
    October 29, 2011 at 6:01 PM

    Would be interesting to see a coded version with some JavaScript for spice.
    I’ll try to code it out C how it goes.

  9. October 30, 2011 at 2:34 PM

    great tutorial.

  10. Ann Kristin
    November 2, 2011 at 9:11 PM

    Thank you so much for a great tutorial!

    This is my result: http://i43.tinypic.com/2rqm785.png

  11. November 23, 2011 at 9:54 AM

    I am always looking to improve how I create layouts for web pages and techniques I can learn to help me. I found this tutorial really interesting and very inspirational. Love the final look and feel of the page, especially the layout, colour and typography.

    Found this tutorial very detailed, easy to understand and a great help for me as a new web designer. I have already booked marked this page so I can refer to again and again. These kind of techniques can only help me develop as a designer.

  12. rajeshkumar
    January 9, 2012 at 10:10 AM

    Thank you very much. very nice layout.

  13. January 10, 2012 at 3:15 PM

    Interesting business website theme plate. We like the things you’ve shared here.

    We’ve just thinking how we can do this to WordPress. But we hope we can make one because of your post here.

    Many Thanks

  14. January 24, 2012 at 8:18 PM

    Great Tut,

    Will look at implementing some of your ideas on my next project:)

    Thanks

    Reworx Design

  15. Swati Kothari
    February 25, 2012 at 8:56 AM

    This is my first time, I am writing comment on the tutorial. Your tutorial explanation and creating each step in different red color makes us easy to follow instruction is really fantastic.

    Thanks a lot for your indirect help.

    Hoping all good

    Thanks once again,

    Swati

  16. marc
    March 25, 2012 at 2:25 PM

    Great Work! Did anyone made a wordpress template out of it yet?
    If so, give me a link. Thanks!
    Richard, you rock!

  17. April 25, 2012 at 2:50 AM

    Nice theme, and a really clear tutorial. Thanks for putting it up.

  18. Maliha
    May 1, 2012 at 2:09 PM

    Love this tutorial. Thank you Richard :)

  19. Arthas
    June 14, 2012 at 11:44 AM

    this is awesome layout design and this is also so clean…..thanks for sharing it….

  20. June 18, 2012 at 11:57 AM

    i Love the header background.. it’s awesome.

  21. July 12, 2012 at 7:48 AM

    No question about that, It is great tutorial to polish yourself with Adobe tool. But unfortunately you need to pay to download such a great website design layout.

  22. July 30, 2012 at 7:47 AM

    Great Work! Did anyone made a wordpress template out of it yet?
    If so, give me a link. Thanks!
    Richard, you rock! i Love the header background.. it’s awesome.

  23. February 6, 2013 at 9:51 AM

    Thanks for sharing it. It’s really great tutorial and so simple to learning it… Your work is great and awesome. Keep doing it…

Give Us Your Feedback

Here on Photoshop Plus we use something called Gravatar, its a little image which will appear next to your name when you comment on a blog. Using a gravatar will help us recognise genuine comments from the spam comments.


Don't forget to leave a comment on this post, we appreciated your feedback good or bad.

There's currently 23 Comments On Clean Style Business Layout, why not add yours!

Leave a Reply

Your email address will not be published. Required fields are marked *

Auto Scroll To The Top
css.php