Coding a Clean Web 2.0 Style Web Design from Photoshop

May 29 2009 by Jacob Gube | 139 Comments

Leading image web design from Photoshop

In this web development tutorial, you’ll learn how to build a web page template from a Photoshop mock-up from a previous tutorial called "How to Create a Clean Web 2.0 Style Web Design in Photoshop" using HTML/CSS and the jQuery library.

This is the second part of 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

Click on the figure below to see the live demonstration of the web design that you’ll be creating in this tutorial.

Final result

Download

Jan Cavan, who wrote the first part of this tutorial, has provided us with a Photoshop source file that we’ll use to build the site template. The following download contains the Photoshop file and all of the examples that are used in this tutorial.

Introduction

In this tutorial, we’ll create a fixed-width web layout using some basic coding techniques. Towards the end, we’ll enhance the design with a bit of jQuery.

Though probably not the most efficient way, for instructional purposes, we’re going to work our way from top to bottom – that is – we’re going to start from the header all the way down to the footer. Preview the examples when they are available to make sure that you are keeping up with the progress.

Prepare for a long journey and make sure you have your favorite caffeinated drink handy, because this tutorial will be a very long one! Let’s begin.

Setting up the file structure

1 Create a folder in your local machine for our template files and call it web2. This will be our working directory.

2 Inside the web2 folder, create the following:

  • img folder – will contain all images used in the tutorial.
  • index.html – our site template.
  • styles.css – our stylesheet.
  • javascript.js – this will contain our JavaScript

Set up

3 Open index.html and styles.css in your favorite text editor (we’ll deal with javascript.js later). Also, open the PSD file in Photoshop; it’s inside the clean-web-2.0-source.zip archive and it’s called web2-mockup-psd.psd.

With our file structure set up and all our files opened, we’re ready to slice, dice, and code.

Creating the diagonal background

4 In Photoshop, turn off all the layers of web2-mockup-psd except for the bottom two layers, bg and diagonal lines.

Creating the diagonal background

5 Create exactly a 20px wide selection using the Rectangular Marquee Tool (M) starting from the left side of the canvas, with the selection’s height spanning the full height of the document.

Creating the diagonal background

6 Make sure the diagonal lines layer is active, use Edit > Copy Merged (Ctrl + Shift + C) to copy the area inside the 20px wide selection. Create a new document and paste (Ctrl + V) the copied selection into the new document. Save this inside the img folder under the name bg_body.jpg.

Creating the diagonal background

Setting up the HTML and CSS files

7 Head over to index.html. The first thing we want to do is reference style.css and javascript.js in the <head> of our HTML document.

  <head>
  <link href="styles.css"  rel="stylesheet" type="text/css" />
  <script type="text/javascript"  src="javascript.js"></script>
  </head>

8 Let’s head on over to styles.css and put in some basic style rules. We’re going to take a shortcut and use the Universal Selector margin/padding CSS reset to zero out all the elements’ margins and paddings. This works a majority of the time, but it’s often better to invest some time learning about more robust CSS Reset techniques. Head on over to my article called "Resetting Your Styles with CSS Reset" to learn more about CSS Reset.

Here is the style rule declaration for resetting the margins and paddings:

 /* CSS Reset */ * { margin:0; padding:0; } 

Implementing the diagonal background

9 We’re going to repeat the 20px background we created (body_bg.jpg) horizontally. We’re going to set it as the <body> background.

  body {
    background:#59d3fa url(img/body_bg.jpg) repeat-x 0 0; } 

Awesome! Let’s preview how the background looks. In Example 1 below, you’ll see our diagonal background in action.

Example 1: Diagonal lines set as the body element’s background.

Setting up the layout’s container div

10 Let’s move into some HTML. We’ll contain our layout in a 1024px wide container div called #container.

  <body>
    <div  id="container">
      <!-- content goes here -->
    </div>
  </body>

11 We’ll give #container a width of 1024px and center it using the margin property:

  #container {
    width:1024px;
    margin:0 auto;
  }

Creating the logo

12 Let’s cut up the stuff we’ll need for our header, starting with the logo. Head over to the Photoshop file. Turn on all the layers. Create a selection around the logo that is exactly 320px and 125px wide using the Rectangular Marquee Tool (M). Use Photoshop Guides (View > Show > Guides) to make this easier and more precise. The reason you have to be exact is due to the diagonal lines in the background, everything has to align properly.

Creating header logo

13 Copy Merge (Ctrl + Shift + C) with the highest layer selected, and then paste the logo in a new document.

14 We’re going to make this into a CSS background sprite so that when users hover over it, we can show them a rollover effect. Increase the canvas size, Image > Canvas Size (Ctrl + Alt + C). Double the height of the canvas by entering 250px in the height. Change the Anchor to the top middle position.

Creating the Header: Main Navigation

15 Duplicate Layer 1, then move it down to the bottom using the Move Tool (V).

Header

16 With the duplicated layer active (Layer 1 copy), use Image > Adjustments > Replace Color… . Make sure the Image radio box is selected. Click the Color box to change the selection color, and sample somewhere towards the bottom portion of the logo (#e2e2e2). Play around with the Hue, Saturation, and Lightness values until you get an effect that you like. In the following figure, you’ll see the settings I used.

Creating the Header: Logo

17 Save the file for the web, File > Save for Web (Alt + Shift + Ctrl + S) as logo.jpg in our img folder. From now on, use the same settings for saving these files. I used the JPEG, Very High, but feel free to change these settings. If you change the default settings, be sure to save it the same way every time to provide consistency in the images.

Creating the navigation menu

18 Just like with the logo, create a selection exactly 640px by 125px.

Creating the Header: Main Navigation

19 Copy the selection (Copy Merged) and then paste it into a new document.

20 Just like in step 14, double the height of the canvas to 250px, Image > Canvas Size (Ctrl + Alt + C), and don’t forget to change the Anchor to top middle. Then again, duplicate Layer 1, and move it down to the bottom using the Move Tool (V).

Creating the Header: Main Navigation

21 Follow step 16 to replace the color for the bottom layer. I used the same setting for the selection color, #e2e2e2.

Creating the Header: Main Navigation

22 Save the file as menu.jpg inside the img folder.

Coding the Header’s HTML markup

23 Let’s switch to our HTML/CSS. First, we’ll start with the markup. Inside the #container div, we use another div to create our header section – we’ll call it #header. You may want to use a more structural naming convention though like #branding, that’s up to you. If you want to learn more about structural naming conventions, take a breather from our tutorial and read through my article on "Structural Naming Convention in CSS".

For our logo, we’ll use a <h1> heading element. Our navigation will be a standard unordered list item. Each list item’s <a> element needs an ID for the CSS rollover and because they have different widths.

  <div id="container">
    <div  id="header">
      <h1><a  href="#">Creativo</a></h1>
      <ul>
        <li id="home"><a href="#">Home</a></li>
        <li id="about"><a href="#">About</a></li>
        <li id="work"><a href="#">Work</a></li>
        <li id="contact"><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>

Styling the Logo

24 First, let’s style #header. We need to give it a top margin property so that we have some space at the top of the web page, just like our mockup. Since our content area is 960px, we’ll give #header a width of 960px. This will give us ample room on either side of the layout for scroll bars and so that when the user minimizes the web browser, there’s still a bit of margin on the left and rigth and our content is not right at the edges of the view port (making the content hard to read). We also have to center it using the auto for the right and left margins. Below, I used the margin property shorthand, and for beginners, the numbers correspond to top (90px), right (auto), bottom (0), and left (auto) margin.

#header {
  height:125px;
  width:960px;
  margin:90px auto 0 auto; } 

25 Let’s work on the logo’s style first. We transform our <h1> element into a block element. we float it to the left so that our logo and menu are side-by-side. We use the logo we created earlier (step 17) as the background, and finally indent the text to the left where it can’t be seen to hide our text. This method of replacing text with a background image is called CSS Background Image Replacement.

  #header h1 {
    display:block; float:left; width:320px; height:125px; background:url(img/logo.jpg) no-repeat 0 0; text-indent:-10000px; } 

Coding the Header's HTML markup

26 To make the logo clickable, we also need the <a> element inside the <h1> element to be a block element, and give it the same width and height at <h1>

  #header h1 a {
    display:block; width:100%; height:100%; } 

27 To enable the rollover effect, we change the background position of a:hover.

  #header h1 a:hover {
    background:url(img/logo.jpg) no-repeat 0 -125px; } 

Styling the navigation menu

28 Onto the primary navigation. We also need to convert it to a block element and float it to the right of the logo. Then we set the background to menu.jpg and remove the list item bullets.

  #header ul {
    display:block;
    float:right;
    width:640px;
    height:125px;
    background:url(img/menu.jpg) no-repeat 0 0;
    list-style:none;
  }

29 For the list items, we’ll make them into block elements as well, then float them to the right so that they display side by side. Then, just like the logo, we use text-indent to hide the text.

  #header ul li {
    display:block;
    float:left;
    height:125px;
    text-indent:-10000px; } 

30 We need to set custom widths for each list item so that the clickable area of each menu item will be accurate.

 #home { width:160px; } #about { width:137px; } #work { width:129px; } #contact { width:210px; } 

31 We set the children <a> elements of our list items to display block with a width and height equal to their parents.

  #header ul li a {
    display:block;
 width:100%; height:100%; } 

32Finally, for the hover, we adjust the background-position property of the menu.jpg sprite.

  #home a:hover {
    background:url(img/menu.jpg) no-repeat 0 -125px; } #about a:hover { background:url(img/menu.jpg) no-repeat -160px -125px; } #work a:hover { background:url(img/menu.jpg) no-repeat -297px -125px; } #contact a:hover { background:url(img/menu.jpg) no-repeat -426px -125px; } 

33 Preview your work in a web browser. Check out Example 2 below to see where we are. Hover over the logo and the menu items, they should change colors.

Example 2: The header section completed.

Creating the "Featured Area" background

Let’s call the part of the mockup with the monitor screen, text that says "Web build websites…", and "Learn More" button — "Featured Area".

Coding the Header's HTML markup

34 In the featuredarea folder in the Layers palette, turn off all the layers except for the sub-title and main-heading layers so that the "Learn More" button and the Apple monitor on the right isn’t showing.

Creating the "Featured Area" background

35 Create a selection that is exactly 960px by 360px around the "Featured Area" section.

Creating the "Featured Area" background

36 Copy this into a new document and then save it as featured_bg.jpg inside the img folder.

Creating the "Featured Area" background

Creating the "Featured Area" button

37 Let’s slice out the "Learn More" button. Turn on the learnmore folder in the Layers palette; it’s inside the taglines folder.

Creating the "Featured Area" button

38 Create a selection around the button that’s exactly 280px by 60px.

Creating the "Featured Area" button

39 Copy the selection to a new document. We’re going to make a rollover CSS sprite for this one as well. Double the height of the canvas, duplicate Layer 1, move the duplicate down to the bottom, just like in steps 14 through 17. For the selection color, I used: #0a72a6. The only Replacement value I changed was the Hue setting, and I set that to +10. Save it as learnmore.jpg inside the, you guessed it, the img folder.

Creating the Monitor image

40 The monitor on the right of the layout will just be an image. The more industrious individuals reading this tutorial will try to use that monitor as a cool little slideshow where the monitor changes content – we’re not going to cover that here today. Turn on the rest of the featuredarea folder.

41 Create a selection around the monitor, exactly 375px by 370px.

Creating the Monitor image

42 Copy it to a new document, then save it as monitor.jpg.

Coding the "Featured Area"

Now, we’re going to work on the "Featured Area" HTML and CSS. So head on over to index.html.

43 For the "Featured Area", we’re going to use a block-displayed <p> element. You can certainly use a div for this, but I chose to go with a paragraph. The "Learn More" button is an <a> element, and the monitor screen is just an image inside the paragraph.

Here’s the markup:

 <p id="featuredText"> We build websites that blow you away[...] <a href="#" id="learnMoreButton">learn more.</a> <img id="monitor" src="img/monitor.jpg" width="375" height="370" alt="scrn" /> </p> 

44 Let’s style the paragraph, which acts, effectively, as our container. We need to set the position property to relative so that (later on) our monitor, who’ll be absolutely-positioned, will position itself relative to the #featuredText paragraph and not the body of the web page. We set featured_bg.jpg as the background and indent the text to the left just like in previous examples.

  p#featuredText {
    display:block;
    position:relative; float:left; width:100%; height:375px; background:url(img/featured_bg.jpg) no-repeat 0 0; text-indent:-10000px; } 

45 Next we style the "Learn More" button. We use learnmore.jpg as the background. We declare a hover style rule so that we can get the CSS rollover effect just like in the logo. We’ll also absolutely-position the monitor on the top right of the #featuredText container.

  a#learnMoreButton {
    display:block;
    width:280px;
    height:60px;
    background:url(img/learnmore.jpg) no-repeat 0 0; margin:200px 0 0 132px; } a:hover#learnMoreButton { background-position:0 -60px; } #monitor { position: absolute; top:0; right:0; } 

Creating the Monitor image

Featured Area is done. Check out the preview of both the header and the Featured Area finished (Example 3).

Example 3: Header and Featured Area completed.

Creating the rounded corner boxes

46 The next step is creating the rounded corner boxes. The mockup uses a non-web-safe for the font, so we’re going to replace it later on with a web-safe font (Verdana). We’ll cut up each box one at a time. First, turn off the text layers inside the box, box 2, and box 3 folders in the Layers palette in Photoshop.

Creating the boxes

47 Create a selection around the first box that is exactly 320px by 185px. Use Copy Merged, then paste it into another document. Save it as box1.jpg in the img folder.

Creating the boxes

48 Repeat 47 for the second box and the third box. Save them inside the img folder as box2.jpg and box3.jpg, accordingly.

Coding the boxes

49 Head over to index.html. We will create a containing div for the boxes called #boxContainer. Inside this div, we’ll create three boxes with a class of .box. So that we can set the appropriate CSS background, we double-declare the class property of the boxes with .client, .work, and .book.
Here is the markup:

  <div  id="boxContainer"> <div class="box client"> <h2>Client list</h2> <p>We have a wide range of clients from [...]<p> </div> <div class="box work"> <h2>Our work</h2> <p>Check out the work we have done for our various [...]</p> </div> <div class="box book"> <h2>Book now!</h2> <p>[...] Click here to get a <strong>free quote</strong>!</p> </div> 

Styling the boxes

50 We float the .box divs to the left so that they’re displayed next to each other. We give the <h2> element an uppercase value for its text-transform property so that it is in all caps, just like the mock-up. Then for the .client, .work, and .book style rules, we set the appropriate background for each of the boxes.

  .box {
    width:320px;
    height:185px;
    float:left; } .box h2 { font:bold 20px Verdana, Geneva, sans-serif; color:#0f83bc; text-transform:uppercase; margin:35px 0 0 140px; } .box p { font:normal 12px/18px Verdana, Geneva, sans-serif; color:#0c3b4a; margin:0 30px 0 140px; } .client { background:url(img/box1.jpg) no-repeat 0 0; } .work { background:url(img/box2.jpg) no-repeat 0 0; } .book { background:url(img/box3.jpg) no-repeat 0 0; } 

Preview your work in the browser. It should look like Example 4.

Example 4: Boxes completed

Coding and Styling the left column

51 Below the boxes, there’s a content area that has a heading of "Need we say more?". We’ll call this "left column", and put that text inside a div called #leftCol.

Here’s the markup:

  <div id="leftCol"> <h2>Need us say more?</h2> <p>Creativo is a Web Design and Development[...]</p> </div> 

52 We’ll give #leftCol a width the is equal to the width of the two boxes above to give the design a bit of symmetry. We have to give it a left margin to align it with the edge of the first box above, a top margin to give the boxes a bit of room below. Then we give the text inside the column some styles.

  #leftCol {
    width:640px; float:left; margin:20px 0 0 10px; } #leftCol h2 { font:bold 20px/24px Verdana, Geneva, sans-serif; color:#094e64; } #leftCol p { font:normal 14px/20px Arial, Helvetica, sans-serif; color:#094e64; margin-top:10px; } 

Here’s a preview of the design with the left column in place (Example 5).

Example 5: left column incorporated into the design.

Creating the Newsletter web form

53 In Photoshop, turn off all the layers inside the more folder except for the layers that show the background, the "Go" button, and the input field.

Creating the Newsletter web form

54 Create a selection around the newsletter area using the Rectangular Marquee Tool (M) that is exactly 320px by 110px.

Creating the Newsletter web form

55 Copy the selection (use Copy Merged), paste it onto a new document. Save it as newsletter_bg.jpg.

56 Create a selection around the Go button, copy it, and then paste it into another document. Save it as go.jpg.

Coding the Newsletter web form

57 For the web form, we use a <form> element, a label for the text, a text input, and a submit button.

  <form id="newsletter" action="" method="get"> <label for="emailInput">Sign Up for Our Monthly Newsletter: </label> <input id="emailInput" name="emailInput" type="text" /> <input id="submitButton" name="submitButton" value="Go" type="image" src="img/go.jpg" /> </form> 

58 We give the form a relative position so that we can absolutely-position the input and Go button. We hide the border for the text input #emailInput by giving the border property a value of none. We give the form a top margin to align the top portion of the form to the left column, and a bottom margin to give it space from the footer.

  #newsletter {
    position:relative;
    width:320px;
    height:110px;
    float:left;
    background:url(img/newsletter_bg.jpg) no-repeat 0 0;
    margin:20px 0 50px  0;
  }
  #newsletter label {
    font:bold 16px  Verdana, Geneva,  sans-serif;
    letter-spacing:-1px;
    margin-top:26px;
    width:100%;
    display:block;
    color:#fff;
    text-align:center;
  }
  #emailInput {
    position:absolute;
    top:51px;
    left:5px;
    width:200px;
    margin:0px 0 0 30px;
    font:bold 20px Verdana, Geneva,  sans-serif;
    color:#999;
    border:0;
    background-color:transparent;
    border:none; } #submitButton { position:absolute; top:43px; right:27px; width:50px; height:40px; margin-top:5px; padding:0; } 

Check your work against Example 6 below to make sure you’re still in the same page. Try typing something in the text field.

Example 6: Newsletter form complete.

Coding the footer

We’re going to reduce the footer content from the mockup by not including the telephone number image on the right hand side. Our footer will be pure HTML and CSS.

Here’s the markup for the footer:

  <div  id="footer">
    <p>Creativo  Design &#169; 2009. All Rights Reserved. </p>
  </div>

Here is the CSS:

  #footer {
    clear:both;
    width:940px;
    border-top:1px  dashed #094e64;
  }
  #footer p {
    margin:15px 0;
    font:bold 12px  Arial, Helvetica, sans-serif;
    color:#094e64;
  }

Example 7: Footer compleste.

Some jQuery Goodness

We’re going to add a JavaScript-based animation effect for the logo’s rollover using the jQuery library. We’ll use the Google AJAX Libraries API web service to do the heavy-lifting and use their infrastructure to serve the jQuery library.

We’re going to give the logo (#header h1 a) a cool fade in and out effect. We’re going to manipulate the DOM to insert a span > a element with a class of logoHover which will have the rollover state as its background. When the user hovers over the logo, we will insert logoHover inside header h1 and then fade it in. When the user hover out, we fade out logoHover and then remove it from the DOM.

You can apply this to other elements in the web design – but I’ll get you started with the logo.

59 To start, include the jQuery Library and javascript.js in the head of the HTML document.

  <head>
  <script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript" src="javascript.js"></script>
  </head>

60 Let’s place the following styles in our styles.css:

  span.logoHover {
    display:block;
    width:100%;
    height:100%;
    background:#ccc url(img/logo.jpg) no-repeat 0 -125px;
  }
    span.logoHover a {
    display:block;
    width:100%;
    height:100%;
  }

61 Let’s place the following script inside javascript.js. Read the comments to gain an understanding of what’s going on.

  $(document).ready(function(){
  // Remove CSS style of hover $('#header h1 a:hover').css('background','none');  // Bind a mouseenter event to #header > h1 > a element $('#header h1 a') .bind('mouseenter',function(){  // Insert a span > a element in DOM that we will fade in // with class name .logoHover $(this) .before('<span class="logoHover"><a href="#">home</a></span>');  // Hide new DOM element immediately, then fade it in $('.logoHover') .hide().fadeIn()  // When mouse leaves logoHover, fade out, on complete, remove // from DOM. .bind('mouseleave', function(){ $(this).fadeOut('normal', function(){ $(this).remove() });  }); }); }); 

Finished!

Finished

Congratulations for sticking through this tutorial – you’re a champ! I hope you learned a few tips and tricks on converting a design mockup to an HTML template.

The "Clean Web 2.0 Style Web Design" Series

This article is part two 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. If you’re interested in more tutorials like this, you should definitely subscribe to the RSS feed.

Credit

The awesome icons used in the web layout (and which have been mentioned in the first part of this two-part series) are from Wilson Ink on DeviantArt – the icon set is called the Green and Blue Icon Set.

Questions?

Please feel free to ask questions in the comments. I, along with the passionate and experienced readers of Six Revisions, will try to help you as best as we can. Also, please share your thoughts, opinions, and mistakes that you find in the tutorial.

Related content

People who’ve helped improve this tutorial

  • Dean Duncan Jones: Suggests to use a #container width of 1000px to avoid horizontal scrolling for some smaller monitors, instead of 1024px in step 11.
  • keyser soze: notes that in step 11, there was an error in the height of the menu’s li, which was correct in the example.
  • Dave Read: Caught a mistake on step 23 where the id should be on the parent li and not in the a elements (it was correct in the example, but not in the tutorial). He also noted that the style rule for the monitor wasn’t shown in the tutorial, which I’ve added on step 45.

139 Comments

Roseli A. Bakar

May 29th, 2009

This is an awesome post Jacob.

Thanks for sharing.

Kawsar Ali

May 29th, 2009

Nicely coded. I like the big web 2.0 buttons

mary

May 29th, 2009

Awesome, just skimmed through and this looks like a great walk through, thoroughly explained. Can’t wait to work through it!!

Matthew Heidenreich

May 29th, 2009

great tutorial, thanks!

pavs

May 29th, 2009

Can someone explain to me what does “web 2.0 style” mean? I mean I actually like this portfolio design and I appreciate the effort that went to making the design possible.

But what constitutes a “web 2.0 style” design? The way I understand web 2.0 is the concept of user-generated collaboration. How does portfolio design fit into “user generated collaboration”?

Thanks
http://en.wikipedia.org/wiki/Web_2.0

Jacob Gube

May 29th, 2009

Thanks for the feedback everyone!

@mary: Awesome, when you’re done with the walkthrough – be sure to post your thoughts afterward (and any questions or parts of the text that were confusing), I’m looking for feedback because we’re trying to improve the tutorials you see here on Six Revisions and all of you are very important in this process of improvement!

————–

General questions I’d like to ask those that have read the tutorial:
1) What can we do to improve this format?
2) What do you think about the length and detail? Need more, too much, or just right?
3) For longer tutorials – should we paginate them (split them up into multiple pages), or is it better to have the entire tutorial in one page?
4) Syntax highlighting for code: My intention for not using syntax-coloring is to force you to read the code more carefully. I highlight the important parts of the code in green for things you should really pay attention to. I got the inspiration from IBM developerWorks where I had to read the code listings more carefully because I didn’t get the help of syntax colorization. Did I achieve this intent?

Any and all feedback appreciated, thanks guys!

Jacob Gube

May 29th, 2009

@pavs: First of all, Jan and I both know what “Web 2.0″ means. What we refer to is the general, newer design themes that the second generation of web applications embodied: simpler, slicker, more intuitive layouts, gradients and drop-shadows, glossy text, weird names like “Flickr” and “YouTube”. Along with concepts such as responsive applications empowered by a better understanding of client-side/server-side asynchronous communication, collaborative content creation, user-driven content, networking – there’s also a general theme, a general style, to what we consider a “Web 2.0 app”.

Look at this collection of Web 2.0 sites, you’d be lying if you said you couldn’t discern a stylistic pattern there: http://www.go2web20.net/

Dean Duncan Jones

May 29th, 2009

Great tutorial. One thing I noticed though is that you’re building your container div width: 1024px;. For a 1024×768 resolution (or bigger) build you’ll want to use a max width of 1000px. If you don’t, you’ll get that annoying little horizontal scroll bar that slides the page back and forth at 1024by766 resolution. You’re not accounting for the vertical scroll bar width or the window borders in your dimension.

Your live demo shows what I mean. Resize your window to 1024 by 768 and you’ll see the horizontal scroll.

1000px will keep you good for most browsers and user settings.

Cisco

May 29th, 2009

@pavs I think what people mean when they use “Web 2.0″, in terms of design style, I believe that it ties into the trend of the more user-centered “friendly” style of interface. Some of what you see are the clean layout, big type, chunky buttons, “fun” colors, gradients, textured backgrounds, and the ever-popular reflective surface. There are many more characteristics. Those are just a few.

Dean Duncan Jones

May 29th, 2009

Oh, sorry, one more thing.

In step eight you show the star selector hack to reset padding and margins in your css. If you’re really going to teach about web 2.0, you should enforce standards and promote the usage of a reset.css file which will reset all html elements to “baseline” and keep your code valid (the star selector hack isn’t valid CSS code).

Eric Meyer’s came up with the original if you want to search his latest version or you can download my slightly modified version here: http://www.tmprod.com/styles/reset.css

But again, great article for beginners.

Jacob Gube

May 29th, 2009

@Dean Duncan Jones: RE: CSS Reset, I chose to take a shortcut for the sake of brevity. This tutorial covers, Photoshop, HTML/CSS, and jQuery — so I tried to be as terse as possible. I did say and encourage the use of a more robust CSS Reset solution when I say: “This works a majority of the time, but it’s often better to invest some time learning about more robust CSS Reset techniques. Head on over to my article called “Resetting Your Styles with CSS Reset” to learn more about CSS Reset.

The article I linked to (which I also wrote) is a big discussion on CSS Reset, and those that would like to learn more, can swap out the Universal margin/padding reset to a more robust one. I don’t want to drown people with too much information; but I did offer an alternative to those that are interested to learn more (and have more time to invest in this tutorial).

fred

May 29th, 2009

Awesome tut, Jacob! Really nice design, well done on the coding as well. Nothing else to say except keep ‘em coming!!

Musice

May 29th, 2009

OMG, it’s pretty well explained but it looks too hard for me :(
I’ll try to follow it when I end my exams, thank you.

Jesse

May 29th, 2009

Thanks for the commented jquery explanation, that helps. Sprites are fun! My only qualm is what happens when images are disabled – oops, there goes the website! – but that’s another story. Jacob, I’d have to say the level of detail is just right, so keep at it. :)

Jacob Gube

May 29th, 2009

@Jesse: Glad you liked it and thanks for the feedback. About CSS images disabled, I’ll be covering that in an upcoming tutorial: progressively-enhanced navigation bar that takes into account text-based > CSS on/images off > CSS on/images on > and JS on. I hope you stick around for that! I’ve been working on that tutorial on and off for about a month, hope to finish it soon.

Megastarmedia

May 29th, 2009

this is a great idea for quick and simple landing pages.
for larger sites, you should code in Dreamweaver.

this is a very clean and easy to use tutorial btw.

thanks so much
sandy

Jan

May 29th, 2009

Very thoroughly explained, Jacob! Thank you :)

Zach Stowell

May 29th, 2009

Great article series! Great design, great transfer to a working site.

One question though – when you’re saving off the logo/nav/etc images, you keep the blue background as a part of all of them. Wouldn’t saving the images with transparent backgrounds be better for future refreshes of the design? You could then simply reuse the images you have and be able to reposition them anywhere in the design and not worry about background issues with the gradients/diagonals.

Other than that little thing, I think it’s a great set of articles and many people can learn from these techniques. Keep them coming!

Tips for Website Design

May 30th, 2009

Thanks for a fantastic tutorial. It’s very clearly written and easy to follow. I’m looking forward to your navigation bar tutorial, it sounds interesting.

keyser soze

May 30th, 2009

I’ve reached “Example 2″ after 33 steps and the menu isn’t working (the blocks are a bit moved).
After going through the code step-by-step, I adjusted the CSS in step 29:
I made the height 125px (instead of 95) and deleted the margin entry.
This is what you have in the added style sheet.

Jacob Gube

May 30th, 2009

@Zach Stowell: If you don’t care about IE6 and below, you can save them as transparent PNG’s (or install a PNG fix for alpha transparency support for legacy browsers).

deb

May 30th, 2009

Thanks for the JQuery part specifically. Though i understood after sometime with the help of comments, a lil bit of more explanation would not hurt :)

PS: The last blue color box can have that .book class written for it in CSS.

As you have asked for suggestions: I feel the Javascript parts can come with a bit more explanation in future. Any any tut longer than this one can be in 2/3 pages, though either ways does not bother me much.

I like the way the code is shown as of now, readable, i do not need syntax highlighting.

Can’t suggest anything else, you are a better blogger than me :)

Jacob Gube

May 30th, 2009

@keyser soze: You rock, thanks for noticing that! I updated the code for the example but failed to do it in the tutorial’s text. If you notice, the previous code listing (step 28), the style rule for the ul has the height at 125px and no margins. In any event, I fixed step 29, thanks!

@deb: Thank you for your wonderful insight, very helpful feedback. With regards to the JavaScript explanation, I’ll keep that in mind, looking at this now, I did skim through the last section (‘jQuery Goodness’). The only reason was at that point, I was at the 9th hour of writing this tutorial and I was so tired that I just wanted to finish it. I will, sometime, update that section to provide a better explanation of what’s going on, more than in the comments of the code.

Rahul

May 30th, 2009

Great work man. Really appreciate it.

Dave Read

May 30th, 2009

Loved loved loved the tutorial – I learned a lot about CSS & element interactions just by tweaking the code as I went. Kudos for a great learning experience!

Two small errors in the tutoral which could potentially be frustrating for the novice:

Part 2 (Coding), Step 23: those ID tags should be in the tag, not in the <a> tag (this is correct in the actual .css document, but incorrect on the page here.

i.e.:

Part 2 (Coding), Step 45: the .css code for including the “monitor” graphic is not mentioned in the tutorial, although it exists in the sample .css file.

add to step 45:

#monitor {
position: absolute;
top:0;
right:0;
}

It took me six hours to put this all together (all my graphics were sized differently from the example, which meant lots of integer tweaking), but it was exactly what I was looking for to get me off WYSIWYG site building and into hand-building. Thanks so much! Keep them coming!

Dave Read

May 30th, 2009

rrrrr no tags in comments

step 23 needs the id tag in the “li” tag, not the “a” tag

loved the length & detail, and having a large part of the tut all on one page is great – no clicking back through history to check previous steps.

the code commenting was awesome, too – the green color means an important piece of code to be noticed – very useful convention.

keep up the awesome work!

Maverick

May 31st, 2009

wooooooooooooow, it is so very well explained. great tutorial. thanks a ton Jacob.

gaus surahman

May 31st, 2009

Mostly relied on images is only perfect for portfolio or company profile, I guess. Yet a very comprehensive tutorial I’ve read about web 2.0 style, thanks.

Jake

May 31st, 2009

Amazing tutorial, definitely useful for anybody beginning web design and needing to learn about how to create one from start to finish.

I have created a post similar to this, creating a web 2.0 template-seller mockup in Photoshop similar to Template Monster.

Penelope Else

May 31st, 2009

Looks fantastic! Haven’t worked through it yet, but you’re helping me to understand things that go over my head when reading reference pages.

Am working on a new website soon – I think it’ll be using lots of the things in here!

Jaan

June 1st, 2009

Fantabulous job jacob…….
This is the kind of article’s the user’s expect..

Jacob Gube

June 1st, 2009

@Dave Read: You are amazing, thank you so much for catching those! I’ve updated the tutorial.

I’m also adding a section called “People who’ve helped improve this tutorial” and linking to all of your wonderful comments because you guys and gals truly help me improve stuff here on Six Revisions.

Designer

June 1st, 2009

There are many tutorials out their. But, this is something else, some thing professional.

LyskeSpark

June 1st, 2009

This is a great tutorial. I have one question though. When I click on the buttons in demopage, it will show a border from the left side and around the button I click. How do you avoid this? It completly ruins the design!

Jacob Gube

June 1st, 2009

@LyskeSpark: One way to remove it is using outline: none; in steps 25 and 26 (for the logo and menu). This, however, makes it hard to see what is the focused element is when users use the Tab key to navigate through the web page.

Sarah

June 1st, 2009

Thank you so much for this- I’m a complete beginner, with minimal experience with Photoshop and zero experience with coding, but I still made it through this tutorial. The only trouble I’m having right now is with the alignment of the newsletter box. It’s aligning on the left side, underneath the “Need us say more?” part rather than next to it. I don’t know code well enough to find where the problem is.

Sarah

June 1st, 2009

Also, when I’m looking at it in IE, the whole page aligns to the left side. Why does it do that in IE but not in Firefox or Chrome?

Jack Rugile

June 1st, 2009

Jacob,

Ah, finally finished and it was a success! I have been wanting to get into PSD to xhtml for a long time now, and this was a great tutorial to help me get started.

The tutorial for the most part was easy to follow, however there are a few things that threw me off :

- I think that everything in the final product that you link to should be included in the tutorial. That includes the DOCTYPE declaration and the title tag for the page. When beginners (me!) see code in the source of the final that is not in the tutorial it can sometimes be confusing.

- I had the guides and snapping on in the Photoshop document, but they would consistently snap to about 1 pixel off when I was selecting the particular elements. Don’t know if there is a fix for this, but just wanted to point it out.

- The closing tag for the boxContainer div is missing in the tutorial text.

- I found it strange that all the content of the site was contained in the header div. Why not make a separate content container that also has a width of 960px?

- I know that this is just a mockup, but I felt that you should have included the links that the three boxes would have. Maybe just a color change effect with CSS on the box titles (client list, our work, book now).

- The width for leftCol is 630px in the final product, but it says 640px in the tutorial which causes the newsletter to wrap.

- The icon for “book now!” has the wrong icon in the final product.

Ok, I think that is it :) Thank you for your time and thanks for this awesome tutorial. Looking forward to more of them.

- Jack Rugile

Nick

June 1st, 2009

Why would you change fonts? Couldnt you leave the font as-is and just render the round-corner boxes as jpgs, preserving the fonts within the image?

Im learning and just want to understand, thanks!

djaka

June 2nd, 2009

great tutorial!.
step 52
#leftCol {
width -> should be 630px instead of 640px as the newsletter box would be forced to go below the text.
thank you :)

Jacob Gube

June 2nd, 2009

@Jack Rugile: First, I’m so happy the end-result was a success: both tutorials took Jan and I a very long time to write, and if it helps even just 1 person, that time is more than worth it. Second: I’ll be updating the tutorial based on your corrections, thank you (I’ll of course place you under the people who’ve made the tutorial better section).

@Nick: You could leave them as-is, but that’d make the entire web page just a Photoshop file sliced up. I believe in using plain text on content that’s long. I don’t mind quite as much with headings that are CSS image text replaced, but for anything that’s a paragraph or so, I’d go with just HTML.

@djaka: Ah great catch,@Jack Rugile caught that too – I’ll update the tutorial with both of your corrections. Thank you!

Matt Read

June 5th, 2009

Well I’m up to about step 45…Spent many many hours on this. I’m a complete beginner (well, pretty much) and doing this for one of my internet class assignments. This is my pretty much finished Photoshop – http://tinyurl.com/mattie47site (and I’m aware I spelt tutorials wrong) Just can’t wait to get it done! I’ll post back here when I’ve finished it and uploaded it online =) I’ll just add that your tutorial is pretty easy to follow but since I’m not following it completely (having changed stuff) I’ve found it quite hard :-/ ..anyhow =)

Jacob Gube

June 5th, 2009

@Matt Read: Wonderful! It’s getting there, I’m excited to see the final product and I hope this tutorial enhances your knowledge in how HTML/CSS works!

flashfs

June 5th, 2009

Thanks for this step-by-step tutorial.
Is it possible to use jQuery’s hover() instead of bind(‘mouseenter’)?

Jacob Gube

June 6th, 2009

@flashfs: I haven’t tried it or anything, but yes, it should work with the .hover() method instead of .bind().

Matt Read

June 7th, 2009

Many hours later, I’m still working on the front page ;-) This is my progress thus far – http://tinyurl.com/mattie47testsite It’s 3am NZDT so time for bed =) Also, I’m not related to the “Dave Read” in the comments above although my father does share the same name ;-)

Mike

June 9th, 2009

Jacob, I can’t imagine how long this tutorial must have taken you to write. This is absolutely awesome. Great job buddy!

–mike

John Arthur Gurondiano

June 9th, 2009

Very nice!!!

I would like to ask what kind of software that are used in creating the final valid xhtml and css codes?

Thank you and more power!!!

PF

June 10th, 2009

Very nice tutorial. Thank you for spending your time building something like this.

Jon Edwards

June 11th, 2009

Absolutely fantastic tutorial,

I am essentially a PHP coder at heart, and anything graphics or CSS related generally sends shivers up my spine, to such an extent that for the past almost five years my website has been surviving on tweaked, free web templates as can probably be seen this is the first time I have seen a tutorial that goes in small enough steps, and covers graphics in photoshop as well as CSS and web design (I didn’t know you could make rollovers that way – really clever) I can’t imagine how long it took you to create this.

But I think it was well worth the effort, I am actually thinking about putting my own template together for my site as a result of this tutorial, I hope you write many more of them in this type of style.

Yes I was caught out by the leftCol width as well 640px causes the form to drop below the text but 630px as in the CSS file works fine, please keep up the great work Jacob.

Thank you for introducing me to graphics in a gentle baby steps way, I have learned so much, just from this one tutorial

Jon Edwards

June 11th, 2009

Oh I forgot to mention I have uploaded my attempt at your tutorial to
http://www.euadvantage.com/w2tut
I hope I have done it justice.

Juan Gómez

June 12th, 2009

Hmmm… those looks like my icons. A little credit would be good ?

Juan Gómez

June 12th, 2009

Sorry i just saw the other post! :) thanks :D

Jacob Gube

June 12th, 2009

@Juan Gómez: Oops I’m sorry about that, that was my oversight. Yes, the credit is on the other post and I am very strict about giving credit to designers who release stuff for free. I am updating this post as well, to note that we are using your beautiful icons.

John Arthur Gurondiano

June 15th, 2009

I would like to ask for some tips can you give at least one example of content management system for this tutorial?

Thank you and God bless!!!

sonnydesign

June 15th, 2009

another excellent tutorial. Im looking forward for joomla template tutorial soon. Like how to convert psd to joomla template. Thank you again

Flux

June 25th, 2009

Great tutorial. My main reason for stopping by was to see how (a man of your exceptional skill) codes the newsletter subscription form, im still unsure how it works, where does the email address entered go? I wanted to add this simple but useful feature to my site but never sure what is the best/securest way of doing it.

Flux

June 25th, 2009

Also, thought id mention, this tut has inspired me to start trying the ‘sprite’ route instead of seperate images, it has previously seemed far too complicated but now it all makes perfect sense.

Simukis

June 26th, 2009

i have to tell that some images like body_bg.jpg is better to save as .GIF . it takes less space and quality is better.

Matt

June 27th, 2009

First, I have to admit that I am a newbie at all of this; while I have been working with websites for over 10 years now, I have generally stuck with templates and tweaked what I needed. This was my first attempt at doing everything from scratch. Also a Photoshop newbie as well, so hopefully that sets the tone (though I do pick things up pretty easily).

I did what the tutorial said (though it does seem to miss a few things, so filled in the blanks as best I could) and got everything all sliced, diced and coded. My site looks fine in Firefox, but not in IE. The logo seems to disappear (except when hovered over) and the boxes all disappear. Granted the sizes of everything I did came out different, but I adjusted in the css/html to compensate. Would anybody mind taking a quick look and see what the problem might be? I do see the demo page works fine, so must just be something I did wrong…

http://www.upliftinghost.com

Thanks! And THANKS for such an awesome tutorial. I made it through everything in about 10 hours or so and now feel a little more daring to try some original designs.

P.S. – Was there ever anything to do with #boxContainer? I see it in the HTML code, but nothing in the CSS for it.

Matt

June 27th, 2009

I’ll probably try playing around with jQuery Stylish Select as well to clean up how the domain TLD select box looks across each OS/browser:

http://www.scottdarby.com/2009/05/jquery-plugin-stylish-select-unobstrusive-select-box-replacement/

Joel

June 28th, 2009

Hey thanks for an awesome tutorial, helped me finally put together my website. It worked great, except…

I used this menu technique (with some slightly different images), and I retooled it a little bit to just make separate images for the regular menu and the hover menu, and it doesn’t seem to work. The list items aren’t clickable for me, although if I take out the doctype header (thus invoking quirks mode or something I believe…) it works on Safari. As far as I can tell I did this exactly like the tutorial but my images aren’t clickable. Can anyone help me? Thanks a lot.

Jacob Gube

June 28th, 2009

@Joel: Any chance we can see a live demo? Are your list items structured so that they’re links? i.e. <li> <a>.

Joel

June 28th, 2009

Great thanks for responding.

Yes…live demo is at http://www.joelstranscription.com/test.

The menu shows up but it’s not clickable and the items don’t change when I hover. Weird.

Jacob Gube

June 28th, 2009

@Joel: OK, first: you should use pixel units on your widths. For example,

#home {
  width:144;
}

Should be:

#home {
  width:144px;
}

Second, because of CSS’s top-down order, this:

#menu ul li a {
 display:block;
 width:100%;
 height:100%;
}

Should be below the #home, #contact, etc. so that the 100% width will equal to the widths that you declare.

I tested these changes and it worked on my end.

Joel

June 29th, 2009

Awesome! That worked perfectly, thank you for the help. I knew order mattered in HTML but had no idea it made a difference in CSS. Thanks for the help.

George L Smyth

July 1st, 2009

Very good article, well explained and presented. Thanks so much, I learned a few things.

Romain

July 1st, 2009

Humm, I need one more tutorial for jQuery.
I think a word is missing step 52:
” We’ll give #leftCol a width the is equal to the width…”

Why do you choose not to use the css documents of 960.gs?

Jacob Gube

July 1st, 2009

@Romain: I didn’t want to “complicate” the tutorial by introducing the 960 Grid System – though in the future, I think it would be a great tutorial to have (a practical tutorial on using the Grid System by doing a PSD -> HTML series centered around 960.GS). Thanks for the note.

Elizabeth

July 7th, 2009

Thanks for this awesome tutorial. I’m still a newbie in the web design and thanks to this tut – I’ve managed to see a perfect final result.

There is a mistake in step 29: you are saying that we will float the list elements RIGHT and you’re writing in the code LEFT. Can you please fix that? :)

I have a question regarding the jQuery: when I open the final result with Firefox, the logo fades in and out just as you’ve described, but when I open it with Internet Explorer and I go with the mouse over the logo – the faded logo appears beneath the original logo(so I’m seeing two logos). Can you please tell me how can I fix that?

Many thanks in advance.

I’m looking forward to more tuts like this. They are really helpful. :)

BR,

Elizabeth

Jay

July 8th, 2009

Hi, I was wondering how I can move the text in the rounded corner boxes to the left? or right? This is because I made the icon small and it has a space in-between. Thank you.

kidk

July 12th, 2009

This tutorial is rubbish.. I am a begginner and it has taught me nothing except how to parrot your instructions. There is no explanation of why you enter this code and the effect it has.

nadia

July 14th, 2009

Have you guys tried sitegrinder?

Alex

July 17th, 2009

Hi, nice tutorial, but I haven’t been able to cross the first obstacle yet! :( FOr some reason my background image bg_body.jpg is not loading, I have followed the instructions word for word. Anyone know why? Thanks!

Mihai

July 28th, 2009

Isn’t this menu consider by Google Spam ? I mean the text-indent:-10000px; is Spam and is Ban for your website :).Replay me on twitter at @mihaicoman and please correct me if i am wrong. although this is a great tutorial. Thanks!

Haakon

August 6th, 2009

Great two-series tutorial.

I’ve experienced some challenges when using the 960.gs when I, just as in your example from part 1, aligned my boxes to the grid – but the drop shadow is in the col margin.

My problem is how to style the margin of each col with a background-image? On my site, I ended up hacking and chopping the 960.gs, making that cols width +20px and removing the margins of that col with -20px.

However, there must be an easier way rather than hacking the 960.gs?

Jacob Gube

August 6th, 2009

@Haakon: The biggest downside of CSS frameworks is that you’re confined to a set way of doing things. For server-side/client-side scripting, that’s alright because it’s complicated and there are certain things you want to standardize, but in my opinion, CSS frameworks are too restrictive because you’re supposed to be working with styling. Typically, I would advise never to modify framework source files or else it makes them harder to maintain – so the proper way would be to create another stylesheet (say, for example, custom.css), include it at the bottom of your 960.gs stylesheet reference so that your custom.css takes precedence, and then write styles that overwrite the styles that you need to modify in the 960.gs stylesheet.

Hope that helps – does my suggestion make sense? Let me know.

Haakon

August 6th, 2009

Thanks for the quick reply Jacob. Yea you absolutley makes sense. I actually did it by using new classes only for the specific divs I had to alter, so I didnt touch the 960.gs stylesheet.

I was a bit vague in my problem description, let me rephrase.

In the first series of this tutorial you used the 960 grid when designing the website in Photoshop.

You aligned one the “call-to-action” box (http://images.sixrevisions.com/2009/05/17-32_clean_web2_design_13.jpg) with the grid – however, the drop shadow of the box was outside the grid (in terms of the 960 css, the drop shadow was in the margin of the 4th column).

What I couldn’t figure out was how to put the shadow in the “column margin area” without removing the margin, and adding width respectivley.

The reason for me doing it this way is, afaik, that you cant bleed the background (where the shadow starts) outside the div – and I couldn’t figure out any other smarter way to achieve it.

However, there has to be a way to achieve this drop shadow without overriding the rules of the 960gs? Do you have any idea?

But I sure agree with you, css frameworks are too restrictive and should be limited to prototyping (http://net.tutsplus.com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework/)…

Fla

August 10th, 2009

Hi,

Brilliant tutorial, thanks a million for putting it together. I’ve played around with it to make a new site for myself but i’ve hit a big snag & was wondering if you could help.

I can’t get the featured_bg & monitor to line up properly. Been playing around with it but couldn’t get it working.

Also, some other things are not centering for me.
A demo can be found here: http://www.thesprayartist.com/Clean_Web-TEMP/index.html

Thanks in advance,
Fla.

Fla

August 12th, 2009

Hi,

I managed to fix the problem i was having where featured_bg & monitor did not line up. I had a few ‘s where they shouldn’t have been.

I still have 3 problems though. If you can help it would be great.

1-featured_bg is now blank & i want to have a text box with featured_bg as the background.

2-My social links buttons at the bottom are slightly misaligned.

3-I need my copyright notice at the bottom to be centered.

Any help or suggestions you can give will be much appreciated.

Fla.

Matti V

August 21st, 2009

Hmm! A good layout indeed, but funny that you don’t make any comment on the diagonal body background which is unimplementable, and even in the final result here is not shown correctly… Too proud and friendly to confess that maybe the .psd phase wasn’t really thought through? ;)

A typical example of what happens when the graphic designer doesn’t think about the tech constraints. A minor detail, but being a tutorial, it would add value to point it out. It is made for learning anyway, and not showing off mad skillz.

Of course making the background image hugely wide would be an option, but then comes the question “is it worth the bandwidth”.

Fla

August 24th, 2009

So there’s no way to write text over the featured_bg area?

Marion

September 2nd, 2009

Very good! Im a designer relatively new to coding but tutorials like this are really helpful. Can you do an all inclusive tutorial psd to html with jquery slider? Something that shows how to use javascript in a project from scratch.
thanks!

Meinecke

September 3rd, 2009

Thanks Champ!
Very helpful.

worpler

September 8th, 2009

enjoyed following this through. Had trouble aligning the bottom two rows with the top row.

I think the problem is that the container is a different width to the top nav bar which everything else is to be aligned to…so just had to bumb .boxcontainer etc across a little. Not sure if this is an ideal solution though…

adam

September 12th, 2009

Cool tut. I have been using Fireworks to slice my mockups, but decided to try it out in PS. Seems to work well though lacks some of the precision of FW, whose properties panel enables you to be very exact. To anyone thinking about using the FW export CSS & Images feature, think twice. Adobe CSS is as messy as it gets. Don’t get me talking about the export to html & images. The result is close to criminal :)

One suggestion for the tut. For beginners, the business of creating new psd files for the slices can be confusing. They need to understand that any new file should be either created with a transparent bg, or trimmed to top left pixel. Else, they will be looking at a mess when they call the file via css and look at the result in a browser.

liberty

September 15th, 2009

I ‘v learned so much as i’m new in css and ps.Thanks a lot.Very good tutorial.

tomsson

October 5th, 2009

First of all- thanks for the tutorial. I’ve learned some cool tricks and techniques :)

There is a problem with JQuery logo in IE 6. When You hover your mouse over it- 2 logos are showing.

Simply adding overflow: hidden for #header h1 solves this problem.

defeem

November 5th, 2009

hi…this tut is AMAZING!. just followed and practised it and all went well. Just a small question, what do i use to lower the monitor i little bit, tried it with the top tag but no succes, please advise

Juane Cami

December 6th, 2009

Hey i have figured out how to put the ajax effect on the other buttons but i cant do it on the Learn more button, i think its because its no in a ?? i wold apreciate a little help! thanks EXTREMELY GREAT TUTORIAL!

Aaron Heale

December 14th, 2009

Hi Jacob thanks so much for this tutorial it ahs helped me so much just one thing i noticed :) which might help people

on step about newsletter the TEXT “Sign Up For Our Monthly Newsletter” well in the css ID:

#newsletter label {
font:bold 16px Verdana, Geneva, sans-serif;
letter-spacing: -1px
margin-top:26px;
width:100%;
display:block;
color:#fff;
text-align:center;

REMOVE the letter-spacing: 1px; and change the “font:bold 16px Verdana, Geneva, sans-serif;” to font:bold 12px Verdana, Geneva, sans-serif;

because if it has the letter spacing and the font at 16px when you say put your mouse across the text to highlight it etc it moves to the left of right so once the letter-spacing is removed and the font size is changed to 12 :) it doesn’t do it :)

Regards,
Aaron

Aaron Healey

December 16th, 2009

Hi i have used the same technique which has been used in the menu where the hover effect is controlled by one image, i am having trouble with the positioning of it :( could you take a look please URL is: http://www.bluegeeks.co.uk/menu/beta/index.html hope some1 can help me :( as i really like this rollover

Phil

December 28th, 2009

Newbie here! Finished the project: http://www.adbankpro.com Question for you. Now that I have the front page, I can duplicate and style as I go on…but how do I actually capture someone’s email address in the newsletter box?

Graham

January 13th, 2010

What about the Newsletter.
It is simply ignored how to get it to FUNCTION?

Adi

February 8th, 2010

Very good tutorial and easy to learn with the help of.

ronald

February 10th, 2010

Nice, simple but effective . .

Sean Ahrens

February 22nd, 2010

Jacob, thank you very much. So far, this is proving to be a helpful refresher.

I have, however, found an inconsistency that is likely responsible for the problem Alex is having. The article tells you to save your background image as bg_body.jpg, but the CSS to style it refers to the background image as body_bg.jpg (note that “body” and “bg” are reversed).

I’ll continue going thru this tutorial and let anyone know if I find any other issues.

Sean Ahrens

February 23rd, 2010

Oh, also– it appears that in the code sample shown in #49, is missing its closing tag.

Great tutorial! Thanks again Jacob. Went through the whole thing, and got everything looking great.

Sean Ahrens

February 23rd, 2010

Oh, also– it appears that the code sample shown in #49 is missing it’s final closing div tag.

Great tutorial! Thanks again Jacob. Went through the whole thing, and got everything looking great.

Tizoc

February 25th, 2010

¡Excelente!

Javier

March 5th, 2010

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

emoracket

March 21st, 2010

Wow~~Awesome Design :D. Very creative …
That’s called Web2.0 :P

Jhon

April 20th, 2010

Amazing…congratulations

wind

April 20th, 2010

cool!
and can i use it free on my website?

Dinesh

April 22nd, 2010

This is Great,man

Bruce

May 14th, 2010

This is one amazing tutorial. I’ve come through Part I relatively unscathed, but it’s the CSS/XHTML aspect of it which is giving me problems. For some reason my ‘featured_bg.jpg’ and ‘monitor.jpg’ are pushed to the left and right hand side of the screen respectively, and they aren’t vertically in-line with the ‘logo.jpg’ & ‘menu.jpg’.

I’ve scoured my CSS file as well as the downloadble example, but there isn’t any difference in the code (apart from my own graphic element sizes, etc). Any help please?

Bruce

May 14th, 2010

P.S. Here is a screengrab of the problem I’m facing. I thought it would make it much clearer if my description was proving to be unclear :)

Thank-you so much!

http://yfrog.com/75hollersitenotworkingj

mike

July 16th, 2010

Fantastic tutorial, especially for my sub-entry level… I learned a lot and will be checking back often for more. I noticed a few ppl asked about the newletter form and how to get it to function. That’s my hang up too. Anyone have any advice on how to make it work? I’m guessing a php or cgi script. Is the form element in the index.html the actual form or do we create another form and link to it? help

Rishab

August 9th, 2010

Hi Jacob Gube,
I tried your tutorial, well the only prob i m facing is when ever you click on any menu button it shows the all selected area in which its build in, can you please help how can i remove the same.

Rishab, skype: rishabaggarwal

Karsten

August 10th, 2010

Great tutorial!

Step 18 seems to have a minor issue as the guide in Photoshop is not 100% the same as pictured above.

If you use a fixed selection size of 640x125px the width of the selection extends beyond the guides on both sides. It does align up with the outer margin guide but on the above picture the inner guides are being used.

A bit hard to explain but I’m sure you´ll see it if you open it in Photoshop. Otherwise I´m happy to provide a screendump explanation.

Tracy

September 2nd, 2010

Hi Everyone,
Has anyone figured how to integrate video with the monitor image? I am thinking to use a table with monitor image cut up to surround the video… I actually tried but getting the table to replace the image is proving to be harder than I thought. Any suggestions for getting it to work? Thanks

Saravana

September 4th, 2010

Thank u..
It’s awesome tutorial..

DC

September 5th, 2010

Hi Jacob,

Thanks for the very informative and useful tutorial. I used to use Frontpage back in the day and have not updated my web design skills since then so this has been very helpful.

For other pages (contact, work, etc), do you need to make a separate css file for each page? Or do you just use 1 css file and have other pages reference it? I’m not quite sure as I’m pretty poor at coding.

Also, in IE, the menu bar is going kinda crazy, it shows 2 menu bars, with the below menu bar showing the hover effect. However, in Chrome and Firefox this does not happen. Any idea?

Thanks again,

DC

welliam

September 18th, 2010

Thanks alot
I have two notes:

1- a rectangle selection appear in FF all round the buttons !!
http://www.uploadpix.org/images/untitlpip.png

and in IE also appear but on the clicked button only, is there a way to hid the selection rectangle ?

2- horizontal scroll bar appear in resolution 1024×768 but I think it will be cooler to not display horizontal scroll bar in that resolution and higher like many web 2.0 sites.

thanks

Kurumi Abaete

October 1st, 2010

Great tuts.

The navigation renders a little too big for my liking.

Thanks for the second part of this tutorial, is great to have such a clear tutorial on psd to html/css.
There should be more tuts on the subjects.

Brian

October 14th, 2010

I just started, but having issues with exactly where to place the code.

Tim

November 10th, 2010

Yay, today I finally had time to do this.
Your method is cool and will save me time in the future :)
Thanks Heaps

robey

November 16th, 2010

ang panget naman my dashed effect ung mga link ayaw ko un.

sarankumar

November 27th, 2010

excellent !!! write more n more ! we are ready to accept!!
love you

nick

December 21st, 2010

great!

one thing though, the copy area in step 6 should be 25 pixels, not 20.

brian adams

December 28th, 2010

very nice clean web 2.0

Alex G

February 4th, 2011

thank you very much!

Wodieskodie

February 13th, 2011

Awesome tutorial. Thanks.

Steven

February 14th, 2011

Really amazing tutorial– I absolutely love that you explain each element and why it does what it does. I have a Q though:

Can anyone point me to a guide about positioning text? I’m leery of using text-indent to hide text, for SEO and Adwords Quality Score purposes, so I’d like to be able to position the text in the right spots… plus then it’s easily editable rather than having to edit them in PhotoShop.

Johnni-I

February 18th, 2011

Hello! I just used this tutorial to code a website for a client:
http://www.cruzbarcelona.com/echo

sakhawoat

March 26th, 2011

This is a very good tutorial. This tutorial is useful for everybody.

creatkve.

June 10th, 2011

video tutorial means more better

ashraful kabir

July 18th, 2011

very nice article for creating a cool website. Nice job…

Jessica

July 19th, 2011

I tried to scan the comments to see if anyone is encountering the same issue as me… but there are so many to read through! sorry if this is a repeat…
http://mypage.iu.edu/~jessvaug/home.html
here is my site so far. just wondering if anyone can tell why most of it isn’t aligning correctly. the header/ nav aligned perfectly but the rest isn’t.

Jessica

July 19th, 2011

“Bruce

May 14th, 2010

This is one amazing tutorial. I’ve come through Part I relatively unscathed, but it’s the CSS/XHTML aspect of it which is giving me problems. For some reason my ‘featured_bg.jpg’ and ‘monitor.jpg’ are pushed to the left and right hand side of the screen respectively, and they aren’t vertically in-line with the ‘logo.jpg’ & ‘menu.jpg’.

I’ve scoured my CSS file as well as the downloadble example, but there isn’t any difference in the code (apart from my own graphic element sizes, etc). Any help please?”

Bruce, I’m having the same problem

Ander

August 5th, 2011

Many thanks for this tutorial, it is awesome…

I wonnder though is anyone could help me sort out the navbar sections, i cannot get my navbar highlight to match up, it seems to offset :(

http://imageshack.us/f/200/navbarlq.png/

Any help would be appreciated

Nathan

August 14th, 2011

Wow! I really like this template! Super job on it! It took me a while to figure out how to copy in photoshop. I thought you had to select layers and stuff, and it was getting on my nerves but then I re-read some parts and saw that you have to use “Copy Merge”.

Thanks for making this! I have learned a lot from this tutorial.

One thing, on the example page, the last box has the same as the second. Just change the class of the 3rd box to “book” (the 2nd and 3rd boxes are both set to “work” right now)

Sincerely,
Nathan

Nathan

August 16th, 2011

Again, I really like this template! Thanks for the tutorial! It really, really helped and I really learned a lot. I really never knew that you could create templates from PSDs!

But is there anyway to center the menu & logo? It looks like it is to the right too much and doesn’t line up with the rest. Is there anyway to fix this? I’ve tried putting it all in a div and floating it left and that did not work. I also even tried adding a margin-right to no eval.

Can someone help me with this? My email is [Email removed for privacy] if you would like to email me to help.

Thank you in advance,
Nathan Johnson

L Rebisch

November 2nd, 2011

Wanted to say that I absolutely love this tut! You lay everything out well and just because my design did not originally fit, it made me take the time to learn how the heck to position stuff. It was my weak point, but not anymore.

I have gone to college and taken 3 web design classes and not one has done this good of a job when it comes to modern design positioning(960)and code. That is why I am always looking for great tuts so I can learn as much as I can. Not that I did not learn in college, its just when it comes to coding and positioning, I was confused and you clarified it for me.

So thanks again! great work. mine looks just like yours. haven’t done the java yet, but will.

Cathy

November 14th, 2011

Great tut!

Just one quick question :)

I would like the page that the user is on to be highlighted in the Nav and cant seem to get it to work… what am I doing wrong?

in CSS i added a:active , see below:

#home a:hover, #home a:active {
background:url(img/nav.jpg) no-repeat 0 -46px;
}

and on page i added body tag id:

Can anyone help me please!

CHAuthor

November 18th, 2011

thanks.. try putting this into a video.. you will get million visits in youtube :) as this is a great tutorial and hard to find beginner help stuff

Abigail Monaco

December 11th, 2011

Cool, well explained, only problem I found was when applying the javascript the hover version of the image shows by hovering just below the non-hover logo, it may just need a little adjustment other than that works great. Thanks

Spencer

August 29th, 2012

Thanks for the tutorial. I liked it. I came across the bugs that other people did, I found it a bit strange that Jacob thanked people for pointing these out in 2009 and said the article would be updated with the bugs fixed, but it hasn’t been.

Leave a Comment

Subscribe to the comments on this article.

Mobify empowers marketers and developers to create amazing mobile web experiences. Tap to learn more

Mobify