Photoshop绘制立体逼真的拟物仪表盘图标(5)

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

uimaker
UI设计师 / 江苏 南京

来源:网络   作者:蓝色潜水艇

关键词

步骤 17

使用多边形工具通过布尔运算制作上方黄色三角形,添加图层样式,使用矩形工具和钢笔工具制作中间黄色横杠,添加图层样式;

【黄色三角形】

渐变#e57100~#ffcf4f

外发光:混合模式叠加,不透明度60%,#054656,大小1px,范围50%

投影:混合模式正片叠底,颜色#364252,不透明度50%,角度90,距离2px,扩展1%,大小1px

【黄色横杠】

渐变#ca5400~#f56701~#fb9101,位置0%~24%~100%

投影1:混合模式滤色,颜色#edba6a,角度-90,不透明度50,距离1px,扩展1%,大小1px

投影2:混合模式正片叠底,颜色#5c2500,角度90,距离1px,扩展1%,大小1px

Photoshop绘制立体逼真的拟物仪表盘图标,PS教程,思缘教程网

步骤 18

使用椭圆工具给中间圆圈再加一层阴影效果,结合布尔运算和蒙版给外圈加一层反光效果;

【阴影】

直径190px

内发光:混合模式正片叠底,颜色#000000,大小10px,范围50%

【底部光影】

直径290px

渐变:颜色#ffffff,不透明度100%~100%~0%,位置0%~70%~100%

Photoshop绘制立体逼真的拟物仪表盘图标,PS教程,思缘教程网

步骤 19

使用椭圆工具再结合布尔运算或蒙版分别一一制作仪表盘的高光、反光;

【上方反光】混合模式滤色,不透明度80%

【中间光圈】混合模式滤色,不透明度60%

【上高光】混合模式柔光

【两侧反光】混合模式滤色,不透明度90%

【两侧高光】混合模式滤色,不透明度95%

【下高光】混合模式滤色,不透明度90%

【光影边缘线】混合模式柔光,不透明度60%

Photoshop绘制立体逼真的拟物仪表盘图标,PS教程,思缘教程网

步骤 20

使用椭圆工具和钢笔工具绘制螺丝底部和光影范围,使用矩形工具绘制螺丝的十字凹槽,并添加图层样式。上方螺丝做完一个再复制一个,下方同理制作一个然后复制。

【螺丝底部圆圈】

直径30px

填充颜色#fffbf6,描边大小1px,描边颜色#030000,描边不透明度100%~30%

投影:混合模式正片叠底,颜色#100f0f,不透明度60%,角度90°,距离1px,大小1px

【螺丝光影形状】

用钢笔工具勾勒光影范围(直接椭圆工具画圆也可以)

填充颜色#776c66,描边大小1px,描边颜色#574b46~#cab7b0,不透明度100%~20%

渐变叠加:混合模式滤色,不透明度100%,渐变颜色#000000~#ffffff,不透明度100%,样式径向,角度90°,缩放150%

【竖向圆角矩形】

宽4px,高20 px,圆角大小2 px

填充渐变颜色#000000~#ffffff,不透明度100%

内阴影:混合模式正片叠底,颜色#020202,不透明度100%,角度90°,距离2 px,大小1 px

外发光:混合模式滤色,颜色#ffffff,不透明度40%,大小1 px

【横向圆角矩形】

宽5 px,高20 px,圆角大小2 px

填充颜色#000000,描边大小1 px,描边颜色#b4aaa0~#e7dbdb,不透明度100%

外发光:混合模式滤色,颜色#ffffff,不透明度100%,杂色3 %,大小1 px

Photoshop绘制立体逼真的拟物仪表盘图标,PS教程,思缘教程网

Photoshop绘制立体逼真的拟物仪表盘图标,PS教程,思缘教程网

 收藏