本教程主要使用Photoshop繪制立體感十足的儀表盤擬物圖標(biāo)，非常逼真的一個擬物圖標(biāo)，推薦給朋友學(xué)習(xí)，希望大家可以喜歡。

先看看效果圖：

步驟 01

新建文檔，大小 800*600px ,使用漸變工具填充畫布，漸變數(shù)值 #ffffff~#c3c3c3

步驟 02

使用圓角矩形工具繪制儀整個圖標(biāo)的范圍，尺寸 410px ，圓角 90px ，并填充漸變顏色 #403b41~#76716d ，記得整個圖形要于畫布居中擺放，命名圖層【圖標(biāo)底】

步驟 03

使用橢圓工具填充顏色 #f3dec2，并設(shè)置羽化 10px ，制作兩側(cè)高光

步驟 04

使用矩形工具填充漸變，顏色 #100f0f，漸變不透明度100%~0%

設(shè)置底部陰影，通過蒙版控制陰影在圖標(biāo)內(nèi)，設(shè)置圖層模式為疊加，不透明度40%;

步驟 05

使用鋼筆工具、矩形工具及及橢圓工具通過填充、羽化、圖層樣式設(shè)置分別繪制 3 個頂部高光;

頂部第 1 層高光：漸變顏色為 #f3dec2 ，漸變不透明度為 30%~100%~30%，羽化 6px ，混合模式為濾色，不透明度 70%

頂部第 2 層高光：寬357px，高30px，圓角 10px ，漸變顏色 #f6ead9，漸變不透明度為 30%~100%~30%，羽化 6.2px ，混合模式為濾色，不透明度 55%

頂部第 3 層高光：漸變顏色 #f6ead9，漸變不透明度為 100%~30%，羽化 6.2px ，混合模式為濾色，不透明度 40%

步驟 06

使用鋼筆工具繪制上方四條圖標(biāo)紋路(兩側(cè)需向內(nèi)凹陷)，鏡像得到下方四條紋路，填充黑色，復(fù)制一遍紋路圖層填充改為0，并給該圖層添加樣式制作紋路光影;

投影1：顏色 #fffedf，混合模式濾色，不透明度 30% ，角度 90 度，距離 2px

投影2：顏色 #b4b4b4，混合模式濾色，不透明度 10%，角度 -90 度，距離 2px

步驟 07

回到【圖標(biāo)底】圖層，建立蒙版并利用多邊形套索工具選中紋路兩側(cè)凹槽部分填充黑色(蒙版的黑遮白顯)進(jìn)行遮蓋;

步驟 08

使用橢圓工具繪制圓盤底部，直徑 320px ，描邊 1px，添加圖層樣式如圖

填充漸變：顏色 #b1a590~785f4b

描邊漸變：顏色 #050505~#050505~#ffffff，不透明度 #100%~50%~70%，位置 0%~38%~100%

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

內(nèi)陰影：混合模式濾色，顏色 #f7f73，不透明度 40%，角度 90，距離 4px，阻塞 4%，大小 4px

內(nèi)發(fā)光：混合模式濾色，顏色 #f6eee2，不透明度 10%，方法柔和，大小 10px，范圍 50%

步驟 09

使用橢圓工具制作一個【圓圈黑邊】圖層，再通過橢圓工具矩形工具利用布爾運算制作一個【上半環(huán)1】圖層，給該圖層添加圖層樣式;

外圓直徑 290px，內(nèi)圓直徑 234px

【上半環(huán)1】填充顏色 #a3c8d0

內(nèi)陰影 1：混合模式正片疊底，顏色 #012649，不透明度50%，角度-90，距離3px，大小3px

內(nèi)陰影 2：混合模式濾色，顏色#ddf7fd，角度90，距離5px，大小4px

步驟 10

同樣使用橢圓工具矩形工具通過布爾運算制作【下半環(huán)1】圖層，，給該圖層添加圖層樣式;

填充顏色：#603723

內(nèi)陰影 1：混合模式濾色，顏色#ff9f39，不透明度78%，角度90，距離2px，大小4px

內(nèi)陰影 2：混合模式正片疊底，顏色#481d00，不透明度90%，角度-90，距離6px，大小3px

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

步驟 11

使用矩形工具和多邊形工具繪制表盤刻度，旋轉(zhuǎn)調(diào)整放置合適位置，上方刻度填充并添加描邊樣式，兩側(cè)矩形填充并添加投影樣式;

【刻度1】

填充顏色 #effefd

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

【白色矩形1】

填充顏色 #f1e4d1

投影：混合模式正片疊底，顏色#3b1400，距離1px，大小1px

步驟 12

同樣使用橢圓工具矩形工具通過布爾運算制作中間環(huán)形的上、下半邊，給圖層添加圖層樣式;

【上半環(huán)2】

內(nèi)陰影：混合模式濾色，顏色#e4f4fe，不透明度90，角度-90，距離1px，大小1px

【下半環(huán)2】

內(nèi)陰影1：混合模式變暗，顏色#160a00，不透明度66%，角度-90，距離7px，大小5px

內(nèi)陰影2：混合模式濾色，顏色#e65b00，角度90，距離1px，大小1px

步驟 13

使用矩形工具和多邊形工具繪制表盤刻度，旋轉(zhuǎn)調(diào)整放置合適位置，給相應(yīng)圖層添加圖層樣式;

【藍(lán)色部分刻度】

填充顏色#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

內(nèi)陰影1：混合模式正片疊底，顏色#034573，不透明度70%，角度90，距離7px，大小3px

內(nèi)陰影2：混合模式正片疊底，顏色#160a00，不透明度80%，角度-90，距離8px，大小10px

步驟 15

使用橢圓工具制作儀表盤的中間圓圈，填充顏色區(qū)分上下部分并添加圖層樣式，使用矩形工具制作總監(jiān)白色橫條，添加圖層樣式如圖

【中間圓圈】

直徑190px，漸變#381400~#544238#cae7fa~#8fc4e6(48%處有兩個色標(biāo))

內(nèi)陰影1：混合模式正片疊底，顏色#1870ad，不透明度70%，角度90，距離6px，大小10px

內(nèi)陰影2：混合模式正片疊底，顏色#391c03，不透明度70%，角度-90，距離6px，大小10px

內(nèi)發(fā)光：混合模式濾色，不透明度20%，顏色#ff8d36，方法柔和，大小40px，范圍50%

【白色矩形】寬190px，高3px，填充#fdf9f2

投影：混合模式正片疊底，顏色#3b1400，不透明度50%，角度90，距離1px，大小1px

步驟 16

使用文字工具和矩形工具繪制表盤上的數(shù)字及橫線內(nèi)容，添加圖層樣式如圖所示

【藍(lán)色區(qū)域橫線】

寬79px，高5px，圓角2.5px

【藍(lán)色區(qū)域數(shù)字】

字體Rodowel Condensed，大小18點，顏色#f5f7fc

描邊1px，位置外部，不透明度80，顏色#add2e5

【棕色區(qū)域橫線】

寬80px，高5px，圓角2.5px，填充#c99d7d，描邊#f5ccae

【棕色區(qū)域數(shù)字】

字體Rodowel Condensed，大小18點，顏色#f3dac8

描邊1px，位置外部，不透明度60，顏色#432506

步驟 17

使用多邊形工具通過布爾運算制作上方黃色三角形，添加圖層樣式，使用矩形工具和鋼筆工具制作中間黃色橫杠，添加圖層樣式;

【黃色三角形】

漸變#e57100~#ffcf4f

外發(fā)光：混合模式疊加，不透明度60%，#054656，大小1px，范圍50%

投影：混合模式正片疊底，顏色#364252，不透明度50%，角度90，距離2px，擴(kuò)展1%，大小1px

【黃色橫杠】

漸變#ca5400~#f56701~#fb9101，位置0%~24%~100%

投影1：混合模式濾色，顏色#edba6a，角度-90，不透明度50，距離1px，擴(kuò)展1%，大小1px

投影2：混合模式正片疊底，顏色#5c2500，角度90，距離1px，擴(kuò)展1%，大小1px

步驟 18

使用橢圓工具給中間圓圈再加一層陰影效果，結(jié)合布爾運算和蒙版給外圈加一層反光效果;

【陰影】

直徑190px

內(nèi)發(fā)光：混合模式正片疊底，顏色#000000，大小10px，范圍50%

【底部光影】

直徑290px

漸變：顏色#ffffff，不透明度100%~100%~0%，位置0%~70%~100%

步驟 19

使用橢圓工具再結(jié)合布爾運算或蒙版分別一一制作儀表盤的高光、反光;

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

【中間光圈】混合模式濾色，不透明度60%

【上高光】混合模式柔光

【兩側(cè)反光】混合模式濾色，不透明度90%

【兩側(cè)高光】混合模式濾色，不透明度95%

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

【光影邊緣線】混合模式柔光，不透明度60%

步驟 20

使用橢圓工具和鋼筆工具繪制螺絲底部和光影范圍，使用矩形工具繪制螺絲的十字凹槽，并添加圖層樣式。上方螺絲做完一個再復(fù)制一個，下方同理制作一個然后復(fù)制。

【螺絲底部圓圈】

直徑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%

內(nèi)陰影：混合模式正片疊底，顏色#020202，不透明度100%，角度90°，距離2 px，大小1 px

外發(fā)光：混合模式濾色，顏色#ffffff，不透明度40%，大小1 px

【橫向圓角矩形】

寬5 px，高20 px，圓角大小2 px

填充顏色#000000，描邊大小1 px，描邊顏色#b4aaa0~#e7dbdb，不透明度100%

外發(fā)光：混合模式濾色，顏色#ffffff，不透明度100%，雜色3 %，大小1 px

步驟 21

使用矩形工具并添加效果制作圖標(biāo)投影，回到紋路光影圖層通過蒙版對紋路受光處和陰影處的高光效果進(jìn)行減淡;

底部陰影1

寬385px，高352px，漸變#403b41~#76716d，羽化9px

底部陰影2

寬384px，高408px，圓角90px，顏色#626262，羽化2px

步驟 22

ctrl+shift+alt+e 蓋印圖層，右鍵將該圖層轉(zhuǎn)為智能對象，點擊濾鏡窗口進(jìn)行添加雜色，數(shù)量1px，平均分布，并利用蒙版遮住該效果對中間圓盤的影響。

這樣，一個儀表盤就做好啦。

最終效果：

最新評論