Menu

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

Advertisement

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.

This was published on May 20, 2009

188 Comments

Catalin May 20 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.

thanks! it looks very nice

joris_lucius May 20 2009

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

Roseli A. Bakar May 20 2009

Thanks Jan for the easy to follow tutorials !

Raymond Selda May 20 2009

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

Looks good. The tutorial is pretty well written!

Mohammad May 20 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 20 2009

excellent tutorial. thanks for posting.

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 20 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 20 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 20 2009

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

Jacob Gube May 20 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.

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.

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.

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

Matt Anderson May 20 2009

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

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.

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

Then put it on DIGG…

genieyclo May 20 2009

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

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.

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.

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

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

THANK YOU !

Nice & well portrayed design jacob…

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

mindxstudio May 21 2009

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

OneMuslim May 21 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.

Nicely done mate! Expecting more how to like this.

Mark Harrison May 21 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 21 2009

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

Jacob Gube May 21 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”).

great tutorial but now I cant wait till part 2.

Matthew Heidenreich May 21 2009

nice tut with a simple result…great job

Nice outcome, very clean. Thanks!

Cool und very good tutorial.

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

hadi060 May 21 2009

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

Antonio May 21 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 21 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 21 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 21 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 22 2009

Thanks great tutorial. Awesome!!!

mark domingo May 22 2009

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

Claire Web May 22 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.

Very Nice…Clean and Effective

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

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 22 2009

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

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

Cubanoid Designs May 22 2009

Really nice..

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 22 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!

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 22 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!

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

Jacob Gube May 23 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 23 2009

How do you measure the size of it in PXs?

Jacob Gube May 23 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 23 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 23 2009

Looks awesome, thanks alot!

Anarian May 24 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 25 2009

Very nice, this helps me a lot!

Fuad Ahasan Chowdhury May 26 2009

Good job Jacob :)

3faycom May 26 2009

Nice tutorial, looks great and is very creative.

Very nice!

Farid Hadi May 26 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!

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

When is part 2 up?

Jacob Gube May 27 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 27 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 27 2009

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

Vince Stevenson May 27 2009

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

nice tutorial, well worth a tweet or two…

Jacob Gube May 28 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.

jQuery please :)

Kevin Price May 28 2009

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

Cheers

Kev
C8-)

Jacob Gube May 28 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 29 2009

Eagerly waiting for the follow up :)

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

Manisha May 29 2009

Nice layout – well done job :)

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

Good stuff…. nice simple and straight

Jacob Gube May 29 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 31 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 Jun 01 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 Jun 01 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 Jun 02 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 Jun 03 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.

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.

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 Jun 04 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!

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 Jun 07 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 Jun 09 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.

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!

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.

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 Jun 27 2009

another excellent tutorial im following it. Thanks for 960!

andrew 12 Jun 28 2009

Nice tut

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

Jacob Gube Jul 01 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 Jul 03 2009

nice tutorial.

thank you for great tutorial

Kingsley Jul 23 2009

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

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

Johnny Quest Jul 28 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 Aug 02 2009

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

Jessica Aug 03 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.

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 Aug 07 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.

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

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?

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 Aug 28 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.

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

studioCs Sep 23 2009

Like this step by step tutorial!
Simple and elegant.

hey …

I ‘ve got 1 word for ya…

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

Svetainiu kurimas Oct 13 2009

Fantastic tute man!

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 Nov 11 2009

Very nice tutorial thank for share…

AlienTYC Nov 27 2009

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

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

Vitaliy Dec 06 2009

Nice article !!! Clean and Simple.

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

Nicely laid out. Thanks for the great tutorial

super nicetutorila, thank you

SYSTEMEDIC Dec 25 2009

Very good;)

Berita aceh terkini Dec 31 2009

Great! Nice Tutorial. Thanks for sharing.

srilaxmi Jan 27 2010

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

Alejandro Jan 29 2010

Simple, and fast…!

Excellent Tutorial!!! Thanks..!

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

Very helpful tutorial.AWESOME JAN!Thanq

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

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)

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

Good Idea….
Thanks…

I love this. great tutor. Thanks a lot.

Mahmudur Rahman Mar 18 2010

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

Mahmudur Rahman Mar 18 2010

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

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.

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

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

Ramalho Apr 09 2010

Hi WEB Family,

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

Thanks for sharing.

Mayweather Mosley Apr 15 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.

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 Apr 18 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 Apr 20 2010

Nice tutorial bro, thanks for sharing,,

Nocturnal Apr 30 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 10 2010

its nice tutorial

Viva LastMinute May 27 2010

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

Not a bad tutorial.

Mayweather Jun 03 2010

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

JOSE DIAZ Jun 28 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.

very good tutorial.

Edgardo Jul 06 2010

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

Ed

Very great tutorial
It’s so suseful for me

thanks a lot

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

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

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

Thanks guys! ;-)

sinaYstudio Aug 24 2010

Thanks for tutorial! :-)

wparena Aug 25 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 Sep 14 2010

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

thanks alot

Raghvandra Kumar Sep 15 2010

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

Anthony Sep 22 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.

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

Hi Jacob,

Whatever happened to the psd to html tutorials?

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

=(

This is so great, thanks so much.

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 Jan 18 2011

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

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 Jan 27 2011

Thanks dear!

J. Hendrix Mar 17 2011

Great design, great tutorial.. thanks!

thanks! it looks very nice

Jesse Phillips Apr 22 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!

Nice tutorial! Well explained and easy to follow.

kanchan May 12 2011

awesome………………realy…..

buzztrip May 13 2011

really awesome! thank a lot!

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.

this is a very esay and importent site .

Praveen Aug 09 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 Aug 11 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.

too good for beginners

Razibul Hassan Sep 13 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 Sep 29 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 :)

Great lesson=))Thank you!!!

Saurabh Chaudhary Nov 01 2011

nice designe =+= Thanks

Abigail Monaco Nov 29 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 Oct 10 2012

got Some helpful hints from your tutorial Thanks

This comment section is closed. Please contact us if you have important new information about this post.

Advertisements
Partners