2 Designs From PSD to HTML

CSS, Freebies, HTML, Inspiration

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

1-psd-to-xhtml

Part 2: CSS

1-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

1-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.

  1. #container #mainContent #tier2
  2. {
  3. margin-bottom: 273px !important;
  4. }
  5. #tier3#news
  6. {
  7. position: relative;
  8. left: .56em;
  9. }
  10. #header
  11. {
  12. height: 158px;
  13. }
  14. #header#login
  15. {
  16. top: 1em;
  17. rightright: 1.5em;
  18. }

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.

  1. <!–[if lt IE 7]>
  2. <linkrel=“stylesheet”type=“text/css”href=“css/ie6.css”/>
  3. <![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.

2-slice-psd

2-html-psd

The 100% HTML and CSS

2-completewebsite

Enjoyed this post?

Don't forget to subscribe to our RSS-feed and follow us on - for recent updates

About the Author

Comments and Discussions

  1. psd html, 5 June 2009

    One of the best and advance technology.

  2. R Aflec, 26 November 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.

  3. 55 Decisive Useful jQuery Tutorials « my mcLife, 29 November 2009

    […] 2 Designs From PSD to HTML I showed you how to take PSD designs and… […]

  4. Webdesigner, 1 February 2011

    Hi

    Very nice and creative News letter templates

    Thanks for giving us this resources

  5. design blog, 2 February 2011

    Hey dude these are great. Love it man.

About Dzinepress | Advertise | Contact | Privacy Policy | Community News | Submit News