編者按：超精致圖標(biāo)教程第二彈！不同以往，@張小碗兒grace?同學(xué)今天的教程實(shí)實(shí)在在演示了專業(yè)UI設(shè)計(jì)師的繪制過(guò)程是怎樣的，你可以學(xué)習(xí)如何拆分一個(gè)物體以及建立規(guī)范的圖層分組，來(lái)練下手，絕對(duì)能讓你有全新的感受 >>>

源文件 微盤下載

強(qiáng)烈推薦大家關(guān)注小碗同學(xué)的設(shè)計(jì)師交流群：150327690

最終效果圖：

繪制Usb數(shù)據(jù)線中部

NO.1-1

首先新建一張紙

寬：800px 高：600px 分辨率：72像素/英寸 名稱：USB-test

NO.1-2

點(diǎn)擊選色工具中的前景色工具，輸入色值 282828

NO.1-3

繪制出Usb數(shù)據(jù)線的中部，這是這一步的最終效果圖…

先點(diǎn)擊前景色，色值：d3d3d3

然后點(diǎn)擊圓角矩形形狀工具, ps界面上方屬性欄顯示如下，半徑：16px；寬：138px；高：154px；

在屏幕中心創(chuàng)建圓角矩形形狀，圖層命名為“usb-中部”，右邊為圖層狀態(tài)。

下面要利用路徑相減功能，去掉剛才圖形上半部分的圓角。

在該圓角矩形形狀的路徑被選中的狀態(tài)下，再點(diǎn)擊直角矩形工具，在ps上方屬性欄上點(diǎn)擊紅色框內(nèi)的路徑選擇工具，選擇下拉菜單中的減去頂層形狀。

建立一個(gè)高：16px，寬138px的矩形，目的是減掉圓角矩形上半部分的圓角，下圖為放大效果：

單擊圖層 usb-中部，再點(diǎn)擊圖層界面下方的fx，選擇漸變疊加…

點(diǎn)擊前景色工具, 選擇色值：ffffff；

然后點(diǎn)擊圓形形狀工具, ps界面上方屬性欄顯示如下，半徑：6px；寬：138px；高：16 px；

數(shù)值選擇好后，將此圓角矩形形狀繪制在剛才usb-中部的上方位置，圖層命名為：“usb-中部-1”；具體看下圖：

單擊圖層 “usb-中部-1”，同上步驟，給usb-中部-1添加“漸變疊加”樣式。

混合模式：正常；不透明度64%；樣式：線性；角度：-90度；縮放：86%；

再單擊圖層 “usb-中部-1”，給usb-中部-1添加“描邊”樣式。

大小：正常；位置：內(nèi)部；混合樣式：正常；不透明度：100%；
填充類型：漸變；樣式：線性；角度：-90度；縮放：100%；

下面要給usb中部加一些高光，用來(lái)點(diǎn)睛
選擇矩形工具，寬：3px；高：124px；色值：ffffff；
將矩形繪制在下左方例圖紅框內(nèi)，圖層命名為：“usb-中部-高光1 ”；

單擊圖層 “usb-中部-高光1”，給該圖層加入“漸變疊加”樣式；

混合模式：正常；不透明度：100%；樣式：線性；角度：-90度；縮放：100%

在漸變這里注意一下，把右邊的透明度調(diào)成0%

點(diǎn)擊圖層“usb-中部-高光1”，將該圖層的填充調(diào)整為0%

將圖層 “usb-中部-高光1”復(fù)制，起名“usb-中部-高光-2”，并將“usb-中部-高光2”移動(dòng)到右側(cè)，如下圖顯示：

繪制Usb數(shù)據(jù)線下部

這是這一步的最終效果圖：

選擇圓角矩形工具，寬：48px 高：70px ；圓角半徑：16px；色值：c2c2c2；

數(shù)值設(shè)置好后，將該圓角矩形繪制在下圖位置，圖層命名為 “usb-下部” , 把圖層“usb-下部”放在“usb-中部”的下面：

下部的結(jié)構(gòu)和中部一樣，需要左右漸變樣式來(lái)完成，但是由于整體光從上面打下來(lái)，中部會(huì)給下部一個(gè)陰影，所以需要下部需要一個(gè)左右漸變和一個(gè)上下漸變來(lái)完成。

首先復(fù)制“usb-下部”圖層，改名為“usb-下部-左右漸變”；再右鍵“usb-下部-左右漸變”圖層，點(diǎn)擊創(chuàng)建剪切蒙版；

現(xiàn)在開始給“usb-下部-左右漸變”添加漸變樣式。

點(diǎn)擊“usb-下部-左右漸變”，在點(diǎn)擊fx，選擇其中的“漸變疊加”；
混合模式：正常；不透明度：100%；樣式：線性；角度：0度；縮放：100%；

復(fù)制“usb-下部”圖層，起名為“usb-下部-上下漸變”，放在“usb-下部-左右漸變”的上面；

再右鍵“usb-下部-左右漸變”圖層，點(diǎn)擊創(chuàng)建剪切蒙版：

現(xiàn)在開始給“usb-下部-上下漸變”添加漸變樣式。

點(diǎn)擊“usb-下部-上下漸變”，在點(diǎn)擊，選擇其中的“漸變疊加”

混合模式：正常；不透明度：29%；樣式：線性；角度：-90度；縮放：100%；

點(diǎn)擊“usb-下部-上下漸變”將它的填充改為：0%

繪制Usb數(shù)據(jù)線尾部

這是這一步的最終效果圖：

選擇圓角矩形工具，寬：20px 高：190px ；色值：c2c2c2；

數(shù)值設(shè)置好后，將該圓角矩形繪制在 下圖位置，圖層命名為 “usb-尾部” , 把圖層“usb-尾部”放在“usb-下部”的下面；

點(diǎn)“usb-尾部”圖層，再單擊圖層面板下面的添加矢量蒙版工具，圖層狀態(tài)變化如下圖：

再點(diǎn)擊工具欄里面的漸變工具，再點(diǎn)擊功能欄里紅色框的部分，彈出漸變界面，設(shè)置如下：

設(shè)置好漸變界面后，現(xiàn)在要開始給“usb-尾部”加垂直的漸變蒙版效果圖與圖層狀態(tài)顯示如下：

由于usb-尾部是一條圓柱體的線，所以我這里用內(nèi)發(fā)光的方式處理圓柱體結(jié)構(gòu)；首先選中“usb-尾部”，點(diǎn)擊fx，選擇內(nèi)發(fā)光樣式，結(jié)構(gòu)【混合模式：正常；雜色：0%；色值：4d4d4d；】

圖素【方法：柔和；源：邊緣；阻塞：0%；大小：8px；】 品質(zhì)【范圍：50%；抖動(dòng)：0%】

效果圖與圖層狀態(tài)如下：

整理圖層

由于圖層太多了，在這一步把圖層分類整理一下，先選中下圖選中的四個(gè)圖層，打成一個(gè)圖層文件夾（快捷鍵ctrl+G），起名“usb-中部”

同樣方法，選中下圖的三個(gè)圖層，打成一個(gè)圖層文件夾，起名“usb-下部”

為了強(qiáng)迫癥同學(xué)看著整齊哈，把尾部的一個(gè)圖層也打成圖層文件夾，起名usb-尾部；

繪制Usb數(shù)據(jù)上部

這是這一步的最終效果圖：

選擇圓角矩形工具，寬：106px 高：112px ；色值：afafaf；圓角：6px; 數(shù)值設(shè)置好后，將該圓角矩形繪制在下圖位置，圖層命名為 “usb-上部” , 把圖層“usb-上部”放在文件夾“usb-中部”的上面；

將圖層“usb-上部”復(fù)制，改名“usb-上部-漸變”，再給 “usb-上部-漸變”添加漸變樣式 ,混合模式：正常；不透明度：100%；樣式：線性；角度：90度；縮放：100%；

效果圖和圖層狀態(tài)如下：

下面要給usb-上部添加立面結(jié)構(gòu)，首先點(diǎn)擊圓角矩形工具，寬：6px；高：106px；半徑：2px；色值：454545；

現(xiàn)在要給“usb-上部-左”添加漸變樣式；混合模式：正常；不透明度100%；樣式：漸變；角度：0度；縮放：100%；

再調(diào)整“usb-上部-左”的填充，填充：0%

再右鍵“usb-上部-左”圖層，選擇創(chuàng)建剪切蒙版，圖層狀態(tài)如下：

用同樣的方法，制作出右邊的立面，圖層狀態(tài)和效果圖如下：

選擇圓角矩形工具，寬：6px；高：106px；半徑：6px； 色值：ffffff ;圖層命名為：“usb-上部-左-光”

選中“usb-上部-左-光”圖層，圖層樣式：柔光，不透明度：15%，右鍵點(diǎn)擊創(chuàng)建剪切蒙版；

將“usb-上部-左-光”復(fù)制，命名為“usb-上部-右-光”然后將其移動(dòng)到右邊，如圖：

現(xiàn)在要給金屬部分加材質(zhì)。

將“usb-上部”圖層復(fù)制放在“usb-上部-右-光”的上面；命名為“usb-上部-材質(zhì)”

選中“usb-上部-材質(zhì)”圖層，再點(diǎn)擊濾鏡；

數(shù)量：16%；分布：平均分布；單色

把調(diào)節(jié)“usb-上部-材質(zhì)”的圖層樣式調(diào)整為疊加；不透明度：30%；

現(xiàn)在要給金屬部分添加細(xì)節(jié)部分啦！

選擇圓角矩形工具，寬：28px；高：22px；半徑：6px；色值：848589；圖層命名：“usb-上部-左-細(xì)節(jié)”，將此形狀繪制在下圖位置；

給“usb-上部-左-細(xì)節(jié)”添加圖層樣式（斜面浮雕、描邊、內(nèi)陰影）；

斜面和浮雕（樣式：外斜面；方法：雕刻柔和；深度：584%；方向：上；大小：1px；軟化：0px；）（角度：90度；高度30度；高光模式：濾色-不透明度：0%；陰影模式：正常-色值：ffffff；不透明度：50%）

描邊（大小：1px；位置：外部；混合模式：正常；不透明度：15%；顏色：ffffff；）

內(nèi)陰影（混合模式：正片疊底；顏色：000000；不透明度：18%；角度：90度；距離：3px；阻塞：16%；大小：2px；）

選擇矩形工具，寬：10px；高：24px；色值：e3d514; 圖層命名：“usb-中部-左-細(xì)節(jié)-線”；將該形狀繪制在下圖的地方；

給“usb-上部-左-細(xì)節(jié)。

混合模式：正常；不透明度：76；樣式：線性；角度：0度；縮放：100%；

再給“usb-上部-左-細(xì)節(jié)-線”添加描邊樣式。

大小：1px；位置：外部；混合模式：正常；不透明度：44%；

數(shù)值調(diào)節(jié)好后，效果圖和圖層狀態(tài)如下：

右鍵“usb-上部-左-細(xì)節(jié)-線”選擇創(chuàng)建剪切蒙版，效果圖如右側(cè)：

用同樣的方法，制作出右邊結(jié)構(gòu)。效果圖和圖層狀態(tài)如下：

選擇圓角矩形工具，寬：30px , 高:8px , 半徑:10px , 色值:848589；數(shù)值設(shè)置好后，將形狀繪制在下圖位置，圖層命名為：“usb-上部-下-細(xì)節(jié)”

下面要給“usb-上部-下-細(xì)節(jié)”添加圖層樣式（斜面浮雕、描邊、內(nèi)陰影）。

樣式：外斜面；方法：雕刻柔和；深度：584%；方向：上；大小：1px；軟化：0px；

角度：90度；高度：30%；高光模式：濾色；色值：ffffff；不透明度：0%；

陰影模式：正常；色值：ffffff；不透明度：50%；

樣式：描邊；大小：1px；位置：外部；混合模式：正常；不透明度：15%；顏色：ffffff；

樣式：內(nèi)陰影；混合模式：正片疊底；不透明度：18%；角度：90度；距離：3px；阻塞：16%；大小：2px；

數(shù)值都設(shè)置好后，效果圖和圖層狀態(tài)如下：

現(xiàn)在要做金屬部分的平面部分

選擇圓角矩形工具，寬：104px；高:12px; 半徑：12px； 色值：787878； 圖層命名為“usb-上部-平面” 數(shù)值設(shè)置好后，將形狀繪制在下圖位置；

給“usb-上部-平面”加描邊樣式，大小：1px；位置：外部；混合模式：正常；不透明度：100%；顏色：bcbcbb；

現(xiàn)在要給“usb-上部-平面”加一條細(xì)高光。

選擇矩形工具，寬：94px；高：1px；色值：ffffff；圖層命名為：“usb-上部-平面-高光”

再給“usb-上部-平面-高光”添加漸變樣式，混合模式：正常；不透明度：100%；樣式：線性；角度：0度；縮放：100%；

再將該圖層上方的填充值調(diào)整為0%

這一步雖然只畫了一條高光，但是不要小看這一條高光，下面給大家看一下對(duì)比圖：

現(xiàn)在我們要做金屬平面結(jié)構(gòu)里面的部分

選擇矩形工具，寬：98px；高：8px；色值：adadad; 數(shù)值設(shè)置好后，繪制在下圖位置，圖層命名為：“usb-上部-平面-內(nèi)部”

給“usb-上部-平面-內(nèi)部”加添漸變樣式，混合模式：正常；不透明度：100%；樣式：線性；角度：90度；縮放：100%；

再選擇矩形工具,寬：98px；高：3px；色值：e4e4e4; 數(shù)值設(shè)置好后，繪制如下圖，圖層命名為“ usb-上部-平面-內(nèi)平面”；

然后將“usb-上部-平面-內(nèi)平面”的左上角路徑點(diǎn)選中，向右移動(dòng)2px；同樣方法，將右上的點(diǎn)向左調(diào)節(jié)2px；

調(diào)節(jié)好后，效果圖如下：

為了提高細(xì)節(jié)品質(zhì)，我們給內(nèi)平面也加 1px 的高光；

選擇矩形工具，寬：98px；高：1px； 色值：ffffff；繪制如下，圖層命名為“usb-上部-平面-內(nèi)高光”

現(xiàn)在要做內(nèi)部的里面細(xì)節(jié)

選擇矩形工具，寬：12px；高：6px；色值：e1e1e1;繪制在下圖位置；圖層命名為：“usb-上部-平面-立面1”

將“usb-上部-平面-立面1”的圖層樣式改為：正片疊底

接著，用同樣方法制作出“usb-上部-平面-立面2”、“usb-上部-平面-立面3”、”usb-上部-平面-立面4”；“usb-上部-平面-立面2”、“usb-上部-平面-立面3”的寬：12px；高：4px；

整體效果圖和圖層狀態(tài)如下：

現(xiàn)在給金屬部分增加一個(gè)細(xì)節(jié)部分，選擇矩形工具寬：94px；高：1px；色值：868686；

圖層命名為“usb-上部-金屬-細(xì)節(jié)”，然后將該圖層的透明度改成30%；效果圖如右下：

整理一下圖層，選中和上部相關(guān)的所有圖層，ctrl+g打組文件夾，命名為“usb-上部”

用路徑組合的方法，繪制出usb-形狀，色值：909090；最后這一步對(duì)路徑工具使用不熟練的朋友可以多看看關(guān)于路徑相關(guān)的教程，多多練習(xí)。

【能搞定的同學(xué)給你送點(diǎn)福利】

千萬(wàn)千萬(wàn)低調(diào)收藏馬克：
《強(qiáng)烈推薦：90%的人都不知道的電影資源下載站》

邊放松邊提高審美的電影大片：
《看電影漲姿勢(shì)！有哪些電影適合推薦給學(xué)藝術(shù)的人看？》
《看電影漲姿勢(shì)！哪些電影適合推薦給學(xué)藝術(shù)的人看？（二）》

投稿者：@張小碗兒grace

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量90萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
官方微信：想在手機(jī)上、被窩里獲取設(shè)計(jì)教程和各種意想不到的"福利"嗎？添加優(yōu)設(shè)哥微信號(hào)：youshege