sketch做一个背景中空的图片--人脸识别那个遮罩

2020-08-17 18:05:43 浏览数 (1)

最近接到一个需求,需要模拟微信小程序人脸识别的页面,然后里面需要用到一张背景是黑色,人头透明框的遮罩层,又没有设计会给我做,因此只有自己使用sketch来做了。

吐个槽,因为非设计专业出生,然后加上sketch这类的教程着实太少,所以,折腾了我3个多小时才算搞出来。效果图如图所示:

那么,要实现这个人头部分被扣走的效果,是需要分为2个部分的。

1、绘制一个矩形,这里我给得尺寸是375*667,iPhone8 的尺寸,背景设置为4A4A4A

2、绘制人头那个不规则的形状。

这是第一步完成的效果。

紧接着,这个是第二步完成的效果

有人会问,路径是怎么绘制的。我这绘制的步骤是:

1、置入->形状->椭圆形 ,因为人的头的轮廓近似与一个椭圆。

2、在进行,图层->轮廓化处理,这样就转化为了可以编辑的路径了。

紧接着,在上面加上一些点;

进行断开连接式的方式来拉那些需要拉动的点,就可以拉出耳朵轮廓了,不过确实挺折腾的,手没有设计同学灵活。


前方高能注意,最重要的一步在这里了,进行合并操作。

选中2个图层,点击差集操作,神奇的事情发生了,矩形被扣掉了一块,恰好是我们绘制的按个人头轮廓的封闭区间。

当然,最后一步是导出操作了,很多人也是会栽倒在这个步骤,导出的图片没有透明了,这里我想说的是,按照我说的来,绝对保证你有透明。

到了这里别慌忙导出,注意到那个小刀的按钮么,点一下,然后在导出,这时候就一定有透明了。

可以看到,点了小刀之后,修剪透明像素是没有勾选的,因此,透明信息被保存下来了。

0 人点赞