Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Business Webdesign

Business Webdesign


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…

Click to enlarge
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.

Click to enlarge
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.

Click to enlarge
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.

Click to enlarge
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…

Click to enlarge
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 Tutorial: Final Result (Click to enlarge)
Click to enlarge


Author's URL: PhoNuts.org
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Business Webdesign"

Only registered users can write comment

No comments yet...