Coding a Clean Web 2.0 Style Web Design from Photoshop

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 withjavascript.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 marginproperty:

  #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.jpgin our img folder. From now on, use the same settings for saving these files. I used the JPEGVery 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 themenu.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 theimg 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 toindex.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 boxbox 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">
    <divfont-weight: bold; color: rgb(0, 153, 102); ">box client">
        <h2>Client list</h2>
        <p>We  have a wide range of clients from [...]<p>
      </div>
    <divfont-weight: bold; color: rgb(0, 153, 102); ">box work">
      <h2>Our work</h2>
      <p>Check out the work we have done for our various [...]</p>
    </div>
    <div font-weight: bold; color: rgb(0, 153, 102); ">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 .bookstyle 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 asnewsletter_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 theborder 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 © 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 logoHoverwhich 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 ><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.

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge