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

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

Mar 11th in News by Alvaro Guzman

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.

PG

Author: Alvaro Guzman

This is a NETTUTS contributor who has published 1 tutorial(s) so far here. Their bio is coming soon!

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 Plus

NETTUTS+ Screencasts and Bonus Tutorials

For those unfamiliar, the family of TUTS sites runs a premium membership service called "TUTSPLUS". For $9 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.


Related Posts

Check out some more great tutorials and articles that you might like

Enjoy this Post?

Your vote will help us grow this site and provide even more awesomeness

Plus Members

Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.

Join Now

User Comments

( ADD YOURS )
  1. PG

    huzzi March 11th

    I like :)

    ( Reply )
  2. PG

    Raducu March 11th

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

    I’m happy to be a member of tuts+

    ( Reply )
  3. PG

    Raducu March 11th

    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

    ( Reply )
    1. PG

      Alvaro March 11th

      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!

      ( Reply )
      1. PG

        Raducu March 11th

        I got the idea.

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

    2. PG

      Thad March 11th

      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/

      ( Reply )
      1. PG

        Raducu March 11th

        thanks

  4. PG

    Yoosuf March 11th

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

    ( Reply )
    1. PG

      Saro March 11th

      Not all layouts are coded the same…

      ( Reply )
    2. PG

      Jeffrey Way March 11th

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

      ( Reply )
      1. PG

        Ryan March 15th

        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.

    3. PG

      crysfel March 11th

      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.

      ( Reply )
  5. PG

    Matt Radel March 11th

    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.

    ( Reply )
  6. PG

    Nick March 11th

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

    ( Reply )
  7. PG

    Chris Robinson March 11th

    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.

    ( Reply )
    1. PG

      Brent March 15th

      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 :)

      ( Reply )
  8. PG

    Cosmo & Wanda March 11th

    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.

    ( Reply )
  9. PG

    adryi19 March 11th

    thanks for share info :)

    ( Reply )
  10. PG

    iPad March 11th

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

    ( Reply )
  11. PG

    Shane March 11th

    Looks like a nice site

    ( Reply )
  12. PG

    Jean Michel March 11th

    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.

    ( Reply )
  13. PG

    Eneza March 11th

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

    Thanks Guys!

    ( Reply )
  14. PG

    li kai March 11th

    wow

    ( Reply )
  15. PG

    Martyn March 12th

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

    ( Reply )
  16. PG

    Nico March 12th

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

    ( Reply )
  17. PG

    Deddy March 12th

    *Joins Tuts Plus*

    ( Reply )
  18. PG

    dia_75 March 12th

    *Joins Tuts Plus in 2 or 3 hours*

    ( Reply )
  19. PG

    Moksha Solutions March 12th

    really nice one, thanks for it

    ( Reply )
  20. PG

    Valics Lehel March 12th

    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?

    ( Reply )
  21. PG

    John March 12th

    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!

    ( Reply )
    1. PG

      Jeffrey Way March 13th

      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!

      ( Reply )
      1. PG

        John March 14th

        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.

  22. PG

    Abdullah Alhourani March 13th

    Greate.. I Like it.

    ( Reply )
  23. PG

    Rahul Chowdhury March 14th

    This tutorial is awesome. I loved it.

    ( Reply )
  24. PG

    Jason Wilson March 14th

    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.

    ( Reply )
  25. PG

    João Pedro Pereira March 14th

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

    ( Reply )
  26. PG

    Conhuir March 15th

    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!

    ( Reply )
  27. PG

    Nina Morena March 16th

    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…

    ( Reply )
  28. PG

    arnold May 4th

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

    ( Reply )
  29. PG

    Netviper June 19th

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

    ( Reply )
  30. PG

    Mario October 6th

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

    ( Reply )

Add Your Comment

( GET A GRAVATAR )
  1. Arrow
    Gravatar

    Your Name
    October 6th