制作逼真立体仪表APP图标的PS鼠绘教程

ps教程 2023-06-21

本教程主要使用Photoshop绘制立体感十足的仪表盘拟物图标，非常逼真的一个拟物图标，推荐给朋友学习，希望大家可以喜欢。

先看看效果图：

教程步骤—

步骤 01

新建文档，大小 800*600px ,使用渐变工具填充画布，渐变数值 #ffffff~#c3c3c3

制作逼真立体仪表APP图标的PS鼠绘教程

步骤 02

使用圆角矩形工具绘制仪整个图标的范围，尺寸 410px ，圆角 90px ，并填充渐变颜色 #403b41~#76716d ，记得整个图形要于画布居中摆放，命名图层【图标底】

制作逼真立体仪表APP图标的PS鼠绘教程

步骤 03

使用椭圆工具填充颜色 #f3dec2，并设置羽化 10px ，制作两侧高光

制作逼真立体仪表APP图标的PS鼠绘教程

步骤 04

使用矩形工具填充渐变，颜色 #100f0f，渐变不透明度100%~0%

设置底部阴影，通过蒙版控制阴影在图标内，设置图层模式为叠加，不透明度40%;

制作逼真立体仪表APP图标的PS鼠绘教程

步骤 05

使用钢笔工具、矩形工具及及椭圆工具通过填充、羽化、图层样式设置分别绘制 3 个顶部高光;

顶部第 1 层高光：渐变颜色为 #f3dec2 ，渐变不透明度为 30%~100%~30%，羽化 6px ，混合模式为滤色，不透明度 70%

制作逼真立体仪表APP图标的PS鼠绘教程

顶部第 2 层高光：宽357px，高30px，圆角 10px ，渐变颜色 #f6ead9，渐变不透明度为 30%~100%~30%，羽化 6.2px ，混合模式为滤色，不透明度 55%

制作逼真立体仪表APP图标的PS鼠绘教程

顶部第 3 层高光：渐变颜色 #f6ead9，渐变不透明度为 100%~30%，羽化 6.2px ，混合模式为滤色，不透明度 40%

制作逼真立体仪表APP图标的PS鼠绘教程

步骤 06

使用钢笔工具绘制上方四条图标纹路(两侧需向内凹陷)，镜像得到下方四条纹路，填充黑色，复制一遍纹路图层填充改为0，并给该图层添加样式制作纹路光影;

投影1：颜色 #fffedf，混合模式滤色，不透明度 30% ，角度 90 度，距离 2px

投影2：颜色 #b4b4b4，混合模式滤色，不透明度 10%，角度 -90 度，距离 2px

制作逼真立体仪表APP图标的PS鼠绘教程

步骤 07

回到【图标底】图层，建立蒙版并利用多边形套索工具选中纹路两侧凹槽部分填充黑色(蒙版的黑遮白显)进行遮盖;

制作逼真立体仪表APP图标的PS鼠绘教程

步骤 08

使用椭圆工具绘制圆盘底部，直径 320px ，描边 1px，添加图层样式如图

填充渐变：颜色 #b1a590~785f4b

描边渐变：颜色 #050505~#050505~#ffffff，不透明度 #100%~50%~70%，位置 0%~38%~100%

投影：混合模式正片叠底，颜色 #100f0f，角度 90，距离 10px，大小 15px，不透明度70%

内阴影：混合模式滤色，颜色 #f7f73，不透明度 40%，角度 90，距离 4px，阻塞 4%，大小 4px

内发光：混合模式滤色，颜色 #f6eee2，不透明度 10%，方法柔和，大小 10px，范围 50%

制作逼真立体仪表APP图标的PS鼠绘教程

步骤 09

使用椭圆工具制作一个【圆圈黑边】图层，再通过椭圆工具矩形工具利用布尔运算制作一个【上半环1】图层，给该图层添加图层样式;

外圆直径 290px，内圆直径 234px

【上半环1】填充颜色 #a3c8d0

内阴影 1：混合模式正片叠底，颜色 #012649，不透明度50%，角度-90，距离3px，大小3px

内阴影 2：混合模式滤色，颜色#ddf7fd，角度90，距离5px，大小4px

制作逼真立体仪表APP图标的PS鼠绘教程

步骤 10

同样使用椭圆工具矩形工具通过布尔运算制作【下半环1】图层，，给该图层添加图层样式;

填充颜色：#603723

内阴影 1：混合模式滤色，颜色#ff9f39，不透明度78%，角度90，距离2px，大小4px

内阴影 2：混合模式正片叠底，颜色#481d00，不透明度90%，角度-90，距离6px，大小3px

投影：混合模式正片叠底，颜色#100f0f，不透明度50%，距离5px，大小15px

制作逼真立体仪表APP图标的PS鼠绘教程

步骤 11

使用矩形工具和多边形工具绘制表盘刻度，旋转调整放置合适位置，上方刻度填充并添加描边样式，两侧矩形填充并添加投影样式;

【刻度1】

填充颜色 #effefd

描边：大小1px，位置外部，不透明度80，颜色#add4e5

【白色矩形1】

填充颜色 #f1e4d1

投影：混合模式正片叠底，颜色#3b1400，距离1px，大小1px

制作逼真立体仪表APP图标的PS鼠绘教程

步骤 12

同样使用椭圆工具矩形工具通过布尔运算制作中间环形的上、下半边，给图层添加图层样式;

【上半环2】

内阴影：混合模式滤色，颜色#e4f4fe，不透明度90，角度-90，距离1px，大小1px

【下半环2】

内阴影1：混合模式变暗，颜色#160a00，不透明度66%，角度-90，距离7px，大小5px

内阴影2：混合模式滤色，颜色#e65b00，角度90，距离1px，大小1px

制作逼真立体仪表APP图标的PS鼠绘教程

步骤 13

使用矩形工具和多边形工具绘制表盘刻度，旋转调整放置合适位置，给相应图层添加图层样式;

【蓝色部分刻度】

填充颜色#effefd，描边#ffffff，1px

描边：大小1px，位置外部，不透明度80%，颜色#add4e5

【白色矩形3】

填充颜色#f9f1eb

投影：混合模式正片叠底，颜色#3b1400，角度90，距离1px，大小1px

制作逼真立体仪表APP图标的PS鼠绘教程

【深棕色部分刻度】

填充#a48371，描边#f2dfd2，大小1px

描边：大小1px，位置外部，不透明度60%，颜色#200a00

【大三角形指针】

填充颜色#542e23，描边渐变#542e23~#cb9b75

描边：大小1px，位置外部，不透明度60%，颜色#200a00

投影：混合模式正片叠底，颜色#271000，不透明度40%，角度-90，距离7px，大小13px

制作逼真立体仪表APP图标的PS鼠绘教程

步骤 14

使用椭圆工具制作一个阴影叠加，填充改为0%;

直径234px

内阴影1：混合模式正片叠底，颜色#034573，不透明度70%，角度90，距离7px，大小3px

内阴影2：混合模式正片叠底，颜色#160a00，不透明度80%，角度-90，距离8px，大小10px

制作逼真立体仪表APP图标的PS鼠绘教程

步骤 15

使用椭圆工具制作仪表盘的中间圆圈，填充颜色区分上下部分并添加图层样式，使用矩形工具制作总监白色横条，添加图层样式如图

上一篇：制作火红矢量风格城市插画照片的PS教程下一篇：学习制作真人男性耳朵图片的PS鼠绘教程

制作逼真立体仪表APP图标的PS鼠绘教程

热门文章

最新文章

标签列表