Home
Photoshop
Web Layout
Real Estate Company Layout
Level: Experienced Software:
Photoshop
1. Create a new document (800*600). 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 of course! this design has a web 2.0 look with some shiny buttons and a good looking interface with big and clear red buttons.
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 screenshot 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.
8. Create a new layer and use your rectangular marquee tool (again) to make a selection like shown below, fill it with any color you like, it doesn't really matter because we're going to add a gradient overlay (look at the second screenshot for the settings) on top of it to give it that glossy web 2.0 look again!
9. In this step I've already added a little bit of text (the name of a real estate company for example). The font used is microsoft sans serif and i've also added a drop shadow which you can add as well using the following settings!
10. Create a new layer (layer - new layer) and use your rectangular marquee tool to select a small horizontal line under your previously created banner. Fill the selection with white #ffffff and add a drop shadow (layer - layer style - drop shadow). make sure you use the right settings to achieve the correct shadow like shown in this picture.
11. Now we're going to add a picture to make sure everyone knows that this is a website about a real estate company (of course you can add other pictures if you're planning on using this layout for something else). Anyway, I have 2 examples below this step and just copy them to your design in photoshop to use it (I think I've found them on google)! They have a transparent background so everything should look ok and it should be something like my outcome in the third screenshot below.
12. the only thing missing is some demo text (not really important) but the buttons aren't there yet! So use your rounded rectangle tool for one last time to create a button (you can choose the radius and smoothness of the corners). make sure your foreground color is #b00033 and look at the example below to see what i've done in this step.
13. Create a new layer, select the upper half of the button created in step twelve and just fill it with any color again… then add a gradient overlay with the settings from the image below. We're doing this to create the fantastic web 2.0 effect!
14. This is the last step… Just duplicate the layers used to create the button (layer - duplicate layer) to create a few other ones! then type out a little bit of text for the navigation and apply the same drop shadow from step 9 (the company name text) and you should be done! I've added some demo text to fill it with some content…
More Photoshop: Most Popular Materials | Fresh Materials
| TutorialKit New Photoshop Tutorials