Video icon 64
Learning to code? Skill up faster with our practical video courses. Start your free trial today.

Slice and Dice that PSD


In today's video tutorial, we'll be slicing up a PSD, dicing it for the web, and serving it on a warm hot plate. Our design sports a neat "Web 2.0" feel and comes courtesy of Joefrey from Be sure to visit his profile if you have the chance.

Step 1: Writing the Markup

Step 2: Coding the CSS

The PSD Snapshot

the psd

The HTML/CSS Snapshot

the html
html with notes

You Also Might Like...

  • Converting a Design From PSD to HTML

    Converting a Design From PSD to HTML

    Several weeks ago, I showed you how to take a PSD design and convert it into HTML and CSS. Given the popularity of that particular tutorial, I’ve decided to create a second series. However, I’m not much of a designer. Instead, I asked Collis if he would allow me to use the design that he used for a recent tutorial for Web Design Week.

    Just like last time, I’ll take you through the process step by step - even through the tedious parts. Enjoy!

    Visit Article

  • How to Convert a PSD to XHTML

    How to Convert a PSD to XHTML

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

    Visit Article

  • Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.