English

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

Keep the slices simple and aligned
Keep the slices simple and aligned

Don't

Too many vertical spans
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 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.

Only slice for hyperlinks
Only slice for hyperlinks

Don't

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

Too many unnecessary slices
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
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
Use this settings

Step 3: Output Settings

In [HTML] output settings, check [Output XHTML].

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>
[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="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