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 ThemeForest.net. 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 HTML/CSS Snapshot
You Also Might Like…
-
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!
-
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.
- Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
I LOVE this tutorial. Couldn’t have been better and easier to follow along with. I will be going back to it often to soak in all the fabulous knowledge it holds.
THANKS!
epic videos – recently stumple unto this website and I just want to say how glad I am to see another person do all this work.
I’m a college student who do this everyday at my work-place for nonprofit organization throughout my county and I have my own style and steps but its always great to watch and see how people do their own websites from scratch.
kudos for the extra stuff also offered throughout this website.
The best tutorial on the subject that I’ve seen yet!!! Like said in an earlier comment, easy to follow along with. Thank you very much!
I loved it! Very comprehensible and easy to follow along with (as mentioned a few times before).
A question that I have though, is whether you deliberately left out the gradient on the background (behind the featured section) or you just skipped over it unintentionally? The difference doesn’t bother me at all in the comparison of the final products though, I was just wondering. :)
Thank you for making this tutorial. Major props!
It’s an superb post and that i totally agree with that which you said. I am attempting to set up the actual Rss feed but I am certainly not very pc well written. May somebody tell me how let me set up the RSS feed and so i get informed of any brand new post? You need to explain it in an simple way like me obtaining old.
Hello,
nice and helpful tutorial. I just did not understand when to use “em” and “px” measuring. I mean I read some articles about it and surprisingly realized that most of the people use “em”. I just saw that you are even mixing them in this tutorial and freaked out. :)) Simple question is for best practicing: When you use each of them, please?
Thanks in advance :)
Nice tutorial..Thanks!!I enjoyed it even if I knew what to do next!Bravo!!
Great tutorial. Is slicing PSDs to HTML bad for SEO?
Great tutorial!! JJ, slicing PSD is great for SEO if it’s done right.
Hi,
I don’t know ANYTHING about CSS programming (im more of an applications programmer and network hacker) but this tutorial was AMAZING. I have literally 0 knowledge in CSS and yet I understood your tutorial perfectly. I just drew my first template in photoshop and was looking everywhere for a decent tutorial on how to make it all work and this was my answer.
Great job on the tutorials! Keep it up! This has helped me out loads.
Abu Hajar
Great job
new concept I usually us WD to slice PSD.. I liked your presentation a little fast
but your good at programing . I never knew you could program that way.
again great job.
Well written tutorial, quick and to the point!
is there a way to download this videos? this is a piece of gold!
I love the tutorials. Must watch for anyone that wants to convert psd’s to html.
Good tutorial Very good explained
Awesome tutorial! Thank you so much!
@Jeffery What Developer Toolbar were you using? I am currently using firefox 12. Can you point me in the right direction?