Cut psd to xthml


Published on

Steps to cut a design in PSD to XHTML,CSS

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Cut psd to xthml

  1. 1. Cut PSD to XTHML<br />TrầnKhảiHoàng<br />
  2. 2. Prepare folder to contain your work<br />Recommend : <br />/<br />index.html<br />images/<br />js/<br />css/<br />Step 0<br />
  3. 3. Examine design to separate content & decoration : <br />Content is what brings readers INFORMATION<br />Decoration is art that makes content BEAUTIFUL, OUTSTANDING, EMPHATIC…<br />INFORMATION isn’t lost when removing decoration<br />INFORMATION = XHTML<br />DECORATION = CSS<br />Step 1<br />
  4. 4. Make webpage layout<br />Group content together, wrap each group with an rectangle<br />Name each rectangle<br />An typical layout : <br />Step 2<br />
  5. 5. Create XHTML markup :<br />Create a <div> to wrap all rectangles<br />Each rectangle becomes a <div><br />Change content to XHTML : <br />Link uses <a><br />List uses <ol> or <li><br />Paragraph uses <p>….<br />If content has images, uses fake images (we will replace them later)<br />Remember : <br />Use !DOCTYPE & XHTML<br />Step 3<br />
  6. 6. Validate your XHTML<br /><ul><li>Use w3c validator :</li></ul>Remember rules : <br />Use !DOCTYPE<br />Tag in lowercase<br />Close tags properly<br />Nest tags properly<br />Quote attributes<br />Fix any errors until it valid<br />Step 4<br />
  7. 7. Slice the PSD<br />Begin with a rectangle, then go to another<br />Which to slice ? <br />Content image : logos, illustration images, text with special font, …<br />Background image : menus, borders, page background , rounded corners, hover background…<br />Bullet : list bullet,icon…<br />Step 5<br />
  8. 8. Don’t slice too small<br />Name each slice based on its role not its content<br />Be consistent when naming slice (use a convention). <br />Ex : logo, bullet1,bullet2,headerBg,leftTop …<br />Ex : logo, bullet_1,bullet_2,header_bg,left_top …<br />Step 5 - Notice<br />
  9. 9. Export slice to image<br />Choose the right image type : <br />JPG : good for photo, gradient or image with many colors. No transparency<br />GIF : good for chart, drawing, bullet, text image with less colors(<256 color). Preserve transparency<br />PNG : good when we need to preserve transparency and large amount of colors or partial transparency<br />JPG : lossy , GIF, PNG lossless<br />Step 6 <br />
  10. 10. Choose JPG quality to reduce image size :<br />Quality = Medium, Low for background<br />Quality = High for important content or decoration<br />Quality = High for artwork<br />Popular optimization around 50%-75%<br />Step 6 - Notice<br />
  11. 11. Apply CSS to markup : <br />Reset CSS<br />Add typography <br />Determine using fixed or fluid layout then apply it<br />Begin decoration from top -> bottom<br />Step 7<br />
  12. 12. Validate your CSS<br />Step 8<br />
  13. 13. Test & fix bugs<br />Compare your XHTML vs PSD side by side to identify bugs<br />Zoom in, out your HTML<br />Test with different web page size<br />Check links and hover effect<br />Step 9<br />
  14. 14. Test & fix cross-browser bugs<br />Identify your target : >IE6,>FF2,>Opera9…<br />Use IE Tester or Virtual box to test on multiple IE<br />Check all know IE6 bugs<br />Place browsers side by side to find bugs<br />Step 10<br />
  15. 15. First : XHTML is identical to the PSD<br />Second : XHTML, CSS, JS validated<br />Third : Less images, less size (image, css, js) and less divs, less id, less classes<br />Good cut<br />