扁平化UI图标设计教程

三、 渐变式

步骤 1:

复制圆角矩形图层，然后移动到图层最顶端，填充设置为 0%

步骤 2:

使用钢笔工具，删除一些锚点，然后拖移一些锚点到中心，如下图。

 

为复制后的图层添加图层样式，如下(正片叠底 不透明度20% 缩放100%)

步骤3:

原圆角矩形图层也如下设置(正片叠底 不透明度10% 缩放100%)

四、投影式

这个超级简单，给所有图层添加如下图层样式即可(正片叠底 不透明度20% 距离10)

恭喜，完工

本教程利用PS讲述了几种扁平化风格的实现，希望你能学以致用，多多实验，开创自己的风格。