大家分享最新版本的亮度蒙版插件TKActions V7 for Mac，适用于多个版本的Photoshop，TKActions v7汉化版中包含RapidMask、Combo、Cx和Batch四个插件，功能各异，tkactions v7插件可以根据图片亮度的不同，对不同的区域进行单独的调节，有助于用户进行后期优化，还在找TK亮度蒙版插件的朋友可以试试哦！

TKActions V7 for Mac官方介绍

TKActions V7是用于制作光度掩模和运行Photoshop的综合面板的最新版本。它包括以前V6面板的所有功能以及许多新功能。与其前身一样，TK7面板是模块化的，因此用户可以在工作空间中以最佳方式配置它。Combo模块甚至有两种不同的安排，如果需要，可以采用新的紧凑布局。TK面板在全球范围内使用，并预先编程了六种常用语言：英语，西班牙语，德语，法语，意大利语和中文。用户可以选择他们喜欢的语言。

RapidMask模块使用独特的快速蒙版引擎，以接近实时的速度快速生成光度掩模和其他基于像素的掩模的整个光谱。基于掩码的界面计算16位掩码，用户可以预先看到这些掩码，以便明智地选择使用哪一个。界面采用自上而下的工作流程，可以快速轻松地创建蒙版。https://mac.orsoon.com/Mac/171139.html编号部分指导用户完成整个过程。有几种修改选项，包括掩模计算器，允许所有掩模，甚至修改的掩模，以独特的方式组合。

TKActions V7简化而高效。大多数用户只需要两个V6模块（RapidMask加上Combo或Cx）来完成所有工作。除了主界面之外，还有一些逻辑子菜单可以轻松访问，并且在不再需要时会自动关闭。将鼠标滚动到下面的图像上会显示这些模块中可用的更多基础菜单。

TKActions亮度蒙版插件功能特色

TKActions V7面板专为Photoshop CC设计，可充分利用Photoshop CC可容纳的HTML5架构。以下是每个模块的一些功能。

RapidMask

多个面罩/多个来源 - TK7面板不仅仅是一个发光面罩。创建通道，颜色，饱和度和振动掩模与光度掩模一样容易，并且可以生成这些基于像素的自羽化掩模的整个光谱。SOURCE菜单可以轻松选择不同的像素数据作为制作蒙版的起点

有组织的工作流程 - 四个不同的部分 - SOURCE，MASK，MODIFY和OUTPUT--引导用户完成蒙版制作过程。

新面具 -TK7现在具有Color Zone蒙版和CMYK蒙版。

轻松添加和减去蒙版 - 蒙版计算器提供了一种简单的方法来添加，减去或交叉面板创建的任何蒙版。

https://mac.orsoon.com/Mac/171139.html

更多MODIFY选项 - 新的修改功能允许通过绘画，刻录，闪避甚至Photoshop的Camera Raw滤镜实现精确蒙版。

多种输出选项 -使用当前的快速蒙版作为图层蒙版，轻松创建调整图层和像素图层。

图层蒙版模式 - 提供基于图像的方法，通过将蒙版直接应用为活动图层上的图层蒙版，快速选择或创建最佳蒙版。

强调色界面 - 整个模块只有一种强调色，用户可以根据自己的喜好进行更改。

点击跟踪 -按钮在点击后保留一个强调色的阴影，这样用户就可以跟踪他们上次选择的面具。

Combo/Cx

紧凑的设计 - 将Photoshop控件，网页锐化和创意操作集成到一个模块中。

从模块运行Photoshop -可以通过单击模块单击按钮运行许多常用的Photoshop功能，键盘快捷键和菜单项。

静音颜色界面 -将按钮分隔为逻辑组，以便快速找到正确的Photoshop功能。

多功能按钮 - 几个按钮具有双重功能，可以通过按钮本身以图形方式显示，也可以使用CTRL /命令键激活。

使用“TK?”按钮访问创意Photoshop操作菜单 - 包括新操作手绘晕影，聚光灯，Dehaze和添加颜色。

曝光混合操作 -Stack，Align和Focus Blend是“TK?”按钮的一部分。

集成的网络锐化 -TK7现在提供多维支持。将Web图像锐化为任何维度，转换为sRGB，并运行锐化后操作。

扩展用户操作 -通过“用户?”按钮访问的可编程操作允许用户直接从面板运行自己的操作。

Batch

多图像锐化 -只需单击一下按钮，即可为网络调整和锐化图像的整个文件夹。

多维锐化 -TK7现在允许不同的垂直和水平尺寸，可以组合包含需要以不同方式调整大小的垂直和水平图像的文件夹。

所有模块

活动选择指示器 - 即使没有可见的行进蚂蚁，也会显示活动选择。

滚动帮助 - 按住ALT /选项键并滚动按钮会在模块的顶部或底部显示帮助消息。

为了方便用户更好使用web组态，最近提供了用户自定义组件的功能。在实施项目中就可以使用自己的组件了！

首先我们登陆系统就会看到新增的组件管理选项 如下图：

点击添加组件选择2D组件我们就可以建立一个自己的组件了

《组件设计器》由 基础设置（包括名称 code 类型 状态 icon 次序号 ）HTML编辑区域 CSS编辑区域 JS编辑区域 和预览区域组成。

首先我们给组件 起一个‘名字’ 和 ‘code’，在url输入框中可以给组件设置一个icon。点击保存系统会为我们建立一个组件模板。

由于web组态是由vue开发的所以开发组件也需要vue的的基础知识。建议去看下vue的教程及生命周期，以方便开发组件。以下我附上vue生命周期图及组件代码。

我们就开始设计一个炫酷的按钮作为例子

HTML代码如下：

<a href="#" class="btn123" :style="imrstyle" v-show="controlProp.commProp.visible">{{controlProp.textProp.text}}</a>

这里:

style="imrstyle"：样式 在web组态设计器中呈现的样式

v-show="controlProp.commProp.visible"：可见性 在web组态设计器中可实现显示或闪烁

{{controlProp.textProp.text}}：文本 对应组件的文本属性

更多属性请参考：http://krmes.com:8000/md/design/#%E7%BB%84%E4%BB%B6%E5%9F%BA%E7%A1%80%E5%B1%9E%E6%80%A7

CSS代码如下：

.btn123 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      box-sizing: border-box;
      z-index: 1;
    }
    
    .btn123:hover {
      animation: animate 8s linear infinite;
    }
    
    @keyframes animate {
      0% {
        background-position: 0%;
      }
      100% {
        background-position: 400%;
      }
    }
    
    .btn123::before {
      content: '';
      position: absolute;
      top: -5px;
      left: -5px;
      right: -5px;
      bottom: -5px;
      z-index: -9999;
      background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
      background-size: 400%;
      border-radius: 40px;
      opacity: 0;
      transition: 0.5s;
    }
    
    .btn123:hover::before {
      filter: blur(20px);
      opacity: 1;
      animation: animate 8s linear infinite;
    }
    
    

JS代码如下：

export default {
  props: {
    controlProp: Object //作为web组态设计器的继承属性
  },
  data() {
    return {
    }
  },
  computed: {
    imrstyle: function () {  //imrstyle 作为web组态设计器的控制样式
      let maxWidth=this.controlProp.commProp.width
      let maxHeight=this.controlProp.commProp.height
      if (this.controlProp.textProp && this.controlProp.textProp.padding) {
        maxWidth=maxWidth - this.controlProp.textProp.padding * 2
        maxHeight=maxHeight - this.controlProp.textProp.padding * 2
      }
      return {
        // 'max-width': maxWidth+ 'px',
        // 'max-height': maxHeight+ 'px',
        width: '100%',
        height: '100%',
        'box-sizing': 'content-box',
        background: 'transparent',
        'color': this.controlProp.textProp ? this.controlProp.textProp.fontcolor : '',
        'font-size': this.controlProp.textProp ? this.controlProp.textProp.fontsize + 'px' : '',
        'text-align': this.controlProp.textProp ? this.controlProp.textProp.horizonalign : '',
        'line-height': maxHeight + 'px',
        'vertical-align': this.controlProp.textProp ? this.controlProp.textProp.verticalalign : '',
        'font-family': this.controlProp.textProp ? this.controlProp.textProp.fontfamily : '',
        'font-weight': this.controlProp.textProp ? (this.controlProp.textProp.fontweight ? 600 : 500) : '',
        'font-style': this.controlProp.textProp ? (this.controlProp.textProp.fontitalic ? 'italic' : 'normal') : ''
      }
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    initImports() {
      return {

      }
    },
    initProp() {   //初始化状态 （基础属性 特殊属性 文本属性）
      return {
        commProp: { // 基础属性  
          width: 80,
          height: 30,
          borderwidth: 0,
          backgroundColor: 'linear-gradient(90deg, #03a9f4, #00FFFF)',
          borderradius:5
        },
        spProp:{ // 特殊属性
          },
        textProp: { // 文本属性
          text: 'Button',
          fontsize: 12,
          fontcolor: 'black',
          horizonalign: 'center',
          verticalalign: 'middle',
          padding: 0,
          margin: 0
        },
        spPropSetting: [ // 特殊属性 textinput/numberinput/switch/select/colorPicker/codeInput/dateInput/imgSelect/setup
        ]
      }
    }
  }
}

这里需要注意：

initProp()：方法中实现对组件的 基础属性 文本属性 特殊属性的初始化配置

更多属性配置参考：http://krmes.com:8000/md/design/#%E7%BB%84%E4%BB%B6%E5%9F%BA%E7%A1%80%E5%B1%9E%E6%80%A7

点击保存这样我们设计的组件就显示出来了！是不是很简单。

这样在我们的web组态中就可以使用我们自定义的组件了！[大笑][大笑][大笑]