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.
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.
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.
|Before||<img src="images/banner.jpg" width="600" height="50" alt="SalesCatalysts.com">|
|After||<img style="display: block;" border="0" src="images/banner.jpg" width="600" height="50" alt="SalesCatalysts.com">|
to learn more about this step, view Tips of Prepareing a HTML Email - About Images – Tip 3 & Tip 4