Posted on Sunday, 20th January 2008 by tutorials007
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!
Posted in Photoshop Tutorials | Comments (29)
January 21st, 2008 at 4:31 pm
Pleas add more DETAIL !
January 21st, 2008 at 6:10 pm
What more details you want? Could you be more specific?
January 21st, 2008 at 7:02 pm
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.
January 21st, 2008 at 7:11 pm
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)?
January 21st, 2008 at 7:15 pm
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
January 21st, 2008 at 7:29 pm
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
January 22nd, 2008 at 6:21 am
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.
January 22nd, 2008 at 8:54 am
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?
January 22nd, 2008 at 6:00 pm
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.
January 24th, 2008 at 10:05 am
Hi,
You blog is very nice but please give details information.
Thanks
January 24th, 2008 at 3:18 pm
how can you define what a modern layout is?
January 24th, 2008 at 6:15 pm
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
January 25th, 2008 at 6:57 pm
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!
January 29th, 2008 at 11:29 pm
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
January 30th, 2008 at 6:20 am
No probčem, I’m glad that you like it.
February 1st, 2008 at 11:39 am
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.:)
February 1st, 2008 at 12:16 pm
Hey pal
This smoothing “Select–> Modify–>Smooth” is not working for me.Modify button is inactive after i created the two boxes.
February 1st, 2008 at 7:01 pm
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…
February 6th, 2008 at 12:19 pm
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
February 6th, 2008 at 5:20 pm
Youhave to slice this layout. I will add a slicing tutorial later.
February 11th, 2008 at 9:16 am
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!
March 2nd, 2008 at 9:30 pm
Oh next great tutorial
thank you… it very help me 
March 29th, 2008 at 7:52 am
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
May 6th, 2008 at 3:59 am
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.
May 25th, 2008 at 7:22 pm
I really don’t understand how to align some of the text here, the text on the top right and etc.
June 26th, 2008 at 7:41 am
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.
November 9th, 2008 at 11:44 am
Hi
I appreciate your time and effort to share this tutorial which i think is interesting. I would like to know how the shapes in the header have been created, please. I would tend to agree with what Zombie has said!
Thanks
November 22nd, 2008 at 8:08 pm
Hello,
First of all thank you very much for this great tutorial. The dedicated people such as yourself makes difference in other peoples lives and I do appreciate your efforts. I had couple of problems due to the level that I am in using photoshop.
1) The anti-alias on the rectangle tool. It was not active and when I tried to click it it did not work.
2) How did you add an image to the background?
3) If the image comes with white surrounding(background) how do you crop the white area so that the image will blend with the background of the button images?
4)What is the name of the font you have used? I really like it.
5)The corners of my large rectangle bozes looks awful, they are not smooth. Yours look smooth why ( is it the anti-alias issue. If so why can’t I click to activate?
I really hope that you will continue writing great tutorials such as this. I have already looked at your slicing tutorial ( my next task :0))
best wishes Bernadette
January 21st, 2009 at 10:46 pm
I think this tutorial was great, although for beginners it may have seemed hard in some unexplained parts
eg. tiling
but i liked my end result and thank you