I have an email template that's done in Photoshop for a weekly newsletter. It's sliced up and the only parts that stay the same are the header and the footers, the height of the email is always different.

What would be the best way to just change the middle part when creating a new email, leaving the top and the bottom as an asset? Should they just sit in separate PSD files and then be combined after it's saved to HTML?

  • 1
    What does EDM stand for? Probably not my first guess, which is electronic dance music... ;) – JohnB Dec 2 '13 at 6:35
  • Electromagnetic Distortion Modulator? – Scott Dec 2 '13 at 7:19
  • @JohnB just doing mail outs ;) I think it probably stands for Electronic Direct Mail – Francis Kim Dec 2 '13 at 7:19

If it is indeed email, you can't really use background images in CSS, or rather you shouldn't. It's best to create the traditional table layout and place the header and footer in table cells. Then it's a really easy matter to edit the middle content.

  • Yes, I am trying to use the Save for Web feature as much as possible. – Francis Kim Dec 2 '13 at 7:41
  • 1
    You can set a header and footer image in separate pSD files. Then edit and resave. As long as the file name and dimensions don't change they should swap out seamlessly – Scott Dec 2 '13 at 7:46
  • Backgrounds can be used in html email utilizing a combination of CSS background and Microsoft's VML. – John Jan 2 '14 at 14:11
  • 1
    Of course, not every mail client will support Microsoft VML. – Scott Mar 3 '14 at 14:48
  • VML is the hack for Outlook, the rest of the major clients support background in both table and body tags. See backgrounds.cm for more info on how a "bulletproof" background using both techniques works. – John Mar 3 '14 at 22:38

Should they just sit in separate PSD files and then be combined after it's saved to HTML?

YES. You should never use Photoshop slices for html email. Separate your header and footer images and create the rest in code.

If you have any further questions on the code side, stackoverflow's html-email section is the place to go. Here are a few links you might find also find helpful:

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.