SKETCH手把手教你绘制抢眼有力的长邮件

  前言

  如果你曾经参加过每周邮报的设计工作的话,你就会知道毫无疑问这是营销策略中的关键一环,它们能够帮助我们和潜在的用户建立直接联系。但是,我们必须格外注意如何设计它们,以使得能够吸引收件人的眼球,最重要的是达成我们的营销目的。

  这里是这个设计练习的背景:想象我们是一家提供在线课程学习的公司,我们想要与我们的潜在用户取得联系,向他们展示我们的平台能带来的好处。在这种情况下,我们可以使用Sketch设计一个简洁的但有效的邮报来达到我们的目标。

  我们将使用到Sketch中最常用的几个功能来创建我们的视觉稿,你将会惊讶于这是如此的简单!

  最终效果:

  做好准备

  为了顺利完成这篇教程,你需要下载这些附件。在这个压缩文件中,你可以找到我们在后续步骤中将会使用到的一些文本和图像。

  我将会使用Helvetica Neue字体作为默认字体,但是如果你没有这种字体的话,尝试使用Helvetica或者是Arial作为代替。

  注意:要做一名负责任的设计师!我的意思是:记得使用描述性的文字重命名图层并将它们编组来组织内容,你的同事会感谢你的,相信我。

  好了吗?我们开始吧!

  设置绘图板

  第1步

  让我们从创建新的绘图板开始。在菜单中选择插入——绘图板或者在工具栏中选择。现在在Sketch的画布上拖动绘制一个620*3000px的绘图板。如果你觉得这很难,记得你可以使用屏幕右侧的观察器面板来调整参数。你同样可以在左侧的图层列表中改变绘图板的名字。

  提示:设计邮报时通用的宽度是500-600px。

  第2步

  现在我们来添加一些参考线以便为我们正确地放置元素来提供参考依据,以达到平衡和稳定的设计效果。我们应该讲参考线放在什么位置呢?

  邮报可以有很多种设计方式,最简单的一种就是使用一栏式布局,由一个接一个的方块形成垂直式文档流,这种布局方式能够允许我们用一种简便的方式引导用户。而且,一栏式的布局结构也更加利于我们为不同的屏幕做适配。

  但是,为了达到教学的目的,我们将要做得多一点,我们将采用三栏式布局。

  激活标尺并且开始创建参考线。选择视图——标尺,现在在水平标尺上的30px、200px、225px、395px、420px还有590px处单击,你可以点击并拖动标尺来移动它的位置。,你同样可以对参考线这么做。要删除参考线,点击参考线并拖动它们到标尺的后方。

  设计标题栏

  我们邮件的标题是十分重要的。它是我们与用户的第一接触因此我们应在此直接说明我们的定位。还有一种很好的设计就是展示公司的名字并且在CTA按钮后面加上一条标语来鼓励用户注册或者获取关于更多有关于我们的信息。

  首先我们增加一条前标题(preheader),一条简单的文本提醒我们的用户来给予这封邮件适当的权限以防邮件的内容无法正确的显示。

  第1步

  选择文本工具并且在绘图板上单击以加入一条文本,注意观察器面板已经显示了当前文本的属性,,输入“Problems viewing this email? View it online”。

  将它的颜色调整为#8FA6B3,并将大小调整为11px,现在我们选择“View it online”部分并将它的颜色调整为#FF736D,保持它的选择状态并点击颜色旁边的选项按钮,将它的装饰选项选中下划线。

  将文本移动到离上方边缘30px处。

  第2步

  使用矩形工具创建一个620*500px的矩形并且将它放置在文本图层的下方,下边缘距离文本30px,在观察器面板中将它的颜色修改为#F5F7F8,取消边缘选项的勾选来移除它。

  第3步

  打开这篇教程附带的icons svg文件。选中这些图标并将它们复制粘贴到我们的文件当中,我们将要用它来装饰我们标题的背景。

  我将这些icon放在了 X= -50 和 Y = 0的位置(注意看观察器面板中的选项),但是你可以按你喜欢的方式放置。

  提示:你可以看到我们的icon的有些部分超出了绘图板的范围因而Sketch将它们自动隐藏了,不奇怪,程序知道你正在使用绘图板来限定你的设计区域所以它隐藏了超出了绘图板的部分。试着将所有的icon移到绘图板之外,你会发现整个就显示出来了不是吗?不要忘记再把它放回去哦。

  第4步

  在图层列表中我们选中icon图层和你先前创建的矩形,用工具栏中的按钮将它们合并为一个组。将这个组移动到图层列表的最底部并将它命名为“背景”或类似的什么,然后使用左边的小箭头将图层内容隐藏起来。

  选择那个矩形然后选择图层——作为遮罩层使用,快看!Sketch会使用这个矩形遮盖住所有在图层列表中位于其上的图层,如果我们先前将我们需要被遮盖的元素和遮盖的图层进行编组,我们就不会影响到编组外的图层了,非常有用的小技巧!

  现在你应该有了如下图形式被遮盖的icon了:

  第5步

生命太过短暂,今天放弃了明天不一定能得到

SKETCH手把手教你绘制抢眼有力的长邮件

相关文章:

你感兴趣的文章:

标签云: