• Tweet
• Share

• Tweet
• Share

We’ve just started our first WordPress theme! In Part 1 and Part 2 we reviewed some techniques that will allow our design to be marked up to XHTML. In this lesson you’ll learn exactly how to do this and why it isn’t exactly as easy as it seems.

Photoshop to XHTML in 24 Hours

So we’ve all seen those ads for websites that say they can “Photoshop to XHTML/CSS in X Ammount of time” right? No? well here’s 39 of them. What exactly are these service doing that you can’t as the theme designer? Nothing. If you feel so inclined, save yourself the fee (usually around $100 or so dollars) and do it yourself!

• 1. Select File > Save For Web and Devices



• 2. Click the arrow in the top right to optimize your websites color and download time. I usually don’t optimize for anything slower than 56Kbps because I use another technique which you’ll find out about in Part 4.



• 3. Under preset select whether you want to use PNG, JPEG, or GIF formats and the various quality settings for each.
• 4. Click “Save”.
• 5. A window will pop up. Here You want to set Format to “HTML and Images”. Under settings select Other



• 6. You’re going to set four options. For HTML you want to make sure ‘Output XHTML’ is selected. For Slices you want to make sure ‘Generate CSS’ is selected instead of ‘Generate Table’. Skip the remaining two options Background and Saving Files, they aren’t particularly necessary.

  >

• 7. Save the file, navigate to and open the resulting HTML file in your text editor. You’ll notice that Photoshop CSS has annoyingly put all your images inline with your HTML, meaning it’s not in a separate stylesheet like it should be.

In the next step we’ll discuss how to go from inline XHTML to the two file (.html & .css) standard that will be needed to mark up the design to php.