InDesign -> Illustrator -> Photoshop -> HTML – Email Design Workflow

Hi all,

I'm trying to improve our email design workflow and wondered if any of you could offer up some suggestions on how we might be able to do so. Let me explain the current process and also explain why we go about doing it this (long-winded) way…

1. Emails are designed in Indesign. Lots of images and non-standard fonts.
Actual example here:

2. Final design is exported as a PDF.

3. PDF is opened up in Illustrator and exported from there as a layered PSD.

4. PSD is opened up in Photoshop, type layers have their anti-aliasing options tweaked for accuracy, anti-aliased strokes such as underlines are tidied up.

5. Final design is output as a flat JPEG

6. JPEG is uploaded to to be sliced up and exported as HTML.

Being a fashion company, we tend to need to design with lots of non-standard fonts, with the type sitting on top of photographic imagery. Also, beyond the header and footer, we don't do templates. Very rarely do two emails use the same layout. We need to use InDesign as our emails are turned around very quickly and InDesign is by far the fastest application for assembling our layouts.

So the problem lies with InDesign not being able to export to a layered PSD file. Yes, it can export straight to a JPEG, but the anti-aliasing is poor and the fonts we use always look terrible with the way it is set to output. There are no options for how text should be handled.


…the process we currently have does get the results we need, but I can't help thinking there must be a better way!

We're running CS5 but from what I can tell from the trial Adobe CC doesn't offer much improvement. Unless, and I hope so, I'm missing some new feature.

Any advice would be greatly appreciated!

JohnP JohnP, 3 years ago

That workflow is really bad. You should be using your original InDesign (or Photoshop file) to mock it up as a reference, then build the html from hand to match. If you want to use subsets of your ID/PS design (like a header) you can separate that into an image file and reference that from the html later.

Personally, I don't even mock up my email designs. I visualize the email layout and go straight to hand coding the html - it is far quicker. This might not be ideal if you have fussy 3rd parties though, as changes to your design can take longer.

Either way, there is absolutely no benefit trying to convert it into a pdf, jpg, ps file or processed/converted html. You need to code your emails by hand as early in the process as possible and should never ever slice an entire email - it is really bad practice.

This is because image based emails do not display important information by default in most clients. They also take a long time to load and are considered spammy by some client/filters, as your ratio of text to images is too low.

In regards to Adobe - There are no major features upgrading to CS6/CC would offer you specifically for html email design. Honestly, you should be spending 90% of your time in a code/text editor. Use that money on email testing instead.

Hope that helps...

EmailGrasshoppa, 3 years ago

Mailrox image quality isnt great - I would output the slices as "html and images" from photoshop and add the appropriate "display:block" style to the sliced images, and upload the images to a host manually.

emails that are just images are more susceptible to spam blocking. Ensure to use ALT text is used, and if possible a multipart MIM text only version. As well name your images short names like "email.jpg" instead of "3298789-eblast-79FNL"

Also anything with a vertical slice thats more that 600px wide will probably get resized in the gmail app for android and iphone.

200,000 companies around the world can't be wrong.

From Australia to Zimbabwe, and everywhere in between, companies count on 
Campaign Monitor for email campaigns that drive real business results.

Get started for free