sketch教程:有趣的轮廓蒙版Alpha Mask

2023-05-0715:29:59原型设计Comments3,338 views字数 1476阅读模式

mask蒙版在设计软件中是个很常见的功能,它是在想要显示的图层对象上加一层遮罩蒙版,然后只显示遮罩部分,或者说显示两者重叠的部分。显示的透明度来自于蒙版对应的透明度。这种蒙版就是最常见的透明度蒙版,英文Alpha Mask。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/38704.html

介绍

一般来说,透明度蒙版已经足够用了。不过sketch提供了另外一种叫做轮廓蒙版的东西,英文Outline Mask。它的特点如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/38704.html

  1. 蒙版本身透明度视作100%,不会像透明度蒙版那样可以设置;
  2. 蒙版内容区域也视作节点轮廓有内容,哪怕是没有填充色的空矢量;
  3. 矢量的外描边、图层的阴影等会扩大原本轮廓区域的忽略掉蒙版作用;
  4. 超过被遮罩对象的蒙版区域,会按原本内容显示,不像透明度蒙版无效。

比如说有这样一张汽车的图片:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/38704.html

sketch教程:有趣的轮廓蒙版Alpha Mask

想要遮罩只显示汽车,无论哪种蒙版,都是在上面绘出汽车的轮廓矢量,然后应用蒙版。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/38704.html

sketch教程:有趣的轮廓蒙版Alpha Mask

如果是透明度蒙版,用一种不透明颜色填充即可,如果是轮廓蒙版,则无论填不填充都有效。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/38704.html

sketch教程:有趣的轮廓蒙版Alpha Mask

现在让我们加点需求:显示出车轮廓的时候,底部加点阴影。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/38704.html

当然可以直接新建图层画上阴影,但有时会因为一些原因使得只能改蒙版内容时就麻烦了。此时轮廓蒙版的第4个特点则非常好用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/38704.html

将蒙版内容绘制成这样的红色:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/38704.html

sketch教程:有趣的轮廓蒙版Alpha Mask

应用轮廓蒙版:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/38704.html

sketch教程:有趣的轮廓蒙版Alpha Mask

不是很好看,笔者不是设计师,只是为了说明展示功能哈哈。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/38704.html

实现

看下sketch中的层级树状结构:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/38704.html

sketch教程:有趣的轮廓蒙版Alpha Mask

导入到Figma/MasterGo中:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/38704.html

sketch教程:有趣的轮廓蒙版Alpha Mask

左边是Figma,右边是MasterGo。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/38704.html

可以看到,Figma没有变动原始的图层结构数据,MasterGo为了实现轮廓蒙版,先是copy了一份蒙版,然后将copy作为底层内容,再将原始蒙版作为透明度蒙版应用。这样会冗余一份蒙版层级节点,修改时会有是否同步更新的小麻烦。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/38704.html

那么怎么在Web中实现这种轮廓蒙版功能呢(以Canvas/Webgl为例)?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/38704.html

首先,要收集这个作为蒙版的轮廓。蒙版可能只是一个单一图层,也可能是若干图层组成的一个复合图层,sketch中叫做组。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/38704.html

  1. 先以轮廓蒙版作为局部根节点汇总内容,即复合图层情况下的汇总;
  2. 如果是矢量节点,则忽略掉矢量节点的描边,填充固定用不透明色;
  3. 如果是其他节点,则忽略掉阴影、模糊等外围扩展,视作一个矩形矢量框填充;
  4. 各自应用相对于局部根节点的transform/matrix,最后得出一个轮廓汇总矢量图形。

这是我们能得到一个位图纹理,称作A。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/38704.html

接着,因为蒙版可能作用于nextSibling多个图层,收集后面兄弟节点的内容汇总。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/38704.html

  1. 先将轮廓蒙版内容视作普通内容渲染;
  2. 遍历后面兄弟节点,将原本的transform/matrix求出逆矩阵应用并渲染;
  3. 将这些渲染内容叠加汇总,得出纹理B。

然后,应用这个蒙版就好了,将A和B进行混合,和透明度蒙版的编写一样,结果称作C。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/38704.html

最后,将蒙版自身内容做底,再把C覆盖到上面即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/38704.html

这里给出个简单的shader范例,如何混合透明度:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/38704.html

#version 100

#ifdef GL_ES
precision mediump float;
#endif

varying vec2 v_texCoords;

uniform sampler2D u_texture1; // 纹理A即mask
uniform sampler2D u_texture2; // 纹理B即内容

uniform int mode;

void main() {
  vec4 color1 = texture2D(u_texture1, v_texCoords);
  vec4 color2 = texture2D(u_texture2, v_texCoords);
  float a = color1.a * color2.a;
  gl_FragColor = vec4(color2.rgb, a);
}
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/38704.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/yuanxing/38704.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定