仪表指针样式_PS教程!教你绘制拟物仪表盘拟物图标
大家是不是觉得拟物图标是个坎?时常跃跃欲试又无从下手?或者细节分析半天最后只得出“画起来会没完没了”的结论?
mmmm……要不别纠结了,打开软件,今天让我们来试着用photoshop临摹一个小小仪表盘吧!
教程步骤
—
- 步骤 01
新建文档,大小 800*600px ,使用渐变工具填充画布,渐变数值 #ffffff~#c3c3c3
- 步骤 02
使用圆角矩形工具绘制仪整个图标的范围,尺寸 410px ,圆角 90px ,并填充渐变颜色 #403b41~#76716d ,记得整个图形要于画布居中摆放,命名图层【图标底】
- 步骤 03
使用椭圆工具填充颜色 #f3dec2,并设置羽化 10px ,制作两侧高光
- 步骤 04
使用矩形工具填充渐变,颜色 #100f0f,渐变不透明度100%~0%
设置底部阴影,通过蒙版控制阴影在图标内,设置图层模式为叠加,不透明度40%;
- 步骤 05
使用钢笔工具、矩形工具及及椭圆工具通过填充、羽化、图层样式设置分别绘制 3 个顶部高光;
顶部第 1 层高光:渐变颜色为 #f3dce2 ,渐变不透明度为 30%~100%~30%,羽化 6px ,混合模式为滤色,不透明度 70%
顶部第 2 层高光:宽357px,高30px,圆角 10px ,渐变颜色 #f6ead9,渐变不透明度为 30%~100%~30%,羽化 6.2px ,混合模式为滤色,不透明度 55%
顶部第 3 层高光:渐变颜色 #f6ead9,渐变不透明度为 100%~30%,羽化 6.2px ,混合模式为滤色,不透明度 40%
- 步骤 06
使用钢笔工具绘制上方四条图标纹路(两侧需向内凹陷),镜像得到下方四条纹路,填充黑色,复制一遍纹路图层填充改为0,并给该图层添加样式制作纹路光影;
投影1:颜色 #fffedf,混合模式滤色,不透明度 30% ,角度 90 度,距离 2px
投影2:颜色 #b4b4b4,混合模式滤色,不透明度 10%,角度 -90 度,距离 2px
- 步骤 07
回到【图标底】图层,建立蒙版并利用多边形套索工具选中纹路两侧凹槽部分填充黑色(蒙版的黑遮白显)进行遮盖;
- 步骤 08
使用椭圆工具绘制圆盘底部,直径 320px ,描边 1px,添加图层样式如图
填充渐变:颜色 #b1a599~785f4b
描边渐变:颜色 #050505~#050505~#ffffff,不透明度 #100%~50%~70%,位置 0%~38%~100%
投影:混合模式正片叠底,颜色 #100f0f,角度 90,距离 10px,大小 15px
内阴影:混合模式滤色,颜色 #f7f73,不透明度 40%,角度 90,距离 4px,阻塞 4%,大小 4px
内发光:混合模式滤色,不透明度 10%,颜色 #f6eee2,方法柔和,大小 10px,范围 50%
- 步骤 09
使用椭圆工具制作一个【圆圈黑边】图层,再通过椭圆工具矩形工具利用布尔运算制作一个【上半环1】图层,给该图层添加图层样式;
外圆直径 290px,内圆直径 234px
【上半环1】填充颜色 #a3c8d0
内阴影 1:混合模式正片叠底,颜色 #012649,不透明度50%,角度-90,距离3px,大小3px
内阴影 2:混合模式滤色,颜色#ddf7fd,角度90,距离5px,大小4px
- 步骤 10
同样使用椭圆工具矩形工具通过布尔运算制作【下半环1】图层,,给该图层添加图层样式;
填充颜色:#603723
内阴影 1:混合模式滤色,颜色#ff9f39,不透明度70%,角度90,距离2px,大小4px
内阴影 2:混合模式正片叠底,颜色#481d00,不透明度90%,角度-90,距离6px,大小3px
投影:混合模式正片叠底,颜色#100f0f,不透明度50%,距离5px,大小15px
- 步骤 11
使用矩形工具和多边形工具绘制表盘刻度,旋转调整放置合适位置,上方刻度填充并添加描边样式,两侧矩形填充并添加投影样式;
【刻度1】
填充颜色 #effefd
描边:大小1px,位置外部,不透明度80,颜色#add4e5
【白色矩形1】
填充颜色 #f1e4d1
投影:混合模式正片叠底,颜色#3b1400,距离1px,大小1px
- 步骤 12
同样使用椭圆工具矩形工具通过布尔运算制作中间环形的上、下半边,给图层添加图层样式;
【上半环2】
内阴影:混合模式滤色,颜色#e4f4fe,不透明度90,角度-90,距离1px,大小1px
【下半环2】
内阴影1:混合模式变暗,颜色#160a00,不透明度66%,角度-90,距离7px,大小5px
内阴影2:混合模式滤色,颜色#e65b00,角度90,距离1px,大小1px
- 步骤 13
使用矩形工具和多边形工具绘制表盘刻度,旋转调整放置合适位置,给相应图层添加图层样式;
【蓝色部分刻度】
填充颜色#effefd,描边#ffffff,1px
描边:大小1px,位置外部,不透明度80%,颜色#add4e5
【白色矩形3】
填充颜色#f9f1eb
投影:混合模式正片叠底,颜色#3b1400,角度90,距离1px,大小1px
【深棕色部分刻度】
填充#a48371,描边#f2dfd2,大小1px
描边:大小1px,位置外部,不透明度60%,颜色#200a00
【大三角形指针】
填充颜色#542e23,描边渐变#542e23~#cb9b75
描边:大小1px,位置外部,不透明度60%,颜色#200a00
投影:混合模式正片叠底,颜色#271000,不透明度40%,角度-90,距离7px,大小13px
- 步骤 14
使用椭圆工具制作一个阴影叠加,填充改为0%;
直径234px
内阴影1:混合模式正片叠底,颜色#034573,不透明度70%,角度90,距离7px,大小3px
内阴影2:混合模式正片叠底,颜色#160a00,不透明度80%,角度-90,距离8px,大小10px
- 步骤 15
使用椭圆工具制作仪表盘的中间圆圈,填充颜色区分上下部分并添加图层样式,使用矩形工具制作总监白色横条,添加图层样式如图
【中间圆圈】
直径190px,渐变#381400~#544238#cae7fa~#8fc4e6(48%处有两个色标)
内阴影1:混合模式正片叠底,颜色#1870ad,不透明度70%,角度90,距离6px,大小10px
内阴影2:混合模式正片叠底,颜色#391c03,不透明度70%,角度-90,距离6px,大小10px
内发光:混合模式滤色,不透明度20%,颜色#ff8d36,方法柔和,大小40px,范围50%
- 步骤 16
使用文字工具和矩形工具绘制表盘上的数字及横线内容,添加图层样式如图所示
【蓝色区域横线】
宽79px,高5px,圆角2.5px
【蓝色区域数字】
字体Rodowel Condensed,大小18点,颜色#f5f7fc
描边1px,位置外部,不透明度80,颜色#add2e5
【棕色区域横线】
宽80px,高5px,圆角2.5px,填充#c99d7d,描边#f5ccae
【棕色区域数字】
字体Rodowel Condensed,大小18点,颜色#f3dac8
描边1px,位置外部,不透明度60,颜色#432506
- 步骤 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
- 步骤 18
使用椭圆工具给中间圆圈再加一层阴影效果,结合布尔运算和蒙版给外圈加一层反光效果;
【阴影】
直径190px
内发光:混合模式正片叠底,颜色#000000,大小10px,范围50%
【底部光影】
直径290px
渐变:颜色#ffffff,不透明度100%~100%~0%,位置0%~70%~100%
- 步骤 19
使用椭圆工具再结合布尔运算或蒙版分别一一制作仪表盘的高光、反光;
【上方反光】混合模式滤色,不透明度80%
【中间光圈】混合模式滤色,不透明度60%
【上高光】混合模式柔光
【两侧反光】混合模式滤色,不透明度90%
【两侧高光】混合模式滤色,不透明度95%
【下高光】混合模式滤色,不透明度90%
【光影边缘线】混合模式柔光,不透明度60%
- 步骤 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
- 步骤 21
使用矩形工具并添加效果制作图标投影,回到纹路光影图层通过蒙版对纹路受光处和阴影处的高光效果进行减淡;
底部阴影1
宽385px,高352px,渐变#403b41~#76716d,羽化9px
底部阴影2
宽384px,高408px,圆角90px,颜色#626262,羽化2px
- 步骤 22
ctrl+shift+alt+e 盖印图层,右键将该图层转为智能对象,点击滤镜窗口进行添加杂色,数量1px,平均分布,并利用蒙版遮住该效果对中间圆盘的影响。
这样,一个仪表盘就做好啦。
最终效果
—
结语
—
本期教程到这里就结束了,数据不是绝对,根据自身情况操作。多尝试,希望大家在练习过程中多思考、理解制作思路和操作方法,活学活用。
仪表指针样式_PS教程!教你绘制拟物仪表盘拟物图标相关推荐
- PS教程!手把手教你绘制一枚经典的iTunes图标
编者按:现在扁平化时代,很多同学可能都忘了怎么用图层样式塑造拟物效果了,今天这枚教程带同学们来回顾一下,作者是@P大点S微博 里的高手,对于图层样式有很多精辟独到的见解,让人大开眼界,来学习一下. P ...
- ps右键不显示编辑选项_PS教程教你如何删除和修改图片文字却不留痕迹
来这里找志同道合的小伙伴! PS教程教你如何删除和修改图片文字 PS教程怎么取删除和修改图片文字呢? 你有没有很棒的图片,但因为上面有文字所以不想用它?Photoshop有一些非常好用的功能可以去掉文 ...
- 仪表指针样式_Qt自定义Widget之仪表盘
上次和大家分享了使用Qml制作的仪表盘的过程,这次和大家分享下Qt的自定义控件过程. 效果图如上,有图有真相啊. 程序源码来自B站上,几乎没做任何修改,这里主要说下自定义控件的流程. 程序源码: xi ...
- ps自定义形状工具_PS教程——用PS绘制虚线的三种方法
点线面是平面构成的基本元素,而线条在平面设计中亦有规整分割版面.装饰造型的作用,能大幅提升版面的可读性.学会用PS绘制线条是每个自学平面设计初学者的基本功,本篇平面设计学习日记, @酷coo豆一孔之见 ...
- php画星球,AI教程教你绘制梦幻星球
先看看作者这个系列的图~我只选取了9张 我临摹的是图二,就是下图.教程中不会给太多的色值,制作这种梦幻的效果,要自己动手词出来的颜色,才是最有成就感的 一.新建文栏 二.添加背景并绘制参考线 1.新建 ...
- ai怎么做波普风圆点_AI教程:教你绘制波普艺术风格人像
波普艺术于20世纪50年代中期在美国盛行,也称为波普艺术和通俗艺术.在这种艺术风格的影响下,作为创作灵感的源泉,我们可以努力创作肖像,并把它们变成波普风格的插图.在此基础上,我们可以制作新的和独特的流 ...
- PS新手教程!教你绘制一枚通透质感的游戏按钮
按钮制作不难,首先确立具体形状,然后再用图层样式为其加上效果,最后加强下质感,给底部和顶部一些高光,然后再加上文字就大功告成了,接下来就跟@DearSalt 一起学习这篇按钮教程吧 >>& ...
- PS教程!手把手教你绘制一枚写实的iPhone SE图标
编者按:iPhone SE刚发布,今@无梦不欢001 来个应景教程,教你绘制一枚精美的图标,里边会介绍一个PS CC 2015才有的加强版图层样式的运用,关于渐变的讲解也非常细致,来收! 本期的内容所 ...
- 热带雨林绘画软件测试,手绘教程!手把手教你绘制光影超棒的热带雨林插画
关于教程 本次的教程主要分享原创创作的绘画思路.首先是根据主题深入思考,然后进行寻找自己想要的插画风格和寻找自己要画的元素的素材.手把手教你绘制属于自己的插画,感兴趣的话就马起来练习叭! 教程步骤 步 ...
最新文章
- vue2 + vue-router + vuex + iview 入门项目
- 软件测试矩阵,什么是过程/数据矩阵(U/C矩阵)?
- axios发送post数据后台收不到_使用axios post 提交数据,后台获取不到
- Android 应用开发(17)---应用权限
- 1009家网站被约谈,一批恶意营销账号终于被关闭了
- 英文版Windows2k服务器无法正常返回中文的问题
- 进入保护模式(八)简单OS内存使用分布
- python实用脚本(二)—— 使用xlrd读取excel
- 服务器精益改善系列,用OEE来指导生产改善,知识贴干货!「标杆精益」
- 发个手机全息投影(制作方法已放出,补上世界第一公主)
- echarts柱状图加上数量
- PG distinct与distinct on
- Linux---systemctl命令
- ceph L版本相对于J版本在scrub机制上做的优化
- 把图片转换成视频-ffmpeg
- Docker 入门看这一篇就够了,万字详解!
- 2020-05-31
- 大数据治理工程师_大数据工程师课|新公布的4个大数据治理面对的问题,这些方面越来越重要...
- 计算机系统中io设置的作用是,(山东省计算机文化基础选择题.doc
- MIT scratch安装教程