Modern web layout

Posted on 20. Jan, 2008 by in Photoshop Tutorials 44,949 views

modern_layout250x100.gif

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.

modern_layout_1.gif

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.

modern_layout_2.gif

Hit CTRL + D to deselect and add following styles (Layer -> Layer Styles)

Drop Shadow
modern_layout_3.gif

Gradient Overlay
modern_layout_4.gif

Now, add some text and you can add some shapes, brushes…this is what I came up with.

modern_layout_5.gif

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.

modern_layout_6.gif

Now, rasterize your shape layer. To rasterize this layer click on it, go to Layer -> Rasterize -> Layer.
Add styles like for header.

modern_layout_7.gif

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.

modern_layout_8.gif

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.

modern_layout_9.gif

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.

modern_layout_10.gif

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.

modern_layout_11.gif

Add some titles to these boxes, text and also some icons…

modern_layout_12.gif

And, at the end add some brushes to these boxes and background to spice a little up your layout!

modern_layout_13.gif

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!

31 Responses to “Modern web layout”

  1. Joe

    21. Jan, 2008

    Pleas add more DETAIL !

  2. tutorials007

    21. Jan, 2008

    What more details you want? Could you be more specific?

  3. Joe

    21. Jan, 2008

    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.

  4. Evelyn

    21. Jan, 2008

    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)?

  5. tutorials007

    21. Jan, 2008

    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

  6. tutorials007

    21. Jan, 2008

    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

  7. Juan Cochina

    22. Jan, 2008

    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.

  8. sianzrong

    22. Jan, 2008

    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?

  9. tutorials007

    22. Jan, 2008

    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.

  10. Mamta Dilawar

    24. Jan, 2008

    Hi,

    You blog is very nice but please give details information.
    Thanks

  11. frank

    24. Jan, 2008

    how can you define what a modern layout is?

  12. tutorials007

    24. Jan, 2008

    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 :)

  13. windows web servers

    25. Jan, 2008

    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!

  14. web design stoke on trent

    29. Jan, 2008

    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

  15. tutorials007

    30. Jan, 2008

    No probčem, I’m glad that you like it.

  16. Sirus

    01. Feb, 2008

    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.:)

  17. Sirus

    01. Feb, 2008

    Hey pal
    This smoothing “Select–> Modify–>Smooth” is not working for me.Modify button is inactive after i created the two boxes. :(

  18. tutorials007

    01. Feb, 2008

    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…

  19. Novice

    06. Feb, 2008

    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

  20. tutorials007

    06. Feb, 2008

    Youhave to slice this layout. I will add a slicing tutorial later.

  21. zsdg07

    11. Feb, 2008

    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!

  22. Abik

    02. Mar, 2008

    Oh next great tutorial ;) thank you… it very help me :)

  23. Scanz1

    29. Mar, 2008

    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

  24. Zombie

    06. May, 2008

    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.

  25. Blank

    25. May, 2008

    I really don’t understand how to align some of the text here, the text on the top right and etc.

  26. SLIRK

    26. Jun, 2008

    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.

  27. doro

    09. Nov, 2008

    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

  28. bernadette

    22. Nov, 2008

    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

  29. Frou Frou

    21. Jan, 2009

    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

  30. hapizi84

    06. Jan, 2010

    Thanks for sharing that great tutorial.Awesome and so helpful for newbie like me.Thanks again.

  31. salem

    21. May, 2010

    i try it with Inkscape . and i got similar result .
    Inkscape have way to slice web layout using 0 transparent element .and explore it !

Leave a Reply

Get Adobe Flash playerPlugin by wpburn.com wordpress themes