零基础设计师需要了解的常识(3)
步骤 2 的制作其实相当容易，我们先从下图的角度渐层分配来看 →
在渐层轴的起点我选择了一个亮度最高，彩度又不会太低的红色(#FF8B8B)来作为角度渐层的起点，亮度较高的颜色搭配浅色的背景以及基底可以让整体视觉呈现较为舒适，干净的感觉。接下来就是一个超级简单的步骤，我们先把渐层区段每隔 20%做一个分隔点，总共做出五个区域如下图：
然后开始由第二个分段点往右到第五个分段点调整颜色 →
调整颜色的方式也非常简单，您唯一要移动的只有色相轴，依照色相轴的顺序对应到渐层区段的顺序，您就可以轻松做出 icon 里面的舒适渐层啰。
如同这个章节最前面所提到的，角度渐层( Angular Gradient )的应用其实非常广泛，在这边先就两个常用的情况帮助各位对于角度渐层的应用能有一个初步的了解，基于这些背景知识也能让您在创作新的事物上面有更多的技巧可以使用。紧接着让我们来看看金属渐层吧!
三、金属渐层
在开始制作金属渐层之前，我们先来看一张金属材质的照片 →
从照片中我们可以发现，由于金属本身的光泽，还有光在金属平面上的折射、反射情形相对复杂的因素，导致金属本身的色泽变化对比强烈，光源的分布也比较没有固定的方向。但是在制作上面其实还是有一些简单的原则可以依循(看看照片中锅底的光影就是一颗旋钮的正面啊 XD)。这个章节就让我们利用UI组件中常出现的金属旋钮以及金属按钮来做点练习。
按钮（Button）
我们在制作一般按钮的时候，在渐层上的使用顶多运用2–3个渐层区段(简单来说：凸的就是上浅下深，凹的就是上深下浅)，但是!!!注意啰，刚刚有提过金属光泽的两个重点就是对比强烈跟光影没有一定性。运用这两个原则，我们开始看看要如何才能够把上面这颗普通的按钮转变成具有金属质感的按钮!注：对于金属圆形/长形/旋钮有兴趣的朋友，建议在读完本篇教学后于 Google 搜寻 Metal Web Button, Metal Button Icon, Metal Round Button 等关键词，您会看到满坑满谷的金属按钮，跟金属按钮还有…金属按钮提供您作为后续练习的依据与参考。
Step 1 光泽制作
让我们沿用练习中做出来的按钮，在基底上面做一些渐层的调整(单纯调整覆盖的渐层颜色)就可以发现感觉好像有点出来啦。我们可以简单整理出一些小规则 → 基于原本上亮下暗的渐层中间，插入明显的亮部跟暗部渐层区段(强烈对比)，而且彼此采交替(或是两个暗部一个亮部)的方式出现，就可以轻易地做出有金属光泽感的渐层。(注：这里的示范全部都是使用 Sketch3 制作，因为 Sketch3 渐层的制作引擎效能实在是比不上 Photoshop，如果您使用的是 Photoshop 质感会更棒 xD)
注1：不同的渐层区段(位置，明暗程度)也可以产生不太一样的效果喔，下图就更偷懒只有一个亮部配上一个暗部。
注2：因为 Sketch3 和 Photoshop 背后处理渐层的方式不同，如果在 Photoshop 中以相同模式的渐层来制作时可以产生如下图的效果(在这边有稍微加深颜色)，可以发现按钮上面渐层的过渡相当自然，不像在 Sketch3 里面制作时偶尔会有突兀的线光源，更糟的是有时候还会因为颜色 Render 不好整颗按钮彷佛打上马赛克。再来，因为 Photoshop 在图层的处理上面除了渐层覆盖跟基本的阴影调整之外其实还有相当多的元素可以使用(内光晕、外光晕、神器斜角浮雕)，如果您希望制作的是大师级的作品，不要怀疑!请爱用 Adobe 系列软件，如果您希望制作的是目前看起来好像有点厉害的作品又可以偷懒不要那么辛苦的话就让我们一起继续使用 Sketch3 吧。
Step 2 细部调整
仔细观察一下章节最前面的金属材质照片，可以发现金属质感中有一个不可或缺的细节 — 发丝纹!!!就是这个纹让这一切看起来变的好像很厉害。在 Sketch3 里面我们可以用一个利用把很多条的线迭在原本的按钮上方的方式来制作 →
接下来把所有迭在上方的线段展开，搭配高斯模糊( Gaussian Blur )来做出发丝纹的效果 →
Step 3 文字调整
在最后的步骤里面，我同样的加强了文字上面凹陷(深色内阴影)以及底部反射(白色反光阴影)的效果来配合金属强烈对比的质感。一颗具金属质感的按钮表面就诞生啦。
Step 4 边框
接下来可以试着运用同样的金属光泽渐层概念，利用边线(Border)为您的按钮加上边框。大致上的制作概念就是 Step1 — Step4 的步骤，细杰的部分还有一些像是该如何与背景融合、该如何做出金属凹陷的效果等等就留在之后的文章再跟各位分享啰。
注1：同样的效果在加上颜色之后也能组合出不同的用途，像是底下的绿色进度(血量)条?!
注2：同样的概念可以直接运用在不同的形状，做出不同的效果：举例来说 →下方左图我加宽了亮部的区间，调整了圆角边缘，现在看起来有种水管的感觉;第二张图我增加了由上至下的渐层边线，同样调整了圆角边缘，就轻易地转变成一颗长方形的按钮啰。
