HTML emails typically appear in a smaller window than web pages do. Consider figure A. There is usually not much room to display the email, so a good rule of thumb is to keep your designs under 500 pixels wide.

Start in Photoshop

Create a new document at 550 pixels wide by 800 high, RGB and 72 dpi (B). 800 pixel height will change; just give yourself enough room to fit everything in and then crop the height later.

Design your page. Try the "oblong" look for a trendy design, or break the rules with something completely different.

Guides are important:

You need to designate specific areas of your page to hold the html text so that your design isn't just one big graphic. How big to design these areas depends on your copywrites. If there is a lot of copy, you need a bigger area (like duh).

In figure C, I'm making a promotion for americangreetings.com. I put the logo at the top, a rounded graphic as a background, a headline, two subheads, and two photos in as graphics, and the rest as placeholder text which will be recreated as html text. Below, you can see the slices I drew in Image ready. Notice how many of the key elements from the anatomy diagram are each in their own slice.

Warning: include(../../includes/footer.php) [function.include]: failed to open stream: No such file or directory in /home/dunkleb/public_html/notes/html_email.php on line 15

Warning: include() [function.include]: Failed opening '../../includes/footer.php' for inclusion (include_path='.:/usr/share/php:/home/dunkleb/public_html') in /home/dunkleb/public_html/notes/html_email.php on line 15