儀表盤是駕駛員獲取車輛信息的主要途徑，還是車輛控制系統(tǒng)的核心組成部分。在日常工作中是HMI設(shè)計(jì)師繞不開的一個(gè)關(guān)卡。
接下來我將和大家一起代練一張金屬質(zhì)感的黑色儀表。話不多說先看效果圖。
設(shè)計(jì)要點(diǎn)：
以下我將按照上述步驟依次代練背景、車道、車模、表盤、頂托的設(shè)計(jì)手法。使用到的工具為:Sketch99。沒有Mac的小伙伴可以使用：即時(shí)設(shè)計(jì)，F(xiàn)igma。同時(shí)我所調(diào)節(jié)的參數(shù)僅為參考。不一定非要一模一樣，可以跟著效果自我把控即可。用到的汽車圖片和軟件包我也會(huì)分享到鏈接，有需要的伙伴可以自取。（友情提示：內(nèi)容會(huì)比較長，步驟很詳細(xì)。）
1.背景：新建1920*720的畫板填充純黑，繪制一個(gè)高度為400的矩形頂對(duì)齊（確定天際線的大概位置），拉出參考線后隱藏掉。繪制一個(gè)1920*720的矩形來當(dāng)作背景，填充為線性漸變（#070708,Alpha:100—#636466,Alpha:100—#070708,Alpha：50）
2.背景透視線：使用鋼筆繪制一條高度為320的垂直線，填充純白2px描邊。依次復(fù)制并向右平移30px,數(shù)量可以多一些一定要超過畫板。然后通過布爾運(yùn)算相加起來。選中后右鍵-變換-變換?？刂浦車?個(gè)錨點(diǎn)來達(dá)到透視的角度。調(diào)整好后填充線性漸變（#FFFFFF,Alpha:0——#FFFFFF,Alpha:10)
繪制一個(gè)1546*195的橢圓填充徑向漸變（#FFFFFF,Alpha:100—#FFFFFF,Alphan:0)。注意：是靠近天際線的那一側(cè)為0。位置水平垂直居中即可。
最后給橢圓添加縮放模糊數(shù)值為35。一個(gè)簡(jiǎn)單的背景就完成啦。
3.車道：先繪制車道底部：繪制一個(gè)125*320的矩形，右鍵變換拉出跟背景透視線差不多的透視角度。填充為90度線性漸變（#636466,Alpha:0—#1A1A1A,Alpha:100)。然后復(fù)制一層置于下方，把所有Alpha都改為100。添加高斯模糊數(shù)值為25。
再復(fù)制一層去掉填充，添加描邊為5px。使用剪刀工具減去上下兩邊。
添加線性漸變（#545557,Alphan:0—#656565,Alpha:100—#999999,Alphan:0)添加高斯模糊數(shù)值為1。注意調(diào)整漸變的位置
用鋼筆在左側(cè)車道旁邊勾一個(gè)三角出來，當(dāng)作車道的投影。
添加線性填充。（#767676,Alphan:0—#4D4D4D,Alphan:100—#414141,Alphan:50)。注意調(diào)整漸變位置
給圖層添加高斯模糊效果數(shù)值為10，并復(fù)制一層右鍵變換-水平翻轉(zhuǎn)，放置于右側(cè)車道線旁邊。
按照同樣的方法，繪制出車道內(nèi)側(cè)的線。填充為線性漸變（#999999,Aplhan:0—#999999,Aplhan:100—#999999,Aplhan:100)，外側(cè)車道，內(nèi)側(cè)車道，跟畫板都居中對(duì)齊。
4.車模的處理：找一張俯視45度的高清汽車圖片扣圖成png格式導(dǎo)入sketch里面。這里推薦使用佐糖在線摳圖工具。也可以使用我提供的車模?？s放至合適比例，可以適當(dāng)?shù)恼{(diào)色處理。在車輛接觸地面的地方用鋼筆勾出一小塊陰影。（注意和車尾拉開一點(diǎn)距離）
把顏色改為#0D0D0D,Alphan:100添加動(dòng)感模糊角度為90，數(shù)值為8，選中路徑執(zhí)行圖層—拼合選中圖像，然后添加一點(diǎn)高斯模糊，適當(dāng)?shù)慕档蛨D層的透明度。
按照車模的輪廓再繪制外側(cè)投影。填充90度線性漸變（#0D0D0D,Alphan:0—#0D0D0D,Alphan:100），最后添加高斯模糊數(shù)值為5。
把車模復(fù)制一層右鍵垂直翻轉(zhuǎn)向下移動(dòng)一點(diǎn)距離。并在下方畫出一個(gè)蒙版區(qū)域。選中2個(gè)圖層執(zhí)行右鍵蒙版選項(xiàng)。
選中蒙版執(zhí)行圖層—蒙版—蒙版模式—透明度蒙版。這一步很關(guān)鍵。
把蒙版的填充改為徑向填充（#FFFFFF,Alphan:10—#FFFFFF,Alphan:0)(中心點(diǎn)為10，外側(cè)為0）
在車尾燈上面勾一條線，填充為紅色，圖層樣式改為疊加。并添加投影（顏色#FF0000,Alphan:100，模糊度為5，位置為0，0）同樣在底部也畫一個(gè)形狀，填充為紅色，添加高斯模糊數(shù)值為10。并調(diào)整透明度為50%。到這一步車模的簡(jiǎn)單處理就完成了。
5.金屬表盤：繪制一個(gè)560*560的圓形，填充為線性漸變（#323233,Alphan:100—#111111,Alphan:100）添加內(nèi)陰影（#000000,Alphan:100，模糊度為50，位置0，0）
添加外側(cè)金屬邊框：復(fù)制560*560的圓形，去掉填充，添加10px的描邊。并執(zhí)行輪廓化。繪制一個(gè)694*225的矩形填充為#4D4D4D,Alphan:100，與圓形水平居中。矩形執(zhí)行高斯模糊數(shù)值50。選中2個(gè)圖層執(zhí)行蒙版選項(xiàng)，效果如下。
添加上下高光點(diǎn)綴：復(fù)制560*560的圓形，去掉填充，填充2px的描邊，填充線性漸變（#E6E6E6,Alphan:100-#B4B4B4,Alphan:0），并增加高斯模糊數(shù)值為0.5。以同樣的方法添加下方的高光點(diǎn)綴。注意底下的圓形是在內(nèi)部，還有漸變的位置。
添加第三層點(diǎn)綴：復(fù)制560*560的圓形，填充1px的描邊顏色為#808080,Alphan:100。在內(nèi)部繪制一個(gè)278*98的橢圓，顏色純黑，添加高斯模糊為50。
接下來是給儀表繪制一點(diǎn)內(nèi)部點(diǎn)綴線條。用鋼筆繪制一條長263的垂直線，描邊1px,顏色純白。用旋轉(zhuǎn)復(fù)制功能復(fù)制出119份，中心點(diǎn)一定要選擇在560*560的圓環(huán)中央。效果如下圖。復(fù)制完了之后聯(lián)集。
繪制一個(gè)537*537的圓形來當(dāng)作蒙版。透明度蒙版原理，把點(diǎn)綴線淡化。圓形蒙版填充為徑向漸變。透明度為0—0—5。具體效果如下。（也可以多復(fù)制一層在旁邊填充黑色，作為更多的細(xì)節(jié)）
接下來是確定刻度。繪制518*518的圓環(huán)，去掉填充，描邊為10，用剪刀剪去1/4。旋轉(zhuǎn)45度，設(shè)置虛線描邊，具體參數(shù)如下。繪制一個(gè)6*22的矩形，下方2個(gè)錨點(diǎn)各自向中間移動(dòng)1px,填充為線性漸變（#323232，Alphan:0—#9A9A9A,Alphan:100—#FFFFFF,Alphan:100）。按照刻度參考每隔一個(gè)依次排好。并打上速度數(shù)值。效果如下。（我這里使用的字體為montesrrat，字號(hào)大小為24)
接下來是指針，繪制14*264的矩形，通過調(diào)節(jié)上下錨點(diǎn)，得出如下圖形。填充線性漸變（#FFF1E5,Alphan:100—#989898,Alphan:100）再復(fù)制一層指針作為蒙版。在指針旁邊繪制一個(gè)矩形（大小隨意，能夠遮住半個(gè)指針即可）填充為線性漸變（#B39D85,Alphan:100—#FFF4E6,Alphan:100）選中兩個(gè)圖層執(zhí)行蒙版。得到整個(gè)完整指針。把新指針執(zhí)行圖層—拼合所選圖層。并添加高斯模糊數(shù)值為0.5。得到最終指針效果。
接著在中心位置繪制一個(gè)58*58的圓形，描邊為3，顏色為線性漸變（#B2B2B2,Alphan:100—#676767,Alphan:100—#E6E6E6,Alphan:100），再繪制一個(gè)44*44度圓形，描邊為1，顏色同樣漸變（#676767,Alphan:100—#FFFFFF,Alphan:100）
在花瓣找一張金屬質(zhì)感的圖片剪切進(jìn)去。再把指針跟中心原點(diǎn)打組，旋轉(zhuǎn)到自己想要的角度，并添加投影（#000000,Alphan40；位置：40,0，模糊4）最終完成指針效果如下。
繪制油量條：任意復(fù)制一份之前的圓形外框，描邊為8，色值#333333,Alphan100。利用剪刀工具剪出圓環(huán)底部空缺的圖形，減完后輪廓化。（減之前可以拉好參考線）最后添加一點(diǎn)內(nèi)陰影（顏色#FFFFFF,Alphan：20，位置0，1，模糊度：2）。
復(fù)制一層，用布爾運(yùn)算切掉一部分，填充從左到右漸變（#BEA073,Alphan:100—#CCC8C0,Alphan:100）并添加內(nèi)陰影（顏色#FFFFFF,Alphan:100，位置0，2，模糊度：3）。復(fù)制一層置于下方，添加高斯模糊，模糊度：10。并在油條的兩端添加2個(gè)矩形。大?。?*20，填充線性漸變（#323232,Alphan:100—#B2B2B2,Alphan:100—#808080,Alphan:100—#383838,Alphan:100—#333333,Alphan:100）位置可以自己把控，最終效果如下。
最后繪制表盤高光：繪制一個(gè)531*531的圓形，填充描邊都去掉，直接添加內(nèi)陰影（顏色：#FFFFFF,Alphan:100，位置：0，0，模糊度：30）原位復(fù)制一層，去掉內(nèi)陰影。2層執(zhí)行蒙版，蒙版類型為透明度蒙版，蒙版填充為100-0的透明度漸變。
再復(fù)制一層填充為徑向漸變（顏色為純白，透明度100-0），整體透明度為30。注意漸變位置。
同樣用圓形繪制一塊斜著的高光，填充為徑向漸變（顏色純白，透明度30-0），整體透明度再降低到20。利用蒙版剪切到表盤內(nèi)。最后再添加上文字和icon。km/h字號(hào)：24，E和F字號(hào)：20，里程數(shù)字字號(hào)：30
把儀表整體打組，復(fù)制一層，拼合成圖片用前面制作車模投影的方式制作出來投影。以同樣的方式完成轉(zhuǎn)速的繪制。接下來是頂托。繪制一個(gè)橢圓（記得備份后面做光用）：1092*223、用剪刀剪去上半部分。描邊填充為線性漸變（純白，不透明度0-100-0）
打開備份的圓形。在底下畫一個(gè)圓形，填充純色#FDF1E4,Alphan:100、兩層添加蒙版。然后再給上層圓形添加高斯模糊，數(shù)值為30。最終效果如下。
最后打上文字、檔位、還有其他信息。效果完成。（內(nèi)容很長，圖文教程略顯粗糙，有不明白的地方，可以留言私發(fā)、歡迎小伙伴們打卡。下次再見?。?/span>
Powered by Froala Editor
這家伙不是一般的懶
5
作品
7
粉絲
0
關(guān)注
分享能獲取更多贊？
密碼登錄
大牛，別默默的看了，快登錄幫我點(diǎn)評(píng)一下吧！:)
登錄 立即注冊(cè)