越来越多的人开始用Sketch进行UI设计,Sketch作为一款非常容易上手的软件,很多人完全可以依靠自学便能熟练掌握这款软件,但是大部分人都只是掌握Sketch的基本实用方法,对于一些实用的小技巧,了解的并不是特别多。
从今天开始,我将向大家介绍Sketch的一系列实用小技巧,这些小技巧能帮助大家更好的使用Sketch,提升工作效率。
这是该系列教程的第二篇——灵活运用描边属性。
本教程的第一篇:http://www.jianshu.com/p/109aac030ded
在进行UI设计时,经常会遇到需要设计圆形进度条的情况,特别是给数据类APP或者Apple Watch进行设计时。一般情况下,我们可以使用布尔运算或者钢笔工具绘制出来,但是通过灵活运用描边属性也同样可以绘制出相同的形状,如�下图所示,可以看到圆弧本质上是一个描边。
具体的绘制方法如下:
1
使用快捷键R创建一个尺寸为800×800的正方形,然后去掉描边,并将填充色设置为#000000,作为背景,如下图所示。
2
使用快捷键O并按住shift键绘制一个400×400的圆,去掉填充,然后将描边宽度设置为30px,并将描边颜色设置为#D18F09,不透明度设置为20%,接着将该圆形图层完全居中于背景,如图所示。
3
选中该圆形图层,使用快捷键command+D进行复制,确保复制的图层和原图层完全重叠,且在原图层的上方,然后将新复制图层的不透明度调整为100%,如图所示。
4
此步非常关键!单击Borders右侧的齿轮图标,在出现的设置窗口中,将描边结束和间断点的形状设置为如下图所示的参数,然后在第1个输入框填写数字1,第2个输入框填写数字1256,1256是通过3.14×400得出。可以看到描边变成一个圆点。在第2个输入框的数字代表描边点的间隔,这个数字取决于圆的大小,若此处圆形图层的尺寸为500×500px,则应输入为3.14×500,这个数值应大于等于这个圆圈的周长。
5
为了让弧形的增长是顺时针方向,选中设置好的图层后,单击检查器Transform中Flip处的水平翻转按钮,将该图层水平翻转,如图所示。
6
再次打开描边设置,选中第1个输入框Dash后按住shift键,并按下键盘的上箭头,可以看到数值以10的倍数增加,这里数字的增加也同时让弧形增加,等长度合适后停止。当然也可以直接输入数值,这里的数值可以理解为整个圆圈周长的一部分,如图所示。
7
到此已经完成设计,若要添加渐变效果,单击描边填充设置为渐变即可,如图所示。
这是对描边属性灵活运用的一个例子,我们在日常设计中,一定要善于对形状进行分析重组,即使面对教程,也一定要明白,要设计出某一形状的方法一定不止一种。
对于上面第4步,输入框中大家有看到我直接进行的乘法运算,Sketch的输入框可以直接进行简单的四则运算,关于这部分的知识,我会在后续的文章中提到,敬请关注。