PhoNuts

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.

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.

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!

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.

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!

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.

Pages: 1 2