Feature
Post

Category
Code


PSD to Xhtml

Alright, so you spent a few hours in photoshop creating your best design, now you want to get it live as soon as possible. But now you run into trouble. You could just slice it up and upload the Imageready-generated html, or recode it all by hand. But how?

Article Contents:

  • PSD to Xhtml
  • Getting Rid of those Un-Needed Images
  • Recoding by hand
  • The Differences

PSD to Xhtml

In this article, I attempt to guide you through a basic psd design, the slicing, and re-coding to get rid of the Imageready code and make it your own.

Let’s start off with basics. You open up Photoshop, make a design, and open it in Imageready to begin slicing up images. For the purpose of this demonstration, I opened a blank canvas 650x500px, and layout down sup simple design.

Removing Those Un-Needed Images

Once I opened up my PSD in Imageready, I made note of what “images” didn’t have to be there. When you design, generally you are only making a template for content. Alot of times you’ll use background colors for content areas, and then when you slice them up, you leave them as background images.

The beauty of css is it allows you to do all this without needing images. Go through your design while writing down the hex codes for different areas of your design.

Once you’ve written down the hex codes, slice up your design as you wish and export a Imageready generated copy of the html, and well as all the images.

Next you’ll need to open up a text or html editor, in this case we used Dreamweaver, and the Imageready generated html file.


  1. By Erik posted on June 19, 2006 at 2:10 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    What a wonderful article. For those who have not “learned” xhtml compliancy or for that matter CSS coding this is a great way to hack it.

    Give the power of Photoshop and Imageready and add in xhtml and the internet will become more gorgeous and definitely more efficient.

    The videos are neat as well, which piece of software are you using for the shots? Snapx (I forget the exact name)?

  2. By Ivan posted on June 20, 2006 at 3:18 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Great article.

  3. By aj posted on June 20, 2006 at 7:31 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Glad you guys liked the article.

    @Erik – I used Snagit 8 for the video captures. Just have to figure out how to zoom and stuff for next time around :)

  4. By Dimitri posted on August 23, 2006 at 12:31 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Nice article!

    Actually it shows an importance of the crucial ideas of web-development – use only things you really need, make clean code, reduce the size and total amount of files, make good use of CSS, keep
    the content of your pages separated from the way they are represented, and what’s more – follow the W3C standards.

    Benefits are obvious – speeding up website, reducing bandwidth, saving money on redesigns, having consistent look across all your pages, making your site much more accessible to people with slow connections and disabilities, enabling users to browse your site with PDA’s and mobile phones.

    Unfortunately, it’s true that there is no tool of generating correct HTML code automatically. The best HTML – is a hand-made one. Obviously, as you can see from the article, making this type of code
    requires some special knowledge and experience. Nevertheless, there are services which can do this for you, for instance – psd2html.com!

  5. By bliss posted on October 14, 2006 at 8:50 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Yups! now DL is on fast track :). Wonderful article. Wish i’d see articles for little bit advanced css, xhtml development soon?

  6. By PsdSlicing posted on October 20, 2007 at 10:20 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Nice article.

    I would prefer to manually code the pages, since it’s more clean then generated code.

  7. By XHTML Slice posted on October 26, 2007 at 4:55 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Hand code is better :)

  8. By Salman posted on May 17, 2008 at 6:45 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    “Unfortunately, it’s true that there is no tool of generating correct HTML code automatically. The best HTML – is a hand-made one.”

    There is a plug-in for photoshop called sitegrinder, which outputs your designs to XHTML/CSS, but requires you to name your layers accordingly to help it.

  9. By CSS Slicers posted on July 20, 2008 at 5:06 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Yet, this tool makes almost everything in absolute position and doesn’t adding and creating additional pages is very hard – i.e. you should make them using the same tool again, but keeping in mind that now you’ll have a different css files for the new pages and so on.. And let’s not talk about SEO optimisation of the pages, cause it’s gonna be missing..

  10. By adrian clark posted on August 8, 2008 at 5:23 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Another very realiable service is Design2HTML

    You send a design in any of common formats (PSD, PNG, JPG, GIF etc) 
and you receive a high-quality XHTML-CSS page.

    http://www.mydesign2html.co.uk

  11. By Adrian Clark posted on August 10, 2008 at 12:55 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Hi,

    Probably the most reliable service

    Your Design to HTML in 24 hours

    You send a design in any of common formats (PSD, PNG, JPG, GIF etc) 
and you receive a high-quality XHTML-CSS page.

    Get custom hand-coded professional HTML / XHTML in 24 hours.
    The Best Price in the market
    PSD, JPG, PNG formats

    http://www.mypsdtohtml.com

  12. By psd to html posted on August 20, 2008 at 12:37 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Great tutorial and great idea using a video. However the video stops from time to time (maybe it’s my firefox problem). Also consider muting most of the video as it has some annoying hum.

  13. By Nelson posted on November 20, 2008 at 4:47 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Great tutorial….
    hard coded might be better though..

  14. By xhtml Candy posted on April 26, 2009 at 11:47 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Hand coded markup is always. Also semantic coding is important. Names of DIV’s and classes should be self explanatory. XHTML 1.0 strict is hardest to validate but it is worth all the pain.

  15. By xhtml conversion posted on September 10, 2009 at 8:54 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    If designer can create a design into photo shop in 2-3 hours but he has some problem in conversion he need some basic knowledge of conversion this article help those person who are able to create design but have lack of knowledge of xhtml conversion…

  16. By PSD to HTML posted on October 29, 2009 at 8:20 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Thanks for sharing. PSD to HTML conversion is a tricky area for most designers and your article should help in that

  17. By R Aflec posted on November 26, 2009 at 11:29 am
    Want an avatar? Get a gravatar! • You can link to this comment

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

  18. By PSD to xHTML posted on December 2, 2009 at 8:26 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    If you’re not up to coding yourself, you could just go with an xHTML/CSS coding service.

  19. TrackbackPSD to XHTML CSS