Tips for Creating Email with Photoshop

Aligning The Slices

Try to align all slices horizontally, tidily and lessen veritical span slices.

Horizontal table cell spans are acceptable, but vertical spans will fail in Outlook 2007 and Outlook 2010.


Keep the slices simple and aligned


too many vertical spans

Slice Only When You Need to Add Hyperlinks

Based on the above tips, only slice where you need to add links in order to lessen the number of slices.

Otherwise, Outlook 2007 and Outlook 2010 may not recognize the complicated HTML code so that the newsletter may be broken.


If you want to add links to images, “Learn more” and “Try it free” button, only slice where you need to add links, and keep the slices tidy.

Only slice for hyperlinks


There is no need to slice the paragraph title if they are not clickable.

too many unnecessary slices

Saving The Sliced Images As A HTML File

Step 1: Save sliced images for Web

After slicing the image, select Save for Web in File, choose proper image format, then click Save.

Save for Web

Step 2: Optimized Settings

In Save Optimized As settings, choose Html and Images in Format field , choose All Slices in Slices field, then in Settings, select Other....

Use this settings

Step 3: Output Settings

In HTML output settings, check Output XHTML.

Check "Output XHTML"

Then go to Slices output settings page, in TD W&H field, select Always.

"Always" means always set width and height in <td>

Step 4: Add border="0" and style="display: block;"

After saving the file as a HTML file, open the HTML document.

Add border="0" and style="display: block;" to all <img> tags.

Before <img src="images/banner.jpg" width="600" height="50" alt="">
After <img style="display: block;" border="0" src="images/banner.jpg" width="600" height="50" alt="">

to learn more about this step, view Tips of Prepareing a HTML Email - About Images – Tip 3 & Tip 4