在本教程中，我会引导你设计一个干净的节日主题的电子邮件模板过程。我们将从头开始，在Adobe Photoshop里布局。我们将使用一些基本的和中级的技术来开始此设计。让我们开始吧!
第1步
创建Photoshop文件(文件>新建…)如下图所示设置。
第2步
设置参考线，我们将在620px宽的安全区域内设计。
注：分别设置垂直参考线为：40PX，80px，340px，600px和640px。
提示：您还可以使用Photoshop插件里的GuideGuide设置参考线。
第3步
养成一个归类的好习惯，有助于减轻在使用过程中查找文件的困扰。我们分别创建名为“Header”，“Message”，“Best”和“Quote”。创建组，图层>新建>组...
快速创建组只需点击如下图里底部的文件夹图标。
准备背景
不应该让你的背景太花哨或太分散注意力，因为在小屏幕上，许多电子邮件用户不会看它。另外值得一提的是，背景不应该是一个图片，因为在默认的情况下，许多电子邮件客户端会阻止。
第1步
我们先来设置电子邮件的背景。设置前景色为葱白色#f6f9fb并按下Alt+ Backspace键来填充“背景”图层。也可以使用其他任何你喜欢的浅色设置背景，但最好是微妙的浅色，因为他不会分散收件人的注意力。当然不同的颜色会带给用户不同的心情。
第2步
设置安全区域，所有的邮件内容被放在一个背景上。选择矩形工具(U)，绘制600px宽的白色#FFFFFF矩形。
设计头部
邮件的头部很重要，邮件的收件人将决定他们的时间是否值得进一步阅读。妮可·梅林是位很牛的邮件专家，她认为邮件的头部清晰透明很重要。
“邮件的头部很重要，如果设计得不好会被拒收。”
在本教程中，我会把公司名称加上链接，以防在浏览器中打开的邮件不能正常加载。加之，包括大图，以及简单的心情文字，以展示该邮件节日快乐的意图。
第3步
打开“Header”组，选择横排文字工具(T)。写好公司名称，为啥不用公司的标志呢?如我之前提到的，当你的邮件被打开时，损坏的图像或被禁用的标志不可见会使体验的感觉很差。
挑选适合你公司品牌标题的字体，将其放在左侧顶部并在其周围有一定的留白。在这里，我使用18像素的Open Sans (Bold)字体，颜色为：暗灰色#434343。
第4步
这步很重要，在顶部的右边文字提供可点击的链接，以防它在浏览器中打开邮箱没有提供很好的邮件客户端(仅仅是一行简单的文字链接就能做好的工作)。同样我也使用了 Open Sans (Semibold)字体，颜色为：亮灰色#666666，字体为13px。最后，将其放置在邮件的右上角。
第5步
真棒的开始!继续，现在我们需要放置图像以引起收件人的注意。我们将使用一个圣诞主题照片，并添加渐变效果。
使用矩形工具(U)绘制600x300px的矩形。然后在它的上面新建一个图层，并使用渐变工具(G)，拖动鼠标从左上角到右下角，拉一个由红色变为绿色的渐变。
按住alt键，放在它与下面的图层间时，会出现一个向下的剪头，就会将其置入绘制的600*300px的矩形盒子，如下图。
第6步
下载树上有串灯的照片后，按住alt键将其放置在渐变图层上。打开CMD+ T调整照片。
提示：按住Shift键来绘制/调整图像比例时，图像会等比例变化。
第7步
将“树上有串灯的照片”设置图层混合模式为“叠加”。
第8步
写主要信息。使用大胆而又不失优雅的Playfair Display (Bold Italic)字体， 52px大小的白色(#FFFFFF)加粗文字，使其有了节日的感觉。设计节日的邮件一定要保持信息简短明确。
四. 信息区域设计
应该记住的另一件事是设计的可重复使用块。例如，我们将设计出一个模板，以便用户可以更改标题，主副本，还需要一个呼吁行动的按钮。此外，还可以重复这个块，并使用不同的消息。
第9步
这是很聪明的设计在邮件里的一列，可以很容易地制作成响应布局。打开“Message”组，选择横排文字工具(T)。设置字体为32PX，粗黑体。
第10步
现在是时候去做一个更详细，不要太长，尽量抓住读者的注意力，引领读者点击操作的按钮。使用相同的横排文字工具(T)，写下你的副本，颜色设为#666666，字体为Open Sans (Regular) 18px。
第11步
现在放一个呼吁行动的按钮，使您的邮件非常有用。创建一个名为“CTA”的新组，使用矩形工具(U)，选取前景色为红色#de1816，绘制一个矩形形状为240x40px。然后选择横排文字工具(T)，输入按钮的信息：白色#FFFFFF，Open Sans (Bold)字体，字号为14px。
这时，需要绘制一个分隔线;颜色为浅灰色#eeeeee，用直线工具(U)设置高为1px绘制水平线，如下图。
提示：按住Shift键可画出笔直的线条。
设计“最佳”区
电子邮件摘要的简讯中最常见的是读者可能已经错过了有兴趣的最新文章。在设计时你需要记住，这是一个动态元素，需要有模块记录邮件更换信息。
第12步
通过按CMD+ J(重复)将其拖动到“Best”组，重复以前使用的消息标题层。方便改标题，并把它放1像素的线下面，同时要保持垂直居中的节奏。
第13步
现在，我们将列出今年最好的一些文章。在本教程中，我会使用这个网站 Tuts+ Web Design的图片，标题和描述。
创建一个名为“Article”的新组。使用矩形工具(U)，并按住Shift键，绘制一个140x140px的正方形。然后选择一个标题图并将其拖动到Photoshop窗口，创建剪贴蒙版，调整图像大小。
第14步
现在，需要输入文章标题和简短的说明，以便读者可点击。通过复制和改变字体大小，重复“Message”组的描述层。
第15步
尽量减少“Article”组，CMD+ J复制两次。依次将这些重复的组放到下面，这将方便更改文章的图片，标题和描述。
第16步
最后，选择它们并使用CMD+ J，将这些层放入“Best”组，要有足够的留白。
设计鼓舞人心的引用文字和页脚
即将接近结尾。在页面末端，放置一段鼓舞人心的引用文字，其次放tweet按钮，放一段鼓舞人心的引用文字，目的是激发读者。
第17步
打开“Quote”组，使用横排文字工具(T)，用优雅的字体，写一段鼓舞人心的引用文字。在这个例子中，我使用Playfair Display (Italic)字体，24px的字号及字色为灰色#666666。
第18步
到 Twitter website网站复制tweet按钮。可使用快捷键SHIFT + CTRL+ CMD+4截图，如下图所示。
第19步
最后一件事。写邮件信息提供退订选项。并使用链接，以及添加内容背景。
恭喜完成!
邮件的布局设计完成，删除不需要的层，并把它交给程序员。这就是整个设计过程的基本方法，希望你学到了一些东西。
