Alright, so you spent a few hours in photoshop creating your best design, now you want to get it live as soon as possible. But now you run into trouble. You could just slice it up and upload the Imageready-generated html, or recode it all by hand. But how?

Article Contents:

• PSD to Xhtml
• Getting Rid of those Un-Needed Images
• Recoding by hand
• The Differences

PSD to Xhtml

In this article, I attempt to guide you through a basic psd design, the slicing, and re-coding to get rid of the Imageready code and make it your own.

Let’s start off with basics. You open up Photoshop, make a design, and open it in Imageready to begin slicing up images. For the purpose of this demonstration, I opened a blank canvas 650x500px, and layout down sup simple design.

Removing Those Un-Needed Images

Once I opened up my PSD in Imageready, I made note of what “images” didn’t have to be there. When you design, generally you are only making a template for content. Alot of times you’ll use background colors for content areas, and then when you slice them up, you leave them as background images.

The beauty of css is it allows you to do all this without needing images. Go through your design while writing down the hex codes for different areas of your design.

Once you’ve written down the hex codes, slice up your design as you wish and export a Imageready generated copy of the html, and well as all the images.

Next you’ll need to open up a text or html editor, in this case we used Dreamweaver, and the Imageready generated html file.