0 Comments

SKETCH初级教程!手把手教你绘制抢眼有力的长邮

发布于:2015-03-09  |   作者:广州网站建设  |   已聚集:人围观

设计“我们是谁”方格

现在我们已经吸引了用户的注意力,我们需要更多地讨论下我们自己和我们的服务了。我们是谁?我们是做什么的?我们需要用一种直接和简明的方式来回答这些问题,试着展示我们的服务的优点。
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设

第1步

创建两个新的文本图层,将它们的宽度调整为480px,你可以输入你喜欢的随便什么东西,但是我是用了你将会在附件中找到的文本。

完成了,现在来调整它们的位置和属性。

13-sketch-newsletter-paragraph

第2步

绘制一条100px长的线条并且将宽度设置为2px,描边颜色设置为#E24A4A,将它放置在两段文本之间,和两者各隔开25px的距离。记住:如果你在移动元素的时候按住Alt键你就会看到元素之间以像素表示的距离大小。

14-sketch-newsletter-paragraph

第3步

选中这条线和文本图层然后将它们编组,记得组织你的图层并将它换一个名字,我用了“first-block”。

15-sketch-newsletter-grouping

选择“Search for online…”这个文本图层,在观察器面板中点击“创建一种新的文字样式”。对第二段文字也采取相同的操作。现在,所有采取这个样式的文字都会随着你修改某一段文字的样式而跟着改变。

16-sketch-newsletter-styles

注意:记住Sketch并不能保存在一个图层内有不同参数的文字样式。

第4步

打开highlights-icons svg文件,复制这三个icon然后将它粘贴到你的文件中来,使用你已经绘制的参考线来对齐它们,如果你使用三列布局的话。不要将它们放的太过于贴近上面的方格,将它们之间隔开大约40px,如果你需要帮助,请看下面的图片:

17-sketch-newsletter-benefits

第5步

创建三个170排序宽的文本图层,然后使用 Helvetica Neue Bold字体,大小 = 15、行高 = 18、颜色 = #424242并且对齐 = 居中。将它们放置在离icon 30px的位置,然后输入下面这些文字!
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设

18-sketch-newsletter-benefits

又一个方格完成了!

设计“新课程”方格

邮报的一个通常的功能就是发送最新的文章或者读者会感兴趣的内容。所以在我们的呼告内容和自我介绍内容之后,让我们创建一个方格来展示我们最新的一些教学课程吧!

第1步

复制你已经制作完的“first-block”组,并将它放置在前一个方格的下方,中间隔开40px,然后修改这段文本,现在应该像下面这样:

19-sketch-newsletter-second-block

第2步

选择素材文件中的lessons文件夹然后通过插入——图片将它们导入到当前的文档当中,现在你有了7个图片,620px宽。我们将一个保留为原来的尺寸,讲别的都缩小以适配我们的三列式布局。

20-sketch-newsletter-adding-images

第3步

让我们来为这个图片添加一些文字。插入三个文字图层,复制如下的文本,然后将它们的属性如下设置:

21-sketch-newsletter-adding-texts

第4步

我们需要更多一些文本图层来展示我们剩下的其他课程。让我们在做一遍:插入三个心文本图层,输入随便什么或者是从夫附件中粘贴过来。将它们的属性和位置按照下图中所示进行设置,然后在进行五遍类似的操作完成剩下的5个。

22-sketch-newsletter-adding-texts

另外一个方格完成了,现在花点时间来组织你的图层面板,然后前进到下一步!

23-sketch-newsletter-lessons

再来一遍

我知道这个邮件很……长,但是这没有关系!用户们知道向下滚动,所以在下方在此添加一次我们的诉求目的会是一个好的主意,他们不必再滚回页面顶部。

你还记得你复制过的“first-block”吗?再复制一遍,将它移动到课程方格的底部,隔开40px然后将它的内容修改为如下所示:
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设

24-sketch-newsletter-subscribe

第2步

插入一个620x243px的矩形然后用#F5F7F8的颜色填充。现在增加一个新文本图层并将它的内容和属性修改为如下图所示的样子:

25-sketch-newsletter-cta

第3步

选择插入——符号来插入我们先前设计的用户呼告按钮,将它放置在前一段文本的底部。

26-sketch-newsletter-cta

我们就要完成啦!

设计页脚

好的,现在我们已经完成了我们几个主要的方格和一个呼告按钮了,接下来,我们要增加一些次要信息并且更多地一些内容。接着,我们会在此谈论我们的诉求,重复呼告。现在是时候完成页脚设计并结束我们的教程了!

第1步

创建一个620*130px的矩形,将它用#555E68颜色填充并放置在用户呼告按钮的下方,接下来,创建一个620x45px的矩形并以#383E44颜色填充,你做完的效果应当如下图所示:

27-sketch-newsletter-footer

第2步

插入logo-white文件并且将它移动到X = 265,Y = 2787的位置。

28-sketch-newsletter-logo

第3步

让我们加入最后的文本吧,然后采取如下图所示的设置:
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设

29-sketch-newsletter-footer-texts

这不是不必要的,但是你可以调整绘图板的高度来截取你真正能够读到的部分。你可以在图层面板中选中它并且在观察器面板中调整它的高度,我将他改为了2937px。

这是我们产品的最终效果!

23-sketch-newsletter-lessons
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设
标签:
飞机