計算機輔助平面設(shè)計第五章用戶界面設(shè)計課件

1、第五章用戶界面設(shè)計2本章導讀 UI 即user interface（用戶界面）的簡稱。UI 設(shè)計是指對軟件的人機交互、操作邏輯、界面美觀的整體設(shè)計。好的UI 設(shè)計不僅使軟件變得有個性、有品位，還可使軟件的操作變得舒適、簡單、自由，充分體現(xiàn)軟件的定位和特點。 從字面上看，UI 由用戶與界面兩個部分組成，但實際上還包括用戶與界面之間的交互關(guān)系。學習目標 通過對UI 設(shè)計圖標的基本原則和實例的學習，對UI 設(shè)計有一個初步的認識，應能鑒UI 設(shè)計圖標的優(yōu)劣，基本掌握UI 圖標設(shè)計的實用功能與設(shè)計美感兼顧的原則。第一節(jié)用戶界面設(shè)計的方向和原則一、用戶界面設(shè)計的方向 近幾年，UI 這個新興詞在設(shè)計領(lǐng)域誕生

2、，在短短的幾年時間里UI 設(shè)計師越來越多，擁有UI 設(shè)計部門的企業(yè)也越來越多，各大院校也設(shè)立了與UI 設(shè)計相關(guān)的專業(yè)和課程。UI 設(shè)計主要有三個方向，即用戶研究、交互設(shè)計、界面設(shè)計。1. 用戶研究 用戶研究包含兩個方面：一是可用性工程學（usability engineering），研究如何提高產(chǎn)品的可用性，使系統(tǒng)的設(shè)計更容易被人使用、學習和記憶；二是通過可用性工程學的研究，發(fā)掘用戶的潛在需求，為技術(shù)創(chuàng)新提供另一種思路和方法。3 用戶研究是一個跨學科的專業(yè)，涉及可用性工程學、人類功效學、心理學、市場研究學、教育學、設(shè)計學等學科。用戶研究技術(shù)是站在人文學科的角度來研究產(chǎn)品，站在用戶的角度介入到產(chǎn)

3、品的開發(fā)和設(shè)計中。 用戶研究通過對用戶的工作環(huán)境、產(chǎn)品的使用習慣等進行研究，使得在產(chǎn)品開發(fā)的前期能夠?qū)⒂脩魧τ诋a(chǎn)品功能的期望、對設(shè)計和外觀方面的要求融入產(chǎn)品的開發(fā)過程中去，從而幫助企業(yè)完善產(chǎn)品設(shè)計或者探索一個新產(chǎn)品概念。 用戶研究是得到用戶需求和反饋的途徑，也是檢驗界面與交互設(shè)計是否合理的重要標準2. 交互設(shè)計 交互設(shè)計是指人與機之間的交互工程，在過去交互設(shè)計也由程序員來做，但程序員擅長編碼，而不善于與最終用戶交互。因此，很多軟件雖然功能比較齊全，但是在交互方面的設(shè)計很粗糙，煩瑣難用，學習困難。如使用這樣的軟件，不是使人聰明與進步，而是讓人感到愚弄與羞辱。許多人因為不能操作計算機軟件而下崗失業(yè)

4、，這樣的交互使計算機成為讓人恐懼的科技怪獸。于是人們把交互設(shè)計從程序員的工作中分離出來而單獨設(shè)為一個學科，也就是人機交互設(shè)計。其目的在于加強軟件的易用、易學、易理解，使計算機真正成為為人類服務(wù)的工具。3. 界面設(shè)計 在漫長的軟件發(fā)展中，界面設(shè)計工作一直沒有被重視起來。做界面設(shè)計的人被稱為“美工”。其實軟件界面設(shè)計就像工業(yè)產(chǎn)品中的工業(yè)造型設(shè)計一樣，是產(chǎn)品的重要賣點。4一個友好、美觀的界面會給人帶來舒適的視覺享受，拉近人與計算機的距離，為商家創(chuàng)造賣點。界面設(shè)計不是單純的美術(shù)繪畫，需要定位使用者、使用環(huán)境、使用方式并為最終用戶而設(shè)計，是純粹的科學性的藝術(shù)設(shè)計。檢驗一個界面的標準，既不是某個項目開發(fā)組

5、領(lǐng)導的意見，也不是項目成員投票的結(jié)果，而是最終用戶的感受。所以界面設(shè)計應與用戶研究緊密結(jié)合，是一個不斷為最終用戶設(shè)計滿意視覺效果的過程。 界面設(shè)計應堅持以用戶體驗為中心的設(shè)計原則，界面直觀、簡潔，操作方便快捷，用戶接觸軟件后對界面上對應的功能一目了然，不需要太多培訓就可以方便地使用本應用系統(tǒng)。 字體保持字體及顏色應一致，避免一個主題出現(xiàn)多種字體；對不可修改的字段，統(tǒng)一用灰色文字顯示。保持頁面內(nèi)元素對齊方式的一致，如無特殊情況應避免同一頁面中出現(xiàn)多種數(shù)據(jù)對齊方式。在包含必填項與選填項的頁面中，必須在必填項旁邊給出醒目標識（*）。各類型數(shù)據(jù)輸入需限制文本類型，并做格式校驗，如電話號碼輸入時只允許輸

6、入數(shù)字，郵箱地址需要包含 等，在用戶輸入有誤時給出明確的提示。對可單擊的按鈕、鏈接需要切換鼠標手勢至手型；保持功能及內(nèi)容描述的一致，避免同一功能的描述使用多個詞匯，如編輯和修改、新增和增加、刪除和清除混用等。在項目開發(fā)階段宜建立一個產(chǎn)品詞典，其包括產(chǎn)品中常用的術(shù)語及描述，設(shè)計或開發(fā)人員應嚴格按照產(chǎn)品詞典中的術(shù)語詞匯來展示文字信息。二、用戶界面設(shè)計的原則UI 設(shè)計的原則如下：1. 準確性原則使用一致的標記、標準縮寫和顏色，顯示信息的含義應非常明確，用戶無須再參考其他信息源。5顯示有意義的出錯信息，而不是單純的程序錯誤代碼。避免使用文本輸入框來放置不可編輯的文字內(nèi)容，不要將文本輸入框當成標簽使用。

7、使用縮進和文本來輔助理解。使用用戶語言詞匯，而不是單純的專業(yè)計算機術(shù)語。高效地使用顯示器的顯示空間，但應避免空間過于擁擠。保持語言的一致性，如“確定”對應“取消”，“是”對應“否”。2. 布局合理化原則 在進行UI 設(shè)計時需要充分考慮布局的合理化問題，遵循用戶從上而下，自左向右瀏覽、操作的習慣，避免常用業(yè)務(wù)功能按鍵排列過于分散，而造成用戶鼠標移動距離過長的弊端。多做“減法”運算，將不常用的功能區(qū)塊隱藏，以保持界面的簡潔，使用戶專注于主要業(yè)務(wù)操作流程，有利于提高軟件的易用性及可用性。第二節(jié)記事本APP 圖標設(shè)計 本節(jié)將制作手機中擬物化APP 圖標（一枚記事本APP 圖標）。在制作過程中可以掌握編

8、輯、定義圖案的技巧，可以應用到網(wǎng)頁、手機界面的背景中。通過“添加雜色”與“動感模糊”制作紋理效果；通過學習“濾鏡”與“圖層樣式”的應用方法，做出逼真的擬物效果。1. 新建文件 在Photoshop CS6 中新建文件，其名稱為“記事本”，大小為520 像素520 像素，顏色模式為RGB，分辨率為72 dpi。62. 對背景應用漸變 在背景圖層上方新建圖層，單擊“創(chuàng)建新的填充或調(diào)整圖層”按鈕，在彈出的下拉列表框中選擇“漸變”選項，彈出“漸變編輯器”窗口（圖5-2），按照圖示進行設(shè)置，完成后單擊“確定”按鈕，得到“漸變填充1”圖層，漸變填充的具體設(shè)置如圖5-1 所示。漸變顏色的設(shè)置如圖5-2 所示

9、。圖5-1 “漸變填充”對話框圖5-2 “漸變編輯器”窗口注：（R ：70，G ：38，B ：19）（R ：139，G ：112，B ：92）圖5-3 對2 像素2 像素的矩形選區(qū)填充白色73. 為背景添加圖案 為背景添加方格形狀的圖案，使背景更豐富。首先新建大小為3 像素3 像素的文件，放大到3 200 倍并填充黑色，然后在畫面中創(chuàng)建寬為2 像素、高為2 像素的矩形選區(qū)，并填充白色，如圖5-3 所示。 取消選區(qū)并執(zhí)行“編輯”“定義圖案”命令，設(shè)置圖案的名稱為“方格”后單擊“確定”按鈕。返回到記事本文件，雙擊“漸變填充1”圖層，打開“圖層樣式“對話框，選擇“圖案疊加”選項，添加定義好的方格圖案

10、，具體設(shè)置如圖5-4 所示。添加圖層樣式后的背景效果及100狀態(tài)下的細節(jié)如圖5-5 所示圖5-4 “圖層疊加”選項卡圖5-5 添加圖層樣式后的背景效果及100% 狀態(tài)下的細節(jié)84. 為背景增加光感 下面為背景增加光感，使背景更形象生動。在圖層上方新建圖層并命名為light，使用橢圓選框工具在畫面中繪制一個正圓選框，如圖5-6 所示。 使用漸變工具，使顏色由白色到透明漸變，漸變類型為徑向漸變，在圓形選框中心向下拖動漸變工具，取消選區(qū)，將light 圖層的“圖層模式”設(shè)置為“疊加”，圖層不透明度調(diào)整為50，如圖5-7 所示。圖5-6 圓形選取圖5-7 添加漸變后的效果95. 繪制圖標底座頂部在畫面

11、中心位置繪制圓角為35 像素的圓角正方形，雙擊“圓角矩形1”圖層，添加圖層樣式，選擇“漸變疊加”選項，具體的設(shè)置如圖5-8 所示，漸變顏色設(shè)置如圖5-9 所示。圖5-8 圓角正方形“漸變疊加”參數(shù)設(shè)置圖5-9 “漸變編輯器”參數(shù)設(shè)置注：（R ：105，G ：53，B ：25）（R ：175，G ：99，B ：43）10 選擇“內(nèi)陰影”選項，將混合模式設(shè)為“線性減淡”，不透明度設(shè)為20%，距離、阻塞均為0，大小為10，如圖5-10 所示。圖5-10“內(nèi)陰影”參數(shù)設(shè)置11 選擇“內(nèi)發(fā)光”選項，將混合模式為“線性減淡”，不透明度設(shè)為30%，大小為2 像素，具體設(shè)置如圖5-11 所示。圖5-11“內(nèi)發(fā)

12、光”參數(shù)設(shè)置126. 制作木材質(zhì) 在“圓角矩形1”圖層上方新建圖層并將其命名為“木材質(zhì)1”，使用矩形選框工具繪制一個正方形選框，并為其填充黑色， 取消選區(qū)， 如圖5-12 所示。 執(zhí)行“濾鏡”“雜色”“添加雜色”命令，打開“添加雜色”對話框，具體的設(shè)置如圖5-13所示。 執(zhí)行“濾鏡”“模糊”“動感模糊” 命令， 打開“ 動感模糊”對話框，具體設(shè)置如圖5-14所示。圖5-12填充黑色選框圖5-13“添加雜色“參數(shù)設(shè)置圖5-14“動感模糊”參數(shù)設(shè)置13 為調(diào)出木紋顏色，執(zhí)行“圖像”“調(diào)整”“色彩平衡”命令，打開“色彩平衡”對話框，具體的設(shè)置如圖5-15 所示。 為加強對比度，執(zhí)行“圖像”“調(diào)整”“

13、色階”命令，打開“色階”對話框。其設(shè)置如圖5-16所示。圖5-15“色彩平衡”參數(shù)設(shè)置圖5-16“色階”參數(shù)設(shè)置14 最后，去除圓角矩形以外的多余紋理，按Ctrl 鍵并單擊“圓角矩形1”圖層縮略圖，將圓角矩形載入選區(qū)，選擇“木材質(zhì)1” 圖層，按快捷鍵Ctrl+Shift + I 反選，再按Delete 鍵刪除多余紋理，取消選區(qū)。其效果如圖5-17 所示。圖5-17圓角矩形最終的效果7. 制作凹槽描邊 選擇圓角矩形工具，繪制一個圓角為33 像素的正圓角矩形，得到“圓角矩形2”圖層，雙擊“圓角矩形2”圖層，彈出“圖層樣式”對話框，選擇“混合選項：默認”選項，將填充不透明度調(diào)整為0 ；選擇“描邊”選

14、項，其具體設(shè)置如圖5-18 所示。圖5-18“描邊”參數(shù)設(shè)置圖5-18“描邊”參數(shù)設(shè)置158. 制作凹槽復制“圓角矩形2”圖層，在得到的圖層上右擊，再在彈出的快捷菜單中選擇“清除圖層樣式”選項，然后在圖層上雙擊，打開“圖層樣式”對話框，將“混合選項：默認”選項中的“填充不透明度”設(shè)置為0。選擇“內(nèi)陰影”選項，具體設(shè)置如圖5-19 所示。圖5-19正圓角矩形“內(nèi)陰影”參數(shù)設(shè)置16為了體現(xiàn)凹槽的邊緣，選擇 外發(fā)光 選項，具體設(shè)置圖5-20 所示。圖5-20正圓角矩形“外發(fā)光”參數(shù)設(shè)置17為了加深凹槽的陰影部分，選擇“內(nèi)發(fā)光”選項，具體設(shè)置如圖5-21 所示。圖5-21正圓角矩形“內(nèi)發(fā)光”參數(shù)設(shè)置1

15、8為了加深凹槽內(nèi)陰影的層次感，選擇“描邊”選項，具體設(shè)置如圖5-22 所示圖5-22正圓角矩形“描邊”參數(shù)設(shè)置19為添加凹槽的高光，選擇 投影 選項，其具體設(shè)置和效果如圖5-23、圖5-24 所示圖5-23“投影”參數(shù)設(shè)置圖5-24處理邊框后的效果209. 制作圖標的底部 復制“圓角矩形1”圖層，并將其命名為bottom，將bottom 圖層放至“圓角矩形1”圖層的下方，并清除圖層樣式。然后雙擊bottom 圖層，彈出“圖層樣式”對話框，選擇“顏色疊加”選項，設(shè)置顏色值為R ：128，G ：56，B ：14，具體設(shè)置如圖5-25所示。圖5-25“顏色疊加”設(shè)置21 選擇“漸變疊加”選項，設(shè)置漸

16、變顏色為1（R ：109，G ：47，B ：11），2（R ：250，G ：131，B ：28），3（R ：142，G ：62，B ：16），4（R ：109，G ：47，B ：11），5（R ：142，G ：62，B ：16），6（R ：250，G ：131，B ：28），7（R ：109，G ：47，B ：11），具體設(shè)置如圖5-26 所示。圖5-26“漸變疊加”設(shè)置22 選擇“內(nèi)陰影”選項，將混合模式設(shè)為“線性減淡”，不透明度設(shè)為20%，角度為90，距離、阻塞均為0，大小為10 像素，雜色為0。再選擇 “投影”選項，具體設(shè)置如圖5-27 所示。圖5-27“投影”參數(shù)設(shè)置23 最后，復制“

17、木材質(zhì)1”圖層并將其命名為“木材質(zhì)2”，然后將其放到bottom 圖層上方，其效果如圖5-28 所示。10. 制作筆記本內(nèi)頁 返回圖層最上方，使用圓角矩形工具在凹槽內(nèi)繪制圓角半徑為33 像素的正圓角矩形，并將其命名為“內(nèi)頁1”，設(shè)置其顏色數(shù)值為R ：233，G ：233，B ：233。其效果如圖5-29 所示。. 復制“內(nèi)頁1”圖層，得到“內(nèi)頁1”副本圖層，按快捷鍵Ctrl+T 調(diào)出“變換”命令，向上縮小圖形的高度，并打開“圖層樣式”對話框，選擇“投影”選項，將不透明度設(shè)為55%，角度為90，距離為2 像素，擴展為0，大小為2 像素，得到圖5-30 所示的效果。依照以上思路，復制兩遍“內(nèi)頁1”

18、副本圖層，并調(diào)整這兩個圖層的高度。圖5-29添加內(nèi)頁圖層后的效果圖5-30最終的效果圖5-28復制圖層后的效果2411. 制作翻頁效果 使用鋼筆工具繪制內(nèi)頁右下角頁角的翻頁圖形，并將圖層命名為“翻頁”，雙擊該圖層，打開“圖層樣式”對話框，設(shè)置“外發(fā)光”選項，具體設(shè)置如圖5-31 所示。圖5-31設(shè)置“外發(fā)光”選項25 在“翻頁”圖層下方新建名為 翻頁投影 的圖層，使用鋼筆工具摳出“翻頁投影”選區(qū)，選擇漸變工具，并設(shè)置為黑白漸變，漸變類型為 線性漸變，在選區(qū)從左上角向右下角拖動漸變工具，最后將“翻頁陰影“圖層模式設(shè)為“正片疊底”，不透明度設(shè)為67%。為增加效果，可用加深、減淡工具增加厚度感，得到

19、圖5-32 所示的效果。12. 制作封面磨砂效果 下面來制作筆記本封面的磨砂效果。復制“內(nèi)頁1”圖層并將其命名為“質(zhì)感”，將其放至圖層最上方，首先清除圖層樣式，然后執(zhí)行“濾鏡”“雜色”“添加雜色”命令，打開“添加雜色”對話框，設(shè)置數(shù)量為100%，選擇“高斯分布”，并將圖層的不透明度設(shè)為5%，得到圖5-33 所示的效果。圖5-32添加投影后的效果圖5-33添加雜色后的效果2613. 制作封面磨損效果 新建圖層，并將其命名為“磨損”，使用畫筆工具，調(diào)整畫筆的大小，顏色為白色，硬度為0。在封面范圍內(nèi)涂抹，然后執(zhí)行“濾鏡”“模糊”“高斯模糊”命令，設(shè)置模糊半徑為2 像素，圖層不透明度為60%。其效果如

20、圖5-34 所示。14. 制作封面裝飾圖形1）制作封面的左邊條 使用圓角矩形工具繪制圓角半徑為33 像素的正圓角矩形，顏色數(shù)值為R ：191，G ：70，B ：41，結(jié)合使用鋼筆工具對節(jié)點進行調(diào)整，效果如圖5-35 所示。2）制作封面裝飾條 新建圖層并將其命名為“橫條”，使用鉛筆工具，調(diào)整鉛筆的顏色為白色。在封面左邊紅色區(qū)域繪制白色圖5-34添加磨損后的效果圖5-35添加封面左邊條后的效果圖5-36添加封面裝飾條后的效果27第三節(jié)藍色蘋果QuickTime 圖標設(shè)計 在本案例的實施過程中，使用橢圓工具和鋼筆工具繪制外輪廓，再用漸變顏色填充表現(xiàn)圖標的質(zhì)感，最后為圖標添加投影。 （1）在Illus

21、trator 中新建一文檔，具體設(shè)置如圖5-37 所示。 （2） 執(zhí)行“ 視圖” “ 顯示網(wǎng)格” 命令， 顯示風格。然后執(zhí)行“ 視圖”“對齊網(wǎng)格”命令，如圖5-38所示。 （3）執(zhí)行“編輯”“首選項”“參考線和網(wǎng)格”命令，在彈出的“首選項”對話框中設(shè)置網(wǎng)格線的間隔為5 像素，次分隔線改為1，如圖5-39 所示。這些設(shè)置為后面的制作過程提供了便利。圖5-38“視圖”菜單欄28圖5-39“參考線和網(wǎng)格”設(shè)置圖5-37新建文檔設(shè)置29（4）使用橢圓工具，并按Shift 鍵，繪制一個半徑為420 像素的圓形，將填充顏色關(guān)掉，設(shè)置描邊粗細為85 pt，將對齊描邊方式改為“使描邊內(nèi)側(cè)對齊”，再執(zhí)行“對象”

22、“擴展外觀”命令，如圖5-40、圖5-41 所示。圖5-40修改描邊的對齊方式圖5-41“擴展外觀”命令30（5）執(zhí)行“編輯”“首選項”“參考線和網(wǎng)格”命令，重新設(shè)定“網(wǎng)格線的間隔”為2.5像素，并且在“網(wǎng)格線間隔”框內(nèi)輸入2.5。使用矩形工具繪制一個95 像素175.5 像素的矩形。填充任一顏色，然后執(zhí)行“對象”“路徑”“添加錨點”命令，如圖5-42 所示。使用直接選擇工具選中底邊上的左錨點和右錨點，然后向上移動47.5 像素（按住Shift 鍵可選中多個錨點）。其效果圖5-43 所示。然后執(zhí)行“對象”“變換”“旋轉(zhuǎn)”命令，在彈出的“旋轉(zhuǎn)”對話框的相應文本框中輸入45，然后單擊“確定”按鈕。

23、執(zhí)行果”“風化”“圓角”命令，在彈出的“圓角”對話框中輸入圓角半徑3 像素，然后單擊“確定”按鈕，如圖5-44 所示。最后執(zhí)行“對象”“擴展外觀”命令。（6）將上述兩個圖形放置在一起，全選兩個圖形，打開“路徑查找器”面板，選擇“聯(lián)集”選項，如圖5-45 所示。圖5-45進行聯(lián)集后的效果圖5-43圖標制作樣式31圖5-42對象菜單下的“添加錨點”命令圖5-44效果菜單下的“圓角”命令32（7）現(xiàn)在給圖形上色，首先確認“外觀”面板是開啟狀態(tài)。選擇形狀，填充顏色值為R ：8，G ：145，B ：228，如圖5-46 所示。選擇這個填充（在“外觀”面板中選擇），然后執(zhí)行“效果”“風格化”“內(nèi)發(fā)光”命令

24、，打開“內(nèi)發(fā)光”對話框，具體設(shè)置如圖5-47 所示。圖5-46設(shè)置填充顏色圖5-47“內(nèi)發(fā)光”參數(shù)設(shè)置一33 （8）在“外觀”面板中添加一個新的填色，如圖5-48 所示。在新的填色上填充漸變色，RGB 為（10，206，255）和（8，145，228）。再次增加一個新的填色，RGB 為（0，83，216）和（8，145，228），角度為-90。再增加一個新的填色，填充徑向漸變RGB 為（0，30，157）和（8，145，228），不透明度為70%。再增加最后一個新的填色，填充徑向漸變RGB 為（0，30，157）和（8，145，228），如圖5-49 所示。執(zhí)行“效果”“風格化”“內(nèi)發(fā)光”命令

25、，打開“內(nèi)發(fā)光”對話框，設(shè)置如圖5-50 所示。圖5-48添加新填色圖5-49在“外觀”面板中添加顏色圖5-50“內(nèi)發(fā)光”參數(shù)設(shè)置二34（9）執(zhí)行“編輯”“首選項”“參考線和網(wǎng)格”命令，在“網(wǎng)格線間隔”文本框內(nèi)輸入5。使用矩形工具繪制一個60 像素260 像素的矩形，應用 30 像素圓角效果（執(zhí)行“效果”“風格化”“圓角”命令），然后執(zhí)行“對象”“擴展外觀”命令，得到圖5-51 所示的圖形。使用矩形工具繪制一個小矩形，然后選擇它和圓角矩形，單擊“路徑查找器”面板里的“減去頂層”按鈕，如圖5-52 所示。然后執(zhí)行“對象”“路徑”“添加錨點”命令。使用直接選擇工具選中上邊的中間錨點，向上移動5 像

26、素。然后選擇轉(zhuǎn)換錨點工具（按快捷鍵為Shift+C），單擊錨點向右拖拉，拖拉后這個錨點就有了圓弧的效果。選擇形狀，然后復制它（按快捷鍵Ctrl+C 或Ctrl+F），選擇副本，向下移動45 像素。選擇這2 個形狀，然后單擊“路徑查找器”面板中的“分割”按鈕，其效果如圖5-53 所示。圖5-51圓角化的圖形圖5-52“減去頂層“按鈕圖5-53刪除多余部分后的效果35（10）在分割后的圖形上將最上面的部分填充為白色，并增加兩個漸變填充，兩個漸變RGB 分別為（179，179，179）和（255，255，255），得到圖5-54 所示的效果。（11）給下半部分添加漸變填充，RGB 為（20，206，

27、255）和（8，145，228），得到圖5-55 所示的效果。（12）復制藍色的形狀，然后使用矩形工具繪制藍色填充的矩形，然后選擇它和藍色形狀副本，單擊“路徑查找器”面板中的“交集”按鈕，對得到的形狀填充線性漸變，RGB 為（155，255，255）和（255，255，255），然后新增一個填充，應用同樣的線性漸變；選擇這2 個填充，設(shè)置降低不透明度為30%。最終可得到圖5-56 所示的效果。（13）在“視圖”菜單下選擇隱藏網(wǎng)格和關(guān)閉對齊網(wǎng)格，執(zhí)行“編輯”“首選項” “常規(guī)”命令，打開“常規(guī)”選項卡，在鍵盤增量文本框內(nèi)輸入1。制作兩個藍色形狀的副本，然后選擇頂層的副本，單擊6 次（向左移動6

28、像素）。然后選擇這兩個副本，單擊“路徑查找器”面板里的“減去頂層”按鈕。對得到的形狀填充：RGB（0，30，157），降低不透明度為10%。執(zhí)行“編輯”“首選項” “常規(guī)”命令，打開“常規(guī)”選項卡，在“鍵盤增量”文本框內(nèi)輸入0.5。再制作兩個藍色形狀的副本，然后選擇最上層的副本，單擊3 次（向左移動1.5 像素）。選擇這兩個副本，單擊“路徑查找器”面板里的“減去頂層”按鈕。對得到的形狀填充RGB（2，97，254），降低不透明度設(shè)為50%。然后再制作兩個藍色形狀的副本，選擇最上層的副本，右擊9 次（向右移動4.5 像素）。選擇這兩個副本，單擊“路徑查找器”面板里的“減去頂層”按鈕，得到的形狀如

29、圖5-57 所示。36圖5-54給上部添加漸變填充后的效果 圖5-55給下部添加漸變填充后的效果圖5-56添加漸變后的效果圖5-57形狀做完后的效果（14）選擇繪制的形狀，群組（按快捷鍵Ctrl+G），選擇這個群組，執(zhí)行“對象”“變換”“旋轉(zhuǎn)”命令，打開“旋轉(zhuǎn)”對話框，輸入角度“-45”，單擊“確定”按鈕，然后將其放到如圖5-58 所示的位置。（15） 用鋼筆工具繪制高光路徑， 并添加徑向漸變，RGB 為（253，253，254） 和（253，254，253），將不透明度依次改為25% 和0，得到圖5-59 所示的效果。如果要想效果更好，可以在上層再次增加高光，使標志的質(zhì)感更為強烈。37圖5-

30、58圖形的擺放圖5-59添加高光后的效果38第四節(jié)音樂播放器按鈕設(shè)計 本節(jié)將制作一款音樂播放器按鈕的U I 設(shè)計，通過按鈕的制作來掌握“圖層樣式”對話框中“混合選項”的應用方法，尤其是“內(nèi)陰影”“內(nèi)發(fā)光”“投影”等選項的巧妙配合。對圖層樣式進行設(shè)置，可以制作網(wǎng)頁按鈕、手機界面中的按鈕等。1. 新建文件 在Photoshop 中新建文件名稱為“按鈕”的文件，設(shè)置其大小為1 000 像素50 像素，顏色模式為RGB，分辨率為72 dpi。2. 創(chuàng)建背景 首先在背景圖層上方添加名bg，顏色數(shù)值為R ：50，G ：54，B ：60，效果如圖5-60 所示。3. 繪制白色正圓 使用橢圓工具在畫面中心繪制

31、一白色正圓，將得到的圖層命名為“圓環(huán)”，然后在橢圓工具選項欄中選擇“減去頂層形狀”命令，從中心繪制小一點的正圓，從而得到白色圓環(huán)形狀，如圖5-61 所示。圖5-61填充圓環(huán)后的效果圖5-60填充顏色后的背景層394. 表現(xiàn)柔和的邊界線 在圓環(huán)圖層上右擊，在彈出的快捷菜單中選擇“柵格化圖層”選項，然后執(zhí)行“濾鏡”“模糊”“高斯模糊”命令，打開“高斯模糊”對話框，將半徑設(shè)置為8 像素，使邊界線更加柔和，如圖5-62 所示。5. 表現(xiàn)突出感覺的邊界線 雙擊圓環(huán)圖層，彈出 圖層樣式 對話框，將混合選項的填充不透明度設(shè)置為0 ；繼續(xù)單擊“斜面和浮雕”選項，設(shè)置樣式為“內(nèi)斜面”，深度為1 000%，大小為35 像素，軟化為10 像素，角度為90，高度為30 mm，不透明度為30% 和26%。其效果如圖5-63 所示。圖5-62進行高斯模糊后的圓環(huán)圖5-63添加圖層樣式后的圓環(huán)406. 制作基本按鈕 使用橢圓工具在圓環(huán)中心繪制正圓