alpha融合---PS制作带连续alpha值的png图片

最近做个项目,大致类似激萌(FaceU)那样给人头上加有趣的卡通头饰,这时候我们需要做一个头饰模板供后续程序调用。当然这个模板可以由专业设计人员设计好,但是我们没有这个条件,那么可以用激萌生成好的图片,把这个模板抠出来供我们自己的程序调用。下面介绍我们程序的核心算法

alpha融合

融合的方式有很多种,最粗暴的就是直接把前景直接覆盖到背景上面,但是这样就会像是浮在上面,很假很假。我们应该做成像透明贴纸那样以无缝“贴”在上面,所以选择以一定比例将前背景融合在一起,即alpha融合
公式:result = fg*alpha+bg*(1-alpha)
这里我们需要个核心的参数alpha,就是png图片的alpha通道,即透明度的概念,如果alpha都为1,即:result = fg 就是直接把前景覆盖在上面,很不真实,尤其是边缘部分。如果在fg边缘部分alpha从外到里连续从0变到1,那么前景就会无缝融合在背景上。
说到这里就有个关键问题了,如何得到这个alpha,当然需要借用我们强大的PS工具。

利用快速选择或魔棒或套索得到选区,单独保存成通道

为了体现细节,我们以扣头发为例

1. 先用快速选择或魔棒或套索选出主体部分,注意不要把细节选进去,只选主体。


alpha融合---PS制作带连续alpha值的png图片_第1张图片

2. 然后点上面菜单里的选择这个Tab,然后里面有个调整边缘,选中智能半径,然后按住左键有个圆圈(可以调节大小)沿边缘划,松开看到头发慢慢出现,可以反复划,直到所有头发都出来,然后确定。

alpha融合---PS制作带连续alpha值的png图片_第2张图片
alpha融合---PS制作带连续alpha值的png图片_第3张图片
alpha融合---PS制作带连续alpha值的png图片_第4张图片
alpha融合---PS制作带连续alpha值的png图片_第5张图片

注意这个时候,大多数会反向选择然后按delete删除,然后保存成png,进行alpha融合,但是依然会在边缘出现严重的失真

PS的delete键删除背景是如何实现的呢?其实它是将你要delete掉的地方alpha通道设为0(全图alpha通道默认为255,不透明),但是这没有达到我们前文说的要有连续的alpha,以便和背景融合时达到渐变的效果。我们刚刚的调整边缘,在图层上看到的是真实的alpha和rgb融合后的结果,所以result = alpha/255*(fg*真alpha)+bg*(1-alpha/255) ,此处的alpha是保存到png的alpha即0或255,result实际上= bg或fg*真alpha,根本没有融合的的过程,所以需要把alpha单独提取出来。

3. 存储选区

alpha融合---PS制作带连续alpha值的png图片_第6张图片
alpha融合---PS制作带连续alpha值的png图片_第7张图片
alpha融合---PS制作带连续alpha值的png图片_第8张图片
可以看到刚刚命名的alpha通道,就是我们要的alpha了,边缘的alpha值是连续变化的。

4. 分离通道单独保存这个alpha通道

alpha融合---PS制作带连续alpha值的png图片_第9张图片

点红色圆圈处,出现分离通道选项

alpha融合---PS制作带连续alpha值的png图片_第10张图片

把该通道保存下来(存储为web格式:png-24,读出来是3通道的都相同,用一个通道就好),然后后续程序处理时,读入这个alpha图作为融合的alpha。

利用蒙版一步到位

蒙版是选区的可视化表现,是将不同灰度色值转化为不同的透明度,刚刚我们把选区保存为通道其实就是蒙版。

上面那种做法,alpha通道是单独保存下来的,现在我们直接让他保存在png图片的第4个通道里

1. 前面过程和上一个方法一样就是快速选择,然后调整边缘

2.新建蒙版

alpha融合---PS制作带连续alpha值的png图片_第11张图片

alpha融合---PS制作带连续alpha值的png图片_第12张图片

然后直接存储为web格式:png-24就好,用opencv读取第4个channel就是alpha值。而且蒙版是不损坏原图的,用opencv读取前三个通道会发现还是原图。

进阶

如何我们要把脸也用蒙版也扣掉怎么做呢(同样要求alpha值连续)?
同样的先选择脸然后反选调整边缘

alpha融合---PS制作带连续alpha值的png图片_第13张图片
alpha融合---PS制作带连续alpha值的png图片_第14张图片

然后点击油漆桶,将颜色选择纯黑(纯黑表示0),注意蒙版是选中状态操作的是蒙版,不是图片。
然后发现看到边缘是渐变的。

alpha融合---PS制作带连续alpha值的png图片_第15张图片

alpha融合---PS制作带连续alpha值的png图片_第16张图片

ok,大功告成!!!

你可能感兴趣的:(PS)