MailChimp issues with image slices from Photoshop file? [FIX]

Create HTML newsletter in PS without body text.

Slice this up using Photoshop’s slice tool.

Right click to promote any autocreated (grey) slices to user (blue) slices.

File->Save for web and devices.

Select gif or jpg depending if graphics or photo based (respectively).

Saves images and html file.

Open html file in Dreamweaver, even though it LOOKS ok, if you upload this as is to MailChimp and send it, Gmail.com, Hotmail and many others with break up the table layout. Try it and see! It’s very easy to tweak the HTML code to fix this, click read more to find out how.

At present each cell entry would look like:

But rather than specificy a blank cell and then put an is as it’s content, we want to specify a cell with the as the background to the cell and NO content (or at least not yet).

What you want to do is highlight the width=”xx” height=”xx” and CUT that (CMD-X or CTRL-X) then PASTE it in just after td

width=”30″ height=”1″>

Then after the height tag you want to add background=”img_you_want” tag. So just copy and paste the “images/image_your_want.gif” from the line below and then you’re left with:

background=”images/spacer.gif”>

Since we want the contents to be empty you can now remove the middle line simply leaving:

You’re done.

If you want to add text OVER the table background images you’d simply place it before the

tag.

SOME TEXT CAN GO HERE

Now when you upload your files to MailChimp to generate a newsletter it should display correctly in Hotmail, Gmail, etc without the table and background being mis-aligned and broken.

Recent queries:

  • how to upload a file from photoshop to mailchimp

6 Replies to “MailChimp issues with image slices from Photoshop file? [FIX]”

  1. Thanks! This is working well for me.. could you please also show how to change the code if we want to assign a URL to a sliced element?

Leave a Reply