Posted by tutorials007 in 
In this tutorial you will learn how to design a simple but modern website layout.
I, personally, like this kind of layouts so this one looks perfect for me…
1. Make new document, with proportions like on picture below.
2. Make a new layer and name it header.
Now, by using Rectangular Marquee Tool (M) make a selection with width 800 and height 87 pixels.
Place it like on picture below and fill with any color.
Hit CTRL + D to deselect and add following styles (Layer -> Layer Styles)
Drop Shadow
Gradient Overlay
Now, add some text and you can add some shapes, brushes…this is what I came up with.
3. We’re finished with our header now lets proceed to navigation and search bar.
By using Rounded Rectangle Tool (U) with radius 2 make new shape, place it like I did.
Now, rasterize your shape layer. To rasterize this layer click on it, go to Layer -> Rasterize -> Layer.
Add styles like for header.
Now, copy this layer 5-6 times, depends how much links you’d have, add some text and also, you can add some little shapes to it.
Here’s how I did this.
At the end of your buttons add another shape like buttons but make it a bit longer (Transform tool (T)) and another one, smaller.
This will be as your search box.
4. Allright, now make 2 smaller boxes. Use Rectangle Marquee Tool (M) , set Smooth to 2 (Select -> Modify -> Smooth) before you make a selection, width 253 height 60.
Add layer style like in header and navigation.
You got it?
Now, the same way you made these two boxes in step 4. you should make the other boxes.
I set them up like this.
Add some titles to these boxes, text and also some icons…
And, at the end add some brushes to these boxes and background to spice a little up your layout!
Now, you got the idea, basics. Go, design layouts,websites. Use your imagination and only sky is your limit! 
If you are passionate about web layouts and design why not get an online graphic design degree! With tons of online degree programs available you can find the learning experience that works for you! Online universities will fit into any education schedule!
Pleas add more DETAIL !
What more details you want? Could you be more specific?
First of all, the finished product looks great! I would really like to learn how to do something like this. Since this tutorial is for beginners (like me), you could make it more helpful by explaining some of the things you take for granted like the following lines:
- Now, add some text and you can add some shapes, brushes…this is what I came up with.
- Add some titles to these boxes, text and also some icons…
- And, at the end add some brushes to these boxes and background to spice a little up your layout!
It would be nice to know how you alligned all the text too. Thanks. Remember, if we are reading this….. we are beginners.
It would be nice if you could extent this tutorial to include a step by step on how to slice this up for the web. I’m using PS CS3. Also, can you attach the PSD file(s)?
I’m writing another layout tutorial right now and this one will be detailed.
It would take me a lot of time to explain you this through comments so I’ll write another layout tutorial detailed.
I will also re-publish this tutorial (Modern web layout) a bit detailed in a couple of days.
I do these tutorials in my free time, since I’m working from 6 a.m. to 7 p.m. I don’t have too much free time, so, please be patient.
Thank you
Evelyn, I wrote down your wish and I will do a slicing tutorial.
I wolud include a psd but I have some problems with server. When my server administrator fix those problems I’ll upload it…soon
I am a Mexican web designer, and to be honest, you loose me too. I appreciate a decently made site and occasionally will search the net for some ideas. If I may make a comment, and please do not be so thin skinned as to take offense. If you want to send out tutorials (I do tutorials too) It is far more preferable to send out one good one, fully explained, than send out several dozen that cause people this sort of frustration. Please, take your time and make it complete. If you do it after work, tale a week to get it right. We all benefit. You get experience in communication techniques (essential for the internet) and we get to praise you instead of just go away shaking our heads.
Oh Cool site you have here, was searching for layouts and came across your site. great final result but for me there is a lot of missing details that i wouldn’t know. once i have designed the page using Photoshop how does it translate to divs and slices in HTML + CSS?
Juan Cochina, thanks for your comment. I would be glad to see your tutorials, maybe I learn something from them.
I’m not trying to loose anyone. I’m just trying to get people ideas and motivation to start using photoshop.
Let me say this way.
I gave you a basic tutorial to design a basic but modern web layout.
I also showed you final result, but I didn’t show you how did I do that. Right?
Now, your job is to discover photoshop a little and to try to get a same or even better result then me.
Trust me, this is the best way to learn some program. In this case photoshop.
I learn a lot by using this technique.
sianzrong - It’s a bit long to tell you now how to slice and code it using php. Soon I’ll write a slicing tutorial but coding it with html (tables).
Here’s one great tutorial:
Slice a template and code it using css.
Hope this helps you.
Hi,
You blog is very nice but please give details information.
Thanks
how can you define what a modern layout is?
Mamta - thanks. I will in next tutorials.
frank - I can define whatever I want on my site, on the other hand, this layout looks modern to me so I called this tutorial a modern web layout.
And yes, I call that speech freedom…
Thank you
Looks like a cool layout but its a bold statement calling this a modern web layout.
There are so many different designs out there and tons of different users, it is hard to say what a good layout is.
I think it is nice though. Fine work!
I think it’s modern (at least it’s not old is it!)
It is simple - but that’s perfect for beginners to get to grips with.
Once you’ve learned how to create boxes, gradients and use shapes, then you can start on customer shapes, brushes and advanced blending/layer techniques.
Thanks for sharing, chap.
DM
No probčem, I’m glad that you like it.
Hey thanks for the knowledge you share with us pal. Can u please tell how to add new brushes to the Photoshop. I tried several times but it didnt work.
Thanks.:)
Hey pal
This smoothing “Select–> Modify–>Smooth” is not working for me.Modify button is inactive after i created the two boxes.
You should make a selection using Rectangular Marquee Tool (M) and with selection still active go to Select - Modify - Smooth.
To Add brushes, copy them to your brushes folder. Go to photoshop, use brush tool . Right click on canvas and then click on little arrow, then in the menu that appears choose Add new brushes… or Replace brushes…
hi thr…gr8 post but..
can u also explain how can i use this
layout once designed in PS for my website.
I mean how to convert it into a temlate and linkin stuff up.
Adding Text thru PS will make it an image afterall
and thus impossible to crawl for the search engines..
so wont it b better to use website editors like DreamWeaver
Youhave to slice this layout. I will add a slicing tutorial later.
http://www.tutorials007.com/index.php/from-photoshop-to-dreamweaver/
^^ theres a slicing tutorial for all of you… it uses this website layout as an example! hope it helps!
Oh next great tutorial
thank you… it very help me 
thanks for doing up a tutorial, I won’t complain, since its been done in here too much, imo,, and i find the tutorial to be on point and professionally done (especially since ur doing it on ur free time),… Thanks,, hope to get my stuff up an running soon………
SZ
Ok, first off, thanks a TON for the great tutorial!! I for one appreciate those who take the time and effort out of their free time to contribute to helping people learn something. I think that although it’s not super detailed (and it doesn’t need to be), it does outline the basic steps needed to achieve the look *and yes..it IS modern*.
Those of you complaining about it not being enough…feel free to go somewhere else and look for something more to your liking. NO where on here does it say “ABSOLUTE BEGINNER PHOTOSHOP BASICS TUTORIAL” and why do you think this helpful person should hold your hand through it when you don’t appreciate it, nor bother to take the steps necessary to learn like everyone else (Google is your friend…get better aquainted.) The same thing goes if you need help w/any of the things you don’t get (coding, css, php, slicing).
The internet is a vast archive of constant information…if you don’t know how to do something, look it up, just like you did to find this website…and be grateful that someone exists that’s willing to show you things they probably had to learn by themselves.
If you really have a hard time and don’t feel like going out of your way to spend your precious time to learn something…perhaps you should google “free templates” and use one of those instead.
I apologize to the owner of this site for my semi-rant….I just get irritated when people don’t appreciate other’s time and effort.
Just my $0.02.
I really don’t understand how to align some of the text here, the text on the top right and etc.
About modern web layout, SLIRK Layout (multiple column proportional synchronized scrolling layout) represents a new good experience for users, webmasters, webdesigners, bloggers, e-ziners and more.