设计金属质感指纹特效APP图标的Photoshop教程

本教程主要使用Photoshop设计金属质感的指纹APP图标,科技感特效一般是由金属、玻璃、光线结合,给人冰冷炫酷的未来感。本教程从以上三种材质的特效来剖析如何设计出带有质感的科技感素材,步骤详细,并附上源文件和素材。感兴趣的朋友可以一起来学习吧。

如何hold住这种吊炸天的科技未来风设计?

其实很简单啦,高大上的科技感基本元素:金属+玻璃+光效。金属常用于:字体、建筑、兵器装备等;玻璃用于电子屏幕、全息投影、液态介质等;光效则烘托气氛,是科技感设计的必备元素。

下面分别献上这三类材质的实现方法。

设计金属质感指纹特效APP图标的PS教程

设计金属质感指纹特效APP图标的PS教程

以上图为例(某个app的图标),典型的兼备金属、玻璃和光线的实例,建议大家用它来练手。最后附上源文件,供参考。

1、结构分析

四个角是对称的,只需设计好一个角再复制旋转即可。上下也是对称的,只需设计顶部,复制得到底部。最后再加上中间的指纹和扫描光。

设计金属质感指纹特效APP图标的PS教程

设计金属质感指纹特效APP图标的PS教程

设计金属质感指纹特效APP图标的PS教程

2、金属部分

1、PS中建立600*600像素的文件,在左上角画出如图的形状,颜色随意,添加渐变:

设计金属质感指纹特效APP图标的PS教程

设计金属质感指纹特效APP图标的PS教程

图层a

2、栅格化上面的图层a(养成保留原始图层好习惯,栅格化之前先复制备份一张哦)找来一张金属拉丝的图片如下(附件中有)旋转90°成竖向,适量缩小让拉丝更细腻,注意正片叠底不透明度80%,创建剪贴蒙版给图层a,得到图层b,金属材质已经出来啦。

设计金属质感指纹特效APP图标的PS教程

设计金属质感指纹特效APP图标的PS教程

图层b

3、侧面金属,将上面的图层a复制后得到图层c,放于底层。用直接选择工具对其拖移锚点,比a的右边厚一些:

设计金属质感指纹特效APP图标的PS教程

添加图层样式:

设计金属质感指纹特效APP图标的PS教程

得到效果:

设计金属质感指纹特效APP图标的PS教程

4、复制c并栅格化得到c2,用附件中的金属材质2放在c2上面创建剪切蒙版,正片叠底,不透明度80%。得到效果:

设计金属质感指纹特效APP图标的PS教程

5、添加高光、反光、阴影和暗部

以上步骤已经做出了金属的模型,但还不够逼真,为了达到真实的场景效果,高光和阴影等光效必备且关键。

① 侧面高光:在图层c2之上新建图层命名为侧面高光,用150左右大小、硬度为0、颜色纯白的笔刷点一下在c2的下部,并利用选区反向工具裁去c2范围以外的部分:

设计金属质感指纹特效APP图标的PS教程

混合模式为叠加不透明度30%。效果:

设计金属质感指纹特效APP图标的PS教程

② b的阴影:复制图层a并添加图层样式投影:

设计金属质感指纹特效APP图标的PS教程