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

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

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.

To learn more about this step, view Tips of Prepareing a HTML Email - About Images - Tip 3 and 4