Her

Home Photoshop Tutorials Web Layout Business Webdesign

Business Webdesign

Author: PhoNuts.org Author's URL: phonuts.org More by this author

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

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

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

image 1
Click to enlarge

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!

image 2

image 3

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!

image 4

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.

image 5
Click to enlarge

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.

image 6

image 7

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.

image 8
Click to enlarge

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

image 9
Click to enlarge

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.

image 10

image 11

11. You should also add the title of your website, the font I used is just arial black with a size of 30px! The worlds are #ffffff and #000000 and #056caf. You could also copy the layer style of the content box, that's also a nice effect…

image 12
Click to enlarge

12. I've just added some more demo text and we're finished, here I present you a complete layout for your organisation or whatever you want to use this tutorial for!

Business Webdesign
Click to enlarge