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 may fail in Outlook.
Do

Don't

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 may not recognize the complicated HTML code so that the newsletter may be broken.
Do
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.

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

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].

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...].

Step 3: Output Settings
In [HTML] output settings, check [Output XHTML].
![Check [Output XHTML]](../../../resources/img/campaign/tips-on-creating-email-with-photoshop/en-07-2d792cae61.png)
Then go to [Slices] output settings page, in [TD W&H] field, select [Always].
![[Always] means always set width and height in <td>](../../../resources/img/campaign/tips-on-creating-email-with-photoshop/en-08-3538a64b9d.png)
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="Banner" /> |
---|---|
After | <img style="display: block;" border="0" src="images/banner.jpg" width="600" height="50" alt="Banner" /> |
To learn more about this step, view Tips of Prepareing a HTML Email - About Images - Tip 3 and 4