SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast yangyang's Avatar
    Join Date
    Jun 2007
    Location
    kavoir.com
    Posts
    96
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    How can you convert a PSD to HTML?

    This is a rough introduction to how you do PSD slicing and convert them into valid, semantic XHTML / CSS code that works cross-browser.


    Software I use for slicing

    1. Photoshop (indispensable): You can use Fireworks instead but there's a chance it could misinterpret the PSD and the colors and shapes might go haywire.
    2. Text editor (indispensable): I use Microsoft Expression Web which is solid boost to my productivity.


    Knowledge needed for PSD to HTML slicing

    1. Full-fledged knowledge of XHTML: You must know all the tags XHTML 1.0 offers and the minor semantics of everyone of them under all circumstances.
    2. Full-fledged knowledge of CSS: You should know all possible styling rules for each and every of the HTML tags. In addition, you know how to stack selectors in ways that not only benefit you but also good for your users who are very likely going to modify your code at real implementation. You must also have a very well organized set of CSS tricks / tips / hacks for coding every problem out - be it cross browser techniques, browser specific problems and many many others.
    These can be learned by practicing for years and learning from mistakes and trials, but you can also submerge yourself in all the things Google could offer you. Search for a solution.
    3. It takes sweat and toil to attain XHTML / CSS superpowers which may very well takes years in time. Be persistent and keep learning as well as practicing.


    What makes a good conversion?

    1. Valid W3C XHTML code
    2. Valid W3C CSS code
    3. Well indented and commented code
    4. Good sense of semantics through the use of tags
    5. Good balance of code simplicity and readability
    6. Well constructed code / style structure in regards to future tweak and further development
    7. Atomicity / modularization of styles
    8. Should come up with more when I get my hands down to work

    For more practical examples of good conversions, you may want to give a read at <snip> and <snip>.


    General guidelines

    1. Not to mention, the converted result should be as pixelly precise as possible against the original design. Though not a doctrine it is for example, sometimes the designer may have rushed and you will spot a few design inconsistency in which case, you will make it consistent instead of following the PSD blindly.
    2. Font sizes should be in 'em' or relative sizes, most of the time, so users could resize them easily from their browsers - not required though because browsers are getting smarter and smarter. Many modern browsers can resize texts in absolute font sizes. Another scenario in which you may want to use absolute values such as 'px' is when you are modularizing the styles such as delivering just a section / part of an entire page for the client to integrate into other pages. In this case, using absolute font sizes would reduce incompatibility and prevent font sizes from being affected that those of the native ones.
    3. All designs, unless otherwise specified should be centered as a result of expanding screen resolutions.
    4. All backgrounds, including header's, body's and footer's should expand as wide as the screen and blend well with the content.
    5. Flexible layouts or vertically expandable content boxes - this could be a primary cost for designs having way many rounded corners and background gradients.
    6. Well decomposed page elements so clients can change things easily.
    7. Let me add more when I can think of them. Or pay a visit to my blog I'll keep updating on the front end tips concerning effective use of XHTML, CSS and JavaScript for SEO, accessibility and usability.


    Rough methodology and procedures

    1. Lay the foundations first - sectioning, or how you are going to divide up the pages. A general rule of thumb is to think in terms of backgrounds. Is the design very complex with various stacking backgrounds in crazily changing colors in all directions. Is it vertical? Or is it horizontal? How you are gonna repeat that and expand horizontally / vertically to the end of the screen.
    I have done hundreds of conversions up until now and most of the designs can be divided into header, content, sidebar (maybe more than 1) and a footer. Each of them may have the potential to contain another <div class="main"> for the sake of complex backgrounds or simply rounded-corner content boxes - to ensure they expand / shrinks vertically as content grows.
    2. Scour all PSD pages if there's more than one. Especially when there're many of them, you should definitely do this. With a rather complicated design you should find many repeating visual elements such as sidebar widgets, content area headings and special floating image boxes. With a slight tendency of style modularization, you are on a good way of reducing your conversion time and bringing up productivity.
    3. Sometimes it's not obvious with repeating patterns but you can still save a lot of trouble by well sticking to the cascading of CSS. For instance, with a complex undertaking, you will have a lot of a:link, a:visited to deal with, but you should first examine what styles are shared among them and lay the ground work first. Later on whenever you meet a slightly more specific situation e.g. with #header a:visited, #header a:link, reset the default values you have set before.
    4. So now you have found all the common page parts and made dozens of code snippets that you can move around freely, maintaining their original style. It's good and you will soon learn to do more with it and love yourself in producing faster than ever. Let's get down to the minor details, mostly inline elements. Don't forget to make general classes for wide-spreading usage of common notices, errors and emphases.
    5. After completing the initial draft of your conversion, now you need to compare if the pages coded by you reflect the original designs like in a mirror. Fire up your browsers: IE6(getting ancient), IE7, IE8, FF2, FF3, Opera 9.5 and Safari Win - more luxurily, a Mac OS Safari, and test those babies out. Spot minor erros and fix 'em, making them all consistent in look.
    6. Validate your XHTML code at http://validator.w3.org and CSS at http://jigsaw.w3.org/css-validator.
    7. Actually there are more geeky tests such as accessibility, usability, image on and off and much more than just these but we will just leave them here. You must be already scratching your head for a simpler guide.


    Some more concerns & FAQs


    1. Q: Do I need a reset.css?
    A: That may depends from person to person. You may first want to give it a try and then decide for yourself. I find using CSS reset fun and boost the productivity.
    2. Q: How much must I know to adapt to all possible coding requirements?
    A: Of course that answer is all. You need know the hell all of XHTML and CSS to not miss a single job or problem.
    3. Q: Is it hard?
    A: No, if you enjoy it.
    4. Q: How much would I earn by being a converter?
    A: Hard to say. That depends on how you market and how good are you. Generally a XHTML/CSS converter can earn $30 - $80 / hour depending on your skills and location.
    5. Q: If I need assistance in converting a PSD to HTML, who should I turn to?
    A: There are lots of choice in conversion services. 2 of the top guys are psdtohtml.com and w3-markup.com. The problem is that they charge way too high than they deserve.




    Any questions, please just ask. I'm all yours! =)
    Last edited by AutisticCuckoo; Oct 28, 2008 at 00:57. Reason: Self-promotional links removed
    I blog about making websites, technically.
    Online image converter - all formats that you can think of.

  2. #2
    SitePoint Evangelist Karpie's Avatar
    Join Date
    Jul 2007
    Location
    Perth, Australia
    Posts
    445
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is all well and good, but there isn't much actual information in there, that anyone with basic CSS knowledge doesn't already know.

    There's nothing in there about the actual slicing and dicing of the PSD, which can be the hardest part of the process (if you don't have a design background, like I don't.)

  3. #3
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Accessibility, usability, units of measurement, semantic naming conventions, reusable code.

    What are your viewpoints on these topics?

  4. #4
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    but there isn't much actual information in there
    Yep, more of a list of best practices then a tutorial

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Location
    Tucson, Arizona, USA
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you're looking for a tutorial, give this one a try:

    http://www.partdigital.com/tutorials/convert-web/

  6. #6
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Karpie View Post
    This is all well and good, but there isn't much actual information in there, that anyone with basic CSS knowledge doesn't already know.

    There's nothing in there about the actual slicing and dicing of the PSD, which can be the hardest part of the process (if you don't have a design background, like I don't.)
    They were just looking for a way to add some links to their own PSD to HTML type business site. Looks like a mod removed them.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •