2 Designs From PSD to HTML

2-slice-psd-source

I showed you how to take PSD designs and convert it into HTML and CSS. Given the reputation of that meticulous tutorial, I’ve determined to create a second series. Though, I’m not much of a designer. Instead, I asked Collis if he would permit me to use the design that he used for a recent tutorial for you all web design and front end developers.

1. How to Convert a PSD to XHTML

I continue to be surprised by how well Collis’s “Build a Sleek Portfolio Site From Scratch” tutorial continues to achieve. It’s been months, yet it still posts strong numbers every week. Considering that fact, I determined to create a screen cast that shows you precisely how to convert a PSD into perfect XHTML/CSS.

Part 1: Slicing the PSD and Creating the XHTML

Part 2: CSS

I won’t lie to you. This video is a bit tedious. It just isn’t fun to watch someone enter margin values for thirty minutes. 🙂 But it’s necessary.

Part 3: Implementing a Bit of Javascript

Part 4: Kicking IE6’s Butt

Could we really call ourselves web developers if we didn’t have to fight with IE6? And is it a coincidence that “6” is also the number associated with the devil? Who knows.

Mostly, the site looks just fine in IE6, but we should change a few quirks. Create a new stylesheet and call it “ie6.css”. Place it in your CSS folder. Then paste in the following.

view plain copy to clipboard print ?

#container #mainContent #tier2
{
margin-bottom: 273px !important;
}
#tier3#news
{
position: relative;
left:Â .56em;
}
#header
{
height: 158px;
}
#header#login
{
top:Â 1em;
rightright:Â 1.5em;
}

#container #mainContent #tier2
{
	margin-bottom: 273px !important;
}

#tier3 #news
{
	position: relative;
	left: .56em;
}

#header
{
height: 158px;
}

#header #login
{
	top: 1em;
	right: 1.5em;
}

There’s nothing that we really need to go over. Mostly, I’m adjusting the positioning of a few elements.

The last step is to reference our new stylesheet in the head tag of our document.

view plain copy to clipboard print ?

<!–[ifÂ ltÂ IEÂ 7]>
<linkrel=“stylesheet”type=“text/css”href=“css/ie6.css”/>
<![endif]–>

Source File |Â Demo

2. Converting a Design From PSD to HTML

Okay, so you’ve gained a solid grasp of HTML, CSS, and Photoshop. The next step is to convert your first PSD into a working website. Don’t worry; it’s not as hard as you might think. I can’t think of a improved way to put your skills to the test. If you need assistance, evaluation these in depth video tutorials that show you precisely how to get the job done.

The 100% HTML and CSS

4 Comments

psd html June 5, 2009

One of the best and advance technology.
R Aflec November 26, 2009

“Great compilation! Thanks a lot for putting it all in one place, but there is another one to add to your list.

http://www.xhtml-css-code.com/html/things-to-remember-while-coding-a-website-to-make-it-search-engine-friendly

Though, not exactly a psd to html conversion article, but one must keep these tips in mind while coding a PSD into search engine as well as user friendly web layout.
“
Pingback: 55 Decisive Useful jQuery Tutorials « my mcLife November 29, 2009
Webdesigner February 1, 2011

Hi

Very nice and creative News letter templates

Thanks for giving us this resources
design blog February 2, 2011

Hey dude these are great. Love it man.

Dzinepress