Real Estate Website Design |
|
|
|
| Written by D-SOL Media | |
|
This is a Photoshop tutorial on building a real estate website design using Adobe Photoshop CS3. This real estate website design tutorial will take you through a step by step process if you offer web design services to your agents/realtors. Website templates for real estate agents are great, but what if you could create professional real estate websites that were completely unique, espectially since there are so many web design services. Start to create you very own website templates, and hey, sell your website templates to web design services like Template Monster. If you company offers website design services, why not make some passive income using these techniques. Anyhow, this should provide you with a decent path to creating further real estate website designs in Photoshop. If you enjoyed this tutorial, link to us either through social bookmarking or and rss feed and please leave your comments and feedback below and I will take them into consideration when I create another tutorial on how to make a website using Photoshop. Also, check out our other Website Design Using Photoshop tutorial! Step 1:Create a new document in Photoshop using either CTRL+N or FILE>>NEW. Name your document to be whatever you like and make the width to be 760px and the height to be 770px. 
Step 2:Set the background colour of the document to be a dark grey colour. I used #333333. You can accomplish this by first setting the colour of the foreground to #333333 and either using the paint bucket tool or by clicking ALT+N. Once your background is filled with the dark grey colour, it is time to create the white backdrop what will be used as a background for the real estate website design. Select the roundend rectangle tool and draw a rectangle that is slightly smaller than the documents size. ***Important, make sure you leave more space at the bottom of the rectangle than you do on the sides or the top. 
Step 3:Right click on the white rectangle you just created and select "Blending Options" from the menu to get into your layer styles. You can also achieve this by double clicking the layer to bring up the layer styles dialog box. Once you have the layer styles box opened, select "Drop Shadow". The only adjustment that you need to make is to change the opacity to 100%. Once you are done, click "OK". 
Step 4:Grab a header image that you would like to use and place it approximately an inch below the top of white background layer. Crop the image if need be as it should be roughly 700px by 350px. Your header image should look something like this. 
Step 5:Now it's time to start creating some cool looking buttons for our real estate website design. Grab the "rounded rectangle tool" and draw a button on the top left of your header images like this. We are going to do some really neat effects on this button so pay close attention. 
Step 6:Once you create the button we are going to add some effects to give it style. The first effects is the drop shadow. Increase the opacity to 100% and drop the size down to 0px. Next, we are going to add an "Inner Glow". Leave the inner glow as is and then move onto the "Gradient Overlay". Set the opacity to 30% and the angle to 90 degrees. To add the colours, look at the image below to be able to get the proper colours to use, or just use whatever you like.    
Step 7:The last step in pulling the button together is to only make it show on the header image and no where else. Photoshop CS3 is great for doing this. It is a reall simple and cool trick. As the image shows, place your cursor in between the button and header image layers and hold down "ALT" until you see the cursor change. Once you see the cursor change, click the left mouse button and the top image (the button layer) should only appear where the bottom image does (the header image). Take a look here. 
Step 8:Once you have completed step 7, repeat the button creation 5 more times (steps 5-7). Step 9:Now that you have the 6 buttons, lets start creating the background for the content. Again select the "rounded rectangular tool" and draw a verticle rectangle below the header that will take up three quaters of the content section. Make sure that this box is made on the right hand side of the page. Once you create the rectangle, add these effects to it. Don't worry about what colour the rectangle is right now as you will be changing it in the effects pallette.     
Step 10:Now that you have completed the bacground, start adding whatever text you want. This is what I did. 
Step 11:When you finish creating the first text box, lets create the smaller one that will sit right below the one you just made. Basically we are just going to go through the exact same process that we just did but the box will be a little smaller, the background will have a different colour gradient and the text will change. This is what the final should look like. 
Step 12:Now that we are fairly well done with creating the content for the lower half of the real estate website design, lets move back to the top and finish things off. Find a picture or an agent or a business man/woman to use as the main focus of the website. 
Step 13:Next we are going to add the sales pitch with a way to contact the agents. 
Step 14:Lastly we are going to add the logo to the website. At this time either you will have to create a logo for your clients of you can use one that they already have. Here is what is should look like when you place it on the top left of the real estate website page. 
WE ARE COMPLETE. Once you add whever content you need for the website at the bottom your real estate website design should look like this. You have now completed making you very own website template using your own website design services.. 
Set as favorite
Bookmark
Email This
Trackback(0)
Comments (4)
 Write comment
|
TrackBack URI for this entry
Subscribe to this comment's feed
| < Prev | Next > |
|---|