20+ Best Tutorials to Convert Psd to Html/CSS

June 15, 2009

Source: http://dzineblog.com/2009/04/tutorials-psd-to-html.html

You’ve designed your site but you’re having a little trouble turning your design PSD into a coded layout. Here I’ve listed 20+ Best Tutorials to convert Psd to Html/CSS.These tutorial should help you learn how to find the best way to code it.

  1. The Design Lab: PSD Conversion
  2. From PSD to HTML, Building a Set of Website Designs Step by Step
  3. Coding: Design Lab TV Styled Layout
  4. PSD to CSS/HTML in Easy Steps – Part 1
  5. Slice and Dice that PSD
  6. Converting a Photoshop Mockup: Part Two, Episode One
  7. Build a Sleek Portfolio Site from Scratch
  8. Portfolio Layout – Learn To Code It
  9. Converting a Design From PSD to HTML
  10. How to Convert a PSD to XHTML
  11. How to Convert PSd to Html
  12. Creating a CSS Layout from scratch
  13. PSD > HTML/CSS
  14. Encoding a Photoshop Mockup into XHTML & CSS
  15. CSS Template Tutorial
  16. Portfolio Layout 4: The Code
  17. Tutorial Coding a Layout
  18. Converting a Photoshop Mockup
  19. Killer site – From Illustrator to Xhtm to Drubal
  20. From PSD to HTML
  21. Coding a Car Sales Layout
Advertisements

Coding a Clean Web 2.0 Style Web Design from Photoshop

June 5, 2009

Source: http://sixrevisions.com/tutorials/web-development-tutorials/coding-a-clean-web-20-style-web-design-from-photoshop/

This is the second installment for the article How to Create a Clean Web 2.0 Style Web Design in Photoshop. A bit of CAUTION: It is huge! I mean very long but somehow really interesting and exciting (hey, anything about the new web is exciting right?). So get some Starbucks or better yet, Coke/Pepsi and read the whole article without blinking!


How to Create a Clean Web 2.0 Style Web Design in Photoshop

June 5, 2009

Source: http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-clean-web-20-style-web-design-in-photoshop/

Mockup

Mockup

This is exactly what I was looking for this afternoon. I don’t usually make any mockup in Photoshop but saw many advanced designers gain success by producing mockups. You definitely should give this a try.


How to Convert a Photoshop Mockup to XHTML/CSS

June 5, 2009

Source: http://line25.com/tutorials/how-to-convert-a-photoshop-mockup-to-xhtml-css

This article is highly recommended if you often create mockups in Photoshop and then “try” to slice it into a nice, standard compliant XHTML page:

Follow this walkthrough of coding up a graphical website layout into valid, standards compliant XHTML and CSS. Starting with the initial process of exporting the individual images from the Photoshop document through to building the complete page.

In case you missed it, the first part of this tutorial, Create a Clean Modern Website Design in Photoshop went through the stages of producing the visual concept of the Pixel juice website.


30 HTML Best Practices for Beginners

June 2, 2009

Source: http://net.tutsplus.com/tutorials/html-css-techniques/30-html-best-practices-for-beginners/

Just for your curiosity, I am naming the main 30 practices:

  1. Always Close Your Tags
  2. Declare the Correct DocType
  3. Never Use Inline Styles
  4. Place all External CSS Files Within the Head Tag
  5. Consider Placing Javascript Files at the Bottom
  6. Never Use Inline Javascript. It’s not 1996!
  7. Validate Continuously
  8. Download Firebug
  9. Use Firebug! (duh!)
  10. Keep Your Tag Names Lowercase
  11. Use H1 – H6 Tags
  12. If Building a Blog, Save the H1 for the Article Title
  13. Download ySlow
  14. Wrap Navigation with an Unordered List
  15. Learn How to Target IE
  16. Choose a Great Code Editor
  17. Once the Website is Complete, Compress!
  18. Cut, Cut, Cut
  19. All Images Require “Alt” Attributes
  20. Stay up Late
  21. View Source
  22. Style ALL Elements
  23. Use Twitter
  24. Learn Photoshop
  25. Learn Each HTML Tag
  26. Participate in the Community
  27. Use a CSS Reset
  28. Line ’em Up!
  29. Slice a PSD
  30. Don’t Use a Framework…Yet