Slice and Dice that PSD

Jeffrey Way on Jan 8th 2009 with 241 comments

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!
Visit Article
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.

Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By Jeffrey Way

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.

Plus Premium

Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more

Pingback: 落叶LuoYe » 编写HTML代码技巧
http://www.purplecoffee.co.uk/ Gareth Evans
Hey, just a little tip (something I use when going from PSD to HTML/CSS).
- print screen the website in your browser (or use the screen grab plugin seen in the tutorial).
- paste this as a new layer on the psd (must be the top layer).
- set the opacity of the new layer to 50%.
Now you can line up the HTML/CSS version on top of the PSD. This is really useful for getting paragraph line heights, fiddling with letter spacing and just making yourself feel good when you see it line up so damn good!!
Pingback: 小亮博客 » 编写HTML代码技巧
Pingback: Divone.ru » CSS мастер-класс: основные приёмы
Pingback: deboraparentes.com » 30 HTML Best Practices for Beginners
Kamran
Thanks. It was great.
May I have the PSD and css files just for learning.
Pingback: 75 PSD to HTML Resources for Web Designers | Webdesign Creative
Dave
Fantastic tutorial – it couldnt have been easier to follow.
Thanks.
Pingback: Coding a Web Design for Speed and Quality | Webdesigner Depot
http://www.twitter.com/rosalindwills Rosalind Wills
Excellent! Very useful to watch someone else going through the process. Definitely going to subscribe here — thanks very much!
alex
Wonderfull Videos!
Thanks a lot! Makes fun to learn that way! :D
Florian
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
Pingback: Coding a Web Design for Speed and Quality | Canary Dwarf
Pingback: 25 Useful Tutorials Show How to Convert PSD to HTML & CSS Step by Step - Ntt.cc
http://www.tiffszerp.com/ Tiffany
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!
Pingback: 9 Tutorials to convert psd to html | Web and designers | Complete resource platform for web designers and developers
Pingback: Great psd XHTMl tutorial « VECTOR Tutorial
Pingback: Velocidad y calidad para un diseño web
http://www.xhtml-css-code.com R Aflec
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.
Pingback: 43 PSD to XHTML, CSS Tutorials Creating Web Layouts And Navigation | LBS007 Earn Money Online
Pingback: 编写HTML代码技巧 « 落叶LuoYe
Pingback: web粉蒸肉 » Blog Archive » 30条HTML代码编写指南 for入门者
Richard Belfort
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.

http://www.jeffrey-way.com Jeffrey Way
Author
You’d unfortunately have to purchase it from themeforest.net.

Lisa R.
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!
Pingback: Good looking Designs ! | Tutspro.com
http://psdxhtmlycss.com Charles
It is a good tutorial for newbies
Ralph Casafrancisco
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
http://danielbdesigns.com Daniel
don’t know if someone mentioned this already. sorry.
the ruler is available under misc on the web developer toolbar.
http://365design.wordpress.com Luís Pereira
Thank you so much for this tutorial!! It was very helpful specially on the ie fixing bugs part!
Pingback: Linksammlung aus RSS Feeds » Design, Beispiele, Subtle, Designs, Papervision, Space » Meine Link-Sammlung
http://www.integrascan.com RE Vernon
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!

http://www.jeffrey-way.com Jeffrey Way
Author
Haha. Thanks! :)

Pingback: CSS 基础教程 « 鹏讯科技
jmarreros
hey, great tut, thanks for sharing
etor
Nice! Will bookmark this for sure!
Pingback: Mastering CSS Coding: Getting Started « Web Tutorials
Pingback: PSD to HTML Resources,how to PSD to HTML, | Cosmos Blog
Pingback: Rvzii » Blog Archive » 教程：网页新手30条进阶秘技
Nick
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
Chris
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
Chris
My bad. I apologize I misspell your name. Jeffery
Pingback: 70+ PSD to HTML Resources for Web Designers | LeVoltz - iPhone Games, Engineering Projects, Wordpress Themes
Pingback: SmashingWebs: Online Show case for Designers » » 10 Best PSD to XHTML/CSS Tutorials
Pingback: Sapienza – Slice And Dice That PSD
chris
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?
chenglongbiao
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?
Rory
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)
Pingback: 寂静小站 – 网摘 » 43个PSD转XHTML, CSS创建布局及导航辅导教程
AhBo
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.
RavenJWolfe
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.

http://www.jeffrey-way.com Jeffrey Way
Author
Hehe :)

Crystal
(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?

Slice and Dice that PSD

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

How to Convert a PSD to XHTML

Enjoyed this Post?

By Jeffrey Way

Hello!

Premium Members

Full-time, Part-time and Contract Jobs

Freelance Jobs

Slice and Dice that PSD

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

How to Convert a PSD to XHTML

Enjoyed this Post?

By Jeffrey Way

Hello!

Premium Members

Full-time, Part-time and Contract Jobs

Freelance Jobs

Follow Nettuts+ and Tuts+ on Twitter