Create Mail stationery - Mac OS X
Tutorial to create custom stationery in Mail 3. Showing you how-to create a template with same functionallity as the stationerys shipped in Mail.app
Follow me on Twitter @martify 
How to Create a Custom stationery.
You'll just need some basic html knowledge to understand this tutorial.
Click here to see image of new stationery or Download project files.
1. Copy a Mail.app stationery
Create a new stationery changing an existing one from the Mail.app.
Let's base stationery on Air Mail.
New stationery based on Air Mail.
1.1 Go to the folder with the Air Mail stationery:
/Library/Application Support/Apple/Mail/Stationery/Apple/Contents\
/Resources/Photos/Contents/Resources/
2. Structure of Stationery package
2.1 OPEN the stationery package by right-clicking on it and pressing Show Package Contents.
2.2 CLEAN UP FOLDER
Remove all language folders not needed to get an easier overview. If your Mail.app use English as default language, you can safely remove all folders ending with *.lproj, except English.lrpoj
All folders ending with .lproj removed, expect English.lproj
2.3 FILESTRUCTURE
These are the files we will be working with in Step 3.
content.html - html layout.
Description.plist - XML with required properties.
/English.lproj/DisplayName.strings - textfile containing title.
placeholder*.jpg - default pictures shown in e-mails.
3. EDIT DisplayName.strings
DisplayName.strings contains the name of the Stationery.
3.1 Open DisplayName.strings in a texteditor. I'll use Textmate.
DisplayName.strings opened in a texteditor.
3.2 Change value to Special Mail:
"Display Name" = "Special Mail";
4. Layout of content.html
4.1 ADD/EDIT/REMOVE IMAGES used by content.html
Before we code content.html, let's make a note which images we use in the html. You'll need to list these images in Description.plist (last step).
For the simplicity of this example I'll mostly remove pictures from the old Air Mail layout.
Changed images:
banner.jpg - did a cleaner layout.
placeholder*.jpg - new default photos.
Added images:
bibblan_foot.jpg - new footer.
bibblan_head_martin_jansson.jpg - new header.
Removed images:
bg_pattern.jpg, bottom.jpg, lbg.jpg, letter_bg.jpg, rbg.jpg, tbg.jpg - not used in new content.html layout.
4.2 HTML-CODE of content.html
Play around and remember to keep html code simple. E-mail clients can't read html/css as good as a real web-browser.
Put all your CSS inside <body></body>, if you put CSS between <head></head> it can be removed by e-mail clients.
# content.html
<title>Special Mail</title>
<head>
<body style="background-color:#ffffff;margin:40px 0 40px 0;padding:0">
<div>
<table id="main-table" width="600" cellpadding="0" cellspacing="0" align="center">
<tr>
<td id="tbg" colspan="3"><a href="http://www.bibblan.com/teamplay/martin-jansson"><img src="bibblan_head_martin_jansson.jpg" width="600" height="153" border="0" alt="Bibblan Film & Design - Martin Jansson"></a></td>
</tr>
<tr> . . .
Starting to change content.html for a unqiue layout.
Download example project to see all code changes in content.html.
4.3 AppleCompositeImage of content.html
To drag-and-drop images in your stationery use AppleCompositeImage. Place this code in content.html where you want to use it.
<img src="Photos" width="677" height="220 class="AppleCompositeImage" style="display:block">
AppleCompositeImage in bottom of content.html.
If you want to create your own image sizes/rotations in AppleCompositeImage, look in Description.plist plus edit the mask*.png.
4.4 Save content.html when you are satisfied with the look and go on to the last step, Edit Description.plist.
5. EDIT Description.plist
The last step is to change XML values.
5.1 OPEN Description.plist in a texteditor.
Description.plist consist of keys with different values:
5.2 Change values in these keys:
<key>Background Images</key> - Remove all values, no use of background images.
<key>Folder Name</key> - Change to Special Mail.mailstationery
<key>Images</key> - Remove some values and add bibblan_*.jpg to list.
<key>Staionery ID</key> - Add a new unique ID.
I think all keys above, except Stationery ID, are self-explanator. Just change to the images you are using and Folder Name should be Special Mail.mailstationery.
5.3 KEY Stationery ID
To generate a unique ID for this stationery we'll use uuidgen.
5.3.1 Open Terminal
Application/Utilites/Terminal
5.3.2 Write uuidgen in the terminal and a unique ID will be generated.
5.3.3 Change the old Stationery Id in Description.plist to the new one you just created.
# Description.plist
# . . . line 76
<key>Folder Name</key>
<string>Special Mail.stationery</string>
<key>HTML File</key>
<string>content.html</string>
<key>Images</key>
<array>
<string>bibblan_head_martin_jansson.jpg</string>
<string>bibblan_foot.jpg</string>
</array>
<key>Stationery ID</key>
<string>F0D56DF8-3282-497A-8CC8-51B09D998B2F</string>
# . . .
Keys with new values. Stationery ID key with new unique value.
Download example project to see all code changes in Description.plist.
6. Finished
Put the Special Mail.stationery file located on your Desktop in Mail.apps stationery folder and start sending e-mails with beauty:
/Library/Application Support/Apple/Mail/Stationery/Apple/Contents\
/Resources/Photos/Contents/Resources/
Click here to see final version of new stationery.
Download - example project!
Thank you for reading!
Follow me on Twitter @martify
I twitter about tech, apple, media, advertising
