Slice that PSD!
videos

Slice and Dice that PSD

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 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.

Tags: Videos
 
Enjoyed this Post?

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

By

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
← Older Comments
Newer Comments →

  • Pingback: The 25 Must Read Articles For Web Designers

  • http://www.zookai.co.uk Kristian

    Fantastic Tutorial Jeffrey, you explained everything in-depth. It was so easy to follow and you made the whole process seem effortless.

    Regards

  • http://www.whatsthelatest.net zplits

    Thank you for this great tutorial. Really learned a lot from this vid, including the divs, css, a little bit of hack, IE tester, and IE hacks. Thank you very much for this excellent tutorial.

    By the way. Is there anyone who knows what are the web browsers that web developers or designers use when they test their newly created sites?

    Please share.

  • http://www.preeminentproductions.com Anthony

    Awesome! This is great! Thanks so much! For not exactly being a css newbie, this was still great to see how other people go about coding their sites. I loved the explanation of the why you used div class in part of the featured section.

  • Jay

    Great tutorial!
    Is there going to be another video to make the rest of the web page or just how to add another page?

  • http://www.jaymce.com jaymce

    jeffrey… THANK YOU!

  • Ad

    Im new at html, i did like wat u did but the image wont show when i tested my html. it even says a correct html format from w3. can some1 help me on this?

    thanx

  • http://www.kornbrasil.com EdpeppeRs

    hey, JW! i’m ur fan! hehehe

    ;)

  • http://www.3sidescreative.com Ian Miller

    Hi there, are these links broken or is it just me?

    Thanks for the tutorials.

  • Marcelo

    Hello! I will let you know that I am from Argentina, I am doing the tutorial I can not run the line:
    html (
    background: url (images / bg.png) repeat;
    )
    someone could help me.
    Thanks and regards.

  • http://ivorpadilla.com Ivor

    Dude, is

    html {
    /*Your content here*/
    }

    **Is with brackets instead parenthesis.

  • Marcelo

    thanks for answering
    I apologize but I have it this way:

    html {
    background: url (images / bg.png) repeat;
    }

    I can not do that take pictures, someone happened the same?
    May help, thanks.

  • http://ivorpadilla.com Ivor

    Try this out

    html {
    background: url(../images/bg.png) repeat;
    }

    Make sure you’re on the correct images directory.

  • marcelo

    Ivor thanks but no work for me, I said that I have a folder on your desktop that is called within the same model another called images which are the same. I do not understand because I do not take pictures because the first part of the tutorial if I worked.

    html {
    background: url (model / images / bg.png) repeat;
    }

  • Pingback: Some Websites I’ve made | Sean Smyth dot ie

  • Clemens

    I seems as if you’re more into design than into web accessibility. The result is nice, but not overly semantic. The headings do not follow a clear hierarchy. The “slogan” div shouldn’t even be a div. In my eyes, it is a paragraph. Div is the container element for blocks, just like span is the container element for inlines. While you can use divs to put texts into blocks, it isn’t needed for that. That is exactly what paragraphs are made for. Use divs for grouping existing blocks instead of creating blocks. Oh and the spans in that container should clearly be em or strong instead. These words are like the best examples for empathized text. Just use existing elements for what they are made for. Don’t rebuild them using unsemantic containers.

    Anyways, nice insight and great tutorial, just with a few mistakes.

  • http://www.preeminentproductions.com/blog Anthony Myers

    Great Tutorial! I have came back time after time and loaded up the videos.
    Thanks for all the work you guys put into this wonderful site!

  • Rocky

    Wow Very nice tutorial set.

    i also will submit to NetTuts.

    I think more detailed XML / XHTML and updated skill sets should be added.

  • Mike van den Broek

    I really did love your tutorial. I never knew it could be this simple. Thank allot!

  • hnieef

    how can i download this tutorial, really great stuff

  • http://www.gogeonow.com Justin

    I think it would be icing on the cake if you were so kind to provide viewers the option of downloading the xhtml & css source files of the completed project.

    I can’t keep up with you to work a long with you :(

    Thanks

  • Gareth

    Hey Jeffrey. Superb – thanks. It would be really handy to have the source code for reference, rather than having to search out particular bits from the video.

  • http://www.dosyauzantisi.com drekon

    THANKS. you are my hero :)

  • Walter

    MeasureIt 0.3.8
    https://addons.mozilla.org/en-US/firefox/addon/539
    You have asked for some tool for firefox.
    Try that ;)

    |Walter|

  • MarySunshine

    Hi Jeffery…Our instructor, Carol Ratcliff, here at WITCC, shows us alot of your tutorials… AND they are VERY helpful… at least I think so… keep up the good work!!!

    • http://www.jeff-way.com Jeffrey Way
      Author

      Hi Mary,

      That’s really neat to hear! Be sure to thank her for me. :)

      • Gavin Steele

        Hey Jeffrey, it would be cool to see you tie this into your javascript screencasts and jquery book reviews by implementing the jquery in the featured section.

        I know its a lot to ask but I think it would be a great complete site once done. :)

  • Stefan

    This Tutorial is awesome. Very nice work, well done.
    It was very helpfull to create and fix my errors especially IE errors. My mind was going to blow up because of this fu**in browser =) Thanks a lot.

    greets

  • Gavin Steele

    Well, I just watched both videos over two days and created the image files on the fly in photoshop and I have to say that I am really happy with the final outcome.

    These screencasts not only show you how to do something step by step but also give an insight into how a coder thinks about a page and the problems a design throws at them.

    Thank you so much Jeffrey! I am looking forward to the PSD to WordPress over on in the woods :)

  • Pingback: 43 PSD to XHTML, CSS Tutorials Creating Web Layouts And Navigation | 1stwebdesigner - Love In Design

  • Pingback: 20+ Best Tutorials to Convert Psd to Html/CSS | Dzine Blog

  • Pingback: 20+ Best Psd to XHTML/CSS Tutorials

  • Jason

    Thank you for this tutorial! Great work. Learned lots.

  • webn

    I am a newbie in css/xhtml and your tutorial shows me the way and saves time. Keep going….Thanks.

  • Pingback: 11 Best Tutorials to Convert Psd to Html/CSS « Design Sources

  • Pingback: 43个PSD转XHTML, CSS创建布局及导航辅导教程 | ccxweb

  • Mike

    I think the one thing that was missed was the a:hover effect that you’d apply to your nav. I’m not sure what the designer had in mind; probably just an underline but that’s all I saw. Otherwise great tut!

  • Pingback: 20+ Best Tutorials to Convert Psd to Html/CSS « N3T.ir - Web Resources, Web Design News & Tips, Open Source

  • Pingback: 20 Paramount Tutorials for PSD to Html/CSS | Free Tutorial 4 All

  • Pingback: 30 HTML Best Practices for Beginners | Ouech.net

  • michael

    #10 – don’t forget === particular with functions like strpos()
    i remember seeing a login script that allowed users to login by not specifying a password. this was easily fixed by changing the == operator to ===

  • michael

    errrr wrong blog post

  • http://www.puffyandmishu.com Sorin

    Very good tutorial, but please anyone can tell me how he split firefox in 2 windows side by side: in left the notepad++ and in right the firefox?
    Thank you.

  • http://www.squareonemd.co.uk Web design cheltenham

    The css tut is a great reference, its nice to see someone else work, I’ve not used Web Developer much in the past but seeing the way the css was built I can see it’s purpose much clearly now, thanks for yet another great tut

  • Pingback: 网页新手30条进阶秘技 | 互联网的那点事...

  • SnowInChina

    this tutorial is waesome
    i had some troubles in understanding how things work, but you explained it really well, i think i’ve watched the whole tutorial three times and learned a lot from it.
    thanks for your work.

  • Pingback: Killer Wordpress Tutorials | Simon Baier

  • http://genggao.net Geng Gao

    Thank you Jeffrey.
    I enjoy your tuts. Cant’t wait to see more!
    I recently made my website from PSD to HTML + CSS as well.

  • Future Web Designer

    When you’re coding the CSS to the page, you have a split view on the screen, where your coding is on the left, and the internet page on the right. What do you use (how), because whenever you write the code to the left, the internet page automaticly updates to the right.

    I love how detailed you go through this tutorial. Thanks for your help!

  • Pingback: 20+ Best Tutorials to Convert Psd to Html/CSS | KolayOnline

  • Pingback: Converting PSD To XHTML Online Tutorials « Online Free Application Software Tips Tools WallPapers

  • Pingback: 10 tutorials for Converting PSD to Xhtml and Css | Flash, CSS, Xhtml, Photoshop and Wordpress tutorials

← Older Comments
Newer Comments →