Article written

  • on 07.03.2008
  • at 08:41 PM
  • by Admin
  • with 17,987 views
  • 1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, average: 4.67 out of 5)
    Loading ... Loading ...

Real Estate Layout 1

Pages: 1 2

In this tutorial we’ll design a real estate layout for a company, but this layout could be adjusted to cover gaming sites or any type of website ofcourse! this design has a web 2.0 look with some shiny buttons and a good looking interface with big and clear red buttons.

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

2. Start filling the background with #ffffff using your paint bucket tool.

weblayoutt1

3. Create a new layer (layer – new layer) and use your rectangular marquee tool to select a content box like shown below in the first picture, fill the selection with #444340 using your paint bucket tool. After that you should adjust the blending options and add a drop shadow (layer – layer style – drop shadow) with the settings shown in the second screenshot.

weblayoutt2

weblayoutt3

4. Create another new layer and select a header using your rectangular marquee tool, you can see what I did in the first screenshot. The selection is filled with #2e7cc2 using the paint bucket tool. Now we’re going to add a gradient overlay (layer – layer style – gradient overlay) with the settings from the second image!

weblayoutt4

weblayoutt5

5. Now don’t deselect the selection from the previous step or if you did, just reselect it! Find yourself a nice brush with clouds and apply them on a new layer, make sure the foreground color is white #ffffff. You can see my outcome below.

weblayoutt6

6. You’ve noticed that I’ve left a 50px grey line in the fourth step. Select the upper half of it (25px) like shown below and fill it with any color on a new layer (layer – new layer). We’re going to add a gradient overlay to give the menu bar a shiny web 2.0 look. So go to your blending options and adjust the gradient overlay of your selection according to the second screenhot below!

weblayoutt7

weblayoutt8

7. Now use your rounded rectangle tool with a radius of 5px to create a shape where you’ll place the name of your real estate company. The foreground color used in this example is #b00033 (dark red). When this is done we’re going to add a drop shadow, the settings are shown in the second screenshot below.

weblayoutt9

weblayoutt10

Pages: 1 2

subscribe to comments RSS

There is one comment for this post

  1. Prionkor says:

    Nice and easy. Thanks!

Please, feel free to post your own comment

* these are required fields

PhoNuts is powered by WordPress.
Back to Top