New Plus Tutorial: Convert a Beautiful PSD to HTML and CSS

New Premium Tutorial: Convert a Beautiful PSD to HTML and CSS

on Mar 11th 2009 with 43 comments

Not too long ago, I created a tutorial on psdtuts+ that demonstrated how to build a beautiful website PSD from scratch. This time, we’ll take things much further. I’ll show you how to slice and create the HTML+CSS of my design. You’ll learn how to keep the mock-up process simple, create a custom HTML framework to put your design in, some practical CSS tricks, save images for web, and more.

Join Now to read the in depth tutorial.

New Plus Tutorial: Convert a Beautiful PSD to HTML and CSS
New Plus Tutorial: Convert a Beautiful PSD to HTML and CSS
New Plus Tutorial: Convert a Beautiful PSD to HTML and CSS
New Plus Tutorial: Convert a Beautiful PSD to HTML and CSS

Join Tuts Premium

NETTUTS+ Screencasts and Bonus Tutorials

For those unfamiliar, the family of TUTS sites runs a premium membership service called “Premium”. For $19 per month, you gain access to exclusive premium tutorials, screencasts, and freebies at nettuts+, psdtuts+, and vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. Join today!

  • 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

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

This author has yet to write their bio.  

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

    I like :)

  • Raducu

    Thanks a lot. I love the design and this tut was necessary!

    I’m happy to be a member of tuts+

  • Raducu

    After seeing the tutorial .. the footer is not positioned absolutely at the bottom (if I have only 1 post for example).

    Can you give us some info how to do that ?

    Thanks

    • http://www.southmakers.com Alvaro
      Author

      Since both layers content and sidebar are inside another container and both are floating left, there’s no problem if sidebar is larger, or if there’re some few lines on the post, the design will adjust the height of the larger container. Try it!

      • Raducu

        I got the idea.

        Still, a way to position the footer absolutely would be nice :)

    • Thad

      try these links to position the footer absolutely to the bottom…

      http://www.cssstickyfooter.com/

      http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

      • Raducu

        thanks

  • http://eyoosuf.blogspot.com/ Yoosuf

    hmm i guess Jeffry did around 3 tuts like this, so pointless of same old wine :S

    • http://www.saroverhees.be Saro

      Not all layouts are coded the same…

    • http://themeforest.net/user/JeffreyWay Jeffrey Way

      Everyone codes differently. For that matter, there should only be one PSD to HTML tutorial on the web. :)

      • http://www.furtzdesigns.com Ryan

        You tell him Jeffrey! Im not a plus member but from all the things I’ve learnt from your other tutorials, your are tutorial king.

    • http://www.quizzpot.com crysfel

      code xhtml/css it is really easy ;) you don’t need to be a developer to do it :o but it would be fun to check this out.

  • http://matt-radel.com Matt Radel

    Ahhh…looks like you’re actually cropping and using undo’s? THAT’S how ya do it – forget those sissy web slice tools!!! :)

    Awesome design btw – top notch.

  • http://elitenick.com Nick

    Amazing looking design, glad to see this follow-up was posted. :)

  • http://www.contempographicdesign.com Chris Robinson

    I haven’t seen the actual tutorial but it looks like he’s using the crop tool to slice up the PSD?!?

    The slice tool is your friend, use it…that’s what its there for.

    • Brent

      I don’t understand using the crop tool to create your slices. The amount of time you save by using the slice tool makes it no-brainer to use that instead of cropping. Oh well…I guess everyone has their own way of doing things :)

  • Cosmo & Wanda

    I have understood as time goes by, that looks are the most important thing for users. But for designers and developers the important thing is that the design allows cutting easily, without wasting precious time and without changing its shape, LOL.

    Based on this simple reasons, I liked this design and tut.

    Thank you Alvaro.

  • adryi19

    thanks for share info :)

  • http://ivorpadilla.com iPad

    Hey dude, the results are amazing, what a great job!!! Thankfully I have subscribe to Plus… And even greater is that you’re Bolivian… we’re LatinAmericans. Great work.-

  • http://www.freshclickmedia.com Shane

    Looks like a nice site

  • http://blog.jm-royer.com Jean Michel

    Alvaro, i would like adapt make a theme for CMS Dotclear 2 (www.dotclear.org). It’s possible ? A licence ? Thanks you for your reponse.

  • http://eneza.wordpress.com Eneza

    nice! I like clouds! are there more tuts like these that is not a blog template?

    Thanks Guys!

  • Pingback: Web Development Nerdy Daily Links For 3/12/2009 - HUGE POST | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?

  • li kai

    wow

  • http://www.crearedesign.co.uk Martyn

    I really need to get round to joining, I would like to see more into how you go about coding it.

  • http://www.cofilew.de Nico

    Nice Tutorial, but i code my sites first and make after this the Graphics :D

  • http://deddyp.com Deddy

    *Joins Tuts Plus*

  • dia_75

    *Joins Tuts Plus in 2 or 3 hours*

  • http://mokshasolutions.com Moksha Solutions

    really nice one, thanks for it

  • http://www.grafxsoftware.com Valics Lehel

    One small addition, for css can be the value
    .entry .meta_categories{
    width:340px!important;

    As I saw, in this way is better.
    Also why you do not use clear after DIV, the code is perfect, but is not better to clean after each major part, like header, page?

  • John

    Hello. I love all the ‘tuts sites. I’m on the verge of getting a one month PLUS membership just for this tutorial. I do have two questions though:

    1. Is tutorial good for someone who doesn’t code at all? I know photoshop well but I don’t normally hand code my designs. Is it worth it for a newbie like me to use this tutorial?

    2. If I sign up for a PLUS membership, is there a minimum amount of months I have to stay? Can I cancel after just one month?

    Any help would be great guys. Thanks!

    • http://themeforest.net/user/JeffreyWay Jeffrey Way

      Hi John,

      1) You should probably have some coding knowledge for this tutorial.

      2) You’re more than welcome to sign up for just one month. However, you’ll get a discount if you sign up in 3 month increments!

      • John

        Hi Jeffrey,

        Thanks for the response. It’s good to know that I can sign up for PLUS month-to-month.

        As for the coding part of this tutorial, do you suggest knowing some coding knowledge simply because it would be good to know or because it almost required for this tutorial?

        Thanks again.

  • http://www.cornerofart.com Abdullah Alhourani

    Greate.. I Like it.

  • http://rcthegreatblog.com Rahul Chowdhury

    This tutorial is awesome. I loved it.

  • Jason Wilson

    Not a Plu member so I couldn’t see, but did you come up with a way to make this layout flexible?

    I know that was a major concern with the commenters on the PSDTuts post.

  • http://joaopedropereira.com/ João Pedro Pereira

    Very, very poor unfortunatly because the subject is very interesting.

  • Conhuir

    Im glad I became a Plus member :D this has helped me so much!
    Hope to see more tutorials like this, not everyone is a pro developer remember so little tuts like this go a long way with people at my level.

    Thanks man!

  • Nina Morena

    I use this as a reference point. I am always interested to see how other developers use css effectively. I suggest this to anyone who uses the PSD wireframe to a working prototype of a site.

    The only thing I noticed was the sticky footer use. I may have overlooked it but I have it saved in my library for good use.

    Good stuff…

  • Pingback: Tutorial Convert PSD to HTML, XHTML, CSS | Theme Heven

  • arnold

    Mr.Alvaro Guzman I wish you will upload some more tutorials like this,
    this awesome by the way..

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

  • Pingback: 10 Tutorial Konversi PSD ke XHTML dan CSS | Om Ipit | Web Designer | Blogger Cepu

  • http://www.netviperinteractive.com Netviper

    Was this tut for a WordPress site? or just any HTML site? It looks like it would be a great WordPress Theme

  • Mario

    Thank for sharing idea
    i m lucky to meet it
    i m trying to be professional designer like u
    cheer me ……….

  • http://www.xhtmlweaver.com XHTMLWeaver

    good stuff

    nice and clean tutorial

  • Pingback: Jun-Jun Ragodos Blog's » Blog Archive » Create a Magic Night Themed Web Design from Scratch in Photoshop

  • amar

    It’s wonderful.

  • Pingback: TheGraphicStock | 4 Detailed Website Tutorials

  • Pingback: 10 Excellent Photoshop Web Design Layout Tutorials – How to Freelance