Members Area Tutorial: Design a Multi-Page Portfolio Website
Create a Simple, Stylish Custom Youtube Background
Members Area Tutorial: Design a Complete Ecommerce Website (Part 2)Have every post delivered to your inbox and get access to hundreds of useful design freebies.
PSDFan Extra
Final Image
This is the final image that we’ll be creating:
Images Used
Here is a list of images used in the making of this tutorial:
Step 1
Open up a new document (960X850px). Create a new layer called ‘main background’ and fill your canvas with cream (E9E8E5). Then create a new layer called ‘darker background’. Use your rectangular marquee tool to select the top of your canvas, and then fill it with a slightly darker cream (DAD8CF).
Step 2
Now open up your photo in a new document. Go to image>resize and resize your photo to 920px wide. Then return to your original document and hit paste. This will automatically paste your image into the center of your image. Move the image upwards towards the top of your canvas, keeping it horizontally central.
Step 3
Now I want to do a little photo improvement, seeing as the island photo is the central part of my layout. First I go to image>adjustments>levels and change my input levels to: 25, 1.55 and 245. Then go to image>adjustments>hue/saturation and reduce your photos saturation to -30. Finally, go to image>adjustments>color balance and change your color levels to +25, +25, -50.
Step 4
Now go to blending options for your photo layer and apply a 6px white stroke effect and a drop shadow.
Step 5
Now select your ‘dark background’ and apply a gradient overlay and drop shadow to it.
Step 6
Create a new layer called ‘light spot’ above your background layers but below your photo layer. Then drag out a white to transparent radial gradient from the top center of your canvas. This should give your header a subtle lighting effect.
Step 7
Now type out some menu links on a new layer above your background and light spot layers and beneath your photo layer. The font I used was Arial, size 14pt, bold, -50 kerning. Put 15 spaces (spacebars) between each link item.
This works out at about 50px between each link. Now create a new layer beneath the text layer called menu. Create a bar, with 25px space to the side of each link, and fill your bar with a brown gradient.
Step 8
Now zoom in and use your rectangular marquee tool to delete 1px dividers in your menu.
Step 9
Now apply an inner shadow effect to your menu layer.
Step 10
Select your home tab using your marquee selection tool, and then go to image>adjustments>brightness/contrast. Up your brightness to +60 and your contrast to +15.
Step 11
Now paste in a tag photo. I cut it out using the magic wand tool and lasso tool. It was too intense so I went to image>adjustments>hue/saturation and reduced my saturation and increased my lightness.
Step 12
Now go to blending options for your tag layer and apply a drop shadow (settings below):
Step 13
Add some logo text next to your tag, and add a sunshine custom shape over your tag.
Step 14
Now plan out your main content areas. Use your rounded rectangle tool (5px radius) and draw out a large area to the left, and two smaller areas to form a right column. For the 2 right areas, apply gradient overlays, ranging from dark brown to slightly lighter brown for the top area, and dark greeny-blue to slightly lighter dark greeny-blue for the bottom right area.
Step 15
To finish off the template add some content. I would go into the specifics of this step, but there aren’t really any! You’ve already setup your main template, so simply use your text tool to add in your text, and then paste in photos for your sidebar content.
No special effects, just good contrast against your backgrounds works well.
And We’re Done!
I really hope that you enjoyed this tutorial, and as always I’d appreciate your comments.
You can view the full sized layout by clicking the image below:
Download Source File for this Tutorial
About the Author:
Tom is the founder of PSDFAN. He loves writing tutorials, learning more about design and interacting with the community. On a more interesting note he can also play guitar hero drunk with his teeth.
36 Comments:
Related Posts
Your Design Work, But More Awesome:
Do you know the basic tools in Photoshop but feel that your work is still looking average? Join our creative community at FanExtra and get the direction you need to take your work to the next level.
I like it a lot. the only thing I’d change (for pixel aligning issues) would be putting the white border on the big picture to INNER instead of OUTER as right now the white is out farther than the boxes under it (the monthly special / latest properties boxes).
Cheers Mike. Yeah I considered that but kind of liked how it looked being a bit more top heavy. Nonetheless, you’re right in terms of pixel issues, as I’m sure it will make coding it more difficult. Thanks for commenting!
You should get a better logo. Grunge doesn’t fit in on a real estate website.
Fair comment, I’ll consider it with my next web design tutorial.
Featured here: http://www.presidiacreative.com/web-picks-14/
Very clean. Nice job!
Thanks Gordymac
very nice design thanks for the tut..
No problem! I’m glad you liked the end design.
Perfect title it is simple sleek & elegant. TH e gradients add a nice effect. Not sure about the top one though.
Thanks! Do you mean the top gradient as in the main page gradient?
these are nice. I think it is important for real estate companies to have nice looking websites. If a consumer is going to trust someone to find them a big ticket item like a house, then they should at least look reputable.
Yeah definitely, I couldn’t agree more. Although saying that, it’s amazing how many real-estate companies lack a basic, clean design.
Tom, Very nice work!! This is a very crisp, well fleshed out design. This is how every creative comp should be designed before going to the web.
I love the rounded corner look, although I haven’t found a good remedy for this with CSS. I always have issues with CSS and rounded corners.
Do you suggest that I cut the rounded corner samples in Photoshop and bring into Dreamweaver as images, or do I try one of the non-image ways of making rounded corners using CSS?
There are many ways to achieve rounded corners using CSS. Hopefully this tutorial can help you: http://kalsey.com/2003/07/rounded_corners_in_css/
Thanks for this tutorial, here’s my try: http://iniwoo.net/2009/03/12/photoshop-tutorial-sleek-real-estate-web-design/
I’ve always been a huge fan of your work. I learn a new work of art every tutorial of yours i read. Thank you for all your great work!!!!!
Thanks for the kind words Phayne, that’s really great to hear. I hope that you’ll continue to read my tutorials
Very professional and sleek. Overall a nice result
WoW
Awesome tutorials. Thanks for sharing this nice post.
Hi Tom,
Nice design you made there, i like it.
Congrats on the new site!
You forgot to add how you added the logo in the top left! Nice design though.
wow..thanks for the tutorial there..will surely help me..
wow..this is a cool way to start off my website..thanks
thanks for the post..really great and sleek website..
thanks for the post..like having it to my website..
Hi Tom,
Thank you for a such a nice tutorial. I am beginner in photoshop even I had designed some small sites. I followed your tutorial got a good mock up. I really appreciate your work but in some places there are not color codings in the tutorial. If you go for tutorial with more details that that would be great.
Anyway, you did a good help for me.
Regards,
Upendra
really cool man.!
i was really worried about this html background layout.. seeing ur tut i’m feeling hw easy it is!!!!!!!!
thanks a lot!
Thanks for the Tutorial!
I translated it to Portuguese and will go post on my blog, with due credits of course.
Hugs
very nice design thanks for the tut..
Enjoyed the tutorial very much, thank you.
GOOD POST
THANXXXX
In this blog is very nice post….
stuck on step 5, i have a dark background and a header background as different layers, can’t seem 2 get the grad right, help?
excellent tutorial for newbie. Help to learn techniques in adobe. I wan to download the PSD file. How can i download it ?
The PSD source file is available through our FanExtra members area (http://fanextra.com).