Minimal and Modern Layout: PSD to XHTML/CSS Conversion

Nov 5 2009 by Richard Carpenter | 83 Comments

Minimal and Modern Layout: PSD to XHTML/CSS Conversion

In this web design tutorial, you’ll see a process for converting a Photoshop mockup to working HTML/CSS template. This is Part 2 of a tutorial series that will show you how to create the design, and then convert it to an HTML/CSS template.

Minimal and Modern Portfolio Layout Tutorial Series

Demo

Click on the image preview below to launch the demo of what we’ll be creating today.

Demo

Before you begin

If you haven’t already, you’re highly encouraged to do the Part 1: Design a Minimal and Modern Portfolio Layout in Photoshop of this tutorial series before you go any further. This is because the following will require the Photoshop mockup file from the first part. If you’ve done the first part, get your PSD mockup ready as we’ll be using it here.

If you want to skip the creation of the Photoshop mockup, you should go back to Part 1 and download the source files, as we’ll need it in this tutorial.

Creating the file structure and preparing the files

1 Create a new empty folder on your desktop called portfolio.

2 Inside the empty portfolio folder, create another folder called images that will contain our CSS background images and other image assets.

3 Next, create an empty CSS document called styles.css and an empty HTML file called index.html.

Creating the file structure and preparing the files

4 Open up your index.html file in your favorite source code editor; I’ll be using Adobe Dreamweaver in this tutorial.

5 At the top of your document inside the <head> tags, link to your style sheet (styles.css) so that it’s ready to go. You can use the code below.

Code block 1

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

 

Creating the file structure and preparing the files

Coding the layout sections

Below, you can see the basic structure of our web template. We’ll start our conversion by creating the basic sections of our minimal and modern web page template.

Coding the layout sections

6 We are going to start with a main container (also commonly referred to as a wrapper), which will hold our document in place, centered on the web browser. Inside the container were going to have five div’s which will make up the sections of our website: the sections are #top, #welcome, #sidebar, #content and #footer.

The HTML code looks like this.

Code block 2

<!--CONTAINER STARTS-->
<div id="container">
  <!--HEADER/NAVIGATION STARTS-->
  <div id="top">
    
  </div>
  <!--HEADER/NAVIGATION ENDS-->
  <!--WELCOME AREA STARTS-->
  <div id="welcome">
    
  </div>
  <!--WELCOME AREA ENDS-->
  <!--SIDEBAR STARTS-->
  <div id="sidebar">
    
  </div>
  <!--SIDEBAR ENDS-->
  <!--CONTENT STARTS-->
  <div id="content">
  
  </div>
  <!--CONTENT ENDS-->
  <!--FOOTER STARTS-->
  <div id="footer">

  </div>
  <!--FOOTER ENDS-->
</div>
<!--CONTAINER ENDS-->

Slicing the template’s body background

7 Before we start diving into coding each section, let us first add our web page’s background. Open up your PSD file in Photoshop, select the Rectangular Marquee Tool (M) and then make a small selection covering the header/navigation and a bit of the background; the selection can be as little as 1px wide (because we’ll repeat it horizontally using CSS).

Slicing the template's body background

8 At the bottom of the selection, take note of the hexadecimal color code by using Eye Dropper Tool (I).

9 Once you’ve made the selection, go to Edit > Copy Merged, create a new Photoshop document (Ctrl + N), and then paste the selection to a new document. Usually, Photoshop will automatically fill in the width and height dimensions with the item on your clipboard, but in case it doesn’t, make sure that the dimensions of the new Photoshop document matches that of your rectangular marquee selection.

10 Once you’ve copied the selection into the new Photoshop document, go to File Save for Web & Devices (Alt + Shift + Ctrl + S), choose PNG-8 as the file format, and then save it as background.png inside the images folder.

Coding the template’s body background

11 Now that we have our background image sliced out of the Photoshop document, we can begin to code it nto our template. Open up your CSS file (styles.css) in your source code editor, and then use the following code.

Code block 3

* {
  margin: 0px;
  padding: 0px;
  border: none;
}
body {
  background-image: url(images/background.png);
  background-repeat: repeat-x;
  background-color: #001b32;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #c8c8c8;
}
#container {
  margin: auto;
  width: 850px;
}

Explanation of Code block 3

Let’s go over the styles in more detail.

First, we reset all of our elements’ margins, paddings, and borders to 0 to avoid cross-browser inconsistencies. We do this with the * selector.

Next, we style the body element; we set background.png as it’s background property and we repeat it horizontally (repeat-x). We also set our background color to a dark blue (#001b32).

Finally, we style the #container margins to auto to center the layout, and set a fixed width of 850px.

Slicing the logo/site name

12 We’ll move on to our web template’s logo/site title. Using the Rectangular Marquee Tool (M), make a selection around the website’s title and slogan (look at the following figure for guidance).

Slicing the template's body background

13 Just like with the background.png, copy the marquee selection into a new document, and save it for the web as a transparent PNG called title.png inside the images folder.

Coding the logo/site name

14 With our logo/site name all ready to go, switch back to your HTML document. Inside the #top div, create a new div with an ID of title.

15 Then, inside the newly created #title div, add an <h1> element with the name of your website; we’ll also create a hyperlink element (<a>) that will link back to the home page of our website. For the template, we’ve simply assigned the href property of the a element a value of #, but if you’ll use this on a live website, you can use a backslash (/) instead to link them back to your home page.

The HTML code looks like this:

Code block 4

<!--HEADER/NAVIGATION STARTS-->
<div id="top">
  <!--WEBSITE TITLE STARTS-->
  <div id="title">
    <h1><a href="#" title="Your Website Name">Your Website Name</a></h1>
  </div>
  <!--WEBSITE TITLE ENDS-->
</div>
<!--HEADER/NAVIGATION ENDS-->

16 Now, let’s move over to the stylesheet. To style our #top section elements. Here is the CSS code.

Code block 5

#top {
  float: left;
  width: 850px;
  height: 119px;
}
#title {
  float: left;
  width: 278px;
  height: 74px;
  padding-top: 45px;
}
#title h1 {
  display: block;
  float: left;
  width: 278px;
  height: 74px;
  text-indent: -9999px;
}
#title h1 a {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(images/title.png);
  background-repeat: no-repeat;
  background-position: 0 0;
}

Explanation of Code block 5

Let’s look at the above code in more detail.

Firstly we need to float the #top div to the left and give it a fixed width and height.
The width should be 850px, identical to the #container and the height is the same as the light gray area on the web layout mockup.

Coding the logo/site name

Next, we use a technique called CSS background image replacement using the text-indent method. We indent the text inside #title h1 by -9999px to the left, which essentially pushes it out of the browser view port. This is a good technique for screen reader accessibility and search engine optimization.

Coding the Navigation

17 Still inside the #top, create another div with an ID of navigation right after the #title div. Inside the #navigation div, add a simple unordered list containing your navigation links and give it a class of nav-links. Here’s the code block for the #navigation div.

Code block 6

  <!--NAVIGATION STARTS-->
  <div id="navigation">
    <ul class="nav-links">
      <li><a href="#" title="home">home</a></li>
      <li><a href="#" title="about">about</a></li>
      <li><a href="#" title="portfolio">portfolio</a></li>
      <li class="borderx2"><a href="#" title="contact">contact</a></li>
    </ul>
  </div>
  <!--NAVIGATION ENDS-->

Explanation of Code block 6

Giving the unordered list a class of nav-links allows us to target it with CSS and not have other unordered lists in the web page affected. Note that the last list item has a class of borderx2, which basically means "border times two"; this is because our PSD web layout mockup had separators in between each navigation link and when we add our CSS styles later on, we’ll give the last item a 1px border on the left and the right (hence border x 2).

Slicing the hover indicator

18 Before we add the CSS styles for our navigation, we must first slice our little hover triangle. Head over to your PSD file and make a selection around the triangle using the Rectangular Marquee Tool (M). Copy and paste the little triangle to a new document with a transparent background then save it as nav_hover.png in the images folder.

Slicing the hover indicator

Styling the navigation

19 Now, it’s time to add the CSS code for the navigation of the web template. Head on over to your stylesheet and use the following CSS:

Code block 7

.nav-links li a {
  float: left;
  width: 120px;
  height: 68px;
  text-decoration: none;
  text-transform: capitalize;
  color: #666666;
  font-size: 12px;
  text-align: center;
  padding-top: 51px;
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: #cecece;
}
.nav-links li a:hover {
  color: #00284a;
  background-image: url(images/nav_hover.png);
  background-repeat: no-repeat;
  background-position: center bottom;
}
li.borderx2 {
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #cecece;
}

Explanation of Code block 7

First, to display the list items side by side, we float them to the left. We give them a fixed width and height so that they’re evenly spaced. Then we remove the default underline on hyperlinks by giving it a text-decoration attribute of none (browser default is underline). We give each list item a 1px gray border on its left.

We then style hover states with the :hover psuedo-selector. When hovered on, we give the list item the CSS background of nav_hover.png.

Finally, to deal with the situation that the last list item doesn’t have a 1px gray border on the right, we declare border attributes for the .borderx2 class.

Creating the Welcome Area

The welcome area will be split into two parts, the left side (#welcome-text) and the right side (#welcome-image).

Creating the Welcome Area

20 To start, go back to your HTML document (index.html). Inside the #welcome div we created earlier, create two new divs: give the first one an ID of welcome-text and the second one an ID of welcome-image. We’ll continue to filling in these two new divs after we slice out the things we need for the welcome are.

Slicing the Welcome Images

21 Head over to the PSD file, inside the layers window hide all your layers (click on the eye icons beside each layer to turn off the visibility) apart from the dark blue background which has the radial gradient applied to it.

22 Select the Rectangular Marquee Tool(M) and make a selection around it. The width should be no wider than 850 pixels, so use the Photoshop guides that we set up in the first part – Design a Minimal and Modern Portfolio Layout in Photoshop – of the this tutorial series.

Slicing the Welcome Images

23 Copy and paste the dark blue background to a new document and save it as content_background.png inside the images folder. Using the same method explained above, turn the visibility of the respective layers back on and then slice the welcome image and bullet point (see the figures below for reference).

Slicing the Welcome Images

Slicing the Welcome Images

The HTML for the new sections look like this.

Code block 8

<!--WELCOME AREA STARTS-->
<div id="welcome">
  <!--WELCOME TEXT STARTS-->
  <div id="welcome-text">

  </div>
  <!--WELCOME TEXT ENDS-->
  <!--WELCOME IMAGE STARTS-->
  <div id="welcome-image">
    <img src="images/welcome_image.png" alt="Welcome..." />
  </div>
  <!--WELCOME IMAGE ENDS-->
</div>
<!--WELCOME AREA ENDS-->

24 Inside the #welcome-text div, we add some welcome text like that shown in our Photoshop mockup. Use an <h2> element for the heading of the welcome text, and then add a simple unordered list underneath.

25 Inside the #welcome-image div, add your welcome image (in this case, the Six Revisions screen shot).

All together, the the HTML code should now look like this.

Code block 9

<!--WELCOME AREA STARTS-->
  <div id="welcome">
  <!--WELCOME TEXT STARTS-->
  <div id="welcome-text">
    <h2>welcome to <span class="heading-color2">yourwebsite!</span></h2>
    <p>Lorem ipsum dolor sit amet, consectetur[...]</p>
    <p>Proin fringilla nunc lorem, in sollicitudin orci. Sed ut eros ligula.</p>
    <ul class="list">
      <li>Lorem ipsum dolor sit amet...</li>
      <li>Lorem ipsum dolor sit amet...</li>
      <li>Lorem ipsum dolor sit amet...</li>
      <li>Lorem ipsum dolor sit amet...</li>
    </ul>
  </div>
  <!--WELCOME TEXT ENDS-->
  <!--WELCOME IMAGE STARTS-->
  <div id="welcome-image">
    <img src="images/welcome_image.png" alt="Welcome..." />
  </div>
  <!--WELCOME IMAGE ENDS-->
</div>
<!--WELCOME AREA ENDS-->

Styling the Welcome Area with CSS

26 We can now start to style our elements within the welcome area. Copy and paste the following code into your style sheet and read the explanation of the code block that follows.

Code block 10

#welcome {
  float: left;
  width: 850px;
  background-image: url(images/content_background.png);
  background-repeat: no-repeat;
  height: 326px;
  padding-top: 40px;
}
h2 {
  text-transform: uppercase;
  color: #ffffff;
  font-size: 16px;
  margin-bottom: 15px;
}
.heading-color2 { color: #9a9a9a; }
#welcome-text {
  width: 406px;
  line-height: 18px;
  padding-top: 50px;
  float: left;
  text-align: justify;
}
#welcome-text { margin-bottom:10px; }
.list li {
  text-decoration: none;
  background-image: url(images/bullet.png);
  background-repeat: no-repeat;
  list-style-type: none;
  float: left;
  width: 180px;
  padding-left: 20px;
  margin-top: 10px;
  background-position: left center;
}
#welcome-image {
  float: right;
  height: 326px;
  width: 427px;
}

Explanation of Code block 10

Let’s look at the important CSS declarations in more detail. Firstly, we give the #welcome div the radial gradient as a background attribute (content_background.png). The image is added as a background that doesn’t repeat (repeat: no-repeat). We’ve then given the div a set a fixed width and height; the width should span the width of our web template (850px) and the height is as high as the welcome image (236px).

We then have our <h2> elements. We make it all caps by using the text-transform property. We wrap the second ‘yourwebsite’ text inside a span with a class of heading-color2 to give it a different color.

For our unordered list that has a class of list, we give its list items a background image property set to bullet.png and remove the default rounded bullets of list items by declaring a list-style-type property of none.

Finally, so that our #welcome-image div displays on the left of #welcome-text, we float it to the right and give it a fixed width (which is good practice when floating elements). We also give it a width and height equal to welcome_image.png that we sliced out of our PSD file.

Slicing the 3D Separator

27 For the 3D separator, I’ve decided to use an empty div element with a class of separator so that it can be used numerous times very easily. To start creating the 3D separator, head over to your PSD file and make a selection around the 3D separator using the Rectangular Marquee Tool (M); the selection should be no bigger than 850 pixels wide and no higher than the separator itself, but make sure you get it all in.

Slicing the 3D Separator

28 Copy and paste the separator to new document with a transparent background and save the file for the web as separator.png inside the images folder.

Coding the 3D Separator

29 The HTML and CSS for the separator is quite easy. In your HTML document, pleace the following code right after where the {#welcome} div ends. We use a non-breaking space (&nbsp;), to put something inside our .separator div.

Code block 11

<!--WELCOME AREA ENDS-->
  <!--SEPARATOR STARTS-->
  <div class="separator">&nbsp;</div>
  <!--SEPARATOR ENDS-->

 

30 Head on over to your CSS file and use the following code.

Code block 12

.separator {
  background-image: url(images/separator.png);
  background-repeat: no-repeat;
  float: left;
  height: 17px;
  width: 850px;
  margin-top: 20px;
  margin-bottom: 20px;
}

Explanation of Code block 12

We give .separator a background-image property equal to the separator.png we obtained from the PSD mockup. We give it a fixed width of 850px, equal to the width of our layout and float it to the left. The height property is set equal to separator.png. We give it some top and bottom margin so that there’s always a 20px gutter on top and at the bottom of the elements that it separates.

Slicing the Sidebar

31 For the sidebar, all we will need is the sidebar box. The sidebar box will have fixed dimensions for this tutorial, but it can be easily expandable later on if you desire (we’ll leave that part up to you). In your PSD file chose the Rectangular Marquee Tool (M) from the Tools Panel and make a selection around the box; my selection is 259 x 259px.

Slicing the Sidebar

32 Copy and paste the sidebar box to new Photoshop document with a transparent background and save the image for the web as contentbox.png inside the images folder.

33 Once you’ve saved your image, head back to the PSD file and make a 1px wide by 2px high rectangular marquee selection around the small separators in between each dummy list text (see the following figure).

Slicing the Sidebar

34 As per usual, copy it into a new Photoshop document and save it for the web with the filename of divider.png inside the images folder. The selection only has to be small for the separators as it will be repeated horizontally using CSS.

Marking up the Sidebar box in HTML

35 Lets look at our HTML for our sidebar box. Head on over to your HTML document and use the following HTML markup right after the .separator div. Notice that we have a third level heading (<h3>) for the sidebar’s heading. Also note that we assign the unordered list a class of sidebar-list so that we can target it easily with CSS and give it its own styles.

Code block 13

<!--SEPARATOR ENDS-->
  <!--SIDEBAR STARTS-->
  <div id="sidebar">
    <h3>lorem ipsum dolor</h3>
    <ul class="sidebar-list">
      <li>Lorem ipsum dolor sit amet, consectetur sit adipiscding...</li>
      <li>Lorem ipsum dolor sit amet, consectetur sit adipiscding...</li>
      <li>Lorem ipsum dolor sit amet, consectetur sit adipiscding...</li>
    </ul>
</div>
<!--SIDEBAR ENDS-->

Styling the Sidebar box with CSS

36 Go to your stylesheet and use the following styles (read the code explanation that follows to understand what’s going on).

Code block 14

#sidebar {
  float: left;
  height: 209px;
  width: 219px;
  background-image: url(images/contentbox.png);
  background-repeat: no-repeat;
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 20px;
}
h3 {
  text-transform: uppercase;
  color: #ffffff;
  text-align: center;
  margin-bottom: 20px;
  font-size: 12px;
}
.sidebar-list li {
  list-style-type: none;
  margin-top: 10px;
  padding-bottom: 10px;
  background-image: url(images/divider.png);
  background-repeat: repeat-x;
  background-position: bottom;
}

Explanation of Code block 14

We give the #sidebar div a fixed width and height equal to the width and height of contentbox.png. We float it to the left so that it will display to the left of the content section (which we’ll tackle next). Also, we set the background-image property to the contentbox.png.

We transform the text of our h3 elements of our web page to all uppercase letters with the text-transform property and center it using the text-align property.

Finally, remove the default bullets from the .sidebar-list list items by setting the list-style-type property to none, as well as set their background-image to divider.png and repeat it horizontally (repeat-x). We then give them some margins and paddings to give them some space in between each other.

Coding the Content Area

37 The content area is really simple as it only contains a couple of paragraphs and headings. Inside our #content div, just add a second-level heading element (<h2>) and wrap the second part of the text with span.heading-color2 to give it a different color. To fill out the content area, just insert some paragraph elements with lorem ipsum text. The HTML looks like this.

Code block 15

<!--CONTENT STARTS-->
<div id="content">
  <h2>welcome to <span class="heading-color2">yourwebsite!</span></h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque.</p>
</div>
<!--CONTENT ENDS-->

Styling the Content Area with CSS

38 Head on over to your stylesheet and use the following style declaration for the #content div elements.

Code block 16

#content {
  float: right;
  width: 550px;
  text-align: justify;
}
#content p { margin-bottom: 10px; }

Explanation of Code block 16

The #content div is floated to the right and with a fixed width so that it displays on the right of the sidebar box. We don’t give it a fixed height because we want the text inside it to control the height. We give the paragraph (<p>) elements a margin at the bottom to give them some space in between one another (since we’ve reset our margins and paddings earlier on, this needs to be done).

Slicing the Footer

39 We’re coming close to the end, so let’s keep going and finish this bad boy up! Switch to your Photoshop file and make a rectangular marquee selection with dimensions of 850px x 60px around your footer background image (see the following figure as a reference).

Slicing the Footer

Coding the Footer

40 Once again, the footer is really simple to code: we just use the {#footer} div that we already created earlier on in the tutorial. Inside the #footer div, we add our copyright text embedded using a <p> element. The HTML looks like this:

Code block 17

<!--FOOTER STARTS-->
<div id="footer">
  <p>Copyright &copy; Six Revisions - Design By Richard Carpenter</p>
</div>
<!--FOOTER ENDS-->

Styling the Footer with CSS

41 We then style our footer using the following styles (go to your stylesheet and place this code block in there).

Code block 18

#footer {
  float: left;
  width: 850px;
  background-image: url(images/footer.png);
  background-repeat: no-repeat;
  height: 60px;
  margin-top: 40px;
  padding-top: 25px;
  text-align: center;
}

Explanation of Code block 18

We use footer.png as the background-image property value of the #footer div; floated to the left and making sure that the CSS background image doesn’t repeat with the no-repeat property value. The #footer div has a fixed width and height  equal to the dimensions of the footer background in our Photoshop file. We give it a top margin to give it a bit of space from the div’s on top of it.

Finito!

We are done! Thank you for reading this tutorial and following along, I look forward to your comments and questions! If everything went well, you should have ended up with something like this:

(click on the image to launch the working demo)

Demo

Download

The source files for this tutorial is released under the Creative Commons license; you can use it for commercial and personal use, as long as you leave the copyright information in the source file.

Related Content

About the Author

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

83 Comments

Ben

November 5th, 2009

Great tutorial!

Jesse Kaufman

November 5th, 2009

Great article! I do this regularly and follow a lot of the same workflow (except that i do images in sprites as much as i can including backgrounds). Just dealt with an HTML file from another company and it was horrid … nested tables upon nested tables!!! I was able to recreate it (and match the original PSD much more closely) with half the total size (while ADDING jQuery) … and now it’s easy to read, simple to update, and validates :) … not to mention looks the same in IE6/7/8, Firefox and Safari ;)

Pedro

November 5th, 2009

This is an excellent and very useful post!

Craig Wann

November 5th, 2009

Close to my workflow except I slice the PSD a bit differently.

Andy

November 5th, 2009

Well, let’s see…

* There’s no xml:lang attribute.

* No media hinting on the stylesheet. I don’t want the same stylesheet for printing.

* You could combine your background rules into a single one instead of wasting time and space by typing out every individual rule separately.

* You are using an absolute unit instead of a relative one on your font-size properties, which is a very bad idea.

* There’s no point in floating #top (same goes for #welcome, .separator, #content and any I might have missed) as it’s spanning the whole width of the container. If you want to contain floats, use overflow instead.

* There’s also no point in writing out the width on #top. 100% (#top) of 850px (#container) is still 850px.

* Anchor tags (<a>) in navigation menu should definitely not be floated. Instead, float the list items ().

* Add display: block; to anchors in navigation menu to be able to apply dimensions.

* You could combine the graphics into a CSS sprite.

Saro

November 5th, 2009

Have you any tutorials that convert a PSD to WordPress theme?
That would be interesting.

Tweeter

November 5th, 2009

I came across this exact tutorial on Tuesday:

http://www.woobzine.com/topics/howto/slice-a-clean-psd-layout-in-12-easy-steps/

Who created it first? Somebody’s rippng somebody off!

Jacob Gube

November 5th, 2009

@Tweeter: There’s a clue in the screenshots on that page that you linked to, where it says: “Copyright Six Revisions – Designed by Richard Carpenter”.

Mark R

November 5th, 2009

this is great! just what i needed. i am working on improving both my css and use of photoshop and it is great to see a tutorial putting them all together!

Tweeter

November 5th, 2009

Good catch. I didn’t see Richard attributed in the blog copy, and since it was written in first person, it sounded like the other guy was ripping Richard’s material off. But he mentions Six Revisions in the blog post, so I was wrong. Sorry!

Nicolas Crovatti

November 5th, 2009

Thanks for this enlightening tutorial Richard.

However, you should really pay attention to the web safe palette, or whatever it is causing the following behavior.
Take a look at this screenshot : http://blog.shinylittlething.com/wp-content/uploads/2009/11/Minimal-and-Modern-Portfolio-Layout-PSD-to-HTML-Conversion_1257462869890.png

The #001B32 color looks different on my macbook. I think it’s a matter of web safe color or color profile. Would you be kind enough to enlighten us more about this issue please ?

Although the design looks like expected on my debian machine.

designfollow

November 5th, 2009

thanks for this great tutorial.

woobzine

November 5th, 2009

That’s not the same. 6 Revision created the layout. I gave them credits on my tutorial.

And a link to the page with the design tutorial: “If you want to learn how to create this layout, you can follow the tutorial on sixrevisions.com”

Plus, I left a comment in their last tutorial, in order to tell them that I used their design:

“I used your layout for a short slicing tutorial. ( http://tinyurl.com/yj6zzf7 ) I hope you don’t mind.

Btw. Even if your layout lacks a little something identity-ish, it’s still a very good job.”

But, I wrote my tutorial about slicing BEFORE this one.

(And my tutorial is only about slicing. This one is slicing + coding.)

Cheers ^___^

seeker

November 5th, 2009

this is very good
thanks

ninjacrunchdotcom

November 6th, 2009

Nice post. Let’s not forget the basics! :D

Thanks.

cheers.

Kent

November 6th, 2009

Read with great interest!

Tom

November 6th, 2009

Good tutorial! I would be inclined to encourage putting ‘padding:’ and ‘background:’ properties on one line whenever possible though; good habit to get promote.

Nice work!

Tom

Jamie

November 6th, 2009

Great tutorial! Slicing a web template in to a usable website is what I really struggle with so this will help me lots.

Webjohn01

November 6th, 2009

Hello Richard!

It was a great tutorial of converting a mock-up design in Photoshop into HTML/CSS. It was a well explained and I cannot wait to put it into test.

Keep up the good work.

More thanks!

Chandan

November 6th, 2009

very good tutorial…
nice…
gr8 work

saad

November 6th, 2009

Cool I Love this tutorial

fanhua

November 6th, 2009

Study it, good article.

SeeThe

November 7th, 2009

Yeah, good tips for learning… thanks to Richard Carpenter.

widik

November 7th, 2009

good info…

thanks.

Jabga

November 7th, 2009

I liked, and should fix png in ie6 :)

eilonvi

November 7th, 2009

thanks! learned a lot of new tricks :)

Murphyslaw

November 7th, 2009

Thank you very much for the great tutorial. I followed both the photoshop and html/css tutorials and got a great result.

I had a few things, that didn’t work “out of the box”, which I want to share:
- You didn’t show the creation of the divider inside the sidbar box, or I missed out on it.
- I don’t have the font Helvetica, so I used Arial.
- I had to add the following two css definitions:
1. #navigation { float: right; } to create the space in between the title and the navigation.
2. .nav-links li { float: left; } to make the right border of the last navigation element visible.

At this point, I want to add some suggestions:
- I used a reset.css from http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/, which I thought would be a good design principle and would make your starting css definition obsolete.

- I added some simple css comments, because in total the styles.css became quite long. I added /* TOP STYLES */ for example.

- I had some problems croping the elements off the photoshop layout. Later I switched to using the Crop Tool (C) instead of the Rectangular Marquee Tool (M), because this way I could easily adjust the size. It seemed you always already knew the size of the elements somehow. ;D

I want to close by saying, that I really enjoyed your well written tutorial and look forward browsing your other tutorials.

sonnydesign

November 7th, 2009

this is always what im waiting for i will try this. Thank you

gus

November 8th, 2009

whats the use or writing a LOT of text on the PSD (not shown in this particular tut), if we are going to write it AGAIN??

Best is to slice the content BG, Header, and footer, and worry about the Text’s style later

Callum Chapman

November 8th, 2009

Excellent tutorial! I’m slowly learning coding and getting into web design much more so this will be huge help :)

Compute Live

November 8th, 2009

Thanks… Simple and easy..

Jaime

November 8th, 2009

@ Nicolas Crovatti

That is because of the Photoshop color settings and the color workflow. I was suffering from these kind of problems until I read a few links:

http://www.viget.com/inspire/the-mysterious-save-for-web-color-shift/

http://www.viget.com/inspire/save-for-web-simply

Jay

November 9th, 2009

Very detailed tutorial.. Thumbs up!

cK

November 9th, 2009

Gr8 Tutor

Jannis Gerlinger

November 9th, 2009

Very nice tutorial !

Nicolas Crovatti

November 9th, 2009

@Jaime
Awesome, thank you.

Mostafa

November 10th, 2009

Very Very cool

Mostafa

November 10th, 2009

Oh man!

In Part 12 inside your code

#navigation { float: right; }
.nav-links li {
  display: block;
  float: left;
  list-style-type: none;
}

not include.

Please Right It.

Ryan

November 10th, 2009

Great article, I love the simplicity of the design.

Hugh

November 10th, 2009

This is an awesome tutorial. I am going to tell people about it on my blog. It would be awesome if there was a tutorial on how to take an illustrator file to XHTML/ CSS.

Sahan

November 11th, 2009

Thank You Very Much For The Complete Guide !

Laura

November 11th, 2009

Very Good Explanation! Cool!

Roy

November 14th, 2009

Good tutorial. However I have one comment. Most tutorials I see about webdesign are based on the idea that things like menu, text ect are fixed. I work a lot with CMS software and you’ll never know what the CMS user will type and where. A link could be entered as “click here” or “click here to read more”. Most sites and templates use a technique that adds a left and right element to the a tag so that a rounded edge can be added and a fixed width background image for the a tag itself. But in a CMS you cannot use that technique.

Would be nice if a new HTML/CSS standard would allow you to add images to the left and/or right of an element instead of only 1 background image.

Velickyi

November 19th, 2009

Cool article but I have some quastions.

Does the paragraph tag make its work (i mean inserting the empty line before and after itself) when we set no margins and no paddings to all the tags?

Will the list be horizontal without adding display:inline to all of the li tags?

Why do we need to put breaking space to separator div?

Oh, by the way, why did You use 850px width of container?
small monitors have 800px width resolution.

And one more thing, in old version of IE (but still common)
padding-top doesn’t sum with height to make a real height
and margin:auto doesn’t center dive in IE;

It was very useful to me, I liked it, thanks.

Kingnige

November 23rd, 2009

Loved the tutorial, but was wondering whether someone could explain something to me (new to website work).

in Code block 5 you set the height of the title to 74 (with a top padding of 45). I was wondering where these values come from so that I can use this code with different heights of website names.

cheers

Eric

December 4th, 2009

How come you didn’t have to “clear the floats” in this tutorial page?

ivy

December 9th, 2009

png??

peacepeijal

December 10th, 2009

wow! this was a perfect tutorial.. great!!

Wilson Walker

December 17th, 2009

I am severely grateful for the attempt, but I expected this to be more thorough. The author wasn’t very specific at all once it got to the coding. I guess they expected people to know what and how to do it, but then there wouldn’t a point of a tutorial. I am amateur, which probably has A LOT to with it, but I was lost. One example was creating “#top div”; it was not said where it was supposed to go and how to create it. As an avid PS user, I was hoping to get my feet wet with web design, but I think I’ll keep on my socks and shoes for now.

Lyons

December 19th, 2009

@Wilson: I think the author have tried his best to create a tutorial for the novice and it has been well laid out.

deo

December 22nd, 2009

Thank you I find very god knowledge in your side I have tried to read book but I could not improve but when I start search this side now I have lot of improvement especially thank for it .

Mik Cowans

February 10th, 2010

There are some css styles missing from this tutorial.

The beginning of code block 7 should read:

#navigation { float: right; }
.nav-links li {
display: block;
float: left;
list-style-type: none;
}

gedit

February 19th, 2010

Thank you for this nice tutorial!

Scott Stoddard

February 21st, 2010

Yeah…this part is missing…I was wondering what the heck I couldn’t get rid of the bullet points and the stairstepping of nav links and separators!!!! Make sure you fix this line of code! Otherwise, decent tutorial for beginners,

#navigation { float: right; }
.nav-links li {
display: block;
float: left;
list-style-type: none;
}

jess

March 17th, 2010

I cannot figure out how to get the “contact” tab inline w/ the rest…it keeps appearing under the “home” tab…any suggestions?

agon

March 19th, 2010

i had same problem whith those bullet’s showing up on the #top, but when i start reading the comments, i saw a mostafa’s comment i tried it, and it works :), after that mik ans scot mention’s, thanx to richard for the good effor, and the guys who’s helped whith comments..

jess

April 2nd, 2010

i finally finished this awesome tutorial (esp. for a first timer). my last question is, why would my page show up on the left side of the screen when the live demo shows up in the center? can’t figure this one out!

ratna

April 19th, 2010

I am new to webdesigning.this tutorial is awesome.
But when i preview this in IE the container is nt at the centre and there are some missmatch.So i downloaded the code from here and previewed in IE ,the container was in the center but lots of missmath.Im mozilla it works fine.
Could someone suggest where i am wrong?And hw to make this a template and use?
thanx!!

daveskaren

April 27th, 2010

Cool Tutorial thanks a lot.

Jen Oliver

April 28th, 2010

This is such a fantastic tutorial. I’m a big fan of designing sites, but coding them can be a chore, so this will be a great way for me to learn to break away from old, clunky methods. Thank you very much!

jahlan

May 5th, 2010

Great men!! keep on going!!! fkin awesome!

Helmuts

May 18th, 2010

Thank you for such a detailed work. hmmm, such a nostalgy for those times, when you had to draw the whole site… thank You :)

James Rivington

June 1st, 2010

id=”top”? lulz

Maudd

June 2nd, 2010

Great tutorial! If you add the following code to “Code block 7″ above and things work well.

#navigation {
float: right;
}

.nav-links li {
display: block;
float: left;
list-style-type: none;
}

ozgurra

July 6th, 2010

thanks. you should add any other inside page tutorial.

Kevin

July 28th, 2010

Great tutorial, but man it would be nice if you could edit this to include the styling for both #navigation and .nav-links li

Yes, we can get this from the source code, but I’m sure a lot of people are going to wonder why their site still looks like poop even after following the instructions lol. I don’t know a whole lot about CSS, but I was starting to wonder if this was going to correct itself later on or what. I’m most of the way through, but I feel sorry for COMPLETE beginners…

Mitch

August 5th, 2010

Excellent tutorial – I was a complete beginner with css at the start of this, and now feel confident that I could create a similar layout unaided :)

There were a few notable bits missing from the tutorial, as has been mentioned, but this helped me understand it all the better; I actually had to learn how to fill in the gaps :)

Top Marks!

zin

August 17th, 2010

very good tutorial thanks a lot its very easy now

tosh

September 10th, 2010

thaaank you mostafa for the comment
great tut Richard

Patrick

November 16th, 2010

Dear Sir, I am in charge of a UI design.

Our system will display a large number of data on the page and as a java programer I can’t handle the UI design.

Could you give some advices ?

Best regards,
Patrick

octavianusb

November 23rd, 2010

Hi! i like very much your tutorial, you are very methodical and that’s good. But i would like to see something much complex(both steps, creation and conversion the PSD file). Anyway, this is a very very good tutorial. Thx a lot that you share your ideas and knowledge with us.
(Excuse my bad english :D)

Best regards,
Octa

WiserBuddy

November 29th, 2010

before i only editing in PS now I can make a good website too. Nice

Vince

December 1st, 2010

Thanks for the great tutorial. I was looking for a tutorial on portfolio site design in Photoshop and this was what I needed. I didn’t need the coding part, but read through the explanations as I wrote my own code. Having went through Part I and II entirely, here are my comments/issues and suggestions which I hope will be helpful to others.

COMMENTS:

1. The Demo
The demo’s Welcome, Sidebar, and Footer slices are a different shade of blue than the background color in my Firefox browser. The slices don’t look like the same color as the PSD.

3. Float
- I don’t see why #top div, .separator and other elements would need to be floated.
- None of the floats are cleared.
- You have .nav-links li a {float: left;} but anchors are inline elements—float the li instead, which are block elements.
- You don’t need a {float:right} on the welcome image since the #welcome-text {float: left;} will push it to the right.

4. Size of divs
- #welcome {height: 326px;} – isn’t this smaller than your background-image?
- #sidebar div is smaller than its background-image.

5. The tag should really include a media attribute set to “screen”.

6. (Step 15) A forward slash (/ is not backslash) WILL NOT necessarily link back to your homepage—it depends on your site’s folder structure. “../” is to get out of a folder.

7. Placing the header repeating background-image in
I think there should be a separate div for the repeating header. If you also wanted a repeating footer you can’t use as a selector for both so it makes semantic sense to give it it’s own div.

8. In some instances such as the title and navigation, there’s only padding-top and the height is filling the remaining space. I think padding-bottom should be added to achieve vertical center alignment.

9. I liked the hover effect in the navigation bar using a background-image.

SUGGESTIONS:

10. Slicing – the Slice tool in Photoshop is a better way to go.

11. You could have used list-style-image and margin-left for the bullet.png.

12. Sidebar
- I liked the sidebar divider as a background-image positioned at the bottom of the .

- It looks different from the PSD mockup. 1 – The last doesn’t fill up the space where the triangle is. I targeted it using the sibling selector li+li+li, and changed just that last spacing. 2 – There’s no divider after the last in your PSD. In the same rule I set background-image to “none.”

13. I would’ve liked to see styling for links!

14. Lastly, it’s good to see the markup was valid.

Vince

December 1st, 2010

*These are the same comments without tags because the comment form escaped the HTML characters in my previous comments*

Thanks for the great tutorial. I was looking for a tutorial on portfolio site design in Photoshop and this was what I needed. I didn’t need the coding part, but read through the explanations as I wrote my own code. Having went through Part I and II entirely, here are my comments/issues and suggestions which I hope will be helpful to others.

COMMENTS:

1. The Demo
The demo’s Welcome, Sidebar, and Footer slices are a different shade of blue than the background color in my Firefox browser. The slices don’t look like the same color as the PSD.

2. Float
- I don’t see why #top div, .separator and other elements would need to be floated.
- None of the floats are cleared.
- You have .nav-links li a {float: left;} but anchors are inline elements—float the li instead, which are block elements.
- You don’t need a {float:right} on the welcome image since the #welcome-text {float: left;} will push it to the right.

3. Size of divs
- #welcome {height: 326px;} – isn’t this smaller than your background-image?
- #sidebar div is smaller than its background-image.

4. The link tag should really include a media attribute set to “screen”.

5. (Step 15) A forward slash (/ is not backslash) WILL NOT necessarily link back to your homepage—it depends on your site’s folder structure. “../” is to get out of a folder.

6. Placing the header repeating background-image in body
I think there should be a separate div for the repeating header. If you also wanted a repeating footer you can’t use body as a selector for both so it makes semantic sense to give it it’s own div.

7. In some instances such as the title and navigation, there’s only padding-top and the height is filling the remaining space. I think padding-bottom should be added to achieve vertical center alignment.

8. I liked the hover effect in the navigation bar using a background-image.

SUGGESTIONS:

9. Slicing – the Slice tool in Photoshop is a better way to go.

10. You could have used list-style-image and margin-left for the bullet.png.

11. Sidebar
- I liked the sidebar divider as a background-image positioned at the bottom of the li.
- It looks different from the PSD mockup. 1 – The last li doesn’t fill up the space where the triangle is. I targeted it using the sibling selector li+li+li, and changed just that last li spacing. 2 – There’s no divider after the last li in your PSD. In the same rule I set background-image to “none.”

12. I would’ve liked to see styling for links!

13. Lastly, it’s good to see the markup was valid.

Hamed

December 26th, 2010

thanks alot !

moch84

January 20th, 2011

do i have to add in the navigation?cause i have those bullets. Thanks

Calel

January 20th, 2011

Great write up.
Can I suggest that you name your ID’s according to HTML 5 tag names. For instance id=”Sidebar” should be id=”aside”. Also [code]* {
margin: 0px;
padding: 0px;
border: none;
}
[/code] is pretty heavy. I would suggest including Eric Meyer’s CSS Reset.

Finally, I would demo style’s in shorthand e.g. “border:1px solid #d1d1d1;”

But what do I know :)
Great Article

tushar pandit(Nagpur,India)

April 23rd, 2011

thanks,,,bt very complicated for understand.

Sajjad Ahmad

May 18th, 2011

great tutorial very helpful !!

Nicole

June 1st, 2011

Thanks for the tutorial. I’ve been reading books, viewing sources on various websites, and doing various tutorials to help me learn more about XHTML/CSS coding. This is the first tutorial I have seen that explains several things that I’ve had questions about. Thank you for spending the time to create it.

After looking through the comments I see that several people made comments about how your code could have been done better and some were even a bit pushy and insisting that you’ve done something terribly wrong. My questions to THEM are…

1) If you think you are an expert coder then why are you doing a beginner tutorial on coding?

2) And if you insist on telling people how wrong they are then why don’t you create a tutorial yourself explaining to all of us “beginners” how to apparently do it the “correct” way?

As a designer who sub-contracts her coding work, I felt really confident that I could code a simple website layout after I went through this tutorial. THEN I read through the comments and now I have more questions than anything.

So frustrating. However, I do really appreciate your time and effort in writing up this tutorial. You have helped me quite a bit. Thanks!

Andy

June 13th, 2011

Thank you so much Richard. This has helped me a lot today. I feel progressing towards learning html and css.

pratik

July 28th, 2011

Nice Tutorial Man I Learn Lot From This.
Thank You……

Imagenes Linkmesh

October 15th, 2011

Thanks for the post! Nice to learn from you! :)

Leave a Comment

Subscribe to the comments on this article.