「经验分享」 22款设计师必备的PS插件「附教程」（上）

hotoshop可以说是每个设计师都必须会用的设计工具之一了。为了设计要求，大家会在Photoshop里搭配一些PS插件来使用。这篇文章就为大家整理了22款最佳PS插件，一起来看看吧。

点击获取，ps全套插件合集，一键选装，自动识别ps版本

1、摹客iDoc PS插件（产品设计协作神器）

摹客iDoc是一个更快更简单的产品协作设计平台。摹客iDoc主要用户人群涵盖产品经理，设计师和工程师，其核心功能点包括：智能标注、一键切图、多样批注、快速交互、全貌画板、团队管理。从产品到开发，真正实现了只要一个文档，更加高效流畅的协作方式，降低沟通成本，提升产品效率。摹客iDoc支持PS。通过摹客iDoc PS插件，可以上传PS设计稿以进行标记切图等（摹客iDoc PS插件教程）。PS 中的设计稿上传至iDoc中后，可以进行以下操作：

智能标注。标注智能生成，详细且精准；有三种标注模式，无选中标注、图层间标注、多选标注；还可以查看百分比标注；可使用放大镜，放大标注细节；可一键查找页面中的任何重复元素（如文本、颜色、边距、宽度等）；可通过单位切换面板，切换多种度量单位

一键切图。通过插件在PS中进行切图并上传到iDoc中，可一键下载

多样批注。提供了多种批注样式，方便查看者对设计稿进行评价和回复

快速交互。可以设置页面跳转交互，快速制作高保真可交互原型；支持9种转场特效，设置延时自动跳转，还可以设定固定滚动区域；可生成链接进行演示，移动端项目支持手机演示

全貌画板。全貌画板内展示所有设计稿，缩放自如；可设置逻辑线、添加逻辑描述，表达设计稿间的逻辑关系；支持导航漫游，以进行快速定位

团队管理。项目管理：根据项目属性对项目进行分组，每个组有多个项目，还可设置各个项目的参与人员；团队管理：将团队成员划分到不同部门，通过设置 “管理员”、“成员”、“访客”身份，分配团队成员不同操作权限

2、GuideGuide（PS辅助线插件）

GuideGuide是一款针对photoshop的辅助工具。通过这款软件，可以轻松的即可完成标准的辅助线，从而让设计师更轻松地进行作品制作，节约画图的时间。软件操作比较简单，只需要将插件载入PS中，即可完成各种辅助线的制作。

可以快速进行分栏、等比间隙
将元素进行快速的对齐
快速选择网格划分方式
快速划分导航
支持对宽度进行计算
可对基准线的网格进行绘制

3、Lumenzia（PS蒙版扩展插件）

Lumenzia 是款Photoshop蒙版扩展插件，可以对PS中的图片进行添加城市风格的滤镜效果。插件支持对调整亮度、区域范围的各种效果，也可以自定义调整区域、添加颜色等。

混合颜色带蒙板（保存重要的文件空间, 避免需要更新蒙板）
颜色蒙板（视觉上选择颜色和/或亮度）
实时蒙板（请立即查看并尝试不同的蒙板）
区域和范围选取器（点击图像可视化选择正确的蒙板）
"更亮/更暗" 蒙板（选择相对于环绕像素的像素）
组合蒙板（合并组蒙板以节省空间并准确查看被遮罩的内容）

4、Fluid Mask 3（PS抠图插件）

Fluid Mask 3是一款可以帮助处理PS图像的工具。该插件中的编辑功能非常丰富，支持多种画笔工具，可以将抠图的照片加载到编辑区域，利用不同的画笔工具对其进行处理，从而优化PS图像；同事还支持边缘宽度调整、蒙版设计、色调调整、抓取、缩放、拍照等辅助功能。

混合精确画笔：对精确的区域涂抹混合蒙版，然后在最后的抠图中混合
强制边缘工具：使用强制边缘工具给图像添加边缘；使用羽化调整来控制混合强制边缘的宽度
清理工具：用于填充较大蒙版区域的小孔，使其连续
进度栏功能：完成命令花费的和剩余的时间指示

5、Long Shadow Generator（PS长投影插件）

Long Shadow Generator是一个Photoshop长投影插件。长投影效果在网页设计、UI元素与图标等设计上的应用很常见。这款长投影插件除了支持4个方向的长投影，还支持设置投影长度等。

阴影长度
不透明阴影
黑色或白色的影子
展平或gradiant阴影

具体请看功能展示视频：如何使用Long Shadow Generator

6、CSS3Ps（PS图层转换插件）

CSS3Ps是一款PS图层转换软件，可以将图层转换为能在浏览器中查看的CSS3代码，方便直接在设计软件中添加相关的设计程序。其操作过程很简单，通过鼠标简单的操作就能完成转换任务。转换的时候，可以选择单个或多个图层，并通过点击转换实现批量处理功能。

文本层：可以设置文字内容的图层转换
多层选择：可以将一个图层独立转换，也可以设置多个图层批量转换
供应商前缀：可以修改文件的前缀名称，设置代码保存的地址
尺寸设置：在转换的时候，可以选择图层的大小尺寸
图层阴影：支持将图层中的阴影部分转换
外发光：能够处理图层光效，优化您的转换效果

7、Ink（PS图层详细信息生成插件）

Ink是一款帮助显示Photoshop图层详细信息的扩展插件。通过这款插件可以快速生成指定图层的详细信息，例如图层的信息、大小、颜色等，从而为前端提供图层信息。有了这款插件，设计师可以轻松输出规范文档，这样就不会因缺乏规范而导致不准确的前端输出。

可以记录每个图层对应在图形的相关信息，如：颜色、形状、尺寸、渐变、阴影等等

具体请看使用教程：如何使用Ink

8、CSS Hat（PS图层转换CSS样式插件）

CSS Hat 是一款 PhotoShop 插件，能够把PSD效果图层自动转化为转换成CSS样式代码。此插件对于 Web 设计开发相关工作者相当有帮助，生成的 CSS 样式可以直接使用，可节省大量的时间。

一键查看图层样式
轻松使用字体、段落样式
一键转换Less/Sass/Stylus等语言

标注、切图、交互、原型，2019年必备神器！[color=rgb(255, 255, 255) !important]立即体验iDoc

具体请看功能展示视频：如何使用CSS Hat

点击获取，ps全套插件合集，一键选装，自动识别ps版本

大家多多评论，提高推荐，阅读超过5000，小编将分享更给力的资源，或者大家有什么需求可以在评论区留言！

如果对你有用给小编一个好评吧，你的好评是小编坚持的动力哦，么么哒！

其他资源

私信“c4d安装”，自动获取c4d安装包和图文教程
私信“ps资源合集”，自动获取ps持续更新资源（插件，素材，画笔等等）

1、素材文件来源于互联网，素材版权归原作者所有

2、素材仅供个人学习研究，不得任何形式商用。如需商用，请联系原创作者购买版权，

否则带来版权法律问题，请自行负责

者 | 小胡
责编 | 郭芮

说到图片处理，我们经常会想到PhotoShop这类的图像处理工具。作为前端开发者，我们经常会需要处理一些特效，例如根据不同的状态，让图标显示不同的颜色。或者是hover的时候，对图片的对比度，阴影进行处理。”

不过你以为上面的图片都是经过PS软件处理出来的？不不不，纯粹是用CSS写出来的，很神奇吧。

强大的 CSS:filter

CSS滤镜（filter）能够提供模糊、锐化或元素变色等图形特效，过滤器则通常用于调整图片、背景和边界的渲染。

CSS标准里包含了一些已实现预定义效果的函数：

filter: none 
 | blur() 
 | brightness() 
 | contrast() 
 | drop-shadow() 
 | grayscale() 
 | hue-rotate() 
 | invert() 
 | opacity() 
 | saturate() 
 | sepia() 
 | url();

<!--html-->
<img src="https://note.youdao.com/yws/res/237/WEBRESOURCE7e77df2551fe1a1db1b9d91f4d518917" alt="原图">

filter: none

没有任何效果，默认filter就为none。

filter:blur( ) 高斯模糊

给图像一个高斯模糊效果，length值越大，图像越模糊。我们来尝试一下：

img {
 filter:blur(2px);;
}

brightness(%) 线性乘法

可以让图片看起来更亮或者更暗：

img {
 filter:brightness(70%);
}

contrast(%) 对比度

调整图像的对比度：

img {
 filter:contrast(50%);
}

设置阴影效果(h-shadow v-shadow blur spread color)

阴影是合成在图像下面、有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。函数接受<shadow>(在CSS3背景中定义)类型的值，除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似，不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。

利用这个方案，我们可以改变图标的颜色，比如黑色图标变成蓝色图标：

img {
 filter: drop-shadow(705px 0 0 #ccc);
}

在这里，我们将图片投影形成一个同等大小的灰色区域：

hue-rotate(deg) 色相旋转

img {
 filter:hue-rotate(70deg);
}

看，我的小姐姐变成了阿凡达！

invert(%) 反转

这个函数的作用是反转输入图像，有点像曝光的效果：

img {
 filter:invert(100%)
}

grayscale(%) 将图像转换为灰度图像

这个效果可以将图片做旧，有一种时代沧桑感。喜欢古风的人一定会喜欢上这个效果的：

img {
 filter:grayscale(80%);
}

除了古风还有一种用法是有的时候需要将全站变成灰色，如大屠杀纪念日的时候：

可以这样设置：

*{
 filter: grayscale(100%);
 -webkit-filter: grayscale(100%);
 -moz-filter: grayscale(100%);
 -ms-filter: grayscale(100%);
 -o-filter: grayscale(100%);
}

sepia(%) 将图像转换为深褐色

下面给我的小姐姐一个暖暖的色调：

img {
 filter:sepia(50%)
}

大家是不是发现我并没有把url()方法写到这上面来？

没错，因为我想把这个内容放到最后来说，filter:url()就是CSS滤镜改变图片的终极方法。CSS:filter可以导入一个svg滤镜，作为它自己的滤镜。

终极变色解决方案！ filter:url()

为什么说filter:url()是图片变色的终极解决方案？请容我慢慢道来。

我们先科普一下PS的工作原理，我们都知道网页是有三原色的R(红) G(绿) B(蓝)，常见的RGBA还包括一个opicity值，而opcity值是根据alpha通道计算出来的。也就是说，我们见到的网页的每一个像素点都是由红蓝绿再加alpha四个通道组成，每一个通道我们称之为色板，PS中8位板的意思就是2的八次方256，意思就是每一个通道的取值范围都是(0-255)。

如果我们可以改变每个通道的值是不是就能完美的得到我们想要的任意颜色了呢？原理上，我们可以像PS那样利用svg滤镜得到任何我们想要的图像，不仅仅是变色，我们甚至可以凭空生成一幅图像。

svg feColorMatrix大法好

<svg height="0" xmlns="http://www.w3.org/2000/svg">
 <defs>
 <filter id="change">
 <feColorMatrix type="matrix" values="
 0 0 0 0 0.55
 0 0 0 0 0.23 
 0 0 0 0 0 
 0 0 0 0 1" />
 </filter>
 </defs>
</svg>
<img src="https://note.youdao.com/yws/res/237/WEBRESOURCE7e77df2551fe1a1db1b9d91f4d518917" alt="">

img {
 filter:url(#change);
}

通过单通道我们可以将图片变成单一的颜色：

<svg height="0" xmlns="http://www.w3.org/2000/svg">
 <defs>
 <filter id="change">
 <feColorMatrix values="3 -1 -1 0 0
 -1 3 -1 0 0
 -1 -1 3 0 0
 0 0 0 1 0" />
 </filter>
 </defs>
</svg>

通过双通道我们可到一些非常炫酷的PS效果：

当然，在这里只是举个例子，通过配置矩阵中的值，我们可以配置每一个像素点的值按照我们定义的规则显示。

我们在这里详细讲一下feColorMatrix 矩阵的计算方式：

其中Rin Gin Bin a(alpha) 为原始图片中每个像素点的rgba值，通过矩阵计算，得到的Rout Gout Bout Aout就是最终显示出来的rgba值。

将图片转为单色，以棕色rgba(140,59,0,1)为例

根据上面的公式，我们可以简化一些计算，同一行中，只设置一个通道的值，其他通道为0。不难得出矩阵：

0 0 0 0 目标值R
0 0 0 0 目标值G
0 0 0 0 目标值B
0 0 0 0 1

根据规则，只需要计算，255/想要显示的颜色对应通道 = 目标值，我们想要的棕色rgba(140,59,0,1) 换算成色板 rgba 为 140 59 0 255，可以算出目标值0 0 0 0 0.55。

0 0 0 0 0.55
0 0 0 0 0.23
0 0 0 0 0 
0 0 0 0 1

多通道设置出来的炫酷效果

就如同之前我们看到的双通道形成的炫酷图片一般。

要把图片的饱和度提高，首先当然是想想饱和度的成因，就是红的越红，蓝的越蓝，绿的越绿。由这个成因出发，我们的矩阵就可以写成下面的样子，看到矩阵当中出现了3 和-1，一定会很那闷这是怎么来的，原理其实很容易理解，让我们假设某一个像素的RGB 分别是(200/255),(100/255),(50/255)，呈现的应该是有点暗沉的橘色，经过矩阵的换算：

R 变成了200/255x3-100/255-50/255= 1.76；
G 变成200/255x(-1)+100/255*3-50/ 255=0.2；
B 变成200x(-1)+100x(-1)+50x3=-0.59。

因此RGB转换后就是：200x1.76，100x0.2，50x-0.5。

<svg height="0" xmlns="http://www.w3.org/2000/svg">
 <defs>
 <filter id="change">
 <feColorMatrix values="3 -1 -1 0 0
 -1 3 -1 0 0
 -1 -1 3 0 0
 0 0 0 1 0" />
 </filter>
 </defs>
</svg>

其他方案

除了feColorMatrix svg滤镜还有很多的方法可以定义滤镜，它们同样可以作用到图片上。由于篇幅限制，这里就不详细展开了。

总结

CSS3提供了filter这个属性，使得通过前端技术实现更多炫酷的特效成为了可能；依赖于svg的滤镜，我们可以实现复杂的滤镜效果。

但是要注意：

CSS:filter与IE上的filter并不是相同的概念；
CSS:filter在不同的浏览器上兼容性不一样，在使用的时候需要注意浏览器的兼容。

文章难免会有疏漏，欢迎大家指正批评。

作者：小胡，晓教育前端，开源爱好者。
声明：本文为作者投稿，版权归其个人所有。

源：量子位

本文约2509字，建议阅读4分钟。

本文介绍资深前端用HTML+CSS绘画，全程不用PS、AI这种图形化的图片编辑器，单纯敲一行行代码纯手工绘制。

HTML不是编程语言，但这并不妨碍精通它的大佬玩出花来。

普通的前端，用HTML+CSS制作网页，元素简单，工具丰富。

大佬级前端，用HTML+CSS绘画，全程不用PS、AI这种图形化的图片编辑器，单纯敲一行行代码纯手工绘制。

把代码转换之后，就变成了鲜嫩的水果：

或者画出洛可可风格的古典女性肖像：

还有弗拉芒巴洛克肖像风格的人物画像，充满了中世纪的禁欲感：

现代的也有，比如这位在粉色灯光下的着礼服的妹子：

以及充满者50年代气息的复古风人物海报：

曲线、光影、渐变，每个元素都相当复杂。

而且，创作过程中不用SVG，只用Atom文本编辑器和Chrome开发者工具。

也就是说，画面上的每一条曲线和渐变、每一处高光和阴影、每一根头发和睫毛、每一片蕾丝和褶皱，都是一行行代码从头敲出来的！

如此精细程度和创造力，让学美术的网友感叹“学画画不如写代码”，让学计算机的同学觉得“别人写的这么艺术，一定是我的教科书打开方式不对”。

真·交叉学科大佬。

这个项目也一度登上了GitHub Trending排行榜第二名：

并且Issues里都是诸多用户的膜拜：厉害！崇拜！太棒了！

它们的作者，是湾区前端大神Diana Smith小姐姐，她目前是企业及软件开发商Atlassian的一名资深Web开发。

绘制过程

Diana在专门讨论CSS的网站CSS-Tricks写下了详细的教程。

画出这样一个图形分成几步？

如果不用CSS，一般都是直接嵌入这个特殊的图形。

如果用CSS，那么就从黑色矩形开始，然后在两侧加上上两个

与白色背景颜色匹配的边框半径元素。

先画出一个黑色矩形，然后两边用圆弧遮挡。有了基础形状后，下一步就是给它添上渐变的背景。但是如果用矩形方式填充，得到的效果就是这样的：

Diana的办法是：在保留矩形的同时，加上两个弯曲的div，把凹进去的部分也填充上。

最后完整的代码是这样的：

div{
  width: 500px;
  height: 350px;
  background: #000;
  position: relative;

  &::after, &::before{
    width: 20%;
    height: 100%;    
    position: absolute;
    top: 0;
    z-index:2;
    content: "";    

    background: #1e5799; 
background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%); 
background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%);
background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); 
  }

  &::after{
    border-radius: 100% 0% 0% 100%;   
    right: 0;
  }

  &::before{
    border-radius: 0 100% 100% 0;   
    left: 0;
  }   
}

body{
  background: #1e5799; 
background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%); 
background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%); 
background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); 
}

你也可以去这个完成查看CSS样式的实际运行效果：

https://codepen.io/jean-jordan/pen/KeKaBw

刚刚我们画的那幅画像不像人的脖子？好的，我们再回到人像画上，Diana绘制人物的脖子也是类似的过程。

在上面这张图里，我们看到了Diana如何逐步改形状，最终得到了油画中人物的脖子。

但是仅仅会画各种几何形状，是无法生成艺术品的，Diana总结了她在绘图中的5个重要CSS属性。

1、边界半径（border-radius）

边界半径是为了让矩形的边角过渡得更自然，对于大多数网页开发者来说，只需一个参数border-radius，可以设定不同的半径数值。

border-radius: 15px 10px 40px 30px / 40px 10px 15px 30px;

2、盒子阴影（box-shadow）

对多个盒子阴影进行分层是增加深度的最佳方法之一。框阴影将粘附到html容器的边缘，也会沿着边界半径定义的边缘。

box-shadow: 6px -11px 20px 1px red, -15px -15px 5px -10px blue, inset 5px 5px 35px 10px green;

开发者可以指定模糊半径，以及阴影是向内延伸还是向外延伸。

3、变形（transform）

变形的主要方式有：旋转（rotate）、缩放（scale）和倾斜（skew）

transform: rotate(-45deg)
transform: scale(0.7, 1.3)
transform: skew(25deg, 30deg);

此外还有透视，让物体产生远小近大的视觉效果，或者是仅仅为画出一个梯形。

transform: perspective(10px) rotateY(5deg);

4、线性梯度（linear-gradient）和径向梯度（radial-gradient）

线性梯度用于定义一个方向上的渐变效果，径向梯度用于定义圆和椭圆形的渐变效果

background-image: linear-gradient(0deg, blue, transparent 60%),
radial-gradient(circle at 70% 30%, purple, transparent 40%);

5、层叠（overflow）

层叠是一种将大量杂乱元素填充到一个整齐的包中的方法，可以创建一些有趣的形状。在变形那部分的基础上使用hidden参数，可以把边缘遮盖起来。

overflow: hidden;

以上5种元素缺一不可，随便少一种都会产生怪异的效果。

△从左至右分别是缺少边界半径、阴影、变形、梯度、层叠的效果（点击查看大图）

不过即使这样，也很有抽象艺术的美感，仿佛在看毕加索的作品。

只适用于Chrome

不过，由于这是一个纯个人艺术创作，Diana小姐姐并不关心浏览器适配性。

因此，这些代码在Chrome里可以完美展现，但如果用其他浏览器打开，可能就会出现不一样的效果。

比如，MAC上的Safari浏览器打开，妹子的眼睛就方了：

肩膀上的高光，变成了一个大圈圈：

胸前的礼服上，也被泼了一道墨：

如果用早期的Chrome打开，会出现惊悚的头身分离的效果：

早期的Opera浏览器，打开之后脸方了：

Windows 7上从IE 6到IE 11，显示出来的都是这个鬼样子：

浓重的线条，甚至有点抽象艺术的感觉。

同样是早期IE，放到Mac上也一样鬼畜，这是IE 5.1.7的效果：

还有人试了试，在Windows 98系统的IE 7浏览器打开，会变成非常像素风的样子：

最恐怖的是三星手机上的夜间模式打开：

连人种都变了啊！

其他的几张画，换个浏览器打开也比较鬼畜。

妹子你bra里的钢圈出来了啊！

拉夫领变得透明而有光泽，领口的蕾丝干脆断掉了，仿佛是逃难时期的肖像画。

最后，如果你在iPhone上装了Chrome，出来的也是Safari的效果，想看完整效果的话，请在安卓手机或者电脑的Chrome上打开。

因此，有不少网友都觉得，这几幅画可以当成浏览器测试项目，一试就能知道内核用的是谁家的。

反向绘图

CSS太难，学不会？不要紧，虽然我们不能把代码变成图片，但是可以把图片变成代码啊。

没错，就是ASCII艺术，早在DOS时期，就有人用命令行界面来显示图片。直到今天已成为一种流行的互联网文化。

用单色字符来画出世界名画已经不算新鲜事。最近又有个码农开发了一个新的项目Primg，让任何一幅画都可以用质数来表示。

比如蒙拉丽莎，就可以用一个3万位的质数二进制方式绘制出来。

传送门：

作者的GitHub：
https://github.com/cyanharlow

作者博客主页：
https://diana-adrianne.com/

教程：
https://css-tricks.com/solving-lifes-problems-with-css/

用质数生成任意ASCII艺术：
https://github.com/geonnave/primg

—完—

关注清华-青岛数据科学研究院官方微信公众平台“ THU数据派 ”及姊妹号“ 数据派THU ”获取更多讲座福利及优质内容。

在线咨询

上一篇：Vue学习开始走向VUE开发4-v-html使用详解
下一篇：刚学会 HTML5 不久，最近用 CSS3 实现了热点地图动画

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商