Sketch图形在属性栏的常用操作
画出一个图形后,需要在右侧的属性栏中设置相关参数,才能完成最佳效果。
以矩形为例来依次说下属性栏中的各个功能的含义以及使用方法吧~
对齐
当有多个形状被框选时,对齐工具被唤醒,可以实现水平/垂直分布,与靠左右上下/居中对齐。

调整间距:可以选中间距属性框,来调整形状之间的水平/垂直间距。

小技巧:选中某个属性出现蓝色框,将鼠标放在边框右侧,出现左右箭头,即可左右拖动鼠标快速预览调整的效果哦!如果参数框下有文字,鼠标放文字上左右拖动即可。
位置/尺寸/角度

X:横坐标位置;
Y:纵坐标位置;
W:形状的宽度;
H:形状的高度;
° :形状的旋转角度;
镜像:左右翻转/上下翻转;
圆角:调整圆角的大小;(代替圆角矩形)
填充
画一个形状时,会默认有一个填充色,也可以点击填充面板右侧的加号来增加多个填充色,且多层填充色会共同发挥作用,比如下层是红色,上层是黑色半透明,就会产生暗红色的效果。

那如果想删除多余填充层如何操作呢?
只需要将不要的填充层对勾去掉,然后点击“删除”图标即可。

填充不止有纯色,还可以有三种渐变填充和图像填充。

另外,填充和边框的下面都会有个“通用”,存放可以快速选择的常用颜色。还可以在列表中增加自己认为的常用色,只需要点击“加号”就可以将颜色加进列表了,之后不想要这个颜色了,可以通过右键删除。

边框
形状的边框层也可以设置多个,方法同填充不再赘述。
说下不同的点:
边框在形状的位置:内部/居中/外部,如下图效果。
还有就是边框的四个角的形状,内部边框只能使用直角,而外部和居中边框可以使用直角/圆角/平角。

另外边框不止是实线,还可以是虚线,可以通过虚线和间隔进行调整。
阴影
点击加号增加一层阴影即图片的外部阴影。可以通过X/Y调整阴影方向,通过模糊调整边缘实/虚,通过扩展调整大小。

左图为一层阴影的效果,右图是两层阴影的效果,相同数值一个正一个负能达到外发光的效果。
内阴影
点击加号增加一层内阴影。与阴影不同,内阴影的显示位置是在形状的内部。设置方法与阴影类似不再赘述。

左图为一层内阴影的效果,右图是两层内阴影的效果,相同数值一个正一个负能达到内发光的效果。
模糊
点击加号增加一种模糊,分别是高斯模糊、动感模糊、缩放模糊、背景模糊,效果如下:

需要说明的是,背景模糊需要配合背景使用,比如有一个皮卡丘图片,然后在上面覆盖一层矩形,设置矩形的模糊值,就能实现毛玻璃的效果。模糊图层的填充色一定要是不透明的哦!
【圆角矩形】与【圆形】的设置方法与矩形大体一致。
其他形状的设置(未提到功能与矩形的设置方法一致)
【直线】
直线的端点有三种:从左到右锚点内直角、锚点外圆角,锚点外直角。如下图从上到下:

另外起点和终点还可以设置不同的形状,以及虚线设置。

【箭头】
箭头的设置与直线类似,不再赘述。
【三角形】
可以随意拖出一个三角形,也可以按住shift拖出一个顶角为60°的等腰三角形。

【多边形】
按住shift可以拖出一个正五角星,通过调整半径和锚点数量,可以改变星形的形状。

将星形的锚点设置为3时,可以得到一个等边三角形。

【多边形】
按住shift可以拖出一个正五边形,可以通过侧边调节杆调整侧边数量,最低边数是4时为正方形,最大可以是10边形。
