How to Create a Clean Web 2.0 Style Web Design in Photoshop

May 20 2009 by Jan Cavan | 188 Comments

How to Create a Clean Web 2.0 Style Web Design in Photoshop

In this Photoshop web design tutorial, you’ll learn, step-by-step, how to create a stunning and clean web layout. You’ll be using some basic to intermediate-level techniques to build your very own sleek "Web 2.0" style web design that uses the 960 Grid System.

This is a two-part series that will teach you how to create the layout in Photoshop, and then how to convert it to a standards-compliant (X)HTML web design.

Final Result

Clicking on the image below will take you to the full-scale version of the web layout that we’ll be designing in this tutorial.

Final Result.

Setting up the document

1 Create a new document in Photoshop with the dimensions 1200px x 1050px.

Setting up the document.

Creating the background

2 Now, we will be creating the background. Select the Gradient Tool (G). Make sure it is set to Linear Gradient. Set the foreground color to #a1e8fe and background color to #59d3fa and create a gradient like below:

Creating the background.

Placing the Grid System into the document

3 On a new layer, create a 960px wide grid – 12 bars, each bar at 60px wide. Place each bar 20px apart from each other. Place the grid at the center of the document. The grids should serve as your guide and it is recommended that the main elements of your design do not exceed the width of the grid. The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. Go to the 960 Grid System site for more information, or download the Grid system here.

Grid System.

Making containers for the logo and navigation items

4 We will now be creating the containers for the logo and the navigation items. To create the containers, use the Rounded Rectangle Tool with Shape Layers selected. Set the radius to 10px.

Making containers for the logo and navigation items

Making containers for the logo and navigation items

5 Create a rounded rectangle 300px wide. Create a second rounded rectangle 620px wide; they should be situated on the grid as follows:

Making containers for the logo and navigation items

6 Apply these Layer Style settings to each rounded rectangle:

Making containers for the logo and navigation items

Making containers for the logo and navigation items

Your rounded rectangle should now look like this:

Making containers for the logo and navigation items

Inputing the logo and navigation text

7 To create the navigation items, use the Type Tool (T). Use the color #5f5f5f. In this case, I used the font Rockwell. Add the navigation items to the second rectangle and the company logo (current logo being used is just a fictional name for a design agency) to the first.

Making containers for the logo and navigation items

Making separators for navigation items

8 On a new layer, let us add a separator in between each navigation item. Here I added a line with the color #dedede.

separators.

9 Duplicate the separator. Use Layer > Layer Style > Blending Options > Color Overlay and change the duplicate’s color to #ffffff. Move the duplicate one pixel to the right. This will create a subtle engraved effect.

Separators.

Creating the site header

10 Now let’s create the header below the logo and the navigation. Using the Type Tool (T), add the company tagline and a brief introduction below it. Let us then add a slight Drop Shadow to it to give it more dimension.

Site header.

11 To fill up the empty space next to the tagline, add a photo of a computer or laptop. This is what you should have by now:

site header.

Create a rounded button

12 Below the brief introduction, with the use of the Rounded Rectangle Tool with 28px radius, create a button that says "Learn More". This is very helpful so that if users want to find out more about your company, this information is easily accessible.

Learn More.

Apply a Gradient Overlay to the button using the settings above with #086da0 as the bottom color and #23a7ea as the top color.

Creating a call-to-action box

13 Using the Rounded Rectangle Tool once again with 16px radius, create a 300px rectangle. Go to Blending Options and add a Drop Shadow with the same values as Step 6.

Radius.

14 Select the rectangle we just created (Cmd/Ctrl + Click) and create a new layer above this rectangle. Add a light blue (#96e3fc) to transparent gradient over the rectangle.

Rectangle selection.

15 Move this gradient one pixel up. This may be a very minute detail but let us be keen to that. It somehow makes it look a little different as opposed to having just an ordinary gradient box.

Gradient Box.

Crafting a call-to-action button

16 This box will serve as a call-to-action button. These are helpful if you want users to find important information on your site all at one glance. Let us add a heading, some description, and an icon to our buttons. Icons, as small as they may seem, help bring more appeal to your designs. They also assist users in promptly finding what they are looking for because icons communicate messages to users without them having to read their accompanying texts.

The awesome icons I am using in this tutorial are from Wilson Ink on DeviantArt. You can check them out and download them; The icon set is called the Green and Blue Icon Set. These icons are free for personal use only; if you intend to use the design in tutorial for commercial purposes, substitute these icons to one that allows you to do so.

call to action.

17 Duplicate the box we just created along with its content twice, and then distribute them across the grid evenly. Change the content of the two new boxes as you please. It’s recommended that you change the content of each box rather than just duplicating them and having them all the same. This makes the design look more like a real, navigable website rather than just a lazily done mockup (helpful for presenting to clients).

Duplicate.

18 To add more content to the design, we can add some text below the three boxes, for example, a newsletter section would be great. But don’t forget to keep everything inside the grid!

Add content.

Last but not least… the footer

19 Next, we create the footer where we can add the copyright and the contact information for the website.

Footer.

Icing on the cake: creating the diagonal lines

20 Create a new document in Photoshop with the dimensions 25px x 25px and fill the entire document with a black (#000000) background.

New Document

21 On top of the layer with the black background, create a new layer. Using the Zoom Tool (Z), zoom in the document to its maximum size so we can see clearly. Set the Pencil Tool to 1px and foreground color to white (#FFFFFF). Draw lines on your document just like the picture below. Take note of how many pixels you need to draw and which areas on the document you need to draw them on.

New Layer.

Connect the lines just like this:

Connect the lines.

Fill the empty areas with white to achieve this result:

Final result of pattern.

22 Hide the layer with the black background and go to Edit > Define Pattern. The layer with the black background was created only to make the white more visible. Name your brush “diagonals” and hit OK.

23 Now let us go back to the mockup we just created. Create a new layer above the gradient background. Go to Edit > Fill and on the Contents dropdown, use Pattern. Click on Custom Pattern and look for the pattern we just created named “diagonals” and hit OK. You should see something like this:

Diagonals.

24 Set this layer’s Blend Mode to Overlay and its Opacity to 4%. You should now have something like this:

Change Blend Mode.

25 From bottom to top and using an ordinary feathered eraser, erase off about 60% of the diagonal lines to make it look like this:

Erase some.

Details.

26 Voila! We now have a very clean, nice-looking, Web 2.0 style website design! Stay tuned for the follow-up tutorial where Jacob will show you how to convert this design into a working (X)HTML template!

Final.

The "Clean Web 2.0 Style Web Design" Series

This article is part one of a two-part series that shows you how to create a design in Photoshop, then how to code it into a valid (X)HTML web design. The next post is already published, and you can get to it via the link below will be published next week.

To see more tutorials such as this one, you should subscribe to the Six Revisions RSS feed, which will let you know whenever a tutorial has been posted.

Related content

About the Author

Jan Cavan is a Designer, Front End Developer and Illustrator, whose work has been featured in various online publications, books and magazines worldwide. She runs Dawghouse Design Studio, which is also a design blog providing tutorials, freebies and inspiration for the design community. Connect with her on TwitterFacebook, and Dribbble.

188 Comments

Catalin

May 20th, 2009

Why don’t you align the monitor graphic to the grid? it’s about the same size the column under it but offset… doesn’t look good.

And i don’t understand the placement of the “learn more” button.

Bartek

May 20th, 2009

thanks! it looks very nice

joris_lucius

May 20th, 2009

Nice tutorial, it keeps hard to exactly define what is ’2.0′. But this really looks like it!

Roseli A. Bakar

May 20th, 2009

Thanks Jan for the easy to follow tutorials !

Raymond Selda

May 20th, 2009

Wow! I really like this layout. Gonna work on this one tonight. Thank you

Dennis

May 20th, 2009

Looks good. The tutorial is pretty well written!

Mohammad

May 20th, 2009

hi jacob , i’m from iran.i cant speak and writing english language good but i sending comment , because i’m web developer and your fixed blog visitors.

tanx

honour chick

May 20th, 2009

excellent tutorial. thanks for posting.

Andrew

May 20th, 2009

Interesting solution, definitely achieves that Web 2.0 clean feeling.

A few critical points… Everything seems crushed into the space, vertically. Some of the elements might be a bit “over-sized” for this solution. The keyboard under the monitor is incredibly small and not necessary. Also, I would have flipped the background to go from dark to light (since all the lighter elements are at the top and the darker ones near the bottom, it feels unbalanced.)

Sorry, I don’t mean to be a nit-picker. I do like the design.

Jacob Gube

May 20th, 2009

Thank you everyone for your very positive comments. I’m trying to get Jan to write more tutorials for us so you guys and gals have to help me! :)

@Catalin: I can see your point, you could easily align the monitor to the right-hand side grid, same alignment as the navigation layer. To me though, I like that subtle “break” out of the rigid grid – it’s that subtle imperfection that makes the design stand out. I read an interesting article a couple of months back on A List Apart about imperfections in design, check it out if you have the time: “The Elegance of Imperfection“.

@Andrew: No, it’s not nit-picky, please share your honest opinions; I encourage that here on Six Revisions because I think as a group, we can tease out places where we can improve. I see your points, and it’s important to note that there’s a lot of room for tweaking your own designs; Jan set dimensions she thinks, based on her professional experience, is the most optimal for the design – you’re encouraged to explore and experiment with different settings to get the results you want. That type of stuff, to me, is subjective, “eye-of-the-beholder” type of deal; some may say it’s too crushed together, some may say we need less space. In the end, you have to leave it to your creative discretion to make that call, and again – the tutorial gives you a lot of places where you can tweak the design. The constraint she has placed on her design is that it should follow the 960 Grid System developed by Nathan Smith. I myself prefer breaking out of the grid, or at least, refraining from using a generic and set system like the 960 Grid System. I’m not saying not to use the system, but rather, that in my personal tastes and philosophies, I don’t particularly like rigid and set structures.

Ryan Glover

May 20th, 2009

Cool layout and great use of 960. I’m a huge fan of very simple designs and would love to see more like this. Great job!

Marty Desilets

May 20th, 2009

Nice tutorial -> just stop calling it 2.0 its just the internet. Seriously

Jacob Gube

May 20th, 2009

Oh and just a bit of background on Jan Cavan, the author of this tutorial, she was very modest in her bio section, so let me expound on it a bit.

She’s a web/graphic designer. Her personal portfolio/blog site, Dawghouse Design Studio, has been featured in pretty much all of the top CSS gallery sites like Best Web Gallery and CSS Drive.

Her work has also been featured in Web Designer and .NET magazine, we know this in the U.S. as “Practical Web Design”, but Barnes and Nobles usually distributes both versions. Probably the top two web design magazines out there right now, coincidentally also my favorite magazines. Read more about that story on her site.

Just thought ya’ll would like to know just a bit more about Jan.

Matt

May 20th, 2009

How are the diagonal lines in step 20 added to the design?

I assume it’s a pattern fill, but I can’t find it in the presets.

Vaughn

May 20th, 2009

I wouldn’t call this Web 2.0 at all – this movement/aesthetic happened way after the web 2.0 boom. Whatever it’s called though, you nailed it.

EricB

May 20th, 2009

Thanks, Jan & Jacob for sharing this! I am looking forward for a tutorial to convert to xhtml/css 2.0 site.

Matt Anderson

May 20th, 2009

Nice tutorial, looks great and is very creative. Can’t wait for the next part, thanks Jacob!

Raul

May 20th, 2009

The design overall just looks unprofessional. The typography is poorly laid out, the gradients are too radical (didn’t you guys just post a gradient inspiration post??), and the design isn’t usable. A mediocre post from 6R in my opinion.

Daniel

May 20th, 2009

Could someone write this tutorial for GIMP or do something similar FOR GIMP?

Then put it on DIGG…

genieyclo

May 20th, 2009

As others have said above, this is not Web 2.0. You have misunderstood the concept if you think it is.

sam

May 20th, 2009

I love it.

I am an amateur designer. The problem I have with these type of tutorials is it doesn’t scale very well. I mean they look great initially. Then users start adding content or removing content and the design is not balanced anymore.

Jarryd

May 20th, 2009

I almost didn’t visit this tutorial because of the title, please…PLEASE stop using ‘Web 2.0′! :) It’s just a buzzword that gets clients excited and makes them feel like they know what they are talking about when they say it, haha.

Whether the phrase is used or not, a very lovely design.

John

May 20th, 2009

hi, what has a photoshop tutorial got to do with website design? thanks for the photoshop basic tips though!

Miah

May 21st, 2009

AWESOME !! i have been waiting for something like this for ever !!

THANK YOU !

Jaan

May 21st, 2009

Nice & well portrayed design jacob…

Am

May 21st, 2009

Very cookie cutter approach – easy to understand with great graphics to guide in every step. Makes it look a breeze. Well done!

mindxstudio

May 21st, 2009

Thanks and very much for such tutorial, I love it.

OneMuslim

May 21st, 2009

Okay, I already following the design tutorial here step by step and waiting for your next post on how to convert it. I hope that should be free coding service or DIY rather than just submit to one of the long list of available websites that giving those service.

Kamrul

May 21st, 2009

Nicely done mate! Expecting more how to like this.

Mark Harrison

May 21st, 2009

This is awesome and for the first time ever, I have been able to follow a tutorial step by step! Thank you so much for making it simple (so far…)

emoracket

May 21st, 2009

So simple and Unique….that is the one of my favourite tutorials

Jacob Gube

May 21st, 2009

@Mark Harrison: What a positive response, that’s exactly the intention of these tutorials, to allow you to follow step-by-step. I got tired of seeing these web tutorials that just sort of gets you stuck on a section because of ambiguous directions; what color did they use, how did they achieve that effect, what dimensions did they use, what tool in Photoshop did they use to get it to look like that, etc. The conversion follow-up tutorial will be in the same format, it’s aimed at beginners but we’ll be covering some best practices like CSS background text image replacement, CSS sprites, and… I wanted to keep this as a surprise… some cool JavaScript animation effects for certain components (which is the optional section, the “icing on the cake”).

DC

May 21st, 2009

great tutorial but now I cant wait till part 2.

Matthew Heidenreich

May 21st, 2009

nice tut with a simple result…great job

Tyler

May 21st, 2009

Nice outcome, very clean. Thanks!

Albi

May 21st, 2009

Cool und very good tutorial.

Aghper

May 21st, 2009

A video tutorial would have been nice to see all the steps.

hadi060

May 21st, 2009

I like it so much! It looks very nice and really Web 2.0 :)
Thanks very much for this nice tutorial.

Antonio

May 21st, 2009

SO AWESOME! Very clean, simple. And easy to understand. I don’t have photoshop, and use inkscape and gimp to do most of my designs. It was so clear that I easily transfered these ideas using open source tools. Thank you and please keep it up!

Duncan McDowell

May 21st, 2009

Jacob et. al:

I’ve been involved in webdesign for many years now and I have always used illustrator for my preliminary design work. What advantages would there be for me to make the switch to working primarily in photoshop.

Thanks!

e11world

May 21st, 2009

This is the first time I see a really good use of the grids and actually made me want to use them in my designs from now on. Thanks!

Mike Varela

May 21st, 2009

Hi,
I’ve followed similar tutorials, and while they do help in learning design, they ALWAYS fall short at the end. You seem very precise at the get go, then seem to run out of time, especially at the end when you put the “Icing on the cake”. I’m a newbie and would have liked to know how to go about the diagonal lines. Also, there seems to be fade effects on the text, but with no instruction on how to do them. I understand that I might be in the minority, but when a “How To” is made, it should have instructions for each part, not just the first half.

In any case, thanks.

LithiumMind

May 22nd, 2009

Thanks great tutorial. Awesome!!!

mark domingo

May 22nd, 2009

nice tips. I think I have to use this on my site. very clean and nice.

Claire Web

May 22nd, 2009

A beautifull but very basic web design. I think having a good structure and then really powerful logos and images. Really works, and shows people just how easy with a basic photoshop knowledge, how to create something fantastic.

Karan

May 22nd, 2009

Very Nice…Clean and Effective

Jake

May 22nd, 2009

Awesome tutorial, really simple and clean but also effective! Great for beginner web designers trying to learn how to design mockups with Photoshop, too.

Chris

May 22nd, 2009

A couple have mentioned wanting to see a complete tutorial – including how the diagonal lines were made, text shading, etc. The great thing about web tutorials, compared with print, is that the authors COULD easily update it by adding these items. Hint, hint. :-)

I, too, have gone through many other tutorials that aren’t quite complete. They leave out just enough pertinent details. Goes to prove both design AND instructional writing are fields that each have their own requirements for success.

Nice work overall.

Jacob Gube

May 22nd, 2009

@Chris: I get the not-so-subtle hint. :) We’ll update the tutorial with instructions on how to incorporate the diagonal lines.

Jan

May 22nd, 2009

To everyone who enjoyed the tutorial, thank you so much! :) We’ll be posting the instructions on how to create the diagonal lines shortly.

Jesse

May 22nd, 2009

Yeah, here’s another shout-out for the diagonal lines. My only qualm with creating comps in PS is that you create an unrealistic expectation in the client that the finished product will look *exactly* like the comp. I’m leaning more towards 37signals insistence to skip PS comps altogether http://www.37signals.com/svn/posts/1061-why-we-skip-photoshop :)

Very Nice

May 22nd, 2009

Really cool tutorial. The design really looks web 2.0ish a tutorial giving an overview of every single step to a nice looking web 2.0 design from sketching on a napkin, to coding it would be appreciated. Thanks and keep up with the good posts!

Flyb

May 22nd, 2009

8 On a new layer, let us add a separator in between each navigation item. Here I added a line with the color #dedede.

how to add a line?

Jacob Gube

May 22nd, 2009

@Matt, @Chris, @Jesse, et. al: Man Jan works really fast. She sent me the update just a few hours after reading your comments. The tutorial is now updated with instructions on how to create the diagonal lines in the background. Enjoy!

And of course, Thanks @Jan!

Jan

May 23rd, 2009

You’re welcome, Jacob! Thanks too! And to everyone else, thank you and enjoy!

Jacob Gube

May 23rd, 2009

@Flyb: Thanks for the question, this is the stuff we want you to ask, to point out places where the instructions were not clear; in other words, don’t be shy, we won’t judge you — we’re gearing this towards beginners and if you don’t ask, we won’t know what’s wrong. To me, it was clear, but I’ve been using Photoshop for 8 years.

To do that, use the Rectangular Marquee Tool (M), create a selection that is 1px wide and as high as the navigation bar. If you used the exact dimension of the tutorial, that height would be 56px, but Jan didn’t specify a height so use whatever height you used.

The best way to do this, to be more precise, is to use the Style option drop-down of the Rectangular Marquee Tool, and set that value Fixed. Then put 1px for the width, and enter the value of the height of your navigation bar.

With the selection made, use the Edit > Fill… (Shift + F5) to fill the line in with the color Jan suggested.

Let me know if that cleared things up or if you’re still having trouble.

Anarian

May 23rd, 2009

How do you measure the size of it in PXs?

Jacob Gube

May 23rd, 2009

@Anarian: You have to change your Photoshop’s Units & Rulers settings. To do this, go to Edit > Preferences > Units & Rulers.

Then in the Rulers and Type Drop-down box, select pixels.

Let me know if that works for you.

Penelope Else

May 23rd, 2009

Thanks guys, you’re darlings!

I’m a newbie using Fireworks, not Photoshop, but it doesn’t matter – the concepts are the same, it seems – so I’m discovering ALL sorts of functions that I just didn’t realise were there, and ways to apply them.

Of course, now I’m becoming a design snob.

Cheers m’dears!

Martijn

May 23rd, 2009

Looks awesome, thanks alot!

Anarian

May 24th, 2009

I managed to set it the units and rulers, but I can’t see where it would actually tell you the dimensions of it.

Tonnica

May 25th, 2009

Very nice, this helps me a lot!

3faycom

May 26th, 2009

Nice tutorial, looks great and is very creative.

SoNKkK

May 26th, 2009

Very nice!

Farid Hadi

May 26th, 2009

Great tutorial. Although, as a few have already mentioned, a few steps are left out but it was still really easy to follow. Great inspiration and nice ideas to grab from it.

Thanks a lot!

andrew

May 26th, 2009

love love love this site. thanks for the cool tutorial. i also would love to see some gimp tutorials.

Jason

May 27th, 2009

When is part 2 up?

Jacob Gube

May 27th, 2009

@Jason: This week, soon-ish. I’m still finalizing the tutorial and getting it reviewed to make sure the instructions are very clear (for beginning-level developers).

tinatoerat

May 27th, 2009

…..tap..tap…tap just waiting for part 2. Thanks, I like the look of part 1 and really want to see how to “real”ize it.

Jacob Gube

May 27th, 2009

@tinatoerat: It’s coming. This week, as promised.

Vince Stevenson

May 27th, 2009

Thanks for this really useful tutorial. I have very basic PSP skills, so this is a great help. Rgds Vince

Steve

May 27th, 2009

nice tutorial, well worth a tweet or two…

Jacob Gube

May 28th, 2009

Hey everyone: A question to the follow-up. Which JavaScript library would you like the tutorial to use: MooTools or jQuery? I’ll use the one with the most votes.

Sergej

May 28th, 2009

jQuery please :)

Kevin Price

May 28th, 2009

Nice one, looking forward to Part 2 – checking every day :)

Cheers

Kev
C8-)

Jacob Gube

May 28th, 2009

Alright. The tutorial is using jQuery.

Also, I do not typically do this, but I do also understand that people are waiting for the follow-up. So just to let everyone know, the follow-up is being published tomorrow (Friday, May 28, 2009).

Watch out for it and thanks for your patience.

Giridhar

May 29th, 2009

Eagerly waiting for the follow up :)

Daniel

May 29th, 2009

Hi there. Thank you so much. This is exatly the tutorial I have been looking for!

Manisha

May 29th, 2009

Nice layout – well done job :)

Please now submit 2nd part of the same converting XHTML/CSS of this layout. Eagerly waiting

Zahir

May 29th, 2009

Good stuff…. nice simple and straight

Jacob Gube

May 29th, 2009

To everyone who waited patiently for the follow-up tutorial: first, thank you for staying tuned, and second – the follow up tutorial is now up, you can get to it via the link in the tutorial above.

Raphaël

May 31st, 2009

I just wanted to know if I could follow the tutorial with Photoshop elements (wich I have…)..Is it possible? or there are tools who arn’t available in photoshop elements??

Thanks for the answer! :)

Jack Rugile

June 1st, 2009

Excellent tutorial. Took some time to figure out the grid and to get my elements to snap to the guides. I know that everyone here is on different levels, but that part was tricky for me. Other than that it turned out great. I am going to start the coding part tomorrow. Wish me luck :)

Thanks Jan!

- Jack Rugile

XanderGC

June 1st, 2009

What an excellent tutorial.I had a few missteps along the way, such as which fonts to use and being new to photoshop didn’t help either, but overall by the time it was over and done with I was really proud with my take on the design. It’s simple yet sleek and I think the designer who made it deserves a pat on the back. Cannot wait to try to create the code from the mockup, never done that before so it might be challenging, but well worth it. Thanks.

Check out my mockup! http://i227.photobucket.com/albums/dd294/XanderGC/web20mockupfinal.png

Mr Mutation

June 2nd, 2009

Hey, thanks for the tutorial!

I realize that a tutorial like this must assume some familiarity with Photoshop, and that the author is probably a designer and not an educator… but I think this tutorial will confuse someone with only basic Photoshop skills. I don’t think it can properly be called a “beginner” tutorial.

The problem is aspects of the process are just glossed over. Which is why I was very confused when I saw a post in the comments claiming this tutorial was NOT one of *those tutorials*, when it very clearly is.

Steps such as “create a 960px wide grid…”

This sounds simple enough, but there is NO explanation on how to do this…or even a description of what technique/tool is used! Is it a rectanguler marquee with a fill? The rectangle tool? Is there some “grid tool” that I as a hypothetical Photoshop noob am unaware of?

There is a link to the 960 grid site, but this site provides *NO* practical information for beginners and nothing that is immediately relevant to this tutorial.

The link to the templates seemed helpful at first, but you can’t easily pull the grid from them and put it into your new project here;and it’s clear that the templates provided are not how the grid in the tutorial was created!

In an effort to save space in the tutorial, you have isolated aspects of the Photoshop display/interface, leaving the beginner to hunt around the screen for a small input box, menu, ect. A better solution is a screen shot with a circle around where the input box is located and a magnified view of said input.

Steps are casually thrown around like “create a rectangle so many pixels wide”, but the accompanying graphics are not helpful…for the most part they show what you should end up with…leaving the beginner bewildered as to how they are to MEASURE this rectangle. Again, a screen capture of the actual process would have been much more instructive.

If you’re going to claim a “beginner” tutorial, you should provide a list at the beginning of what tools, techniques, and concepts are required to complete the tutorial and then either explain them or provide a link to ANOTHER tutorial that does.

The problem is this tutorial alienates the people it is the most useful to. Someone who is familiar with these techniques would only glean a little inspiration from this.

To those complaining about the “Web 2.0″ label on the tutorial, I think it is appropriate. Granted it is sort of an annoying buzz-term with limited meaning, but part of the concept of “Web 2.0″ is an aesthetic similar to that of this tutorial.

Anyway, Thank again for this tutorial and all the other great ones on this site, but keep these things in mind Please!

flashfs

June 3rd, 2009

To someone at least with a basic knowledge of Photoshop this a good tutorial to go. But I have to agree with Mr Mutation when it goes to begginers.

Bill

June 4th, 2009

Pardon my manner of expression Mr. Mutation, but with a comment like that you sound like the type of guy who asks his mom to hold his weiner while he takes a piss. From one beginner to another, this tutorial isn’t that difficult to figure out! Good luck.

Mike

June 4th, 2009

Hey, thanks for the tutorial – I’m a total beginner and just plugging away at it! Just wondering, there any way to evenly space the navigation text? So “About” would be the same distance from “Home” as it would be “Work”

Mr. Mutation

June 4th, 2009

Hey Bill. I agree for the most part it isn’t too hard. I’m no Photoshop Master (I’m a coder) but I’ve been using it a looong time and didn’t have much trouble.

I’m simply providing feedback that was *asked for* based on my experience when I was just starting out.

My main gripe is with the 960 grid step. As I stated, there is very little to even point a beginner in the right direction, it’s not even specified what tool to use.

Again, the tutorial also mentions steps like “make a box such and such size”…and then shows a picture of the finished product. A better solution would be a screen shot…then instead of the newbie wondering “how do I make a box such and such size?” They could see the guides and rulers being used, and realize they need to somehow get those to appear on their screen.

It’s little tweaks like that which give beginners the cues they need to figure out the steps. I’m not calling for unnecessary hand-holding, just consideration for those people.

It’s tempting to say, well if you don’t know how to use Photoshop, go learn it and then come back…but many learn by DOING…and a few little tweaks to your tutorial is all you need to give even a first time user some footing.

Again, great tutorial, thanks!

Daniel

June 5th, 2009

Great tut Jan – so simple, but the end product is very effective and really does look web 2.0.

I definitely think I’ll take snippets from it for my own use.

Never used the grid system before either!

Richard

June 7th, 2009

Mr. Mutation, your comment holds a lot of water. I was googling for web 2.0 templates to build a site using one of these web building tools, however came to this site, saw how clean cut the example was and downloaded a trial of Photoshop 9 to give it a whirl. 3 hours later, I have not figured out the gradient and as for the grids. I have given up. I’m by no means a technophobe and pick up new software apps extremely easily, but this is completely beyond me. And I’m one of those people who learns by doing.

Laura Godfrey

June 9th, 2009

Great tutorial!

Photoshop is a great application to create websites in. Using textures and different elements such as colour, type and imagery all contribute to the overall end design. Tutorials such as this offer great insight as to how you should properly construct your website and how you should go about planning the initial layout. I particularly like the way in which the colours all compliment each other and are reflected throughout the logo and smaller tabs.

My only criticism is that the designer who created this tutorial obviously has a background of design and therefore this may not appeal to beginners.

Jan

June 9th, 2009

To all those confused with the grids, my apologies but creating them is really beyond the scope and intention of this tutorial that’s why a download link was provided. I suggest that you download a template from http://960.gs/. Open “960_grid_12_col.psd” in Photoshop and drag “12 Col Grid” folder onto the center of your new document.

If you’re confused with the sizes of the any of the boxes, e.g. “How to create a 300px box”, just note that it is stated in Step 3 that each bar in the grid is 60px wide and 20px apart from each other. So to to create a 300px box, align it to 4 bars in the grid:

4 * 60px bars = 240px bars
3 * 20px spacing = 60px spacing (in between the 4 bars)
TOTAL = 300px

@Raphaël: I’m sorry but I haven’t tried using Photoshop Elements.

@Mike: Yes, there is, but you have to make sure that each navigation item you have is in a separate layer. Select all layers then go to Layer > Distribute > Horizontal Centers (to equal the spacing) and Layer > Distribute > Vertical Centers (to align them).

XanderGC: Wow, looks good!

To everyone who enjoyed this tutorial and found it useful, THANK YOU!

Wynter

June 9th, 2009

Awesome tutorial! Very clear and helpful :)

I see saying this is web 2.0 is bit controversial to some people, what is web 2.0 ? .. wait – don’t answer that :)

It’s a lovely design and web 2.0 is a marketing term.

Mike

June 25th, 2009

Once again, thanks for the tutorial – it really has been great learning Photoshop through this site mock-up!

Just wondering how you added that triangle in the Learn More button. I’ve been Googling around but can’t seem to find an answer!

sonnydesign

June 27th, 2009

another excellent tutorial im following it. Thanks for 960!

Romain

July 1st, 2009

Thanks for your tutorial!
How do you get the feathered eraser in PS (step 25)?

Jacob Gube

July 1st, 2009

@Romain: Just look for a soft, feathered-edge brush in the Brush palette. Personally, I would use a Soft Round Brush (and then tweak the diameter).

anderson

July 3rd, 2009

nice tutorial.

phara

July 4th, 2009

thank you for great tutorial

Kingsley

July 23rd, 2009

thanks for the expose! but how do u make drop down menu not to go understand SWF on in dreamweaver? thanks

quaym

July 27th, 2009

This is an amazing tutorial Thanks it’s helped me a lot!

Johnny Quest

July 28th, 2009

I enjoyed the use of the grid. Other than that, pretty basic stuff but very good. I almost shit myself when I first sailed over here from the Atlantic on a ricky boat which was made out of sprockets and betty crocker boxes with the recipes on them facing upward.

Jason R. Ayers

August 2nd, 2009

Thanks for the tutorial on using Photoshop to create a web 2.0 page. It will come in handy.

Jessica

August 3rd, 2009

I just finished this tutorial and I only have a few problems with. The tutorial gave the widths for the shapes but did not mention the hights. It would have been helpful to mention both width and heights.

Another detail I would have liked to have seen was the size of the font, weight, etc. All in All a good tutorial.

newguy

August 7th, 2009

hi,

this tutorial isnt for beginners lime myself.
i got to step 5,6 and stuck, the preview in my case isnt white (in the style dialog box) rather than blackish, also when i continue with the settings change.
i guess it has to do with the foreground/background color but no remark has been specified…

anyone?

Jacob Gube

August 7th, 2009

@newguy: First, set your Foreground color to white, then choose the Rounded Rectangle Tool from the Tools Panel. Set the Radius in the Options bar to something between 5-10px to get something similar to the tutorial’s rounded corners. Tell me if this helps you get it done, if not, I’ll keep trying to help.

newguy

August 7th, 2009

Thanks for the fast response.

i got the rounded rectangle, they are fine , but about the blending option (layer style) , which foreground/background color i choose before i enter that dialog , or how does the blending options tab that you used looks like?

because in the layer style dialog , there is a preview just under the “new style” button, which is or dark or white in my case, unlike your screenshots

i tried when both my foreground and background colors are white, and also when only one of them and the other is black , with no lock.

also about the gradient you selected (which i think it has to do with it) , if my foreground is white and my background is black the gradient is from white to black and not from white to gray like yours…

so my question is: given the 2 round rectangle i have, what background/foreground colors i choose, what layer style – blending options do i change, what gradient overlay ‘ s Gradient do i set and how do i set it?

thanks alot

newguy

August 7th, 2009

i think i’ve found out what you did.

i’ve randomly picked a gray color for the foreground, and white for the background.
went to layer style, then gradient overlay, chose the first pattern, then played with the bottom scale , brought it to about 34%. then clicked ok.
it came out pretty close to yours. also when i got back to that dialog afterwards the “stops” section (gradient editor) was disabled (grayed) just like in your screenshot.

is this alright?

Anil

August 12th, 2009

Hello Jan,

I like your tutorial, very nice one.
Can i ask simple basic question? why we call it as web.2 style how it different from other design . Is any parameters to design web2 style. Please guide me

Thanks
Anil
Dubai

Ontario

August 28th, 2009

Very nice, and great to see the 960 system getting some clear, practical tuts. I hope it encourages more people to try it out, for some reason frameworks have not had the adoption they probably should.
By the way Jan, great post on your blog about SEO basics for designers. That’s what brought me here.

Chris

September 17th, 2009

Great tutorial!Easy for someone like to understand.thank you

studioCs

September 23rd, 2009

Like this step by step tutorial!
Simple and elegant.

Adil

October 1st, 2009

hey …

I ‘ve got 1 word for ya…

AWESOME>>>did u listen
AWESOME>>>>> AWESOME>>>AWESOME>>>>>>>

pozed

November 6th, 2009

With this tutorial, some designers will lose their job – I’m taking over! It’s just fantastic. Thanks a million!

BTW, no designers will really lose their job :)

Rameexgfx

November 11th, 2009

Very nice tutorial thank for share…

AlienTYC

November 27th, 2009

I just completed this tutorial! A very useful one for developers like me :)

Amit

December 2nd, 2009

Fantastic tutorial, explains how easy it’s for creative designers.

Vitaliy

December 6th, 2009

Nice article !!! Clean and Simple.

Tom

December 14th, 2009

Awesome Tutorial! Cant believe I am just coming across this now. = P

Lyons

December 19th, 2009

Nicely laid out. Thanks for the great tutorial

Andy

December 22nd, 2009

super nicetutorila, thank you

Berita aceh terkini

December 31st, 2009

Great! Nice Tutorial. Thanks for sharing.

srilaxmi

January 27th, 2010

Excellent tutorial for Web designers who are new to this profession. Soooooooooo Greatttttttttttttttt

Alejandro

January 29th, 2010

Simple, and fast…!

Excellent Tutorial!!! Thanks..!

Bizz

February 9th, 2010

Great tutorial for Web Designer. Make more tutorial again jan.
Thanks a lot.

Bindu

February 16th, 2010

Very helpful tutorial.AWESOME JAN!Thanq

Rich

February 23rd, 2010

Totally agree with the principles here. I always use grids in my designs.

Javier

March 4th, 2010

Hi! This is so cool. Thanks.
But! I just can not do it properly. My bg does not work like this tutorial. The ‘repeat’ command do the diagonals looks bad.
Why?! somebody Helps me?! lol
From Argentina (Sorry about my English)

Javier

March 5th, 2010

Sorry, i put the text in the wrong place. My mistake, this go in the other post: “Coding a Clean Web 2.0 Style Web Design from Photoshop.”
Sorry :(

Deo

March 17th, 2010

Good Idea….
Thanks…

Wepasa

March 17th, 2010

I love this. great tutor. Thanks a lot.

Mahmudur Rahman

March 18th, 2010

Wow :) Awesome tutorial. Well explained. Thanks for sharing this fabulous post.

Mahmudur Rahman

March 18th, 2010

Awesome tutorial. Very nicely explained. Very clean web design. Thanks for sharing this nice post. :)

Alex

March 25th, 2010

While I am a bit lukewarm in regards to the layout of the page in this tutorial, I definitely learned a few tricks here. I also have to agree with the other commenters and say that is it is difficult to identify exactly what exactly makes this web design 2.0, but it seems that brighter colors and simplified designs (with the requisite mirror shine) makes up the bulk of it.

Jax

March 25th, 2010

Great list, thanks for posting dude this really help me a lot to get some ideas. Keep it up.

Allen

April 7th, 2010

Thanks dude, a very good tutorials, I am trying it. And psd to html?

Ramalho

April 9th, 2010

Hi WEB Family,

Very useful & Inspirational, this is what We need to follow. Excellent.

Thanks for sharing.

Mayweather Mosley

April 15th, 2010

I tried to follow your tutorial so I can use it in my own Mayweather vs Mosley site but I just had a hard time. Anyways, thanks for sharing. I’ll just ask my sisters help.

mona

April 16th, 2010

hi..its an awesome design.i tried to follow it step by step,with my own company s logo…is it possible if i send u my design over you can give me an idea where i went wrong!!

Mosley Mayweather

April 18th, 2010

I just want to change the banner of my boxing portal and hope I could go through this tutorial properly. As you can see I am not really good at graphics.

hevenleey

April 20th, 2010

Nice tutorial bro, thanks for sharing,,

Nocturnal

April 30th, 2010

It would be nice if she would have added what exact colors she used for the grey to white gradient for the two nav bars. Obviously we can pick and choose but she did add the two colors for the blue learn more button. It’s just little things like this that throw the entire tutorial off for me. I’m a newbie, obviously but so are many others who read this.

sanal şirket

May 10th, 2010

its nice tutorial

Viva LastMinute

May 27th, 2010

Thank for your tutorial. This was a great totur for me. Thanks a lot Jan.

kyle

May 27th, 2010

Not a bad tutorial.

Mayweather

June 3rd, 2010

the design is very good but i hope there would be something more like an html webpage

JOSE DIAZ

June 28th, 2010

Excellent info. in my town we use a phrase to describe this way of teaching, we say “explain me with apples”, this means explain step by step, i found this web and this tutorial extremely easy to follow. THANKS FOR SHARING YOUR KNOWLEDGE.

tom

July 6th, 2010

very good tutorial.

Edgardo

July 6th, 2010

Excelente tutorial, eh podido realizarlo con Gimp 2.6 y me ah quedado muy bonito. saludos!

Ed

arines

July 9th, 2010

Very great tutorial
It’s so suseful for me

thanks a lot

Diana

July 28th, 2010

This is a very useful and easy to follow tutorial, I really liked the small details and the process, and also the final result, simple but proffessional!

Cheers
Diana

Lionel

August 7th, 2010

Hey i like this site building way but iam confused with the tools……

Peter

August 12th, 2010

Nice tutorial! I’m even more excited about the part two on coding the design.

Thanks guys! ;-)

sinaYstudio

August 24th, 2010

Thanks for tutorial! :-)

wparena

August 25th, 2010

very nice explanation, now a days i am working on a new theme for my blog and its under design process and got very helpful hints from your tutorial..

welliam

September 14th, 2010

Please edit the tutorial to add how you made the newsletter box

thanks alot

Raghvandra Kumar

September 15th, 2010

Very Very nice tutorial, Many many thankx for sharing….

Anthony

September 22nd, 2010

Imagine am stuck…i have already downloaded the “960 Grid System”, what should i do next? Do i copy those files and paste them in my Photo-shop folder? Please explain to me step by step how to set up the Grid after i have downloaded the files…I would appreciate very much.

Joseph

November 1st, 2010

Very nice design. I made something nice starting from your tutorial.

soompi

November 2nd, 2010

Hi Jacob,

Whatever happened to the psd to html tutorials?

I realized.. all the tutorials that had the HTML counterpart are gone?

=(

Tim

November 10th, 2010

This is so great, thanks so much.

Karen

December 8th, 2010

I like learning more about photoshop techniques from the tutorial. I am curious why you specify widths for the elements, but not heights or font sizes?

Billig Ferge

January 18th, 2011

This was a very good step by step tutorial. Thanks alot :-)
Now I can start all over again with my website :-)

ev ssl

January 25th, 2011

Any chance you can upload this action or styles for download. I’m a bit stuck on 12 – but don’t have CS2, which could be the problem.

Hemant Vyas

January 27th, 2011

Thanks dear!

J. Hendrix

March 17th, 2011

Great design, great tutorial.. thanks!

fardad

April 5th, 2011

thanks! it looks very nice

Jesse Phillips

April 22nd, 2011

HOLY CRAP! This is SO HELPFUL! My first web design tutorial ever! Freaking awesome!!! Where can I find more of these? I will pay for web design screen casts! nom nom nom nom nom!

Sharon

May 9th, 2011

Nice tutorial! Well explained and easy to follow.

kanchan

May 12th, 2011

awesome………………realy…..

buzztrip

May 13th, 2011

really awesome! thank a lot!

Imran

May 22nd, 2011

Thanks Jan and Jacob.By following this single tutorial I have gained the confidence that I can design websites.

Please, keep these easy to follow and useful tutorials coming.

MEJBA

August 9th, 2011

this is a very esay and importent site .

Praveen

August 9th, 2011

Thanks for the good article – Is there any application like photoshop in linux actualy i am using wine software in linux to achieve it. any alternative?

Easy tutorial

DrummingDude

August 11th, 2011

@Praveen

GIMP is a good free alternative to Photoshop, and it is compatible with Linux as well (you might even have it on your Linux system already, as versions such as Mint have it pre-installed).It can do most everything Photoshop can, though the UI is a bit rougher.

subin

August 28th, 2011

too good for beginners

Razibul Hassan

September 13th, 2011

Really great tutorial. It’s easy to follow and final output is awesome. We’d love to see more tutorials from you Jan Cavan. Thanks for the awesome post.

kovpack

September 29th, 2011

thanx for the tutorial. i’ve also noticed, that most sites recently became of minimalistic style. but sometimes small nice things / icons will improve the overall desing :)

Sasha

October 26th, 2011

Great lesson=))Thank you!!!

Saurabh Chaudhary

November 1st, 2011

nice designe =+= Thanks

Abigail Monaco

November 29th, 2011

Hi, why not just do the ‘diagonals’ in the final step with the same color as of the bottom on the first background? it just results on a more uniform transition, but again it may just be related to the color used since I used different colors for mine. any other than that is a great tutorial.

wilburgsmith

October 10th, 2012

got Some helpful hints from your tutorial Thanks

Leave a Comment

Subscribe to the comments on this article.