Coding a Clean & Illustrative Web Design from Scratch

Jul 9 2009 by Richard Carpenter | 80 Comments

Coding a Clean & Illustrative Web Design from Scratch

In this comprehensive and step-by-step web development tutorial, you will learn how to convert a Photoshop mockup of a professional web layout design that features an illustrative landscape header into a standards-compliant XHTML/CSS template.

This is a follow-up tutorial requested by you, the readers of Six Revisions. To learn how to create the Photoshop web layout mockup, head on over to the tutorial called How to Create an Illustrative Web Design in Photoshop.

Live Demonstration

Click on the following image to check out the live demo of what we’ll be building.

Live Demonstration

Download the source files and use them as your website template

We’re releasing the source files of this tutorial under the GNU General Public License we only ask that you retain the copyright information in the source code (which aren’t visible in the design). If you’re not interested in reading the tutorial, you can use for your website or web template. So this post is a tutorial and a freebie.

Let’s get the show started, shall we? Make sure you have a pot of coffee or your favorite caffeinated drink handy because you’re in for a long ride!

Setting up our work area and files

1 Create a new folder somewhere on your desktop called web design layout.

2 Within the web design layout folder, create another folder called images.

Step01

3 Create a new blank HTML file using your favorite code editor and save it inside your web design layout folder with a filename of index.html.

4 Create a blank CSS file called styles.css and save this inside the web design layout folder.

Step02

You should now have an ideal working setup for our template.

Setting up the HTML file

5 Open up your index.html file and your styles.css file in your code editor.

6 At the top of your HTML file, locate the <title> tag. Inside the <title> tag, add your website title. The information you input into the <title> tag will determine what is displayed in the browser window.

Step03

7 Underneath your <title> tag, you need to link to your stylesheet using the code below.

<link href="styles.css" rel="stylesheet" type="text/css" />

Step04

We can now start to mock-up some of the HTML code for our layout. There are many ways to convert a Photoshop file (PSD) into a working template. Some people slice all the images first, then start coding the template and some people prefer to code, then slice afterwards. I find it best to code and slice as you go along starting from the header and working your way down the design.

Mocking up the header

8 We’ll start off with a simple container div with an ID of #container. Use the HTML markup below.

<div id="container">
</div>

9 Inside the #container div, we’ll add another div called #header.

<div id="container">
  <div id="header">
  </div>
</div>

Preparing header slices

10 Now that we have a basic foundation, we can slice our background image and our header image. Open up the PSD file called illustrative_web_design_psd.psd in Adobe Photoshop which is freely available for download in the the first part of this tutorial series called How to Create an Illustrative Web Design in Photoshop. Download the source files from that tutorial, then head on back over here.

11 Once the PSD file is opened in Photoshop, make sure that the Layers Panel is open by choosing the Window menu and making sure Layers is checked (alternatively, F7 toggles the Layers Panel).

12 Turn off all of your layers’ visibility as shown in the following figure.

Step05

13 Select the Rectangular Marquee Tool (M) and make a selection around your header area similar to the following figure; don’t forget to include 2px of the background (as shown).

Step06

14 Once you’ve made the selection, go to Image > Crop.

Important: Don’t save your PSD file!

15 Save the cropped file for the web by choosing File > Save for Web & Devices (Alt + Shift + Ctrl + S). Save the file with the name header.gif inside your images folder.

16 Close your PSD file and when prompt to save, choose "No".

17 Now, open up header.gif inside Photoshop.

18 Using the Zoom Tool (Z), zoom in to the right hand side where the mountain on the illustration ends. You will notice the mountain has a darkly shaded area where the inner shadow was added.

Step07

19 We need to carefully erase the shaded bit so it matches the color of the mountains. Use the Rectangular Marquee Tool (M) to make a selection on header.gif just like the figure below.

Step08

20 Once you’ve made the selection, we’ll transform the selection. Choose Edit > Free Transform (Ctrl + T) to free transform the selection. Select the middle right transform control and drag towards the right edge. You should have something like the following figure.

Step09

21 Resave your file (header.gif) by going to File > Save for Web & Devices (Alt + Shift + Ctrl + S). Leave your header.gif open in Photoshop.

22 Use the Rectangular Marquee Tool (M) to make a selection from the top to the bottom of the header area and as wide as the flat part of the mountain. Use the following figure as a guide.

Step10

23 Once you’ve made the selection, crop the image again using Image > Crop.

24 Save the cropped image as bg.gif inside your images folder using File > Save for Web & Devices (Alt + Shift + Ctrl + S).

Resetting margins and paddings of all elements

25 Head back over to your code editor and open up styles.css.

26 Before we start adding our header styles, we need to add a small CSS reset to reset all of the page elements’ margins and paddings. There are many methods to do this, but for the sake of succinctness, we’ve chosen to use the following method. If, however, you would like to learn more about better methods for resetting your styles, read the article called "CSS Tip #1: Resetting Your Styles with CSS Reset".

The CSS reset looks like this:

* {
  margin: 0;
  padding: 0;
}

Styling for the body background

Once you’ve added the CSS reset at the top of your styles.css file, we can begin to style the body of our HTML document.

27 The bg.gif file will be incorporated as a CSS background and it will be repeated horizontally along the x-axis. We then finish off the body styles by adding a background color which matches our design’s background. We can also remove some of the default styling from our paragraphs by styling the paragraph (<p>) tags. Inspect the following block of code.

body { background: #ededed url(images/bg.gif) repeat-x; }
p {
  color: #999;
  padding: 0;
  margin: 10px 0;
  font: 12px/18px Arial, Helvetica, sans-serif;
}

Centering the page content

28 The width of the design mockup is 950px. To set the width of our page template and to center it in the browser, we style the #container div using margin:auto technique and assign it a 950px width attribute.

#container {
 margin: auto;
 width: 950px;
}

Adding the illustrated header background image

29 Before we style our #header div, we must first determine what the height of our header image is. If you’re using Windows Vista, you can simply click the image file and it will tell in the status bar what the dimensions are. Feel free to use your own method on finding out the height of the image.

As you can see from the figure below, the height is 302px.

Step11

30 We can start styling our #header div by assigning a fixed width of 950px and a fixed height of 302px. We also float our image to the left. We add the header.gif image as a background. We set the background-repeat atrribute to "no-repeat" to stop our header image from repeating horizontally, which is the default behavior in most web browsers. See the following code block.

#header {
 height: 302px;
 width: 950px;
 float: left;
 background: url(images/header.gif) no-repeat;
}

31 Test the index.html file by opening it in your web browser, you should have something that looks like the following figure.

Step12

Slicing the logo (website title)

We can’t really insert our logo/website title into our template as pure text because it contains too many layer styles in Photoshop. We have no option but to include it as an image.

32 To start, open up your PSD file (illustrative_web_design_psd.psd) again.

33 Using the Rectangular Marquee Tool (M), make a selection around your logo/website title. Utilize the figure below as a guideline on how to make this selection.

Step13

34 Once you’ve made the selection, in the Layers Panel, turn off the visibility of all of your layers apart from the layers related to your logo/website title. The background should be transparent.

35 Choose Image > Crop to crop the canvas down to just the logo/website title.

36 Save the cropped image as a PNG file. Use File > Save for Web & Devices (Alt + Shift + Ctrl + S) and save it with the name logo.png into your images folder.

Adding the logo to the HTML document

37 Head over to your HTML document and add a div called #logo as a child of our #header div.

38 Inside the #logo div, add an <h1> element.

39 Inside the <h1> element, add a hyperlink (<a>) with the name of your website. The reason we use an <h1> tag and not an inserted image is because were going to use a CSS background-image text replacement technique. You can read about this technique on the stopdesign website in an article called Using background-image to replace text.

Here is the code block for the above steps:

<div id="header">
  <div id="logo">
    <h1><a href="#">Your Website Name</a></h1>
  </div>
</div>

Styling the logo/website title

40 We can start styling the logo/website title by adding a top margin to the #logo div which will push our image down to where we want it.

#logo { margin-top: 60px; }

41 We then display our <h1> element as a block element and float it to the left. Our logo image had a width of 269px and a height of 45px so we style our <h1> element with those attributes. We also need to push our <h1> element’s text off the page. We can do this by utilizing the text-indent CSS property with a value of -9999px.

#logo h1 {
 display: block;
 float: left;
 width: 269px;
 height: 45px;
 text-indent: -9999px;
}

42 We then need to style our link that resides inside the <h1> element so it displays a block element or else the user might not be able to click on the logo to go to the home page. We can make the width and height of the link equal to its containing parent, so we simply give them 100% width and height property value. So that the user doesn’t encounter a gray border when they click on the logo, we set the element’s outline attribute to none. Finally, we add the logo.png as a background image, again making sure that we give the background CSS property value of no-repeat so that it doesn’t tile our logo horizontally.

#logo h1 a {
 display: block;
 width: 100%;
 height: 100%;
 outline: none;
 background: url(images/logo.png) no-repeat 0 0;
}

43 Test your work in a web browser. The web layout should now look like the following figure (Oh, and by the way, if this section is new to you, congratulations, you just learned how to pull off a CSS background-image replacement technique).

Step14

Determining the height of the template’s primary navigation

44 Before we start with the navigation, we must first find out what the height of it is. Re-open your PSD file and use the Zoom Tool (Z) to zoom in on your navigation area so that you can clearly see where the navigation starts and begins.

45 Make sure that the Info Panel is open by making sure Window > Info is checked (F8 to toggle the panel on or off).

46 Use the Rectangular Marquee Tool (M) to make a selection. Use the following figure as a guide on how to make this selection.

Step15

47 Look at the Info Panel to determine the height (H:) value of the selection. This is the height of our navigation (which I determined to be 38px).

Putting the navigation bar in the HTML document

48 Head back to your HTML file where we’ll now be adding the navigation to our HTML document’s structure. We’ll be using two simple unordered lists inside the #header div. We’ll put these guys inside a div called #navigation. Inspect the following block of code.

<div id="navigation">
  <ul class="nav-links">
    <li><a href="#">home</a></li>
    <li><a href="#">services</a></li>
    <li><a href="#">portfolio</a></li>
    <li><a href="#">clients</a></li>
    <li><a href="#">testimonials</a></li>
    <li><a href="#">contact us</a></li>
  </ul>
  <ul class="phone-number">
    <li>free quotation - 0800 123 456</li>
  </ul>
  </div>

Styling the navigation

49 We first style our #navigation div. We add a fixed height of 38px which was the height we determined in Photoshop. We give the #navigation div a fixed width of 950px, same as our #container div. Finally, we place a top margin attribute to push our navigation down away from our logo and then floating it to the left.

#navigation {
 height: 38px;
 width: 950px;
 margin-top: 152px;
 float: left;
}

Styling the first navigation list items

50 We style our navigation list items (.nav-links li) by floating them to the left, setting our links inline with each other. We add padding to the top and the right of the list items. The top padding pushes the links down, vertically centering them on navigation bar, whereas the right padding separates each link with a 25px gap.

.nav-links li {
 display: inline;
 padding: 9px 25px 0 0;
 float: left;
}

51 Our actual links (the <a> elements inside the list items) will also need styling. We give them some visual styles such as font family, color, and size. We also remove the default underlines of hyperlinks and also capitalize the text (using the text-transform attribute). We can also reduce the letter spacing by setting it to -1px. Also, we change the color of the links to yellow when the user mouses over them (using the :hover psuedo-selector). Inspect the code below to make sure you see how the above description translates to CSS.

.nav-links li a {
 text-transform: capitalize;
 color: #fff;
 text-decoration: none;
 letter-spacing: -1px;
 font: bold 14px Arial, Helvetica, sans-serif;
}
.nav-links li a:hover { color: #ff0; }

Styling the phone number navigation list items

52 The .phone-number list is styled in the same way as the .nav-links list but we only really need to style the list items (<li>). The most important style to pay attention to is the float attribute – we float it to the right so the phone number text is on the right of our web layout’s navigation bar. The rest of the code is pretty self-explanatory.

.phone-number li {
 float: right;
 list-style-type: none;
 text-transform: capitalize;
 color: #fff;
 letter-spacing: -1px;
 padding-top: 12px;
 font: normal 14px Arial, Helvetica, sans-serif;
}

53 Test your work in a web browser. Your template should now look something like the following figure.

Step16

Slicing the content area boxes

There are two ways we can code the content area. We can either code our boxes as squares and use the border-radius CSS3 property to make them rounded with the downside that not all browsers support this method.

The second option is to slice the content boxes up and set them as CSS background images on the box.

If it was my personal website, I’d use border-radius, but for this tutorial, I think we’ll slice the content boxes up. It’s good Photoshop practice, and until CSS3 specs reach W3C final recommendation status, it’s a bit risky to use CSS3 properties unless we code for Progressive Enhancement (which is out of the scope of what we want to do here).

54 Head over to your PSD file again. In the Layers Panel, hide the visibility of all your layers except for the welcome… group which contains layers for our main content box.

55 Use the Rectangular Marquee Tool (M) to make a selection around the top half of the content box where the corners are rounded. Follow the figure below as a guide to making your selection. Note that the reason why I have chosen to make such a big selection is because the actual title area on the content box should actually be big enough inside for our text.

Step17

56 Save the image as a PNG file by going to File > Save for Web & Devices (Alt + Shift + Ctrl + S) and save it as content_box_top.png inside your images folder. Repeat the process for the bottom part of the content box but when saving for the web, use the file name content_box_bottom.png. Check out the following figure to see how to create the marquee selection for the bottom part.

Step18

Coding the left content boxes (primary content area)

57 The markup for our left content boxes where our primary content will show up is easier than it looks. First, we need create a div called left-content. Inside the #left-content div, we need to create three divs with distinct classes: .content-top, .content-middle, and .content-bottom. The .content-top div will contain our top content box image, the .content-middle div will contain our main content, and our .content-bottom div will contain the bottom content box image. Inspect the following block of code.

<div id="left-content">
  <div class="content-top">
    <h2>welcome to our website...</h2>
  </div>
  <div class="content-middle">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit [...]</p>
  </div>
  <div class="content-bottom">
    <!-- bottom content box image goes here. -->
  </div>
</div>

Styling the left content div

58 We start with our #left-content div: we float it to the left, add a fixed width the same size as our content box images (566px), and then add a 20px top margin which will push the content boxes down away from the navigation.

#left-content {
 float: left;
 width: 566px;
 margin-top: 20px;
}

Styling the content top class

59 For the .content-top div class, we need to set our content_box_top.png file as a background, float the div to the left, and add a fixed height and width the same as our image. Remember that the padding also makes up the full amount towards the width so whatever padding you add, you’ll have to deduct it from the width or height. We then need to make sure our <h2> tags (which functions as our content box titles) sit nicely in the middle of the top part of the content box. To do this, we add a small top and bottom margin of 4px on the .content-top style rule and then add a bigger left and right margin to push the text across. Inspect the following block of code to make sure the description above makes sense.

.content-top {
 float: left;
 height: 32px;
 width: 536px;
 background: url(images/content_box_top.png) no-repeat;
 padding: 4px 15px;
}

Styling the middle content area

60 The .content-middle div will have a few different styles from .content-top, we can achieve the same look in the web layout mockup by using the border CSS property. Inspect the following block of code to see how it works.

.content-middle {
 float: left;
 width: 534px;
 padding: 5px 15px 0 15px;
 border-right: 1px solid #d3d3d3;
 border-left: 1px solid #d3d3d3;
 background: #fff;
}

Styling the bottom content div

61 The .content-bottom class will be styled in the same way as our .content-top class: we add content_box_bottom.png image as a CSS background, floating it to the left, and then adding a margin to the bottom of the box so it leaves a nice gap in between any other additional content boxes we might add.

.content-bottom {
 float: left;
 height: 17px;
 width: 566px;
 margin-bottom: 15px;
 background: url(images/content_box_bottom.png) no-repeat;
}

62 You may now add some dummy content to the content middle class, I’ve added a couple of paragraphs similar to our PSD file. We give the <h2> elements some visual styles (capitalize them, adjust letter spacing, etc.). In our PSD file, we had a selection of text which was green and italic, this can be achieved by wrapping the text inside a <span> with a class of .highlight. We align the text inside the content box by styling the <p> elements and giving them a text-align CSS property value of justify. Inspect the following code block to see if the above description makes sense.

h2 {
 text-transform: capitalize;
 color: #666;
 letter-spacing: -1px;
 padding-top: 7px;
 font: bold 16px Arial, Helvetica, sans-serif;
}
.content-middle p { text-align: justify; }
.highlight {
 color: #7b9122;
 font-style: italic;
}

63 If you test your template in your browser you should now have something like the following figure.

Step19

64 Create more content boxes by copy and pasting the .content-top, .content-middle, and .content-bottom set inside #left-content.

Step20

Slicing the sidebar boxes

65 The sidebar boxes will be sliced in exactly the same way as we did our main content boxes, the only difference really is that the slices will just be smaller in width. Start by switching back to our PSD file.

66 Hide all your background layers’s visibility in the Layers Panel so the background is transparent.

67 Make a selection around the top half of your sidebar box using the Rectangular Marquee Tool (M); make sure you get as close as you can to the edge, down to the last pixel. Use the figure below as a guide.

step21

68 Crop the PSD file to the selection using Image > Crop.

69 Save the cropped image as sidebar_top.png inside your images folder.

70 Close your PSD file and choose "No" when you’re prompted to save the changes (VERY important).

71 Re-open your PSD file and repeat the same steps above, just with the bottom part this time. Again, create the selection as close to the edges as possible.

Step22

72 Crop the image by using Image > Crop.

73 Save the cropped image as sidebar_bottom.png inside your images folder.

Marking up the sidebar

74 The markup for our sidebar/right content area will be very similar to our main/left content, we’ll start with a div that has an ID of #right-content. Inside this div, we’ll have three classes: .sidebar-top, .sidebar-middle, and .sidebar-bottom. The .sidebar-top class will contain our sidebar box title. We’ll wrap the titles in <h2> tags exactly like in our left content area. The .sidebar-middle class will contain our sidebar content. Examine the following code block featuring the markup of our sidebar/right content area.

<div id="content-right">
  <div class="sidebar-top">
   <h2>our latest project...</h2>
  </div>
  <div class="sidebar-middle">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam [...]</p>
    <p>Lorem [...] <span class="highlight">Aliquam lacinia[...]</span></p>
  </div>
  <div class="sidebar-bottom">
    <!-- sidebar-bottom content -->
  </div>
</div>

Styling the sidebar

75 We can now style our sidebar using the styles below. All the code is similar as our left content styles except for a couple of things. First, the height and width of our fixed elements. The other difference is that the #right-content is floated to the right instead of the left. We also use the sidebar_top.png and sidebar_bottom.png we sliced in the previous section as the CSS background images of the .sidebar-top and .sidebar-bottom divs. Take a few moments to examine the code block below.

#content-right {
 float: right;
 width: 322px;
 margin-top: 20px;
}
.sidebar-top {
 float: left;
 height: 32px;
 width: 292px;
 background: url(images/sidebar_top.png) no-repeat;
 padding: 4px 15px;
}
.sidebar-middle {
 float: left;
 width: 290px;
 padding: 5px 15px 0 15px;
 border-right: 1px solid #d3d3d3;
 border-left: 1px solid #d3d3d3;
 background: #fff;
}
.sidebar-middle p { text-align: justify; }
.sidebar-bottom {
 float: left;
 height: 16px;
 width: 322px;
 margin-bottom: 15px;
 background: url(images/sidebar_bottom.png) no-repeat;
}

76 Add some dummy content into your boxes then give it a whirl in your web browser.

Step23

Slicing the footer area

77 Slicing our footer is going to be quick and painless. To start head over to our PSD file.

78 Use the Zoom Tool (Z) to zoom into your footer area.

79 Use the Rectangular Marquee Tool (M) to create a 1px wide selection spanning the height of your footer. Use the following figure as a guide.

Step24

80 Crop the canvas to the selection using Image > Crop.

81 Save the file inside your images folder as a GIF called footer.gif.

Coding the footer’s HTML markup

82 The div for the footer will sit outside of our #container div. The reasoning behind this is that we want the footer to span the entire width of the web browser: if you created the footer inside the #container div, it would have a max width of 950px. We’ll start off using a div with an ID of #footer. Inside the #container div, create another div called #footer-content. Inside #footer-content, add your footer content inside <p> tags. Study the markup below.

<div id="footer">
  <div id="footer-content">
    <p>[...] Design &amp; Coded By Richard Carpenter</p>
  </div>
</div>

Styling the footer div

83 We’ll style the #footer by first adding our footer.gif as a CSS background. We’ll want to repeat this background horizontally (along the x-axis). We need to clear both floats so the #footer remains underneath the #container div. We also use a fixed height of 111px which is 20px bigger than our actual footer image that we created in Photoshop because when you add padding or a top margin to move the footer down away from the content, the gap tends to always be bigger or smaller in other browsers. This way, the gap will always remain the same. Study our #footer div’s style rule below.

#footer {
 clear: both;
 height: 111px;
 background: url(images/footer.gif) repeat-x bottom;
}

Styling the footer’s content

84 Our #footer-content div will have a fixed width of 950px – equivalent to our #container div so that the content is flushed to the left and right of the page’s container. We set the margin CSS property to auto which will center our #footer-content div in the same way #container div is centered. We’ll add 20px padding to the top which will then bring our footer area level with our footer image. Check out the style rule to accomplish the things above.

#footer-content {
 height: 91px;
 width: 950px;
 padding-top: 20px;
 margin: auto;
}

Styling the footer’s paragraph text

85 Our footer text inside a <p> tag can also be styled. The top padding of 35px will push our text down into the middle of our footer.

#footer-content p {
 color: #fff;
 text-align: center;
 padding-top: 35px;
}

Congratulations, you’re done!

That’s it – all done! If you followed the steps, you should now have a working template.

Click on the following image to check out the live demo of what we’ve made together.

Live Demonstration

Final notes

The template has been checked in both Firefox and Internet Explorer 7. The only minor issue is a slight alignment difference within the height of the footer text.

This can easily be fixed with a Internet Explorer 7 specific stylesheet. The template has also been validated through W3C auto-validators with no errors.

Questions?

We’ll try to help you through all of your questions, so pose them in the comments. Remember that Six Revisions is beginner-friendly so don’t be afraid to ask any questions with the tutorial – the community here is friendly and we love helping each other out.

Related content

About the Author

Richard Carpenter is a freelance Web and Graphic Designer from England. Check out his portfolio here.

80 Comments

WebsiteExpress

July 10th, 2009

GREAT ARTICLE :) thanks

Design 55

July 10th, 2009

Well done, nice tutorial, but dont use:

* { margin: 0; padding: 0; }

Better is use CSS reseting, eg.: http://meyerweb.com/eric/tools/css/reset/

dronix

July 10th, 2009

ah thanks for the tutorial, wasn’t expecting this one yet; was waiting for the coding of the Grunge layout. Keep them coming!

Tyler

July 10th, 2009

I used a the tutorial to create a similar style of the clouds and hills but I used flash. The clouds move a long a different speeds and when they move off one side, they’ll change shape and come on again from the other side (off screen) at a different speed again, it looks quite good so far. I also added a sun which rises and sets, however that didn’t look that good, so I’ve just added the sun to be in the corner.

Pedro

July 10th, 2009

Great tut. Thanks Richard!

Jay

July 10th, 2009

Great article! Very detail step by step!

Tim Lowland

July 10th, 2009

Great tutorial, I’ve used the header part for a project of mine, will be making the rest of it very soon.

I follow your main website Richard and you make some great tutorials, glad to see you on this site as well.

zeemiDesign

July 10th, 2009

Nice follow-up, good work!

George

July 10th, 2009

A few comments:

1. Why use GIFs at all? PNGs give you smaller file sizes and tend to look better. If you use PNGOUT, you can get the file sizes even smaller.

2. Instead of cropping the header image, then having to touch it up afterwards due to the inner shadow being changed from cropping, how about just doing “Copy Merged” instead of Crop after you selected it with the marquee tool? Then Create New Image, Paste, Save For Web – finished.

3. “width:100%” for the heading image (#logo h1 a) is redundant and unnecessary.

4. CSS reset using * as a selector is lazy and will degrade performance, as the browser has to apply the properties to every single element on the page.

5. Instead of display:inline on the nagivation list items (.nav-links li ), you should use list-style:none on the containing .

6. The minor alignment issues in the footer are not due to anything with IE, but with using margins and paddings poorly/improperly.

James

July 10th, 2009

Cool! Looks just like my site! Although I cheated and used a woo theme…

optimus Prime

July 10th, 2009

6revisions FTW!

Alex Ball

July 10th, 2009

Nice tutorial. It’s also always nice to see how someone else would tackle a problem, or build something.

One note, I see you’ve ignored the PNG-transparency issue with IE6. I’ve done the same thing for my latest site, and it’s nice to know it’s not just me who has given up on IE6 ;)

viktor

July 10th, 2009

sorry, but this is very poor.. no accessibility and usability..

-when i switch off images, i dont see any text in header
-when i switch off images, text in menu have white color and background is gray, that is no good for some people..
-where is style for print?

average

Metin

July 10th, 2009

haven’t come across any tutorial which has 80+ steps.
it’s a delightful and really detailed tutorial.
Great work!

JOhn Davis

July 10th, 2009

Wow dude that is just way too cool!

Rahul Jadhav

July 10th, 2009

Nice tutorial. The site looks very good

om ipit

July 10th, 2009

this tutorial is good for me…
i find in another site, but isn’t like this…
really thanks for me

richard

July 10th, 2009

Thx for your comments.

@VIKTOR:

why would you need to turn the styles off. I dont no anyone who turns off the styles, even for print.! 99.9% of sites on the internet, if you turn off the styles its all messed up.

@GEORGE:

you can use your own ways and methods of using a reset “as the tutorial says”. Il take all your suggestions into concideration when doing the next one ;)

Victor

July 10th, 2009

Amazing, great job!!!! If you wanted to make a tutorial on how to make this into a wordpress template, that would be cool too! :)

Jon Tomlinson

July 10th, 2009

Very nice tutorial, though as with most content on Six Revisions, they usually are.

Ryan Gliozzo

July 10th, 2009

Very well written guide and easy to follow. Although some people here see a need to correct things, we all design our sites with our own little differences and tricks (although for career designers the tips are welcome). For people who are new to design and CSS, this is a perfect lesson to get them designing a compliant CSS layout from a .PSD.

Jon Rawlins

July 10th, 2009

Good little article, there may be a few different methods I would personally use, but this is great for someone starting up. I would have personally used the slicing methods in photoshop for the imagery.

@George, personally I think he was correct in using .gif’s, I would personally recommend gif’s because I beleive you can get a much better filesize. BUT, everyone has their own opinions. PNG’s I find to have a larger filesize, but at the same time its all about how you export these days.

A great post, with some good comments on here.

Jon

Cisdevry

July 10th, 2009

Great tutorial. Excellent details. Thanks for putting this together and spending your time on helping others.

Kevin Quillen

July 10th, 2009

“I dont no anyone who turns off the styles, even for print.”

The printer does.

He’s just saying you should be using alt and title tags on images and anchors, just in case someone doesn’t want to see images (mobile phones or dial up).

Print stylesheets are very simple and take a few minutes, all you need to have printable is the content area and make sure it prints decently.

“CSS reset using * as a selector is lazy and will degrade performance, as the browser has to apply the properties to every single element on the page.”

Myth

“Why use GIFs at all? PNGs give you smaller file sizes and tend to look better. If you use PNGOUT, you can get the file sizes even smaller.”

Because IE6 (people still use this) doesn’t work with PNG all that well, and IE7 can’t use them 100% correctly either (depends on the use case).

Brian A

July 10th, 2009

PNGs are *not* supported for transparency in IE5/6 unless you do the Alpha layer hack. They will display a white color as transparency. Thus GIFs are universal for cross-browser performance.

This example does violate several WCAG accessibility standards, which does include testing with images off to verify the site can be read as text only. Just because others doesn’t do it doesn’t mean its not recommended (and in gov/commercial sites, required).

Kim

July 10th, 2009

Instead of fixing the inner shadow after cropping, you should show the layers you want, select the area, and then do a Copy Merged and paste it into a new document and save. Quicker and easier than mucking around fixing the layer styles!

yasser

July 10th, 2009

Thanks alot Richard ..

Creative as usual :)

ProCoDeR

July 10th, 2009

everything looks great apart from a few bugs such as when a visitor resizes their browser window and scrolls to the right there is gap on the bottom right of the footer

denise

July 10th, 2009

wow – great step-by-step info and good comments as well … can’t want to dig in! Looks very practical. Thanks!!!!!

Vancouv

July 10th, 2009

Thanks for the tutorial — great visuals. I agree, would make a nice WordPress template.

richard

July 11th, 2009

@Kevin Quillen:

“He’s just saying you should be using alt and title tags on images and anchors, just in case someone doesn’t want to see images (mobile phones or dial up).”

The whole tutorial is about converting a PSD into a working HTML template. (full stop) the tutorial purpose is for beginners starting out and for people who are not familiar with converting a PSD. How confusing would the tutorial be for a beginner if i have to explain alt and title tags on images and anchors etc…

same goes for the CSS reset, and the tutorial DOES STATE

“There are many methods to do this, but for the sake of succinctness, we’ve chosen to use the following method. If, however, you would like to learn more about better methods for resetting your styles, read the article called “CSS Tip #1: Resetting Your Styles with CSS Reset”.”

Personally when making websites i tend to use abit off both .gif’s and .png’s, if its just a simple background il use a .gif file, but if its a decent size image which i want to make transparent then i use PNG. As for IE6 i stopped coding for that ages ago.

Kevin Quillen

July 11th, 2009

“As for IE6 i stopped coding for that ages ago”

Everyone wants to stop, no one actually wants to do it. When a client calls up and complains that people can’t access their site in IE6, thats a lost lead/contact/sale for them. So in that case its still necessary to do so.

For one site we have, there are still 10% of site visitors using IE6. Their ecommerce store, if it maintains its current pace, will clock over 6 figures of revenue by this time next year. If IE6 can’t at least get through the ordering process, that would be 10% sale lost, assuming those people would all buy something.

But if it were my personal site, no, I wouldn’t care about IE6.

dude

July 11th, 2009

Interesting but unfortunately you lost all credibility when I saw the Vista window manager (if you can call it that). Try a real OS next time.

Christopher San-Claire

July 11th, 2009

I like to thank you for a great job done and fantastic Tutorial – Just what i was looking for… keep great work up.

Many thanks for sharing.

richard

July 11th, 2009

@DUDE

in what way does an OS contribute towards making a website in HTML and CSS?

richard

July 11th, 2009

@KEVIN:

“But if it were my personal site, no, I wouldn’t care about IE6.”

exactly. The tutorial is a personnal website to who ever wants to perform it. If they want to make it work in IE6 then thats up to them.

If client did get in touch with me about a website and wanted it working in IE6 then i would do so. BUT this is a tutorial not a client ;)

Kevin Quillen

July 11th, 2009

“Interesting but unfortunately you lost all credibility when I saw the Vista window manager (if you can call it that). Try a real OS next time.”

… I have two Windows machines, a Macbook, and previously had another laptop running Fedora 9.

It’s just faster to develop on Windows, because of all the tools readily available. On OSX it takes some time to find IDEs that are worth using, like Aptana. Same goes for linux.

Not everyone has time to deal with tedious shell editing or a prettied up Mac application (before they find out it doesn’t do everything).

Lighten up, lifes too short to be a hardcore dork. Use whatever gets the job done.

George Egonut

July 11th, 2009

If you just look at this as a virtual case study, there’s really nothing to bicker about. The longer and more involved a tutorial is, the more one will find themselves doing things differently, because we all have different habits, techniques, and preferences.

“Use whatever gets the job done.”

Exactly. Arguing over OS is needless elitism and it hinders discussion. This is one way to develop a simple site, and a great look into the process for beginners.

richard

July 12th, 2009

@Kevin:

Good Answer ;)

WebStandardsDeveloper

July 12th, 2009

Interesting article but its time to move on the HTML5 and make even the loading time even faster for less code and semantic mark-up clean code.

My only uggestions with the logo or website nae is to try to make it NOT in Graphics but have it as HTML written with a similar BOLD Helvetica or Arial. For Search engine optimization reasons it should be accessible by the search engines in prior to the design. Can also add a behind the logo and make it accesible if the design is that important for the branding and online appearance.

Good article anyway…

George

July 12th, 2009

Wow, there sure is a lot of misinformation and ignorance when it comes to the PNG format.

1. The PNG format was specifically created to replace the GIF format, is more flexible, and produces smaller file sizes on average than GIF.

2. “Because IE6 (people still use this) doesn’t work with PNG all that well, and IE7 can’t use them 100% correctly either (depends on the use case).”

What nonsense is this? PNG-8 works perfectly fine with IE6/7, which is the only PNG format comparable to GIF. As for gamma issues, if you know what you’re doing, this isn’t a problem Run them through PNGOUT and they’re good to go – most often a lot smaller than saved in GIF.

3. “PNGs are *not* supported for transparency in IE5/6 unless you do the Alpha layer hack. They will display a white color as transparency. Thus GIFs are universal for cross-browser performance.”

Why are you comparing 24-bit alpha transparency to GIF’s 8-bit transparency support in IE5/6?? PNG-8 has no such problems in those browsers. Thus your last statement is entirely incorrect and useless.

I didn’t realize there was so much misinformation about PNGs out there. Amazing.

Kevin Quillen

July 12th, 2009

Why HTML 5?

Folks need to learn the basics first before using HTML 5.

justin

July 12th, 2009

I enjoyed this because I love seeing how other people code. We have the same exact style. So funny.

This is a great article for a beginner and I wish I had this when I was learning XHTML and CSS.

PNGFix for IE6 that uses javascript is key. With this you can use PNG anytime with no worries. I found a really small one that works well.

http://labs.unitinteractive.com/unitpngfix.php

best one out there I think.

patembe

July 12th, 2009

I keep this on my bookmark :) thanks… :D

Jackie

July 12th, 2009

Fabulous..thankyou!

e11world

July 13th, 2009

I still don’t think there is one REALLY GOOD png fix that really works properly. Nice tutorial though.

Dani

July 13th, 2009

Love the tutorial! Really wish stuff like this was around when I was first learning.

Jim C.

July 13th, 2009

Thanks for the tutorial, Richard. I think you made the right choice in not making it too complex for beginners. If you tried to teach everything at once beginners would never get their first site off the ground. Web development is a BIG topic and, clearly, even advanced web developers do not agree on everything.

Phaoloo

July 15th, 2009

Yup, like your design tutorial.

Gouri

July 16th, 2009

Very nice tutorial. I like it. It is very easy to follow. Thanks.

Doug Greathouse

July 16th, 2009

I love this tutorial! Thanks so much.

Kevin Lloyd

July 17th, 2009

I have a few questions on slicing.

When is it better to use the “Crop->Save” method as opposed to actual PSD Slices and exports?

If you need to modify the images later down, how do you ensure that same size of image is taken?

Jono

July 20th, 2009

You can avoid steps 18 – 20 by putting the layers to be cropped into a layer set and applying a mask to that layer set.

Not sure of the exact wording, but there is an option to “apply mask to layer styles” or something similar in photoshop’s layer styles options.

Tom

July 21st, 2009

Nice tutorial – I can’t understand the silly bickering that’s going on though! :)

Personally, when it comes to GIFs and PNGs, I’ll use an IE6 specific stylesheet to replace any PNGs with GIF versions. Obviously, this isn’t satisfactory if you have a massive amount of background pictures, but for a simple small site it does the job.

Chloee

July 21st, 2009

Thank you so much for this tutorial! This is THE BEST beginners guide to web design. I’ve read sooo many others and been to many forums but they’re all for seasoned or well versed developers.

This is the first one I’ve seen that’s simple, easy to understand for complete beginners, concise and quick to implement. I wish I came across this before I began coding my website. This would’ve made my life so much easier!

You know, people would be willing to pay for this kind of information!

Anne

July 27th, 2009

Very nice tutorial. Thank you very much !

richard

August 2nd, 2009

Thanks for all your comments

younuzes

August 6th, 2009

nice tutorial. Thank you very much ! :)

dmo

August 6th, 2009

Thank you for this tutorial … and greetings from germany again.
:-)

José Carlos

August 10th, 2009

Its very useful tutorial.
thanks

Martin

September 23rd, 2009

Thanks for this! Very informative.

It has been a good place to start – this was my first Photoshop coding. It took two full evenings and I still don’t quite think I could do this without instruction, but after I do it a few times I hope I’ll understand why you used this and that.
Thanks.

Martin

studio-Cs

October 5th, 2009

It is a great step-by-step guide. Thanks.

David

October 9th, 2009

Great tutorial thank you!

I’m having a little problem with my header and logo though. My Header shifts down 60px when only the logo should. Please help I can’t figure out what I’m doing wrong : (

David

Robert

October 13th, 2009

Great outline on how to develop a site using CSS! Thanks! One question though that has plagued me in learning css dev techniques (I’m used to the old and now frowned upon “tables” method!) If you wanted to add a third column of text in your content section, how would you accomplish that? I understand how you’re cleverly using floats to do the 2 column format, but a third is where I usually get frustrated and just ditch to a tables method.

Thanks again!

Karachi

October 24th, 2009

Great tutorial, KIS apply to this from the start – Keep It Simple

Lindsay

November 2nd, 2009

Great Tutorial! I have question though, I am currently working on a website that I set the overall width at 900px. My layout is pretty simple, header at the top with a sidebar of buttons and main content box side by side. When I view it in Firefox, Safari, and Opera it looks perfect. When I view in IE, the main content box shifts below the sidebar as if it is too wide. I tried making it smaller in width, but this didn’t work either! Anyone have any ideas?

Pete

January 17th, 2010

Great tutorial Richard, thanks a lot!
Just one thing – illustrative_web_design_template.zip doesn’t load properly from this page, one has to download it from http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-an-illustrative-web-design-in-photoshop/ instead.
This website is great – helps a lot of people dare to go into the stuff they wouldn’t go to on their own :)

Nitesh

January 19th, 2010

Great tutorial.Thanks for putting this together and spending your time on helping others.

Hieppies

February 2nd, 2010

Awesome…..

Thanks for the great great great tutorial… :D

Vimal Lad

June 10th, 2010

This is very helpful for learner ………….

Savita

June 22nd, 2010

Thanks for sharing this wonderful steps. Actually i am new to CSS and XHTML, I did learn a lot.
I would like to post some comment. :)
1. I am using firefox web browser more often(also tested on Safari, Opera as well) somehow my boxes are not aligned as per the positioning we have described in style sheet.
2. Sometimes even my footer doesn’t display properly. Do you have any suggestion.

Since I am new in this area any suggestion would be helpful.

Thanks..

Newbie

July 30th, 2010

Thanks for a great tutorial :)

I was wondering what I need to do next to use it as a template on a joomla website?

I am all new to this and any help would be greatly appreciated. Thanks :)

witdrwn_but_alive

August 7th, 2010

Hey dude, thank you so much for a really helpful tutorial. So many tuts say they show step by step how to convert PSD to HTML+CSS but this is the only one Ive come across that does what it says on the tin. An EXCELLENT tutorial for those who want an indroduction to HTML+CSS. Very much appriciated.

-Leitrim, Ireland

Gee

August 20th, 2010

I think this tut is one of the most “complete” I’ve come across..BUT please DO NOT USE IE6….don’t even mention the godamn thing….let it burn to hell together with those who made it….

Anne

September 25th, 2010

thank you very much.
Today i have learnt how to convert psd to html/css

when i opened the page in google chrome, it worked fine…
but when i opened it in IE, everything messed up… :(
How to make a page so that all browser will show the same????

Sarah

May 1st, 2011

How do you know where to place the pictures (title, navigation…)? You have the perfect attributes/margin thing. Do you guestimate or is there a trick?

Akif

July 3rd, 2011

I like to thank for the #64 I specifically wanted that to learn Thanks Richard!

Frank

August 7th, 2011

This sure is a great source of info Richard !

kishan

October 3rd, 2011

nice work

iToru

November 28th, 2011

PERFECT !!!

Leave a Comment

Subscribe to the comments on this article.