UI元素添加噪点和纹理

在UI元素中添加一些细微的噪点或纹理看起来不错，但最好的方法是什么呢？

我们的目标是找到最好的方法，既能在缩放时保持质量，又易于实现和编辑。完整的标准如下：

• 使用的层数，越少越好。
• 缩放能力——如果文件被缩放，效果是否能保持质量？
• 可以在颜色和渐变图层样式上添加噪点吗？
• 该方法可以用于任何纹理，而不仅仅是噪点？

带噪点的位图层

向形状添加纹理最明显的方法可能是创建一个普通的位图层，用颜色填充它，选择滤镜>噪点>添加噪点（Filter > Noise > Add Noise），然后应用一个矢量蒙版来匹配你要添加噪点的元素。

使用大量的噪点，将图层混合模式设置为亮度，降低不透明度，将产生对噪声的最大控制，对底层的干扰最小。48%的噪声设置提供了一个高动态范围，而没有剪切噪点(剪切会导致更高的对比度，这可能是不可取的)。

• 层：2
• 缩放：no，如果文档被缩放，纹理将被重新创建
• 工作与颜色和渐变层样式：yes
• 适用于任何材质：yesl

内发光层样式

添加一个内部辉光图层样式，将光源设置为中心，大小设为0，这样你就可以使用噪点滑块为任何图层添加纹理。这是一个很好的解决方案，前提是你还没有使用辉光图层样式。在颜色、渐变和图案层样式之上添加噪点，效果非常好。

不幸的是，噪声只能使底层元素变亮或变暗。之前的位图层方法可以同时添加高光和阴影，保持平均亮度，在我看来效果要好得多。

• 层：1
• 缩放：yes，纹理会自动重做
• 工作与颜色和渐变层样式：yes
• 适用于任何材质：no

智能对象与滤镜

创建一个纯色图层，将它转换为一个智能对象，选择滤镜>噪点>添加噪点，应用一个矢量蒙版来匹配你的元素，设置图层混合模式为亮度，降低图层不透明度。

这是一个相当复杂的过程，但是可以使用一些效果的组合，如果文档被缩放，这些效果将被重新创建。

• 层：2
• 缩放：yes，纹理会自动重做
• 工作与颜色和渐变层样式：yes
• 适用于任何材质：no

模式叠加层样式

首先在新文档中创建噪声或重复模式，然后选择Edit > Define pattern。一旦你定义了模式，它将在模式叠加层样式选项中可用。与以前的方法一样，使用亮度作为混合模式，并降低不透明度以适应产生巨大的结果。

事后看来，模式叠加似乎是一种相当明显的添加纹理的方法。

模式层样式被合成在颜色和渐变样式之下，破坏了原本完美的噪点和纹理方法。不过，如果需要的话，你可以创建第二个图层来保存纹理，或者从渐变填充层开始，绕过这个限制。

• 层：1
• 缩放:是的，但是你需要在缩放后将图层样式缩放为100%
• 工作与颜色和渐变层样式：no，模式出现在下面
• 适用于任何材质：yes

颜色层样式中的噪声

如果Photoshop能在色彩图层样式中加入一个噪点滑块，那就太好了。与上面列出的大多数其他方法相比，它当然更方便，使用起来也简单得多。我已经要求Adobe很好地在photoshopcs6中包含该功能。也许它很快就会出现。

• 层：1
• 缩放：yes，纹理会自动重做
• 工作与颜色和渐变层样式：yes
• 适用于任何材质：不适用
• 确实存在：no

哪种方法最好？

虽然有点麻烦，创建一个渐变填充层，添加一个模式层的风格，然后创建一个矢量遮罩似乎是最好的方法。它可以用来创建灵活的、可伸缩的、可编辑的带有纹理的单层UI元素。作为一个附加的好处，渐变填充层可以抖动，所以它也产生最高质量的结果。