给UI元素添加渐变渐变gradient|UI设计

渐变是给物体表面增加栩栩如生的光影效果的好方法，当使用渐变层和图层样式构建时，它们还可以确保UI元素可以方便地缩放和重用。
线性渐变线性渐变是最基本形式的渐变——颜色之间沿直线逐渐混合。我相信你们都知道，接下来是更有趣的东西。

文章图片
反射渐变反射的渐变就像它们的线性朋友，但是它们重复渐变两次，第二次重复镜像。这使得编辑变得不那么单调乏味，只要它符合你想要达到的结果。

文章图片
径向渐变

文章图片
径向渐变开始于中心(或任何选定的点)，并向外以圆形模式增长。它们可以方便地创建球体，并将效果应用到圆形元素的边缘。当渐变窗口或图层样式窗口打开时，可以通过在画布上单击和拖动来移动渐变的中心点。
角度渐变

文章图片
角度渐变是模仿高度抛光的金属物体上环境反射的一种很好的方法。当渐变窗口或图层样式窗口打开时，可以通过在画布上单击和拖动来移动渐变的中心点。
渐变组合任何值得做的事都值得做过头，将渐变层与渐变层样式相结合，可以覆盖两个不同的渐变，从而产生更复杂的效果。要组合渐变，你需要为渐变图层样式设置一个混合模式。对于下面的示例，我使用了screen(用于亮化)或multiply(用于暗化)。

文章图片
渐变中的抖动在渐变中加入抖动可以产生更平滑的效果。非抖动渐变通常包含可见的条带。如果你的作品在更便宜的6位/通道TN液晶显示器和某些显示类型上被观看，抖动甚至更重要，因为它们往往会放大色调分离问题。

文章图片
如果你没有看到区别，这是一个极端的，完全不现实的渐变抖动的例子。

文章图片
确保你的渐变效果是很容易的——只要在Photoshop中选择适当的方框。

文章图片
请注意，在Photoshop CS5和更早的版本中，渐变图层样式是不能抖动的(photoshopcs6增加了这个功能)。放置对象的渐变(比如你从Illustrator中粘贴的东西)不会抖动。
如果你在渐变中使用透明度，它也不会犹豫，这有时是一个大问题。对于某些特定的情况有一个解决方案——如果你使用一个透明的渐变来用白色照亮一个区域，那么使用一个不透明的渐变和一个屏幕层混合模式会让你抖动它。同样的技术也可以用叠加混合模式来加深颜色。