Six Revisions Home All Articles Tutorials Freebies About Contact Follow on Twitter Subscribe: RSS Feed | Email

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

May 20th, 2009 by Jan Cavan | 96 Comments | Stumble It! Delicious

1118 diggs

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.

Setting up the document

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

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:

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.

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.

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

6 Apply these Layer Style settings to each rounded rectangle:

Your rounded rectangle should now look like this:

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

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.

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.

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:

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.

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.

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.

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.

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 theiraccompanying 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.

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

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!

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.

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.

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.

Connect the lines just like this:

Fill the empty areas with white to achieve this result:

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:

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

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:

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!

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 beenposted.

Part 1: How to Create a Clean Web 2.0 Style Web Design in Photoshop Part 2: Coding a Clean Web 2.0 Style Web Design from Photoshop

Related content

How to Create a “Worn Paper” Web Layout Using Photoshop How to Create a Slick and Clean Button in Photoshop How to Create a Sleek and Textured Web Layout in Photoshop

About the Author

Jan Cavan is a web/graphic designer. She is also a blogger and the owner of Dawghouse Design Studio, her personal site. If you would like to connect with her, Follow her on Twitter.

96 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

retweet

310tweets

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 thelighter 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 aboutthe 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.

Cubanoid Designs

May 22nd, 2009

Really nice..

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

Fuad Ahasan Chowdhury

May 26th, 2009

Good job Jacob :)

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

KevC8-)

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 differentlevels, 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 overallby 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, howevercame 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 bars3 * 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.

Leave a Comment

Name (required)

email (will not be published) used for Gravatars (required)

Website

Sponsors

Submit Comment

Subscribers

Search

Topics

AJAX CSS

Search

Design Showcase / Inspiration Flash Freebies Graphic Design JavaScript Photoshop Project Management Resources Tools Tutorials Usability / Accessibility User Interface Web Applications Web Design Web Development Web Standards WordPress

Recent

Feedback. The Creativity Killer. 26 Beautiful Photoshop Tutorials on Designing Posters How to Create a Grunge Web Design Using Photoshop Six Revisions Mobile Version Officially Live! 20 Creative and Unique Typefaces

Jobs from AllDevJobs.com

Biztalk Developer Position in MN (Minneapolis, MN) WEB DEVELOPER / .NET DEVELOPER – EDINBURGH (Edinburgh, Scotland (EH3)) Junior PHP Developer (Toronto, ON, Canada)

Friends

Blog.SpoonGraphics Chris Wallace Css Globe Design Bump

DesignM.ag Function LaptopLogic.com Naldz Graphics NETTUTS Noupe psdfan.com PSDVIBE [Re]Encoded.com Smashing Apps Smashing Magazine Stylegala Stylized Web TheBestDesigns.com Vandelay Design Walyou Webdesigner Depot Web Design Ledger

©2009 Six Revisions. All Rights Reserved. Theme Design by Jacob Gube. Six Revisions mobile version by Mobify.