仪表盘是驾驶员获取车辆信息的主要途径，还是车辆控制系统的核心组成部分。在日常工作中是HMI设计师绕不开的一个关卡。
接下来我将和大家一起代练一张金属质感的黑色仪表。话不多说先看效果图。
设计要点：
以下我将按照上述步骤依次代练背景、车道、车模、表盘、顶托的设计手法。使用到的工具为:Sketch99。没有Mac的小伙伴可以使用：即时设计，Figma。同时我所调节的参数仅为参考。不一定非要一模一样，可以跟着效果自我把控即可。用到的汽车图片和软件包我也会分享到链接，有需要的伙伴可以自取。（友情提示：内容会比较长，步骤很详细。）
1.背景：新建1920*720的画板填充纯黑，绘制一个高度为400的矩形顶对齐（确定天际线的大概位置），拉出参考线后隐藏掉。绘制一个1920*720的矩形来当作背景，填充为线性渐变（#070708,Alpha:100—#636466,Alpha:100—#070708,Alpha：50）
2.背景透视线：使用钢笔绘制一条高度为320的垂直线，填充纯白2px描边。依次复制并向右平移30px,数量可以多一些一定要超过画板。然后通过布尔运算相加起来。选中后右键-变换-变换。控制周围4个锚点来达到透视的角度。调整好后填充线性渐变（#FFFFFF,Alpha:0——#FFFFFF,Alpha:10)
绘制一个1546*195的椭圆填充径向渐变（#FFFFFF,Alpha:100—#FFFFFF,Alphan:0)。注意：是靠近天际线的那一侧为0。位置水平垂直居中即可。
最后给椭圆添加缩放模糊数值为35。一个简单的背景就完成啦。
3.车道：先绘制车道底部：绘制一个125*320的矩形，右键变换拉出跟背景透视线差不多的透视角度。填充为90度线性渐变（#636466,Alpha:0—#1A1A1A,Alpha:100)。然后复制一层置于下方，把所有Alpha都改为100。添加高斯模糊数值为25。
再复制一层去掉填充，添加描边为5px。使用剪刀工具减去上下两边。
添加线性渐变（#545557,Alphan:0—#656565,Alpha:100—#999999,Alphan:0)添加高斯模糊数值为1。注意调整渐变的位置
用钢笔在左侧车道旁边勾一个三角出来，当作车道的投影。
添加线性填充。（#767676,Alphan:0—#4D4D4D,Alphan:100—#414141,Alphan:50)。注意调整渐变位置
给图层添加高斯模糊效果数值为10，并复制一层右键变换-水平翻转，放置于右侧车道线旁边。
按照同样的方法，绘制出车道内侧的线。填充为线性渐变（#999999,Aplhan:0—#999999,Aplhan:100—#999999,Aplhan:100)，外侧车道，内侧车道，跟画板都居中对齐。
4.车模的处理：找一张俯视45度的高清汽车图片扣图成png格式导入sketch里面。这里推荐使用佐糖在线抠图工具。也可以使用我提供的车模。缩放至合适比例，可以适当的调色处理。在车辆接触地面的地方用钢笔勾出一小块阴影。（注意和车尾拉开一点距离）
把颜色改为#0D0D0D,Alphan:100添加动感模糊角度为90，数值为8，选中路径执行图层—拼合选中图像，然后添加一点高斯模糊，适当的降低图层的透明度。
按照车模的轮廓再绘制外侧投影。填充90度线性渐变（#0D0D0D,Alphan:0—#0D0D0D,Alphan:100），最后添加高斯模糊数值为5。
把车模复制一层右键垂直翻转向下移动一点距离。并在下方画出一个蒙版区域。选中2个图层执行右键蒙版选项。
选中蒙版执行图层—蒙版—蒙版模式—透明度蒙版。这一步很关键。
把蒙版的填充改为径向填充（#FFFFFF,Alphan:10—#FFFFFF,Alphan:0)(中心点为10，外侧为0）
在车尾灯上面勾一条线，填充为红色，图层样式改为叠加。并添加投影（颜色#FF0000,Alphan:100，模糊度为5，位置为0，0）同样在底部也画一个形状，填充为红色，添加高斯模糊数值为10。并调整透明度为50%。到这一步车模的简单处理就完成了。
5.金属表盘：绘制一个560*560的圆形，填充为线性渐变（#323233,Alphan:100—#111111,Alphan:100）添加内阴影（#000000,Alphan:100，模糊度为50，位置0，0）
添加外侧金属边框：复制560*560的圆形，去掉填充，添加10px的描边。并执行轮廓化。绘制一个694*225的矩形填充为#4D4D4D,Alphan:100，与圆形水平居中。矩形执行高斯模糊数值50。选中2个图层执行蒙版选项，效果如下。
添加上下高光点缀：复制560*560的圆形，去掉填充，填充2px的描边，填充线性渐变（#E6E6E6,Alphan:100-#B4B4B4,Alphan:0），并增加高斯模糊数值为0.5。以同样的方法添加下方的高光点缀。注意底下的圆形是在内部，还有渐变的位置。
添加第三层点缀：复制560*560的圆形，填充1px的描边颜色为#808080,Alphan:100。在内部绘制一个278*98的椭圆，颜色纯黑，添加高斯模糊为50。
接下来是给仪表绘制一点内部点缀线条。用钢笔绘制一条长263的垂直线，描边1px,颜色纯白。用旋转复制功能复制出119份，中心点一定要选择在560*560的圆环中央。效果如下图。复制完了之后联集。
绘制一个537*537的圆形来当作蒙版。透明度蒙版原理，把点缀线淡化。圆形蒙版填充为径向渐变。透明度为0—0—5。具体效果如下。（也可以多复制一层在旁边填充黑色，作为更多的细节）
接下来是确定刻度。绘制518*518的圆环，去掉填充，描边为10，用剪刀剪去1/4。旋转45度，设置虚线描边，具体参数如下。绘制一个6*22的矩形，下方2个锚点各自向中间移动1px,填充为线性渐变（#323232，Alphan:0—#9A9A9A,Alphan:100—#FFFFFF,Alphan:100）。按照刻度参考每隔一个依次排好。并打上速度数值。效果如下。（我这里使用的字体为montesrrat，字号大小为24)
接下来是指针，绘制14*264的矩形，通过调节上下锚点，得出如下图形。填充线性渐变（#FFF1E5,Alphan:100—#989898,Alphan:100）再复制一层指针作为蒙版。在指针旁边绘制一个矩形（大小随意，能够遮住半个指针即可）填充为线性渐变（#B39D85,Alphan:100—#FFF4E6,Alphan:100）选中两个图层执行蒙版。得到整个完整指针。把新指针执行图层—拼合所选图层。并添加高斯模糊数值为0.5。得到最终指针效果。
接着在中心位置绘制一个58*58的圆形，描边为3，颜色为线性渐变（#B2B2B2,Alphan:100—#676767,Alphan:100—#E6E6E6,Alphan:100），再绘制一个44*44度圆形，描边为1，颜色同样渐变（#676767,Alphan:100—#FFFFFF,Alphan:100）
在花瓣找一张金属质感的图片剪切进去。再把指针跟中心原点打组，旋转到自己想要的角度，并添加投影（#000000,Alphan40；位置：40,0，模糊4）最终完成指针效果如下。
绘制油量条：任意复制一份之前的圆形外框，描边为8，色值#333333,Alphan100。利用剪刀工具剪出圆环底部空缺的图形，减完后轮廓化。（减之前可以拉好参考线）最后添加一点内阴影（颜色#FFFFFF,Alphan：20，位置0，1，模糊度：2）。
复制一层，用布尔运算切掉一部分，填充从左到右渐变（#BEA073,Alphan:100—#CCC8C0,Alphan:100）并添加内阴影（颜色#FFFFFF,Alphan:100，位置0，2，模糊度：3）。复制一层置于下方，添加高斯模糊，模糊度：10。并在油条的两端添加2个矩形。大小：5*20，填充线性渐变（#323232,Alphan:100—#B2B2B2,Alphan:100—#808080,Alphan:100—#383838,Alphan:100—#333333,Alphan:100）位置可以自己把控，最终效果如下。
最后绘制表盘高光：绘制一个531*531的圆形，填充描边都去掉，直接添加内阴影（颜色：#FFFFFF,Alphan:100，位置：0，0，模糊度：30）原位复制一层，去掉内阴影。2层执行蒙版，蒙版类型为透明度蒙版，蒙版填充为100-0的透明度渐变。
再复制一层填充为径向渐变（颜色为纯白，透明度100-0），整体透明度为30。注意渐变位置。
同样用圆形绘制一块斜着的高光，填充为径向渐变（颜色纯白，透明度30-0），整体透明度再降低到20。利用蒙版剪切到表盘内。最后再添加上文字和icon。km/h字号：24，E和F字号：20，里程数字字号：30
把仪表整体打组，复制一层，拼合成图片用前面制作车模投影的方式制作出来投影。以同样的方式完成转速的绘制。接下来是顶托。绘制一个椭圆（记得备份后面做光用）：1092*223、用剪刀剪去上半部分。描边填充为线性渐变（纯白，不透明度0-100-0）
打开备份的圆形。在底下画一个圆形，填充纯色#FDF1E4,Alphan:100、两层添加蒙版。然后再给上层圆形添加高斯模糊，数值为30。最终效果如下。
最后打上文字、档位、还有其他信息。效果完成。（内容很长，图文教程略显粗糙，有不明白的地方，可以留言私发、欢迎小伙伴们打卡。下次再见！）
Powered by Froala Editor
这家伙不是一般的懒
4
作品
6
粉丝
2
关注
大牛，别默默的看了，快登录帮我点评一下吧！:)
登录 立即注册