Sign In  |  Join Now Become a member to add links and start earning points!

How To Create a Clean and Colorful Web Layout – Photoshop Tutorial

In this tutorial I am going to show you how to create a clean corporate layout in Photoshop. The original layout was created by kuntiz from ThemeForest and I want to thank him for allowing me to write this tutorial.

Materials Needed:

Step 1: Create a new document

Create a new document (Ctrl+N) in Photoshop with the size 1200px by 750px. Then select the Gradient Tool (G) and draw a gradient #792700 to #000000 from the top to the bottom of your document.

Step 2: Add some colors to your background

Create a new layer, select the Brush Tool (B), select a soft brush with the diameter 300px and add some colors to your layout. I have used red, orange and blue. Name this layer "color."

Step 3: Add a texture to the background

Now we are going to create a texture for our background. Open in Photoshop the leafs image which you have downloaded at the beginning of the tutorial and move it into your document using the Move Tool (V). Right-click on this layer and select Convert to Smart Object. Then go to Filter > Artistic > Film Grain and use the settings from the following image. Then go to Filter > Pixelate > Mosaic, and again use the settings from the following image. Set the blend mode for this layer to Difference, the opacity to 30% and name it "texture"

Step 4: Create a dark background for the content

Create a new layer, select the Rounded Rectangle Tool (U), set the Radius to 3 pixels and create a rounded black rectangle. Then double-click on this layer to open the Layer Style window and use the settings from the following image for Drop Shadow. Set the opacity of this layer to 70% and name it "black shape."

Step 5: Use groups to organize your layers

Hold down the Ctrl key and select all the layers which you have created until now and then group them (Ctrl+G). Name the group "background."

Step 6: Create more groups

Create a new group (Layer > New > Group) and name it "home." Then create another group inside the "home" group and name it "logo."

Step 7: Add a logo and a tagline

Create a new layer inside the "logo" group. Then select the Type Tool (T) and write the name of your layout using the color #f4f4f4. Double-click on this layer to open the Layer Style window and use the settings from the following image. Then create a new layer and write a tagline using the color #eeeeee.

Step 8: "Sign up" and "login" buttons

Now we are going to create two buttons in the upper right corner of our layout. Create a new group and name it "Sign up | Login." Then select the Rounded Rectangle Tool (U) and create a rounded rectangle like I did. Double-click on the shape’s layer to open the Layer Style window and use the settings from the following image. Set the foreground color to white and use the Type Tool (T) to write the words "Sign up | Login" on your button. Set the opacity of the text layer to 75%.

Step 9: Create a blue line with the height of 1 px

Create a new group and name it "Navigation." Create a new layer, select the Single Row Marquee Tool and click once on your document to create a selection with the height of 1px. Fill that selection with the color #406f94 and delete what is outside of the black rectangle using the Rectangular Marquee Tool (M). Set the opacity of this layer to 40% and name it "Line."

Step 10: Add a gradient to the navigation bar

Create a new layer, select the Rectangular Marquee Tool (M) and create a selection like I did (note: you can use some guides to help you create the selection). Then select the Gradient Tool (G) and draw a gradient #35423e to transparent from the bottom to the top of the selection. Hit Ctrl+D to deselect. Then go to Filter > Noise > Add Noise and use the settings from the following image. Name this layer "gradient" and leave a distance of 1 pixel between the line and the gradient.

Step 11: Write the names of your layout’s pages

Select the Type Tool (T) and write the names of your layout’s pages in the navigation bar. Then double-click on the text layer to open the Layer Style window and use the settings from the next image. The font which I have used is called Greyscale Basic.

Step 12: Create a separator

Now we are going to create a separator. Create a new layer, select the Single Column Marquee Tool and click once on your layout. Then select the Rectangular Marquee Tool (M), click on the "Intersect with selection" button from the option bar and create a selection like the one from the next image. Fill the selection with white and hit Ctrl+D to deselect.

Step 13

Double-click on the layer which you have created at the previous step to open the Layer Style window and use the settings from the following image. Name this layer "line 1."

Step 14:

Duplicate the "line 1" layer (Ctrl+J) and name the new layer "line 2." Select the Move Tool (V) and hit once the right arrow on your keyboard to move this layer 1 pixel to the right. Then double-click on the "line 2" layer to open the Layer Style window and use the settings from the following image.

Step 15: Convert the "line 1" and "line 2" layers into a smart object

Hold down the Ctrl key and select the "line 1" and "line 2" layers. Then right-click on one of them and select Convert to Smart Object. Name the smart object "separator."

Step 16: Create a blue highlight

Create a new layer beneath the "separator" layer. Select the Rectangular Marquee Tool (M), create a selection like the one from the following image and fill it with the color #35423e. Right-click on this layer and select Convert to Smart Object. Go to Filter > Blur > Gaussian Blur and use the settings from the next image. Then go to Filter > Noise > Add Noise and again use the settings from the following image. Set the opacity of this layer to 60% and name it "highlight."

Step 17: Create a mask for the "separator" layer

Click on the "separator" layer in the Layers palette to select it and then go to Layer > Layer Mask > Reveal All. Select the Gradient Tool (G) and draw a black to transparent gradient from the top to the middle of your separator.

Step 18: Duplicate the separator

Hold down the Ctrl key and click on the "separator" and "highlight" layers in the Layers palette to select them. Then select the Move Tool (V), hold down the Alt and Shift keys and then click on your document and drag the mouse. Now you have duplicated the selected layers. Use the Move Tool (V) to move these new layers to the right. Repeat this step and create as many separators as you need.

Step 19: Group all the separators

Select all the "separator" and "highlight" layers in the Layers palette and hit Ctrl+G to group them. Name the group "separators."`

Step 20: Create a button for the active page

Now we are going to create a background for the active menu page to differentiate it from the others. Select the Rectangle Tool (U) and create a rectangle like I did. Put this layer beneath the text layer which contains all the pages names. Double-click on this layer and use the settings from the following image for Gradient Overlay. Then name it "active menu" and set its opacity to 50%.

Step 21: Create the search bar

Create a new group (Layer > New > Group), name it "search" and put it above the "navigation" group. Select the Rounded Rectangle Tool (U), set the Radius to 3 px and create a rounded rectangle like I did using the color #104f59. Name this layer "text field" and set its opacity to 80%.

Step 22: Create the search button

Select the Rectangle Tool (U) and create a rectangle like I did. Put this rectangle in the right side of the search bar. Double-click on this layer and use the settings from the following image for Gradient Overlay. Then right-click on this layer and select Create Clipping Mask.

Step 23: Write the word "search" on your button

Select the Type Tool (T) and write the word "search" using the white color. Set the opacity of this layer to 75%.

Step 24: Create a vertical line for the search bar

Select the Line Tool (U) and create a vertical line using the color #123036. Name this layer "line", put it beneath the "button" layer and move it between the search bar and the button using the Move Tool (V).

Step 25: Create a blue rectangle

Create a new group (Layer > New > Group) and name it "Showcase." Create another group inside this one and name it "background." Select the Rectangle Tool (U) and create a rectangle using the color #219aad. My rectangle is 983 px wide by 273 px height (you may want to open the Info palette - Window > Info – before you create the rectangle, so you can see the exact size of your rectangle). Set the opacity of this layer to 55% and name it "bg4."

Step 26: Add a texture to the blue rectangle

Open in Photoshop the "pixelated blue rectangle" image, move it into your document and put this image above your blue rectangle. Set the opacity of this layer to 55% and name it "bg3."

Step 27: Add a gradient to the blue rectangle

Ctrl-click on the "bg4" layer’s vector mask to select it, then create a new layer, select the Gradient Tool (G) and draw a gradient #56b8e5 to transparent from the bottom to the top of your selection. Then hit Ctrl+D to deselect.

Step 28: Create a smaller blue rectangle

Create a new layer, select the Rectangular Marquee Tool (M) and create a selection like I did. Select the Gradient Tool (G) and draw a gradient #0f2b42 to #2a607f from the bottom to the top of your selection. Then hit Ctrl+D to deselect. Name this layer "bg1."

Step 29: "Sign up" button

Create a new group (Layer > New > Group) and name it "sign up button." Select the Rounded Rectangle Tool (U), set the Radius to 2 px and create a rounded rectangle like I did. Double-click on this layer to open the Layer Style window and use the settings from the following image. Then select the Type Tool (T) and write the words "sign up" using the white color.

Step 30: "Learn more" button

Repeat the previous step to create another button, but this time write the words "learn more" on your button. Then create a new layer, select the Custom Shape Tool (U) and create a white arrow like I did.

Step 31: Create a button in the left side of the rectangle

Create a new group (Layer > New > Group) and name it "left arrow." Select the Ellipse Tool (U) and create a circle using the color #406f94. Double-click on this layer to open the Layer Style window and use the settings from the following image.

Step 32: Create an arrow inside the blue circle

Create a new layer and use the Custom Shape Tool (U) to create a white arrow. Double-click on this layer to open the Layer Style window and use the settings from the following image. Set the opacity of this layer to 50%.

Step 33: Create another arrow in the right side of the rectangle

Repeat the previous two steps to create another arrow in the right side of the blue rectangle.

Step 34: Create a featured image

Create a new group (Layer > New > Group) and name it "image." Put a small image in this group and name the layer "image." Double-click on this layer to open the Layer Style window and use the settings from the following image.

Step 35: Add a shadow to your image

Go to Layer > Layer Style > Create Layer. This will create a new layer beneath the original one with the style of that original layer. Now go to Layer > Layer Mask > Reveal All, select the Gradient Tool (G) and draw a black to transparent gradient from the bottom to the middle of your small image. Name this layer "shadow."

Step 36: Add some text

Create a new group (Layer > New > Group), select the Type Tool (T) and add some text. Name this group "text."

Step 37: Create a white rectangle

Create a new group and name it "content." Create another group inside this one and name it "shadows." Select the Rectangle Tool (U) and create a rectangle like I did using the white color. Name this layer "white shape" and set its opacity to 90%.

Step 38: Add a top shadow

Ctrl-click on the vector mask of the "white shape" layer to select it. Then create a new layer, select the Gradient Tool (G) and draw a gradient #8f8f8f to transparent like I did. Set the opacity of this layer to 50% and name it "top shadow." Then select the Move Tool (V) and hit the down arrow on your keyboard two times.

Step 39: Create two vertical shadows

Create a new layer and use the Rectangular Marquee Tool (M) to create a selection like I did. Then use the Gradient Tool (G) to draw a gradient #8f8f8f to transparent like I did. Add a mask to this layer and use a big black soft brush to mask the center of the shadow. Set the opacity of this layer to 30% and name it "vertical shadow 1." Duplicate this layer (Ctrl+J), name the new layer "vertical shadow 2" and move it to the right.

Step 40: Create a horizontal line

Select the Line Tool (U) and create a horizontal like with the weight of 1 px and the color #aebcc7. Name this layer "line."

Step 41: Add some text

Select the Type Tool (T) and write the content of your layout. You can also use images and anything else you want.

Step 42: Create a gradient for the footer

Create a new group and name it "footer." Create a new layer inside this group, select the Rectangular Marquee Tool (M) and create a selection like I did. Then set the foreground color to #555555, select a big soft brush and paint with it over the top edge of the selection. Set the opacity of this layer to 50% and name it "gradient."

Step 43: Add a line with the height of 1 px to the footer

Create a new layer, select the Single Row Marquee Tool and click on your document. Fill the selection with white and hit Ctrl+D to deselect. Go to Layer > Layer Mask > Reveal All, select a big black soft brush and mask this layer like I did. Take a look at the following image for reference. Set the opacity of this layer to 15% and name it "line."

Step 44: Add some text to your footer

Select the Type Tool (T) and add some text for your footer.

Final Result

578 Comments

  1. Add point Subtract point

    Would be good to see some alternative colour use with this tutorial, anyone experimented with different colours? maybe less vibrant for a more corporate feel, think this could potentially be quite a versatile layout :)

    Flag as inappropriate
  2. Add point Subtract point
    web design (1 Point) February 25, 2011 at 6:53 am

    this is amazing tutorial…thanks for sharing this…..really helpful…

    Flag as inappropriate
  3. Add point Subtract point

    hii, im quiet confused i think :L
    Dont you have to break each thing up and then do it on dreamweaver how are you gnna do that:/

    Flag as inappropriate
  4. Add point Subtract point
    web designer jalandhar (1 Point) February 4, 2011 at 4:45 pm

    I have created almost same web layout with the help of this tut.

    Flag as inappropriate
  5. Add point Subtract point
    Yeni Nesil Bilgi (2 Points) February 3, 2011 at 10:59 am

    Well done, thank you for inspiration.

    Flag as inappropriate
  6. Add point Subtract point
    Jessica (2 Points) January 18, 2011 at 2:37 pm

    This tutorial was amazingly detailed. I learned more by creating the website via your tutorial than I did in my Graphic Design and Photoshop classes put together. Thank you so much! A very annoying cloud has been lifted off of the intimidating monster that is Photoshop. Thanks again!

    Flag as inappropriate
  7. Add point Subtract point

    isn’t it possible to get the full website link rather than just the home page results? i need to create a full website but i need help on other pages. It would be great if you could add the link for this page so we can find out how it looks with the links?

    Flag as inappropriate
  8. Add point Subtract point

    Excelent tutorial!!!I make same with my hands

    Flag as inappropriate
  9. Add point Subtract point

    This is a great tutorial but personally because im a beginner and im a uni student I think it would’ve been more useful and helpful if this was a video tutorial and I’d know how to actually create it when something goes wrong or I don’t get it right.

    Flag as inappropriate
  10. Add point Subtract point
    Tutucon (0 Points) January 10, 2011 at 4:46 am

    Wow! the final outcome is great, luvd it

    Flag as inappropriate
  11. Add point Subtract point
    web tasarım izmir (0 Points) January 1, 2011 at 12:44 pm

    Thanks for the tutorial. This is a great resource that we’ll advice to our intern website designers.

    Flag as inappropriate
  12. Add point Subtract point
    Ajinkya (3 Points) December 28, 2010 at 1:10 pm

    thanks for gr8 layout n tut :)

    can u also post HTML conversion, it will be a super learning for us :)

    Flag as inappropriate
  13. Add point Subtract point
    Will Specht (2 Points) December 19, 2010 at 9:10 am

    Now we need to know how to convert this to a CSS design.

    Flag as inappropriate
  14. Add point Subtract point

    help me make a template that I made in photoshop eh
    To put it on my website ami msn to help me nid_dog2@hotmail.com

    Flag as inappropriate
  15. Add point Subtract point

    Well done,Thanks for inspiration..

    Flag as inappropriate
  16. Add point Subtract point
    Luxlusis (2 Points) December 6, 2010 at 11:55 pm

    This is a very good beginner tutorial. It was well thought out and really provides a great example to anyone trying to learn web design. From start to finish this is easy to follow and shows how simple steps can be used to develop an effective design. With a little imagination, nearly anyone could follow this to create their own version. This will slice to CSS and HTML very easily. 10/10!

    Flag as inappropriate
  17. Add point Subtract point

    You are a wonderful person…a God….so many amazing tutorials, so freely given…Mr. Super talent!!!!

    Flag as inappropriate
  18. Add point Subtract point
    Hire Web Developers (1 Point) November 25, 2010 at 2:32 am

    Its a nice tutorials, Thanks for your sharing.

    Flag as inappropriate
  19. Add point Subtract point
    蔡伟明 (0 Points) November 23, 2010 at 9:10 pm

    It is so cool…I like this style,thank you for share.

    Flag as inappropriate
  20. Add point Subtract point

    very nice tutorial! can you set up another tutorial on how you convert this to html using css? thanks!

    Flag as inappropriate
  21. Add point Subtract point

    good
    please send a free course of graphocs desion in my mail adds.I wait for this.

    Flag as inappropriate
  22. Add point Subtract point

    Thanks for excellent tutorial!

    Flag as inappropriate
  23. Add point Subtract point
    newbusiness (2 Points) October 26, 2010 at 7:02 am

    thanks for your sharing, I LOVE IT!!!!

    Flag as inappropriate
  24. Add point Subtract point
    Hire Web Developer (1 Point) October 19, 2010 at 4:40 am

    thanks and nice ..

    Flag as inappropriate
  25. Add point Subtract point
    Hire Ecommerce Developer, Hire Ecommerce Designer (1 Point) October 18, 2010 at 5:21 am

    Nice tutorials and its use full to me, thanks for your sharing

    Flag as inappropriate
  26. Add point Subtract point
    Holly Day (1 Point) October 13, 2010 at 5:38 pm

    Excellent tutorial! Stumbled and also saved on my computer so that I can refer to it when time has come!
    Thanks for sharing, teaching…

    Flag as inappropriate
  27. Add point Subtract point
    Spokane Website Design (1 Point) October 3, 2010 at 10:56 am

    This is a great tutorial. I had to go through it twice because i missed a few steps but finally go the same effect.

    Flag as inappropriate
  28. Add point Subtract point

    Looks great but its just an image of a website, not an actual website.. Great for showing ideas though, and a nice tut. Thanks :)

    Flag as inappropriate
  29. Add point Subtract point

    amazing tutorial no doubt. i got chance to take a nap during LOADING OF THIS PAGE.

    Flag as inappropriate
  30. Add point Subtract point

    Amazing stuff…very helpful…thanks and keep up the great work on the site!

    Flag as inappropriate
  31. Add point Subtract point
    Giacomo Colddesign (1 Point) September 6, 2010 at 6:33 am

    Very helpful, Thanks!

    Flag as inappropriate
  32. Add point Subtract point

    how to create a clean and colorful web layout in photoshop

    Flag as inappropriate
  33. Add point Subtract point
    fxbiandavix (1 Point) September 1, 2010 at 7:32 pm

    Exelente, si no se aprende con un tutorial asi de claro, no se aprendera con nada, je je XD no mentiras, racias por compartirlo

    Flag as inappropriate
  34. Add point Subtract point

    Really wonderful Tutorial… but the entire page is graphics, and I believe that means your SEO is limited to only hidden text and maybe a Tag Cloud… IF it gets indexed at all… I’d rather create the background(s) and leave off all the text (less the menu items) and add the text live in CS4, so that all of it can get indexed… If I’m wrong, someone PLEASE correct me!!

    Flag as inappropriate
  35. Add point Subtract point
    Addon Solutions (1 Point) August 6, 2010 at 2:39 am

    Hi,

    Nice job and thanks for sharing here

    thanks

    Flag as inappropriate
  36. Add point Subtract point
    Arnold (0 Points) July 29, 2010 at 6:11 am

    Wow……I can’t believe it…awesome….How can I improve my creativity????

    I was checking some of the websites and went to the one Josehp Moralles was indicating….well, the theme is pretty lame and the website is half finished…pretty bad work…but I liked the logo at : http://www.myriad.x10hosting.com/vybz.html

    I would like to buy a logo there but once again the site disappointed with an incomplete form… I would like to advice u to finish the site before advertising!!!

    PS: AWESOME Template!!

    Flag as inappropriate
  37. Add point Subtract point
    web design lebanon (2 Points) July 28, 2010 at 8:05 am

    nice detailed tutorial.

    Flag as inappropriate
  38. Add point Subtract point
    PC Boxen (2 Points) July 25, 2010 at 4:04 am

    Wow this tutorial is exactly what i was searching for, really looking forward for more stuff from you!

    Flag as inappropriate
  39. Add point Subtract point
    blacksnow (1 Point) July 20, 2010 at 1:29 am

    That Greatest tutorial i have seen thanks alot!!!!!

    Flag as inappropriate
  40. Add point Subtract point
    SEO Company Pakistan (1 Point) July 19, 2010 at 12:43 am

    Nice useful tutorial,

    Flag as inappropriate
  41. Add point Subtract point
    shahzi (1 Point) July 14, 2010 at 1:25 am

    Great tutorial, You are the best……………………………

    Flag as inappropriate
  42. Add point Subtract point
    Local Web Design (1 Point) July 13, 2010 at 7:42 pm

    Excellent tutorial. I loved it! Thank you

    Flag as inappropriate
  43. Add point Subtract point
    Josehp Moralles (0 Points) July 9, 2010 at 6:56 am

    Excellent tutorial mate. I have tried to create my own theme but certainly not as good as this.

    if anyone wanna check my theme and want to make similar, mail me at Joseph@gmail.com for steps, although a theme like this is inspirational, not mine!!

    anyway, check this site: http://www.myriad.x10hosting.com

    Flag as inappropriate
  44. Add point Subtract point
    chris (1 Point) July 6, 2010 at 4:38 pm

    great guide, but it’d be nice how to plug all of this into Dreamweaver and actually get this live…

    Flag as inappropriate
  45. Add point Subtract point
    Cacaroto%a (1 Point) June 17, 2010 at 5:05 am

    Exelente tutorial… estaba buscando hace tiempo uno así… Haces bien en copartir tan valiosa información, para los que trabajamos de forma empirica el photoshop.

    Flag as inappropriate
  46. Add point Subtract point
    alice (1 Point) June 7, 2010 at 6:18 am

    This is great helpful tutorial for me. Thank you a lot~

    Flag as inappropriate
  47. Add point Subtract point
    Melvin D. (0 Points) June 6, 2010 at 9:36 pm

    Awesome Tutorial – very Informative read & insightful, detailed steps. Thank You for Sharing. Btw, you should check-out http://www.MadMediaMonkey.com

    Flag as inappropriate
  48. Add point Subtract point
    logo design nz (1 Point) June 4, 2010 at 7:47 am

    The tutorial is in great detail which help to learn the web page design step by step

    Flag as inappropriate
  49. Add point Subtract point
    rachat credit (1 Point) June 1, 2010 at 4:59 am

    Excellent tutorial about web layout. Great work. Thanks

    Flag as inappropriate
  50. Add point Subtract point
    web design lead (1 Point) May 23, 2010 at 10:40 pm

    Great tutorial. Thanks for sharing this article.

    Flag as inappropriate
  51. Add point Subtract point
    Arkista (-1 Points) May 21, 2010 at 11:22 am

    this is soooooooooooooooooooooooooooooooooo stupid and my teacher is still making me do it

    Flag as inappropriate
  52. Add point Subtract point
    Haldar (0 Points) May 20, 2010 at 8:11 pm

    Superb Tutorial. Thanks for sharing it.

    Flag as inappropriate
  53. Add point Subtract point
    sanal şirket (0 Points) May 19, 2010 at 7:59 am

    thanks for sharing this is a good tutorial

    Flag as inappropriate
  54. Add point Subtract point
    محمد رضا (1 Point) May 18, 2010 at 4:36 pm

    TANQ so much this is great and i enjoyed that

    Flag as inappropriate
  55. Add point Subtract point
    Umer Khan (0 Points) May 16, 2010 at 10:02 am

    Nice to see this Tutorial…
    Good Work

    Flag as inappropriate
  56. Add point Subtract point
    Mike Bodima (1 Point) May 8, 2010 at 9:22 am

    This is what is called: Nice Photoshop Design Tutorial, Thanks for sharing it.

    Flag as inappropriate
  57. Add point Subtract point

    Great design!!!

    I hope my question isn’t too ignorant but when you design a page in photoshop it is static. Though you have designed buttons, written text, and created labels it is flattened into the overall design. People can not interact with it like a traditional web page…. What program do you use/suggest/recommend to get a functional web page out of what currently is a (very impressive) static design?

    Flag as inappropriate
    • Add point Subtract point
      Neil (1 Point) May 12, 2010 at 5:48 am

      I second this I see lots of lovely web desgin tutorials for photoshop, but at the end of the day, it’s a static image/data. How wold you actually create this and publish it as a website where the buttons work, and the data is dynamic, etc?

      Many thanks.

      Flag as inappropriate
    • Add point Subtract point
      anonymous (1 Point) May 28, 2010 at 4:46 pm

      I would recommend using Fireworks and Dreamweaver. They are great programs for building a website. To make them dynamic so they are usable, all you have to do is put each button/box/background that you want to be usable in a different document then upload everything into Fireworks/Dreamweaver. There you can rearrange them and add links to certain buttons. You can also use Flash for the featured product section. I would recommend looking up tutorials to help build a website with those programs.

      Flag as inappropriate
  58. Add point Subtract point
    Boldis Media (1 Point) April 29, 2010 at 4:34 am

    Awesome! Good work kuntiz!

    Flag as inappropriate
  59. Add point Subtract point
    Quantenphysiker (1 Point) April 28, 2010 at 2:04 pm

    Wow i like the first nifty trick with the leafs and the film grain filter :) amazing post

    Flag as inappropriate
  60. Add point Subtract point
    Mutuelle santé (1 Point) April 23, 2010 at 11:43 am

    Nice design tips, Thanks

    Flag as inappropriate
  61. Add point Subtract point
    TheShadow (1 Point) April 22, 2010 at 10:18 pm

    Awesome design and great tutorial.keep them coming

    Flag as inappropriate
  62. Add point Subtract point
    natty (2 Points) April 18, 2010 at 10:19 pm

    Very appealing! Thanks for posting such an amazing tutorial.

    Flag as inappropriate
  63. Add point Subtract point
    sajan (2 Points) March 30, 2010 at 5:04 pm

    Very nice explanation. awesome use of colors. keep up the good work.

    Flag as inappropriate
  64. Add point Subtract point
    Nicolae Surdu (1 Point) March 26, 2010 at 10:17 am

    Super interesant tutorial. Felicitari! ;)

    Flag as inappropriate
  65. Add point Subtract point
    Xcellence IT (1 Point) March 17, 2010 at 12:09 am

    Nice tutorial… It comes handy, as I was looking for some effect on layout i’m currently working on…

    thanks a lot

    Flag as inappropriate
  66. Add point Subtract point

    Great tutorial, thanks a lot

    Flag as inappropriate
  67. Add point Subtract point
    teorico (1 Point) March 3, 2010 at 11:07 am

    wow, really nice, thanks…

    Flag as inappropriate
  68. Add point Subtract point
    Zrce Urlaub (1 Point) February 26, 2010 at 6:26 am

    great work. i like it.

    Flag as inappropriate
  69. Add point Subtract point

    Nice Web Layout, Tecqunique is very useful.
    Thanks a lot for design tips…

    Flag as inappropriate
  70. Add point Subtract point

    Great work. Just what we’re after.

    Hope you don’t mind, but I’ve commented on your tutorial on by blog
    (http://digilarb.blogspot.com/2010/02/distracted-by-pixels.html)

    Flag as inappropriate
  71. Add point Subtract point

    I see myself much more than a programmer rather than a designer, while I sometimes design a simple layout. This kind of guideline gives me a view on how a ‘true’ designer design a layout.

    Thanks.

    Flag as inappropriate
  72. Add point Subtract point
    gerzinho (1 Point) February 16, 2010 at 2:48 pm

    Awesome!
    Thanks a lot for design tips…

    Flag as inappropriate
  73. Add point Subtract point
    Normaderm (1 Point) February 16, 2010 at 2:16 pm

    Nice theme and guildline

    Flag as inappropriate
  74. Add point Subtract point
    An Alien (1 Point) February 13, 2010 at 2:02 am

    Stuck at Step #9. Can someone please explain it to me?

    Flag as inappropriate
  75. Add point Subtract point

    Wow, great tut, thank you for taking the time to write this :)

    Flag as inappropriate
  76. Add point Subtract point

    can i download this psd please…

    Flag as inappropriate
  77. Add point Subtract point
    เพลงใหม่ล่าสุด (1 Point) February 1, 2010 at 11:17 pm

    Excellent post. Thanks17

    Flag as inappropriate
  78. Add point Subtract point
    ฟังเพลงใหม่ (1 Point) February 1, 2010 at 1:21 am

    Excellent post. Thanks12

    Flag as inappropriate
  79. Add point Subtract point
    โค้ดเพลงhi5 (1 Point) January 30, 2010 at 8:29 am

    Thanks for your post , Great post.

    Flag as inappropriate
  80. Add point Subtract point

    awesome! i like it so much i’m using it for my site. made a few change, but kept the overall look. anyone having trouble coding to html+css feel free to email me!

    Flag as inappropriate
  81. Add point Subtract point
    The best (1 Point) January 26, 2010 at 12:47 pm

    The best I have ever seen.

    I will be eternally grateful.

    Flag as inappropriate
  82. Add point Subtract point

    Great tutorial. Very easy to follow!

    Flag as inappropriate
  83. Add point Subtract point

    WHY CANT I SEE ANY OF THE PICTURES =(

    Flag as inappropriate
  84. Add point Subtract point
    Styles Creative (1 Point) January 13, 2010 at 4:04 pm

    is there a part 2?

    Flag as inappropriate
  85. Add point Subtract point
    William (1 Point) January 13, 2010 at 4:02 pm

    very nice tutorial. definatley one of the best on the web.

    Flag as inappropriate
  86. Add point Subtract point

    one of the best tutorials i’ve seen so far. but where is part 2? from psd to html its very good

    Flag as inappropriate
  87. Add point Subtract point

    its very good tutorials for me its very good& help full

    Flag as inappropriate
  88. Add point Subtract point

    its very good tutorials for me its very good& help full

    Flag as inappropriate
  89. Add point Subtract point

    What an excellent tutorial. It was a great learning and was precise too. I just loved the outcome and will make sure to follow all your Photoshop tutorials on PSDBURN

    Flag as inappropriate
  90. Add point Subtract point

    nice man,
    I appreciate for the free tutorials but how do i get this into css?
    help?????
    thanx man..

    Flag as inappropriate
    • Add point Subtract point
      Sibi Gauer (0 Points) January 14, 2010 at 9:28 pm

      Pure CSS? It will be a nightmare to you, untill you trow it on the wall. You can make it nice with css and tables. You can try with grid, but… One question: Why on earth make styles to one thing well definitive as a website full of gradients and images and color? If you want make it for css you must think it to css. To apply therefore, and edit or change as well.

      Flag as inappropriate
  91. Add point Subtract point
    Maheedhar (1 Point) January 8, 2010 at 6:25 am

    i really like the amount of detailing in the layout,

    it was helpful

    thanks

    Flag as inappropriate
  92. Add point Subtract point
    Maheedhar (1 Point) January 8, 2010 at 6:25 am

    i really like the amount of detailing in the layout,

    it was helput

    thanks

    Flag as inappropriate
  93. Add point Subtract point
    Alejandro (1 Point) January 4, 2010 at 6:03 pm

    GREAT !!!!!

    But, I’d like to learn about HTML… I working on a tutorial on the web, but it’s kind of confusing… :S

    I’d like to hear from you about it. I know You’ll make it seem so easy !!!

    Flag as inappropriate
  94. Add point Subtract point
    hellsing (1 Point) December 30, 2009 at 6:05 pm

    The best tutorial I’ve ever seen! Lots of techniques, good lookin’ final result. A must for every beginners like me! Thanks a lot!

    Flag as inappropriate
  95. Add point Subtract point
    Pieter Prenen (1 Point) December 30, 2009 at 2:59 am

    That looks great… think I am going to use some elements of this tutorial… thnks

    Flag as inappropriate
  96. Add point Subtract point

    one question why using photoshot instead of fireworks for build webpages?

    Flag as inappropriate
  97. Add point Subtract point

    Amazing. Never knew so much went into the design of one web page. Especially the amount of effort that went into creating a button is mind boggling.

    Flag as inappropriate
  98. Add point Subtract point
    Sapphiro (1 Point) December 22, 2009 at 3:35 am

    Heya, this tutorial looks good, but I’m stuck at step 2, may I know how you manage to do that nice “gradient” of colors with just the Soft Brush tool with 300px? The end result of mine turned out ugly compared to that shown in the tutorial. :p

    Flag as inappropriate
  99. Add point Subtract point
    Jash Sayani (1 Point) December 16, 2009 at 6:45 pm

    The Best Web Design Tutorial so far!!

    I love the outcome. And its detailed!

    Flag as inappropriate
  100. Add point Subtract point

    one of the best tutorials i’ve seen so far. but where is part 2? from psd to html!

    Flag as inappropriate
  101. Add point Subtract point
    Dravalley Support Community (1 Point) December 13, 2009 at 4:31 pm

    very nice tutorial and a beautiful outcome. will try this as soon as possible. i wonder what my outcome will be.

    Flag as inappropriate
  102. Add point Subtract point

    Niiiice,
    but, i was in trouble when implementing into css :D

    Flag as inappropriate
  103. Add point Subtract point

    By the illustration of the whole steps, everything is very easy. Thus it should ordinarily be.

    Flag as inappropriate
  104. Add point Subtract point

    Very Nice. Sleek and smooth and very effective.
    Bravo.

    Flag as inappropriate
  105. Add point Subtract point
    Candy Collins (1 Point) December 4, 2009 at 9:53 am

    Great tutorial, a lot of nice technics and touches.

    Candy.

    Flag as inappropriate
  106. Add point Subtract point
    Ravindran (2 Points) December 3, 2009 at 6:02 am

    great! Awesome work… Thanks a lot.

    Flag as inappropriate
  107. Add point Subtract point

    these tutorials are great but i need help with the next step…. scripting and implementing to web with the dynamic factor. please help

    Flag as inappropriate
  108. Add point Subtract point

    very amazing :D …. tried it and it works :d

    Thank YOU

    Flag as inappropriate
  109. Add point Subtract point

    nice tutorial, lots of little nice touches.

    Flag as inappropriate
  110. Add point Subtract point

    Thank you for good information

    Flag as inappropriate
  111. Add point Subtract point
    Zahlungspraxis (1 Point) November 24, 2009 at 5:19 am

    This design looks great. I really love it.

    @rahuljin
    you can use the guidlines in Photoshop to devide all elements on the page (as nav, content area, sidebar etc.). Then you have a kind of a grid that you just have to cut step by step and then implement it into your css code – which is a bit of work and needs some css skills.
    cheers,
    Tim

    Flag as inappropriate
  112. Add point Subtract point
    Lauren Jordan (2 Points) November 17, 2009 at 5:40 pm

    I just have to say this this is one of the best tutorial websites I’ve visited. I will keep coming back for more!

    Flag as inappropriate
  113. Add point Subtract point
    Quick Link Now (1 Point) November 14, 2009 at 5:40 am

    hey, great layout.. and tutorial is great too…

    thank you for sharing this with us….

    Flag as inappropriate
  114. Add point Subtract point
    Ayesha Nipa (1 Point) November 11, 2009 at 11:24 pm

    too many things i have learn from this article.very nice job!thanks to share..

    Flag as inappropriate
  115. Add point Subtract point

    Very inspiring, fired up photoshop because of this.

    Flag as inappropriate
  116. Add point Subtract point

    Bravo. Very nice tutorial and design.

    Flag as inappropriate
  117. Add point Subtract point
    Agilius (2 Points) November 9, 2009 at 1:15 am

    Great outcome. The tutorial itself is easy to follow but… This site, will not be easily coded in Tabeless CSS. Any tips on making that backgronud scale to the edges of the browsers?
    What happens if I have a 2000px wide resolution?

    Flag as inappropriate
  118. Add point Subtract point
    The Frosty (1 Point) November 2, 2009 at 9:58 pm

    Very complex and detailed tutorial!

    Flag as inappropriate
  119. Add point Subtract point

    nice design…but d main thing is building how do i do dat cos i’m so new 2 d world of web designs

    Flag as inappropriate
  120. Add point Subtract point
    clippingimages (2 Points) October 28, 2009 at 4:29 pm

    WoW :) Awesome tutorials. Thanks for sharing this nice post.

    Flag as inappropriate
  121. Add point Subtract point
    mp3free (1 Point) October 28, 2009 at 9:03 am

    Information is very useful

    Flag as inappropriate
  122. Add point Subtract point
    Mohamed Soumare (1 Point) October 27, 2009 at 12:30 am

    This is the best website I’ve learned Photoshop from. I have a suggestion though, next time try to put the text explanation before the graphic rather than after.

    Excellent Job!

    Thanks

    Flag as inappropriate
  123. Add point Subtract point
    Mohamed (1 Point) October 24, 2009 at 6:54 pm

    This tutorial was really useful, I learned a lot from it. You’ve done a great work man! Thank you

    Hope you the best all the time

    Flag as inappropriate
  124. Add point Subtract point
    MaxEmil (1 Point) October 23, 2009 at 4:11 am

    This is an awsome tutorial! The right juice on so many places, thanks alot for the great work.

    Flag as inappropriate
  125. Add point Subtract point
    Bruce Valle (1 Point) October 21, 2009 at 7:59 am

    Excellent, i learn a lot!!!

    Flag as inappropriate
  126. Add point Subtract point

    How do you convert such excellent design into HTML/CSS?

    Flag as inappropriate
  127. Add point Subtract point
    Kowshar Ahmed (1 Point) October 16, 2009 at 6:49 am

    Great tutorial. Thanks

    Flag as inappropriate
  128. Add point Subtract point
    Photoshop Tutorials (1 Point) October 15, 2009 at 9:26 am

    Great layout WOW! I LOVE it..
    Please do some more of theese tutorials.

    Flag as inappropriate
  129. Add point Subtract point
    Colin Cavaliere (1 Point) October 11, 2009 at 12:56 pm

    Such a complete tutorial! I wish all tutorials were this great! thanks!

    Flag as inappropriate
  130. Add point Subtract point
    Daniel (1 Point) October 4, 2009 at 2:49 pm

    cool what some people already have on it, too bad only a few of them offer it for free

    Flag as inappropriate
  131. Add point Subtract point
    strony (2 Points) October 3, 2009 at 2:19 pm

    Excellent tutorial! I would be interested in seeing how you create the html for this css included.

    Flag as inappropriate
  132. Add point Subtract point

    Good job… Liked the overall colour-scheme a lot

    Flag as inappropriate
  133. Add point Subtract point

    THat’s perfect.. but how do a make that a wordpress theme now?

    Flag as inappropriate
  134. Add point Subtract point

    How i can built a Blogger Template with Photoshop?

    Flag as inappropriate
  135. Add point Subtract point

    that was soo cool!!!!!!

    I have a small question: after building such website/template in photoshop, how is it published? or should I add the links and the other things through website-designing programms like front page or dream-weaver??
    could someone guide me to a website that could help me…

    thanks

    Flag as inappropriate
  136. Add point Subtract point
    Canada Web Solutions (1 Point) September 26, 2009 at 1:14 am

    nice design and tutorial too…

    added to my bookmarks…

    Regards,
    QuickLinkNow

    Flag as inappropriate
  137. Add point Subtract point
    Alex Peterson (1 Point) September 25, 2009 at 8:04 am

    What an in-depth tutorial. Some really nice touches to remember. How have I manged to neglect the mosaic filter!! Expect to see about a million sites based on this tutorial now :)

    Flag as inappropriate
  138. Add point Subtract point
    Cameron Baney (1 Point) September 21, 2009 at 1:18 pm

    Wow, what an in depth tutorial! This is a great article to learn how to create the design, or just inspiration for a design.

    Flag as inappropriate
  139. Add point Subtract point

    Very useful and well explained tutorial – thanks.

    Flag as inappropriate
  140. Add point Subtract point

    Really good job, it takes a lot of effort and time to make such a good and detailed in depth tutorial. thanks!

    Flag as inappropriate
  141. Add point Subtract point
    Manny C. (1 Point) September 12, 2009 at 4:11 am

    Woow, that’s a tutorial , i loved it so much . it was so instructive and easy to execute , thanks man , you are the best. Don’t keep posting those tut. Thanks again.

    Flag as inappropriate
  142. Add point Subtract point

    It was beautiful Template and coolest guid! Very detailed tutorial.
    Thanks

    Flag as inappropriate
  143. Add point Subtract point
    Douglas Dog (1 Point) September 9, 2009 at 6:05 am

    That was really good to follow… do you have any more of these layouty tutorials for Photoshop? Thanks for sharing.

    Flag as inappropriate
  144. Add point Subtract point

    Really good guide! Easy to understand though sometime you left out from top or bottom with some gradients and such but it was easy figuring out since you said “Do as i did”, and you had great pictures showing just how! I made a really nice site of this and learned alot on the way

    Flag as inappropriate
  145. Add point Subtract point

    incredible, really incredible. that is the type of webiste I like. The pixel background is so cool and goes perfectly with the black box there. so nice !

    Flag as inappropriate
  146. Add point Subtract point

    I copied the template now, at least more or less, and would like to try to build it into a wordpress theme

    Flag as inappropriate
  147. Add point Subtract point
    Smashing Themes (1 Point) September 4, 2009 at 2:32 pm

    The advantage of reading such articles is that, at the end you have learned just more than creating the template, instead now you know more than one tricks.

    Thanks for writing up this detailed tutorial.

    Flag as inappropriate
  148. Add point Subtract point

    Excellent tutorial! I would be interested in seeing how you create the html for this css included.

    Flag as inappropriate
  149. Add point Subtract point
    trAnce-Aholic (1 Point) September 3, 2009 at 2:04 pm

    Very Good and effective…Thnx!
    Please do come up with more good stuff like this….

    Flag as inappropriate
  150. Add point Subtract point
    graphicbeacon (1 Point) September 3, 2009 at 11:37 am

    nice tutorial…the quality is amazing. I definetely learnt some stuff to implement in the improvement of my site.

    Thanks again :)

    Flag as inappropriate
  151. Add point Subtract point
    webtechnepal (1 Point) September 2, 2009 at 2:32 am

    I love this tutorial. I learn a lot. thank you so much.

    Flag as inappropriate
  152. Add point Subtract point

    very very nice tutorial and wonderful template,pity that it can not be downloaded

    Flag as inappropriate
  153. Add point Subtract point
    Photoshop (1 Point) August 29, 2009 at 3:56 am

    Mosaic background is fantastic. I’ll try. Another layouts is professional

    Flag as inappropriate
  154. Add point Subtract point

    Thanks for this great tutorial. I know that it takes a lot of time and effort for you to do this. I’m currently learning web design in school and this tutorial is helping me to learn some design concepts. Again its a great tutorial but if I could add or request only one thing it would be to include the dimensions that you used for each shaped/layer etc as this would enable me to follow the tutorial more exactly as I ran into problems. Again I want to reiterate that this is a great tutorial and thanks for taking the time to make it.

    Flag as inappropriate
  155. Add point Subtract point

    Superb……a great tutorial…

    do you have another tutorial explaning the conversion of this one into html and css…..that would have help beginners like me….

    Flag as inappropriate
  156. Add point Subtract point

    very, very nice design, how i can download it?!

    Flag as inappropriate
  157. Add point Subtract point

    Look this is nice and all but some of you don’t know how to work with image maps it seems. That’s programming I wouldn’t suggest mixing the two

    Flag as inappropriate
  158. Add point Subtract point
    Kathy G (1 Point) August 21, 2009 at 7:52 pm

    This was a very well-done tutorial providing a lot of great practice in a variety of tools, effects and techniques. Thank you, Ciursă, for taking the time to put it together and Tutorial9 for making it available to everyone.

    Flag as inappropriate
  159. Add point Subtract point
    web design hastings (1 Point) August 21, 2009 at 7:16 pm

    Love the top layer design with mosaic effect! Kind of got me inspired for an upcoming project I have to work on! thanks for post!

    Flag as inappropriate
  160. Add point Subtract point
    Blastyle (1 Point) August 21, 2009 at 12:06 pm

    Very good tutorial- thank you!

    Flag as inappropriate
  161. Add point Subtract point
    ismail (1 Point) August 21, 2009 at 9:20 am

    Thanks alot i will try to work on this one

    Flag as inappropriate
  162. Add point Subtract point
    Clay Jackson (1 Point) August 21, 2009 at 12:51 am

    I love this look. Thanks!

    Flag as inappropriate
  163. Add point Subtract point
    herzevekil (1 Point) August 20, 2009 at 8:46 am

    Thanks a lot, great work..

    Flag as inappropriate
  164. Add point Subtract point
    Edy Saputra (1 Point) August 19, 2009 at 4:39 am

    im love this tutorial very much….

    Thx

    Flag as inappropriate
  165. Add point Subtract point
    Desh Nidhi (1 Point) August 18, 2009 at 7:21 am

    Gr8 Ui but content need little bright but overall it look awesome

    Flag as inappropriate
  166. Add point Subtract point
    Fabian (1 Point) August 18, 2009 at 6:30 am

    Looks very nice! But I’m new to ‘web design’ and don’t understand how to get a website (with php, css and all this stuff) out of this single psd-file. Are there any tuts on this?

    Flag as inappropriate
  167. Add point Subtract point
    Fabian (1 Point) August 18, 2009 at 6:30 am

    Looks very nice! But I’m new to ‘web design’ and don’t understand how to get a website (with php, css and all this stuff) out of this single psd-file. Are there any tuts?

    Flag as inappropriate
  168. Add point Subtract point
    imediapixel (1 Point) August 17, 2009 at 10:02 pm

    Nice color design…

    Thank you.

    Flag as inappropriate
  169. Add point Subtract point
    Ivan Mišić (2 Points) August 17, 2009 at 5:00 pm

    Great site… full of inspiration, thx

    Flag as inappropriate
  170. Add point Subtract point

    Just amazing. That is one of my favorite tutorials ever.
    I want to translate the lesson on my own language.
    I hope you don’t mind.
    Of course i will put a link to your site in the end of my post.

    Best regards !
    Dobromir Ivanov
    Bulgaria

    Flag as inappropriate
  171. Add point Subtract point
    Diana Elaine (1 Point) August 16, 2009 at 12:02 pm

    May I ask: do you then place this into Dreamweaver … and how do you add the ‘links’?

    Thank you
    Diana

    Flag as inappropriate
  172. Add point Subtract point
    cocuk oyunları (1 Point) August 15, 2009 at 6:33 am

    thank you so much very nice

    Flag as inappropriate
  173. Add point Subtract point
    Motaz M. El-Shazly (1 Point) August 10, 2009 at 4:56 am

    I can see the hard word u put in it and the results are amazing.

    Thank you!

    Flag as inappropriate
  174. Add point Subtract point
    Dubrovnik (1 Point) August 9, 2009 at 10:50 am

    Perfect in any way !

    ..will use it for sure, thnx.

    Best wishes,
    Dubrovnik

    Flag as inappropriate
  175. Add point Subtract point
    Vinay prasad (1 Point) August 7, 2009 at 2:37 am

    Hi… I got very much impressed by seein ths tutorial…
    Cal u plz mail me all vedio or ths kind of tutorial..
    Wil b very thankful to u if u forward asup..

    regaurds,
    Vinay prasad
    vshelvankar@yahoo.co.in

    Flag as inappropriate
  176. Add point Subtract point
    Amanda (1 Point) August 6, 2009 at 11:05 am

    Excellent! This layout is so clean and practical. Great job to the designer and to you for the tutorial writeup. Your site truly inspires!

    Flag as inappropriate
  177. Add point Subtract point
    web design teesside (1 Point) August 3, 2009 at 5:33 am

    This is a great site. Full of inspiration. I love it.

    Flag as inappropriate
  178. Add point Subtract point
    rahuljin (1 Point) August 1, 2009 at 7:11 am

    very nice tutorial. thanks.

    please tell me how to slice and use it to make a web page.

    Flag as inappropriate
  179. Add point Subtract point
    Joshua (1 Point) August 1, 2009 at 2:43 am

    Very useful:D thanks a lot.

    Flag as inappropriate
  180. Add point Subtract point
    anonymous (1 Point) July 30, 2009 at 4:22 am

    no its not pointless, which is why the title says web LAYOUT. not creating a website. whats your point.

    Flag as inappropriate
  181. Add point Subtract point
    davethemac (1 Point) July 29, 2009 at 2:10 pm

    in the real world the creative makes the picture of the website and then hands off the psd to the techie guys who slice and dice the picture of the website and then type away frantically for a bit, and voila, you have the web site and not just the picture. By the way, when you load a page in your browser, do you shut your eyes and then click about randomly with the mouse? Or is do you look at the site and see that picture first? Its those few seconds before you click or type that the vast majority of people decide to stay on the site, or just go on to another one… so not so much pointless as it is crucial… (rant over)
    Thank you Ciursă :)

    Flag as inappropriate
  182. Add point Subtract point
    Dila (2 Points) July 29, 2009 at 2:08 pm

    Thanks for the thorough tutorial. I’ll practice it some day.

    Flag as inappropriate
  183. Add point Subtract point
    css newbie (1 Point) July 29, 2009 at 7:55 am

    very useful tutorial

    Flag as inappropriate
  184. Add point Subtract point
    Heiko (1 Point) July 27, 2009 at 6:37 am

    @Arkady
    It’s not pointless – just slice the elements as the navigation or the header etc. and write some CSS code – this is the way a lot of webdesigners work as far as I know. Design in Photoshop and the programming in CSS and use the image slices from psd file –
    So this tutorial is just great if you got the time –
    How to create a site out of psd is to find at css-tricks – com.

    Perfect tutorial – bookmarked

    Heiko

    Flag as inappropriate
  185. Add point Subtract point
    d65blade (1 Point) July 27, 2009 at 3:07 am

    Thanks for this post. What great effort and detailed instructions that you’ve put into this post. It’s highly appreciated. It’s very well laid out.

    Flag as inappropriate
  186. Add point Subtract point
    Anthony (1 Point) July 26, 2009 at 2:38 pm

    Great tutorial thanks :D

    Flag as inappropriate
  187. Add point Subtract point
    zvin_21 (1 Point) July 26, 2009 at 2:28 pm

    ouuuuuh That’s what i’m talk’in about
    Crazy tut
    what can i say thnks
    merci
    grazie
    gracias
    danke

    Flag as inappropriate
  188. Add point Subtract point

    awesome tutorial….great…. :)

    Flag as inappropriate
  189. Add point Subtract point
    Olga Na (1 Point) July 25, 2009 at 2:53 pm

    it’s cool…..
    i luv it…. step by step and very detail

    Flag as inappropriate
  190. Add point Subtract point
    Arkady (1 Point) July 24, 2009 at 12:34 pm

    But what’s the point. It’s not a website. It’s a picture of a website. A non-existent website. It’s pointless.

    Flag as inappropriate
  191. Add point Subtract point
    Jean-Sien (1 Point) July 23, 2009 at 6:16 am

    Thanx so much, great tutorial, crystal clear layers and layers groups organization!

    Flag as inappropriate
  192. Add point Subtract point
    Liviu (1 Point) July 21, 2009 at 6:51 pm

    Wow, really awesome tutorial, very well explained!!
    Grants!

    Flag as inappropriate
  193. Add point Subtract point
    recluze (1 Point) July 21, 2009 at 12:00 am

    Amazing tutorial and beautiful design. Thanks for writing this.

    Flag as inappropriate
  194. Add point Subtract point
    Ashely Adams : Sticker Printing (1 Point) July 20, 2009 at 3:23 am

    What a great post! I have bookmarked it. It is a very detailed and informative tutorial. This will be helpful not only for the students and casual designers, but also for the professionals who have problem with color management. Can anyone give detailed information about ICC profiles?

    Flag as inappropriate
  195. Add point Subtract point
    Dejan (1 Point) July 19, 2009 at 5:27 pm

    Great tutorial man!
    Really step by step. . .
    Thanx a lot!

    Flag as inappropriate
  196. Add point Subtract point
    iMerry (1 Point) July 18, 2009 at 12:27 pm

    But you aren’t able to really use the things for a webpage, right?

    (I am a noob, a big one)

    Flag as inappropriate
  197. Add point Subtract point

    Hi,

    you wanted to make a tut about these screenshotimages like that one on the top…

    when do we get this? :)

    Flag as inappropriate
  198. Add point Subtract point

    good and simple, thank you for sharing

    Flag as inappropriate
  199. Add point Subtract point
    kanouf (1 Point) July 15, 2009 at 6:50 pm

    Really complete and…what to say much than just thank you.!

    Flag as inappropriate
  200. Add point Subtract point
    age401 (1 Point) July 15, 2009 at 4:29 pm

    Not only a great tutorial but PRECISE to the very last detail, And when sometimes some of us are not that great with color management or other bits and a tutorial goes this far into every detail, it’s a bless and an invitation to relax and enjoy. Very nice design and harmony.
    A couple of days ago I found myself needing to design a back-end for some of the websites I’ve designed and to do so quickly I used your tutorial. I’ll sure link back to this post in my back-ends.
    Thanks a lot!

    Flag as inappropriate
  201. Add point Subtract point
    caimps (1 Point) July 15, 2009 at 1:41 pm

    very excellent tutorials…super…I just gone through it. Thank you..

    Flag as inappropriate
  202. Add point Subtract point
    prafuldass (1 Point) July 14, 2009 at 10:52 pm

    Awesome tutorial! thanks

    Flag as inappropriate
  203. Add point Subtract point
    Csaba (1 Point) July 14, 2009 at 8:05 am

    Wow.. Cool tutorial. Thank you.

    Flag as inappropriate
  204. Add point Subtract point
    Vipstrong (1 Point) July 11, 2009 at 3:40 am

    Hi, that’s very good…

    Flag as inappropriate
  205. Add point Subtract point
    Roziek (2 Points) July 10, 2009 at 10:43 am

    Great tut!

    Would it be possible for you to write tut strictly connected to this one? What I mean is: how to code this particular design?

    It could be like two part tut: first how to design, then second how to code it :).

    Flag as inappropriate
  206. Add point Subtract point

    Fantastic insight into brilliant design. Really is a nice design layout adopting the current trends. Helps dramatically with the process. Thank you.

    Flag as inappropriate
  207. Add point Subtract point
    web tasarım izmir (1 Point) July 9, 2009 at 5:56 pm

    you are my hero

    Flag as inappropriate
  208. Add point Subtract point
    battica (1 Point) July 8, 2009 at 9:24 am

    ..some great new ideas in some of those design elements! thanks!! :D

    Flag as inappropriate
  209. Add point Subtract point
    Ticket Crave (1 Point) July 6, 2009 at 4:14 am

    Wow. Really great tutorial. You’ve outlined each step so well, it would hard to match that quality!

    Thanks for laying out all the steps and explaining everything for someone who doesn’t have that much creativity and foresight :)
    Looks great!

    Flag as inappropriate
  210. Add point Subtract point
    Carl – Web Courses Bangkok (1 Point) July 5, 2009 at 2:20 am

    Stunning! Love it!
    Think we will use something like this for our Intermediate Design students!

    Love to see how you then turn this into HTML/CSS

    C

    Flag as inappropriate
  211. Add point Subtract point
    Tony (2 Points) July 4, 2009 at 11:40 pm

    That’s cool.Well,how can I get the PSD file?Thank you!

    Flag as inappropriate
  212. Add point Subtract point
    andres (1 Point) July 3, 2009 at 2:58 pm

    Omg, you are really masters in potoshop, im so confused, jajaa…i try to follow this tutorials, is really impresionant, high level of design…

    Flag as inappropriate
  213. Add point Subtract point
    Jonathan (1 Point) July 2, 2009 at 6:24 pm

    what font is the logo ? I really want to know it looks great with it

    Flag as inappropriate
  214. Add point Subtract point

    very well done, I love the simplicity and thoughtfulness to details.

    Flag as inappropriate
  215. Add point Subtract point
    arlene (1 Point) June 30, 2009 at 12:41 am

    wow! thank you for posting… amazing tutorial…

    Flag as inappropriate
  216. Add point Subtract point
    ithemesdotnet (1 Point) June 29, 2009 at 7:24 pm

    PFS. Pretty Freakin’ Sweet. I need to start messing around with Photoshop more. :-(

    Flag as inappropriate
  217. Add point Subtract point
    Eric Shafer (1 Point) June 29, 2009 at 2:28 pm

    Freakin’ beautiful, thank you so much for this tutorial.

    Featured here: http://www.presidiacreative.com/best-of-the-web-27/

    Flag as inappropriate
  218. Add point Subtract point
    Web Design Company India (1 Point) June 29, 2009 at 7:06 am

    Nice tutorials. Thanks for sharing it

    Flag as inappropriate
  219. Add point Subtract point
    Michelle (4 Points) June 29, 2009 at 1:28 am

    Hey this tutorial is really good, and am sure everyone must be saying that but I some how feel that we tend to get stuck with one standard pattern of design (in terms of structure and layout) not cause its good but its safe. And to make it look good and different play with the colors.

    Well its okay even then, but then why can’t design be made from the point of view that its practical.
    So that irrespective of the Browser or Machine or the internet speed you have a nice, beautiful, usable and fast loading page.

    Being an designer I think execution is equally important. I would have been like the others but the truth is, such designs are good only for a select audience. Design is a process that defines a solution to help people achieve their goals.
    So what use is this design if I have to wait for 30 seconds for the page to load.

    Bottom line I don’t mean to criticize, but am just saying why cant we create simple designs that on their own are beautiful and serve the purpose.

    Having said all this, I still appreciate the author’s effort and work in making and posting this work.

    Flag as inappropriate
  220. Add point Subtract point
    Chanel (1 Point) June 28, 2009 at 10:56 am

    Awesome tutorial, lots of great techniques shared.

    Flag as inappropriate
  221. Add point Subtract point
    Armig Esfahani (1 Point) June 28, 2009 at 3:37 am

    so much to learn from you guys! i loved the way the separators were created in the menu and how the three columns were made.. sometimes these two are really confusing for me..

    Flag as inappropriate
  222. Add point Subtract point
    Graphic Design (0 Points) June 28, 2009 at 2:34 am

    Why would I want to replicate what you have already done? Reverse engineering doesn’t aid creativity.
    Thanks for the post anyway.

    Flag as inappropriate
  223. Add point Subtract point
    Shawn (1 Point) June 27, 2009 at 6:21 pm

    Great tutorial and design, but do you have a tutorial on how to export that design and optimize and code it so it can be used as a site?

    Flag as inappropriate
  224. Add point Subtract point

    I like it, Its a nice Tutor, but I dont know how to apply it to my website, need tutor please..Thanks

    Flag as inappropriate
  225. Add point Subtract point
    labtech (1 Point) June 26, 2009 at 1:30 pm

    @Kalyan – It is a tutorial. It have only show the technic. Wich result you create is your part.

    Flag as inappropriate
  226. Add point Subtract point

    Looks really good, I like the colors. I just saw the Griminati layout on Theme Forest. I’m impressed!

    Flag as inappropriate
  227. Add point Subtract point

    Really nice design, it’s ironic because I was just looking at this template on Theme Forest.

    Flag as inappropriate
  228. Add point Subtract point
    Peter (1 Point) June 25, 2009 at 5:20 pm

    OR you could use the approach of Google.

    Step 1: Avoid all of this graphic design crap, and use plain html with standard colors and fonts that people are familiar with and like.
    Step 2: Provide something actually useful on your site

    This whole article (and the graphic design “industry” (scam)) is nothing more than a temporary victory of style over substance.

    Do you not understand one of the big reasons why windows has been successful, is the consistent look and feel of applications. We don’t need or want a whole new set of revolting colors and fonts for each stupid web site we visit.

    Flag as inappropriate
    • Add point Subtract point

      style over substance? why not a comfortable balance between the two? the style adds a touch of individuality to the presentation of a website. I like being able to differentiate the factors between two decisions.

      Flag as inappropriate
    • Add point Subtract point

      You, sir are an idiot. Graphic design is a scam? Almost everything you see was created my a graphic designer. you know how dull your world would look if everything was white and black, white backgrounds and black text? Its the internet, business’s DO\ create clients with excellent online websites. Your an idiot. Don’t comment on graphic design tutorials.

      Flag as inappropriate
  229. Add point Subtract point
    Kalyan (1 Point) June 25, 2009 at 12:30 pm

    Nice!
    I like the design up to the header.. but I feel that the body content part (News.. Our Services) looks incomplete.
    Is it just me?

    Flag as inappropriate
  230. Add point Subtract point
    finalanimestop (1 Point) June 25, 2009 at 7:11 am

    WOW. Honestly, this is the best tutorial I’ve EVER seen regarding this. Lovely. Just wonderful. Hey, you think I could pay you to make something for me? I’m actually serious :) I would love to have one of your grand creations for my website (not the blog, but my actual site). I’ll be around :)

    Flag as inappropriate
  231. Add point Subtract point
    Homepage erstellen (1 Point) June 25, 2009 at 5:49 am

    this is an pretty good tutorial nice work and thanks a lot for it!

    Flag as inappropriate
  232. Add point Subtract point
    Homepage erstellen (0 Points) June 25, 2009 at 5:47 am

    Woow super work!
    I like this tut :)

    Flag as inappropriate
  233. Add point Subtract point
    mdhb2 (0 Points) June 23, 2009 at 10:19 pm

    very nice and detail tutorial !!

    GREAT!!

    Flag as inappropriate
  234. Add point Subtract point
    Linda Walton aka bobbysgirlforever (0 Points) June 23, 2009 at 6:09 pm

    Thank you SO much for this WONDERFUL tutorial!!! I’ve run across a few that I’ve tucked away, but this is clean and concise – KUDOS!

    Flag as inappropriate
  235. Add point Subtract point
    Crestron graphics (0 Points) June 23, 2009 at 1:46 pm

    Good tutorial. I design touchpanel templates and I’m always looking for tips that will help me design good looking background images. This has some great inspirational ideas in it, thanks!

    Flag as inappropriate
  236. Add point Subtract point
    Sonali (1 Point) June 23, 2009 at 12:05 pm

    Thanks a lot for this nice tutorial. I love this colorful web layout. You have explained it step by step and easy to understand. Thanks again.
    Also, I would like to know, how to make Slicing and coding for this layout. Thanks.

    Flag as inappropriate
  237. Add point Subtract point
    Adam Trojanczyk (1 Point) June 23, 2009 at 10:00 am

    Wow!
    Great job I love it!

    Flag as inappropriate
  238. Add point Subtract point
    Thomas (1 Point) June 23, 2009 at 3:00 am

    Excellent Tutorial, The Final result is really good

    Flag as inappropriate
  239. Add point Subtract point
    B.Kim (1 Point) June 22, 2009 at 7:36 pm

    Great awesome tutorial!!
    How to publish this nice web layout to the WEB [html]?
    Anyone wanna help?

    Flag as inappropriate
  240. Add point Subtract point

    Great tutorial with some brilliant attention to detail! It’s the small things that make a difference!

    Good job :)

    Flag as inappropriate
  241. Add point Subtract point
    Michael (1 Point) June 21, 2009 at 5:22 pm

    nice and colorful :) good work

    Flag as inappropriate
  242. Add point Subtract point

    very useful tutorial,Thanks.

    Flag as inappropriate
  243. Add point Subtract point
    Sergiu (1 Point) June 21, 2009 at 6:37 am

    nice tutorial, but it would be nicer if you would create a tutorial about: how to code this design for a template….. just a idea

    Flag as inappropriate
  244. Add point Subtract point
    mohsen (1 Point) June 20, 2009 at 5:20 pm

    tank you for this education :)

    Flag as inappropriate
  245. Add point Subtract point
    Elinix (1 Point) June 20, 2009 at 7:16 am

    wow the outcome is fantastic i will be giving this ago:)

    Flag as inappropriate
  246. Add point Subtract point
    CgBaran Tuts (1 Point) June 20, 2009 at 7:03 am

    Great layout thanks

    Flag as inappropriate
  247. Add point Subtract point
    Sakis (2 Points) June 19, 2009 at 11:22 am

    wow!!! Step by step! Wonderful!

    Flag as inappropriate
  248. Add point Subtract point
    nszumowski (0 Points) June 18, 2009 at 9:31 pm

    thanks, this is a great design!
    i’d like to see how it will be sliced up and implemented in a functional page…

    Flag as inappropriate
  249. Add point Subtract point
    Craigsnedeker (1 Point) June 18, 2009 at 8:31 am

    This is Awesome! Thx!

    Flag as inappropriate
  250. Add point Subtract point

    Great tutorial. While I may not want to make a replica of the result it does teach quite a few useful techniques.

    Flag as inappropriate
  251. Add point Subtract point

    FANTASTIC tutorial! I’ve been a huge fan of this site and the resources offered here for a while but this really took things to the next level.

    I can’t believe you give this stuff away for free! Some of the things I’ve learned on this site aren’t even covered in $50 books!

    Thanks for all the fantastic work! :)

    Flag as inappropriate
  252. Add point Subtract point

    If you were trying to gather sympathy about your use of Windows… well, you succeeded.

    Flag as inappropriate
  253. Add point Subtract point
    Harish (1 Point) June 17, 2009 at 7:41 am

    NICE Tuturial, Great Job, very Use full, Thanks

    Flag as inappropriate
  254. Add point Subtract point

    I really like the design and tutorial however I do not think this is corporate as suggested by the title on the image.

    I’d love to see someone take a real stab at producing a corporate website design. A corp website has to deliver product messaging for a huge array of products, it has to convey the business, it has to be engaging and has to provide a look & feel which is transferrable to all tiers of information on the site.

    Flag as inappropriate
  255. Add point Subtract point

    WOW i use dreamweaver but this is my first to see a tut for web design in photoshop and you did well than dreamweaver.
    Thanks and we all hope you’ll bring more great tut like this one :)

    Flag as inappropriate
  256. Add point Subtract point
    jojosiao (1 Point) June 17, 2009 at 1:43 am

    Hi nice tuts!

    can I use your tutorial and create a corporate web template using GIMP?

    Flag as inappropriate
  257. Add point Subtract point

    cool! Im looking this one.. Thank you so much!

    Flag as inappropriate
  258. Add point Subtract point
    Cyrille (1 Point) June 16, 2009 at 5:11 pm

    Anybody knows the font name used for the logo in this tutorial ?

    Flag as inappropriate
  259. Add point Subtract point
    Albert Santiago (1 Point) June 16, 2009 at 3:04 pm

    I hope there will be a tutorial on how to make it fully functional soon… AWESOME TUTORIAL though!

    Flag as inappropriate
  260. Add point Subtract point
    T-Law (1 Point) June 16, 2009 at 1:02 pm

    Fantastic tutorial, big thanks.

    Flag as inappropriate
  261. Add point Subtract point
    Kiran Voleti (1 Point) June 16, 2009 at 12:45 pm

    Wonderful tutorial very useful and detailed.

    Flag as inappropriate
  262. Add point Subtract point

    Absolutely amazing tutorial especially for beginners. Great thanks!

    Flag as inappropriate
  263. Add point Subtract point
    Gary Noden (1 Point) June 16, 2009 at 11:14 am

    Fantastic. Absolutely Fantastic!

    Flag as inappropriate
  264. Add point Subtract point
    Adam Lowe (1 Point) June 16, 2009 at 10:42 am

    Really solid tutorial. Thanks!

    Flag as inappropriate
  265. Add point Subtract point
    Cyrille (0 Points) June 16, 2009 at 10:04 am

    Sorry for my question but I’m a newby in photoshop design world. My question is simple : what was the name of the logo font ?

    Flag as inappropriate
  266. Add point Subtract point
    Revenue Robot (1 Point) June 16, 2009 at 9:11 am

    this is an amazing tutorial… very clean and professional looking! I bookmarked it for future client use… thanks!

    Flag as inappropriate
  267. Add point Subtract point
    Agustin Ruiz (1 Point) June 16, 2009 at 9:02 am

    Nice, I really like that style, very trendy and neat.

    ;)

    Flag as inappropriate
  268. Add point Subtract point

    Wow, it’s really nice.
    Is there going to be a second part on how to create the HTML/CSS?

    cheers

    Flag as inappropriate
  269. Add point Subtract point

    Great tutorial.

    Will be sure to try it out.

    Ed

    Flag as inappropriate
  270. Add point Subtract point
    evertt de sousa (1 Point) June 16, 2009 at 8:17 am

    very nice tutorial :)
    thanks

    Flag as inappropriate
  271. Add point Subtract point
    Benjamin Reid (1 Point) June 16, 2009 at 7:53 am

    Nice tutorial, but it would be much nicer to have a screen-cast to accompany it.

    It’d be also nice to explain why you chose some of your design elements (like colour etc…), rather than do this, do that.

    Flag as inappropriate
  272. Add point Subtract point
    Marcell (1 Point) June 16, 2009 at 7:44 am

    I love the outcome. Very well explain tutorial. 5/5!

    Flag as inappropriate
  273. Add point Subtract point
    CSS Websites (1 Point) June 16, 2009 at 7:42 am

    Thanks, very nice tutorial!

    Flag as inappropriate
  274. Add point Subtract point
    Quirijn (1 Point) June 16, 2009 at 6:46 am

    Great tut! I’m just wondering how you can upload this to the real web to actually use this? Any programs suitable for that?

    Flag as inappropriate
  275. Add point Subtract point
    Cucu Tudor Ionel (Crimzprod.) (1 Point) June 16, 2009 at 6:24 am

    I didn’t try to create one similar,but it will be usefull for my webpage desings in future.

    I didn’t know so far how to create a film grain.

    And overall it looks profy.

    Nice work !

    Flag as inappropriate
  276. Add point Subtract point
    Magdy (2 Points) June 16, 2009 at 6:10 am

    Beautiful, thanks so much man for this tutorial, it helps so much! keep the beautiful work :]

    Flag as inappropriate
  277. Add point Subtract point
    Daniel Jones (1 Point) June 16, 2009 at 6:06 am

    Awesome tutorial! thanks for this! I might take some of the tips here away with me and use them on my new portfolio website!

    Thanks guys!

    Flag as inappropriate
  278. Add point Subtract point
    Gerrit (1 Point) June 16, 2009 at 5:23 am

    This tutorial is awesome..
    Well written and the result looks really cool, thanks!

    Flag as inappropriate
  279. Add point Subtract point
    Arthur E.B. (1 Point) June 16, 2009 at 4:11 am

    excellent tutorial! i really dig the background ;)
    I’ll try this out. Thank you so much, Ciursă & Tutorial9! :)

    Flag as inappropriate