Article written

  • on 13.10.2007
  • at 12:56 PM
  • by Admin
  • with 19,594 views
  • 1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
    Loading ... Loading ...

Standard Business Design 7

Pages: 1 2

This is a tutorial to design an impressive business layout with computer desks on the background!

1. Create a new document (750*600).

2. Fill the background with #ffffff using the paint bucket tool.

weblayoutg1

3. Create a new layer (layer – new layer) and select a banner with a heigth of 220px using your rectangular marquee tool. Fill the selection with #6dd4f9…

weblayoutg2

4. Adjust the blending options of the layer (layer – layer style – blending options) we’ve just created and add a gradient overlay with the following settings!

weblayoutg3

5. Now add the following image to your scene and duplicate the layer (layer – duplicate layer). The first one should be positioned as the picture you can see here and the second duplicated layer should be positioned as you can see in the screenshot below. Don’t forget to rotate (edit – transform – flip horizontal) that layer!

weblayoutg4

6. Those 2 desks look pretty ugly and therefore we’re going to create our content box on top of it to cover it up! So use your rectangular marquee tool to select a box and fill the selection as seen in this picture with #056caf.

weblayoutg5

7. Adjust the blending options of the layer (layer – layer style – blending options) and add an outer glow and a 5px stroke with the following settings.

weblayoutg6

weblayoutg7

8. Now type out a few icons in a font called webdings (this a standard windows xp font) to create your glossy, reflecting menu… I used this #056caf color and a size of 50px.

weblayoutg8

9. Duplicate the text layer and then transform it (edit – transform – flip vertical) and position it right under the normal icon layer like this.

weblayoutg9

10. Now we’re going to add a gradient overlay to this layer to give it a reflective look, so go on and adjust the blending options like indicated below.

weblayoutg10

Pages: 1 2

subscribe to comments RSS

There are 7 comments for this post

  1. Wietse says:

    This is absolutely great. Gonna test this out asap.

  2. Nathan Chapman says:

    And with a change of background images, this technique could easily be used for any site. Nice Job :) !

  3. hal says:

    Great work and yet so simple!

  4. taner says:

    Spectacular design. Congratulations ;)

  5. shenisoft designs inc. says:

    That is really great!!!

  6. Nana Dawson says:

    Hello, really liked the concept and as such incorporating a similar style to the site I am building currently. Wondering if I can credit you for the initial design and give me the go ahead. Thanks.

  7. Admin says:

    A link to this website would be nice ofcourse!

    Kindest regards and thank you for all the comments!

Please, feel free to post your own comment

* these are required fields

PhoNuts is powered by WordPress.
Back to Top