这是Sketch蒙版(Mask)+渐变综合运用的教程,利用其中的Alpha Mask(透明蒙版),通过改变Alpha Mask的透明度渐变来实现头像发光的效果。

1.效果图及原理说明
我们先来看看最终实现的效果图,分析一下实现的原理。首先,原始素材是一张方形的头像,我们要将它变为圆形,则需要用到Sketch Mask的功能;然后,要在头像中实现透明度渐变,则需要将蒙版设置为Alpha Mask(透明蒙版)模式;最后,要实现发光效果(透明度渐变),则需要用到Sketch线性渐变的功能。具体的操作步骤见下文讲解。
关于Mask的介绍和使用,可参考早前的文章《Sketch基础教程:蒙版(Mask)的使用详解》。

2.制作Alpha Mask圆形头像
首先,把需要处理的方形头像导入/复制到Sketch中,并且使用圆形工具(Oval,快捷键O)绘制一个和头像同样大小的圆形。

然后,把圆形叠加在头像上,并选中两者,右键呼出菜单,并选择“Mask”。

最后,选中蒙版,依次选择“Layer”→“Mask”→“Mask Mode”→“Alpha Mask”,将其设置为透明蒙版,为下一步做准备。

3.处理透明度渐变
只有将蒙版的类型设置为Alpha Mask,渐变才会对蒙版起作用,将其设置为Alpha Mask后,点击Fill,并选择线性渐变,自由调整渐变条的角度,选择渐变点,并调节渐变点的透明度即可。值得注意的是,蒙版只会受到透明度渐变的影响,跟选取哪一种颜色无关。

更多蒙版(Mask)+渐变系列文章
个人精品文章(过万阅读,700+赞)
网友评论