Creating Email Stationary from a PSD

Alex Dahlman

Hey everyone.  I was wondering if there was a better way to create a stationary and email message from a psd file.  I get with simple images its not difficult with slicing, but the psd comes with complex images of an envelope and a an area where they want the text to go (looks like a piece of paper is sliding up out of the envelope.  I can attach the PSD if needed.  


Let me know what you think the best way to go about this.


What I've tried so far:

I sliced the whole psd into a single png image and with css I aligned the text with absolute. However, the styling is not coming across correctly in blackbaud. The margins are messed up and the top and left css options are being ignored once they hit an email application like outlook.


Thank you.

Romany Nassief

In general developing HTML email templates is completly different than developing web pages. There are many compatiblity variants across several email clients that you have to be care of when using any HTML/CSS tags for emails. For example: Outlook, Yahoo and Gmail doesn't recognize "position", "top", "left", etc css properties.


While developing email templates, refer to this guide for supported CSS across most popular mobile, web and desktop email clients.


For you issue regarding creating a hero banner with overlay text, check this discussion for a similar case. Hope it will help. In addition, check this online tool for creating background images with fallback solid color. You may also like this tool for creating call to action buttons.

Erik Leaver

Alex Dahlman:

Hey everyone.  I was wondering if there was a better way to create a stationary and email message from a psd file.  I get with simple images its not difficult with slicing, but the psd comes with complex images of an envelope and a an area where they want the text to go (looks like a piece of paper is sliding up out of the envelope.  I can attach the PSD if needed.  


Let me know what you think the best way to go about this.


What I've tried so far:

I sliced the whole psd into a single png image and with css I aligned the text with absolute. However, the styling is not coming across correctly in blackbaud. The margins are messed up and the top and left css options are being ignored once they hit an email application like outlook.


Thank you.

Essentially coding email is like coding for 1999. You need to use lots of tables and code you would never use on the web these day. 


Great resources from Romany -- highly endorse them all, I'd also suggest http://www.emailology.org. They have a great bolier plate template and standards guide. Another place you can get started is with Zurb's Foundation for Email: http://foundation.zurb.com/emails.html  


When you get your sleeves rolled up, share the code here. I'd be interested to see what you come up with!

Jeremy Reynolds

Erik Leaver:

Alex Dahlman:

Hey everyone.  I was wondering if there was a better way to create a stationary and email message from a psd file.  I get with simple images its not difficult with slicing, but the psd comes with complex images of an envelope and a an area where they want the text to go (looks like a piece of paper is sliding up out of the envelope.  I can attach the PSD if needed.  


Let me know what you think the best way to go about this.


What I've tried so far:

I sliced the whole psd into a single png image and with css I aligned the text with absolute. However, the styling is not coming across correctly in blackbaud. The margins are messed up and the top and left css options are being ignored once they hit an email application like outlook.


Thank you.

Essentially coding email is like coding for 1999. You need to use lots of tables and code you would never use on the web these day. 


Great resources from Romany -- highly endorse them all, I'd also suggest http://www.emailology.org. They have a great bolier plate template and standards guide. Another place you can get started is with Zurb's Foundation for Email: http://foundation.zurb.com/emails.html  


When you get your sleeves rolled up, share the code here. I'd be interested to see what you come up with!

 

Seconded on ZURB for email. If you're not scared of command line, they've got phenominal tools for templating, simplifying code, styling the page (using SASS), and uglifying your code to work around rendering bugs on older email clients.