Most of the web designer will create lot of web templates using photoshop but only very few of them will convert that PSD file to a valid XHTML . This article will help all of them to learn quickly about PSD to XHTML conversion.

First open your PSD file in photoshop and then select the slice tool and start slicing the images used in the PSD file. In case if you ever make a mistake in slicing then press Ctrl + Z to undo the slicing. You can also slice the PSD file by using guide lines. Once all the images are sliced using the slice tool then you can save the psd file in an images folder by clicking Save for Web & Devices and set the image format and quality.

To roughly see what elements you need for the whole page you can create a wire-frame view of your site. Then just add the wire frame div code and insert the sliced images where ever it’s necessary. Basic example of 2 column layout,

<div id=”container”>

<div id=”header”>

<h1>Header</h1>

<!– end #header –></div>

<div id=”sidebar1″>

<h3>sidebar1 Content</h3>

<p>content </p>

<!– end #sidebar1 –></div>

<div id=”mainContent”>

<h1> Main Content </h1>

<p>content.</p>

<!– end #mainContent –></div>

<div id=”footer”>

<p>Footer</p>

<!– end #footer –></div>

<!– end #container –></div>

2. So now we need to write the basic css for the above html code to make the web  page more clear and aligned. Basic example of the css,

<style type=”text/css”>
<!–
body  {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
. #container {
width: 46em;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
. #header {
background: #DDDDDD;
padding: 0 10px;
}
.#sidebar1 {
float: left;
width: 12em;
background: #EBEBEB;
padding: 15px 0;
}
. #mainContent {
margin: 0 1.5em 0 13em;
}
. #footer {
padding: 0 10px;
background:#DDDDDD;
}
–>
</style>

3. Now we need to check the browser compatibility issues especially for IE6. So we need to write a separate css file for IE6 mainly positioning the images and contents fits for IE6. Mainly IE6 css problem will arise for

#container #mainContent #tier2

{

margin-bottom: 273px !important;

}

#header

{

height: 158px;

}

4. so save this style as ie6.css

This new style should be implemented like,

<!–[if lt IE 6]>

<link rel=”stylesheet” type=”text/css” href=”css/ie6.css” />

<![endif]–>

Everyone has their own way of doing things but this is the simple and easy way of converting a PSD file to XHTML with valid CSS.