离线下载
PDF版 ePub版

Andy矢倉 · 更新于 2018-11-14 16:00:37

填充、轮廓

这个节点,本教程为你准备了必须的素材文件。打开之后应该长这样:

这套包含了单个示例和矢量图标的素材方便你随时查阅,这些素材都是在教程前后使用的。

Tab Bar的图标颜色变化是基于选中状态,但是一些图标有太多的空间,所以颜色变化太微妙。在这种情况下,苹果的人机界面指南推荐使用单独填充版本作为selectedImageRWDevCon应用的样本都有各自的Tab Bar独立版本。

在刚才下载的素描文件里,有一个被称为日历入门的画板,日历图标其中包含几个几何图形合并的而来的图标。就是一些简单的几何图形拼凑而已,前面已经很好的演示过来。 下面我们来创建日历图标:

  • 1.打开刚才的Sketch文件,在左侧图层列表展开日历入门 - Calendar Starter画板。
  • 2.选中日历主体 - Calendar Body部分和分割线 - Separator部分。
  • 3.使用相差 - Subtract功能。
  • 4.按住Shift再选中Right Hole图层,还是使用相差 - Subtract功能。
  • 5.同理,再把Left Hole图层也重复上述步骤。
  • 6.接着按住Shift再选中Right Ring图层使用融合 - Union功能。
  • 7.同理,Left Ring图层也这么照做。

通过相差和融合操作,现在的日历入门的画板上就只剩一个包含了刚才所有图层的单图层了,一切都看着泛绿。如果按照上述步骤操作之后和效果图有什么出入,可以参照画板下方的实例对照。 现在,来搞一个填充的图标。是时候重新调整一下,让其看起来像示例版本了。

  • 1.在画布上找到日历填充 - Calendar Fill
  • 2.在图层列表里展开日历填充 - Calendar Fill
  • 3.再展开日历主体 - Calendar Body图层,并选择分割线 - Separator图层。
  • 4.把分割线 - Separator图层高度设置为35即可。

调整分割线高度的时候,Sketch不会有明确的高度指示,所以你可以选择直接输入数值。

上一篇: 相差 下一篇: 制作头像