aa by cysba606



More Info
      Log In

Home » Blog » How to create a colorful business web layout


How to create a colorful business web layout

Posted on February 28, 2011 by admin
Posted in Tutorials Tagged Adobe, colorful layout, Layer, Tutorial, vector, web layout, Website

Hello. This step by step tutorial will teach you how to create a very nice colorful business layout.
For start you will need to create a new document. I will set the background of the document to #efefef
I will select Rectangle Tool, and i will make a big gray shape.
Then for this shape i will add the following layer styles.






In the middle of the previous shape i will add another one but this time i will use Rounded Rectangle Tool. Over this shape i will add a image
with a nice bokeh effect
Also for this image i will add some layer styles.
Under the big image with this nice colorful layout i will create 4 different shapes. Try to use different colors.
Now i will create another layer ( press on CTRL+SHIFT+ALT+N ) and over this layer i will use Brush Tool with a smooth round tip to
make the following drawing. It is easier to make a selection of the orange shape before you add the drawing with brush tool.

Then for this layer i will change the blending mode to overlay, and in the same time i will change the opacity to 50%

I will duplicate this layer with this nice lightning effect, and i will place it over the other shapes. Click on the following image to see better
what i am talking about.
On top of the web layout i will create a new shape.

I will use the following layer styles.
Then i will create a small circle with Ellipse Tool

For this small circle i will add the following layer styles
Now it is very important to delete the bottom half of the circle. To delete the bottom part first you need to right click on the layer inside your
layer palette, and then with Rectangular Marquee Tool make a selection over the bottom part of the circle. After that press on Delete on
your keyboard.

Another way is to use the Eraser Tool, after you rasterize the shape.
If you don’t have already a membership with us i recommend you to signup now ( You can find the subscription button on the top of the
website ) and you can download the following set of icons: Download 512 Vector icons

Open the .ai files inside illustrator, and then select each icon you want to use.

The steps are very simple:

Go to Adobe illustrator.
Select the icon.
Press on CTRL+C ( Copy )
Return to Adobe Photoshop
Press on CTRL+V ( Paste )

Do the same for all the icons

For all these icons i will add the following layer styles.
Between the buttons, i will add some vertical dividers. I will use Line Tool to add the lines.

Then for each line i will add the following layer styles.
The next step is to add a simple text logo. If you want another logos you can try to use the 3D Creator which helps you to convert each 2D
shape into a very nice 3D shape

On the bottom of the slideshow i will add another shape with Rounded Rectangle Tool.
I will add the following layer styles.
Then i will add some circles which are made with Ellipse Tool. I will use the same layer styles i have used for the top vector icons
With Ellipse Tool, i will crate a new shape.

Then i will load the selection for the orange shape.
And then i will make sure the white circle is rasterized, and i will delete the outer part of the white shape. Your result should be the following

For this white corner i will add the following layer styles
I will duplicate all the corners, and i will move them over each box.
Then i will add another icons, and some text.

On the bottom of the shapes i will add some lines ( please click on the image to see better ) , and of course some text.

One of my last steps is to add another text with horizontal type tool.
This is my final result. I hope you like it. You can use this web layout not only for a business layout. With slight modifications you can use it
also for a wordpress theme.

If you want to download you will need a membership, which allows you to download all our resources, and you have free upgrades for one
year. this means all we will release in the next year you will be able to play with it.
Already a member ?Download Now !

Related Posts

                         Graphic design studio web layout tutorial

                         Retro web elements – PSD navigation menus

                         Learn How To Create Modern Light Business Layout In Photoshop

                         Create a light grunge website layout

                         Create a incandescent light bulb powered by an unusual light source

4 Comments to How to create a colorful business web layout

  1.            graphicsmake
       March 31, 2011 at 3:56 am

       Awesome as always. How to make this bokeh effect?
       Thank you.


               March 31, 2011 at 7:29 am

               We will create a tutorials also for this bokeh effect


  2.             Paddy
       March 6, 2011 at 5:43 am
        Excellent tutorial in easy to understand language..


   3.             tirath
        March 2, 2011 at 4:59 pm

        Awesome tutorial with nice web layout output
        overall excellent with nice trick
        really u make Photoshop more interesting & Enjoyable
        keep up the good work
        God bless you


Leave a Reply

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


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b>
<blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

 Post Comment

   Notify me of followup comments via e-mail

A different kind of WordPress outsourcing.

Ads by Yoggrt
    Textures – Photos

Latest Tweets

    Download 8100 Photoshop resources with commercial license : http://bit.ly/md28pz

    2 days ago

    Create an awesome web studio layout: http://bit.ly/mRwNQ8

    4 days ago

    Get Ultimate Designer Toolkit at half price: http://bit.ly/lfCQKF

    24 days ago

                 18.000 PS layer styles…

                 Design an elegant corporate wordpress layout…

                 Create a gritty portfolio layout – moleskine layout…
            UltimateDesignerToolkit on


 473 people like UltimateDesignerToolkit.

    D ũng        Tosh          P hillip   F elesia

    Ibrar       Ily ass       Wingman     A idan

   Robert       A ndré

    F acebook social plugin

Copyright © UltimateDesignerToolkit.com | License

To top