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
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! :D
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?
i love you :happycry:
This is awesome Jeffrey!
cool stuff
Dude,
This is the best stuff ever.
Thanks
Very good tutorials.
Thank you!
Can I please get the original html/ css code which you showed in your video
Many thanks
Nitin
Nice . Thanks
@Jeffrey, hi, i can’t seem to figure out the right url for your book “From Photoshop To HTML” published by Rockable press. I have checked all the urls you provided at the back of the book. Can you help me out? thanks
Hey Tolu – The download links aren’t working? If so, can you email support@envato.com? Thanks!
One of the many qualms that designers have with developers is that when the developer is given a mockup to build he doesn’t pay quite enough attention to details. This is a perfect example of that scenario. A wonderful, extremely helpful, well thought out, and well executed tutorial, but an apathetic interpretation of the design. After seeing this final product, I would be very upset as a designer because a few of the main elements of my design are missing in the working site.
Here are two of the most important elements of this design that you missed:
• The subtle drop shadow behind the featured section background paper.
• The even more subtle radial gradient on the background. (it’s not a solid color, look closely)
These details are important, and in this case, are detrimental to the final product.
There is a ruler tool in the Firefox Web Developer toolbar that you’re using, it’s under miscellaneous>Display Ruler, you can use it like the photoshop ruler and see the length and even the height in a box form, i don’t know if anyone else has said this but thought i’d throw that out there. Great tutorial by the way! I am starting to learn code and looking to incorporate code and graphic design for front-end design and illustrations of themes/layouts or something. Do you know where a good beginner-to-intermediate code tutorial would be to get me started, i picked up a little bit from the tutorial, but everyone has already learned it so it’s all intermediate and above. Thanks for the consideration.
great tutorial m8,, I have a lot to learn from here, Thanks :D
btw what addon you use in video 2 to edit CSS? that’s really nice.
Oh my gosh I love you!!!
This totally helped me!
Go on making tuts like this ;-)
Amazing tutorial its great to learn and see other peoples take on PSD’s to HTML, and its true you couldn’t have made this any easier.
Heres a link to the ruler that resembles photoshop alon with a grid and other things I have all these great
bookmarklets that do a variety of things but i cant remember where i downloaded them all at once, well you can get this one here and its great.
http://www.sprymedia.co.uk/article/Design
Still there’s no cool background radius gradient!
Thanksss.. .. great tutorial… .. love this one…//
thanks for this great tutorial! i was able to use it for my very first website! yay :) Godspeed
Thank you so much for this tutorial, it really helped me a lot.
It is the greatest tutorial I had found on the internet. I search this for almost 2 months!. Thanks a lot. Thanks so much!. But, if you not mind, can you give a downloadable one because my internet totally dumb. I take almost an hour to buffer. Only!. Again, thanks a lot!
excellent tutorial!! really helpful in learning how to code a design when you already know the basics :)
Hi Jeffrey. I don´t know if you mind, but i follow all the tutorial and i really did the website. Thanks very much for showing how it is done.
I keep the CSS file and all of the structure of the website because making others websites i would begin on that one and then change it to my own style.
I don´t know if you mind that i keep the code. I don´t want to copy your work, but yes, i will always begin at the bottom of your site, and then i will make my own.
I will be waiting for the response.
Thanks.
Oh, that’s a great tutorial. Thanks a lot, Jeffrey. I’m working with Aptana 2.0, but I don’t know how’s Notepad++. How do you think, people?
you rock mate! nice tut
Hi Jeffrey, This is more than reading tons of books. Thanks for sharing …!
From someone who is just trying to get into this stuff, thank you for a great tutorial!
Yep, bacground gradient/light is missing.
Interesting tutorial, but it is a shame it is video, I would much prefer it laid out as a template.