Tweet
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 here and here.
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
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 here and here.
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
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! =)
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! =)
Comment