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
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
Online resume - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+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
Fantastic tutorial – it couldnt have been easier to follow.
Thanks.
Excellent! Very useful to watch someone else going through the process. Definitely going to subscribe here — thanks very much!
Wonderfull Videos!
Thanks a lot! Makes fun to learn that way!
Hi,
thank you for the great video tutorial!
About your question for an plugin for the grids…
I sometimes use this one:
http://gridder.andreehansson.se/
Just a JS-call to show some grid lines (vertically + horizontally) and to check if some fonts are on the same height.
Have fun
Wow, I thought I knew almost everything but I learned a lot! Never knew about that live editing of CSS in FireFox Developer! Thank you!
Another great article to read while coding web layouts:
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.
Hi JW, I’m from brazil and it’s a great tutorial but how can I get this PSD file? Is it possible? I have no international credit card.
You’d unfortunately have to purchase it from themeforest.net.
Thank you for this, I’m an independent instructional designer that finds herself constantly in web design mode. I have to teach myself everything, so great tutorials DEFINITELY help. Gracias!
It is a good tutorial for newbies
great tutorial .. if anyone hasn’t given you a grid system for in browser here is a link i got from boagworld
http://www.sprymedia.co.uk/article/Grid
don’t know if someone mentioned this already. sorry.
the ruler is available under misc on the web developer toolbar.
Thank you so much for this tutorial!! It was very helpful specially on the ie fixing bugs part!
Hey Jeffery
I know making tuts for free can sometimes feel like a thankless job but you’re helping a lot of people out sharing your knowledge. So here’s some good karma wished on you!
Haha. Thanks!
hey, great tut, thanks for sharing
Nice! Will bookmark this for sure!
Great tut, thanks Jeffrey!
Just one thing, when I go to validate my markup I receive 1 warning, which states:
Byte-Order Mark found in UTF-8 File.
The Unicode Byte-Order Mark (BOM) in UTF-8 encoded files is known to cause problems for some text editors and older browsers. You may want to consider avoiding its use until it is better supported.
Did you also receive this warning? Whats it all about then?
Thanks again!
Nick
Jerry, thanks for your great screencast. But I am just wondering how to do the highlight on the background and the subtle shadow underneath the paper as the original psd layout shown. Did you cover that area? Did I miss it?
Thanks
My bad. I apologize I misspell your name. Jeffery
Jeffery.
The 2nd CSS video cut off around 26 minutes.
I never got to see you code the buttons.
Is there something wrong with the videos?
it seems that your tutorial is pretty good! i am a green hand,while i do believe i will learn more after you! all i want to say is “thank you very much,Jeffery”.maybe the problem is that my mother tongue is Chinese.Sometimes it is hard for me to translate your words…..i really want make friends with everybody that can help.will you?
Hi I bought this psd from themeforest to follow this tutorial . . . after I unzipped the file it only opened the contact page in PS . . . are there more pages with the file ? or did I unzip it incorrectly ? also how should i set up my PS workspace (im a noob)
Thanks a lot. Can you show me how to code the footer again. In the video you didn’t show how to code “Home / About / Service / Portfolio / Blog / Contact” I have a difficult time to figure out how to add the “/” to the CSS code.
Can you please explain that one more time.
Jeff I like your thinkin’.
Especially on the subject of IE which I despise. My favorite quote from your video is, “Who cares if the buttons aren’t rounded in IE. It’s their own fault for using the browser!” greatness. I completely agree.
Hehe
(sorry, having difficulty posting with my NoScripts plugin on. So sorry if you get a duplicate question.)
Jeffery,
in the html when writing the:
DD_belatedPNG.fix(‘#header img, #mainGraphic’);
line, i wanted to add my featuredBG.png, and footerBg.png because I cropped the folded corners and they show up gray in IE. How would I write that since they are called from the CSS?