Article written

  • on 15.10.2007
  • at 09:22 PM
  • by Admin
  • with 15,200 views
  • 1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
    Loading ... Loading ...

Classy Business Design 3

Use the magic of photoshop to design a classic blue and white business layout with a great skyscraper background.

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

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

weblayouti1

3. Select a recntangle with your rectangular marquee tool and fill it with #3879a9 using your paint bucket tool.

weblayouti2

4. Add the following picture to your design (click on it to view the image in a bigger size) and place it like this. On the right there is a blue piece of the previously created box still showing but that doesn’t matters because another box will cover it up!

weblayouti3

weblayouti4

5. Select another content box and fill this one with white #ffffff on a new layer (layer – new layer). This will become our menu and if you want to, you can also add a logo to this box later.

weblayouti5

6. We’re going to select another box and again fill it with #ffffff on a new layer (this time it’s the content box where we’re going to write down our text and insert some images). So go on and use your rectangular marquee tool to select something like this (you can see the guides so they may help you to select the boxes with the right heigth and width). In this step we’ve covered up the blue that was left from step 3…

weblayouti6

7. This is the last new layer we’re going to create but go ahaed and create one! Now select a rectangle like this and fill it using the paint bucket with your brackground color from step 2 which was #202829 so you end up with something like this! This is where you can place your site title and maybe a slogan if you want to.

weblayouti7

8. Now add some text to the site title box (the font I used is just microsoft sans serif with a size of 25px in #ffffff). And the menu is also microsoft sans serif but with a size of just 10px and in this color #7c7d7e. You should add the text with your horizontal type tool!

weblayouti8

9. In this step I’ve added a tiny box in #6496bc to the bigger content box. This is where you can type out the title of a post or something like that…

weblayouti9

10. And in this last step I’ve just added some more demo text to the content box in this #23475d dark blue color! And we’re finished now…

weblayouti10

Please Login or Register to read the rest of this content.

subscribe to comments RSS

There are 3 comments for this post

  1. Pepijn says:

    Very nice! This the best business layout I have ever seen! Especially because it’s so simple. Very, very, very nice!

  2. Pepijn says:

    Is there a copyright on it?

  3. Admin says:

    Hi pepijn!

    No there is no copyright… You can use this yourself, just don’t sell it claiming you made this :) !

Please, feel free to post your own comment

* these are required fields

PhoNuts is powered by WordPress.
Back to Top