Photoshop设计金属感十足的指纹APP图标

UI / UI设计教程 / PS教程 /      

uimaker
UI设计师 / 江苏 南京

来源:网络   作者:lady_chris

关键词

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

Photoshop设计金属感十足的指纹APP图标

效果

Photoshop设计金属感十足的指纹APP图标

③ 加绿色边缘反光复制图层b并栅格化,添加图层样式:斜面和浮雕+内阴影:

Photoshop设计金属感十足的指纹APP图标

Photoshop设计金属感十足的指纹APP图标

得到效果

Photoshop设计金属感十足的指纹APP图标

④ 添加左侧反光:在绿色反光之上新建图层,命名左侧反光,用150大小、纯白色、硬度为0的画笔点一下后水平压缩到2-3像素宽度。创剪切蒙版,混合模式为叠加,效果:

Photoshop设计金属感十足的指纹APP图标

⑤ 暗部:绿色反光的顶部由于被指纹识别器的顶部遮挡了,反光应该弱一些。

这里可以直接用蒙版擦拭,但我用的更粗暴的办法,跟左侧反光类似,用色值为#50606e的画笔点一笔,压扁后,创建剪切蒙版到绿色反光图层上。效果:

Photoshop设计金属感十足的指纹APP图标

到此,左上角的金属部分就完成啦。

让我们来总结下金属材质的要领:

1、渐变的形状上叠加金属材质的照片,混合模式和透明度

2、加以高光、暗部、阴影等光效。增加立体感,更为逼真。

在此总结的基础上,我们完成接下来的金属竖条就简单多了,按类似方法:

6、画三根细长的矩形,添加内阴影和渐变:

Photoshop设计金属感十足的指纹APP图标

Photoshop设计金属感十足的指纹APP图标

效果:

Photoshop设计金属感十足的指纹APP图标

然后,记得复制并栅格化这些竖条,用附件的金属材质3创建剪切蒙版,混合模式为叠加,不透明度80%:

Photoshop设计金属感十足的指纹APP图标

这就做好啦,套路太好用了,扫描仪顶部的效果,,你可以自己试试!

3、玻璃部分

1、画出三块矩形,色值为c2e5eb,并变形成:

Photoshop设计金属感十足的指纹APP图标

PS上个分解图:

Photoshop设计金属感十足的指纹APP图标

 收藏