區(qū)塊鏈技術(shù)與電子商務(wù)應(yīng)用 課件 【ch04】Photoshop圖標(biāo)設(shè)計(jì)實(shí)戰(zhàn)

Photoshop圖標(biāo)設(shè)計(jì)實(shí)戰(zhàn)第四章新工科建設(shè)·應(yīng)用型本科規(guī)劃教材UI設(shè)計(jì)實(shí)戰(zhàn)Photoshop概述0101Photoshop概述Photoshop隨著移動(dòng)端產(chǎn)品的普及和對(duì)移動(dòng)端產(chǎn)品設(shè)計(jì)的重視Photoshop是Adobe公司出品的一款優(yōu)秀的圖形處理軟件，也是目前使用率較高的平面設(shè)計(jì)軟件,其功能非常強(qiáng)大,應(yīng)用于平面設(shè)計(jì)、圖片處理、網(wǎng)頁(yè)設(shè)計(jì)、文字設(shè)計(jì)、三維設(shè)計(jì)及UI設(shè)計(jì)。Adobe公司在對(duì)Photoshop升級(jí)過(guò)程中，不斷對(duì)移動(dòng)產(chǎn)品設(shè)計(jì)工具、U設(shè)計(jì)工具等方面進(jìn)行優(yōu)化和調(diào)整，使其越來(lái)越貼合UI設(shè)計(jì)師的需求和使用。例如，從PhotoshopCC版本開始，加強(qiáng)了對(duì)矢量圖形工具的靈活操作;從PhotoshopCC2015版本開始，常用的5種圖層樣式可以累加10次使用，類似這樣的功能貼合U設(shè)計(jì)師的需求，同時(shí)也越來(lái)越讓設(shè)計(jì)師離不開Photoshop，也正因?yàn)檫@些改變，Photoshop仍然還是廣大設(shè)計(jì)師首選的設(shè)計(jì)利器。Photoshop基本操作0202Photoshop基本操作工作區(qū)概覽PhotoshopCC2018的工作界面包括菜單欄、標(biāo)題欄、工具選項(xiàng)欄、選項(xiàng)卡、文檔窗口、工具箱、狀態(tài)欄和面板等組件，如圖4.1所示?！畈藛螜?包含可以執(zhí)行的各種命令。單擊菜單名稱即可打開相應(yīng)的菜單?！顦?biāo)題欄:顯示文檔名稱、文件格式、窗口縮放比例和顏色模式等信息;如果文檔中包含多個(gè)圖層，則標(biāo)題欄還會(huì)顯示當(dāng)前工作圖層的名稱。☆工具選項(xiàng)欄:用來(lái)設(shè)置工具的各項(xiàng)選擇，它會(huì)隨著所選工具的不同而改變選項(xiàng)內(nèi)容?！钸x項(xiàng)卡:打開多個(gè)圖像時(shí)，只在窗口中顯示一個(gè)圖像，其他的則最小化到選項(xiàng)卡中。單擊選項(xiàng)卡中各個(gè)文件名便可顯示相應(yīng)的圖像?！钗臋n窗口:顯示和編輯圖像的區(qū)域?！罟ぞ呦?包含用于執(zhí)行各種操作的工具，如創(chuàng)建選區(qū)、移動(dòng)圖像、繪畫和繪圖等?！顮顟B(tài)欄:可以顯示文檔大小、文檔尺寸、當(dāng)前工具和窗口縮放比例等信息?！蠲姘?有的用來(lái)設(shè)置編輯各種選項(xiàng)，有的用來(lái)設(shè)置顏色屬性。☆熟練掌握Photoshop的操作界面結(jié)構(gòu)、工具箱內(nèi)的工具、面板組成是深入學(xué)習(xí)Photoshop的重要基礎(chǔ)。02Photoshop基本操作02Photoshop基本操作了解Photoshop中的工具Photoshop的工具箱中包含了用于創(chuàng)建和編輯圖像、圖稿、頁(yè)面元素的工具及按鈕，如圖4.2所示。這些工具按照用途可以分為7組，如圖4.3所示。02Photoshop基本操作新建Photoshop文檔在PhotoshopCC2018版本中有兩種新建文檔的方法。(1）打開軟件后，自動(dòng)出現(xiàn)“開始”工作區(qū)，在該區(qū)域內(nèi)顯示最近使用或打開過(guò)的文件或素材，以及創(chuàng)建新文檔的按鈕，如圖4.4所示?？梢酝ㄟ^(guò)“編輯”>“首選項(xiàng)”>“常規(guī)”進(jìn)行打開或關(guān)閉設(shè)置，如圖4.5所示。02Photoshop基本操作新建Photoshop文檔(2)選擇“文件”>“新建”命令(或按組合鍵“Ctrl+N”)，彈出新版“新建文檔”界面，如圖4.6所示。新日版“新建文檔”界面可以通過(guò)“編輯”>“首選項(xiàng)”>“常規(guī)”進(jìn)行設(shè)置，如圖4.7所示。下面以新版”新建文檔”界面講解參數(shù)。選擇創(chuàng)建“文檔類型”“照片”“打印”“圖稿和插圖”“Web”“移動(dòng)設(shè)備”“膠片和視頻”，選擇不同的類型，相關(guān)參數(shù)會(huì)發(fā)生相應(yīng)變化。名稱:默認(rèn)名稱為“未標(biāo)題-1”，單擊該處，可修改為所需的名稱。寬度/高度:設(shè)置文檔大小，注意單位的選擇。常用單位有像素、毫米、厘米英寸、點(diǎn)。分辨率:默認(rèn)為72像素/英寸。當(dāng)產(chǎn)出物為精美印刷品時(shí)，分辨率可能需要調(diào)整為150像素/英寸，或者300像素/英寸。顏色模式:默認(rèn)為RGB顏色。如果設(shè)計(jì)的是印刷出版產(chǎn)品，則顏色模式設(shè)置為CMYK顏色，如果設(shè)計(jì)的是電子產(chǎn)品、移動(dòng)端產(chǎn)品，則保持默認(rèn)值。02Photoshop基本操作保存Photoshop文檔“存儲(chǔ)”命令文件進(jìn)行處理后，需要及時(shí)保存，以免出現(xiàn)意外造成文件丟失。在PhotoshopCC2018中可以使用不同的命令保存文件，包括“存儲(chǔ)”“存儲(chǔ)為”“導(dǎo)出”等命令。選擇“文件”>“存儲(chǔ)”命令，即可將文件以原有格式進(jìn)行存儲(chǔ),且保存在原位置處。02Photoshop基本操作“存儲(chǔ)為”命令“導(dǎo)出”命令選擇“文件”>“存儲(chǔ)為”命令，可以將當(dāng)前文件保存為其他名稱和格式，或者將它存儲(chǔ)到其他位置。選擇“文件”>“導(dǎo)出”命令，可以快速導(dǎo)出“PNG文件”"存儲(chǔ)為Web所有格式”“路徑到Ⅲustrator”等。02Photoshop基本操作02Photoshop基本操作保存文件類型Photoshop可兼容的文件格式與可生成的格式類型都比較多，PhotoshopCC2018版本中可保存的常用文件類型如表4.1所示。Photoshop矢量工具0303Photoshop矢量工具Photoshop強(qiáng)大的設(shè)計(jì)功能與廣泛的應(yīng)用范圍是眾所周知的，隨著版本的不斷提升，功能也越來(lái)越優(yōu)化。由于篇幅的原因，下面將重點(diǎn)介紹PhotoshopCC2018中針對(duì)UI的設(shè)計(jì)，所需的矢量圖形工具介紹和相關(guān)操作技巧。鋼筆工具在Photoshop的所有工具中，鋼筆工具的重要性可謂是重中之重。理論上說(shuō)任何需要的圖形都可以由鋼筆繪制出來(lái)。在PhotoshopCC2018中，鋼筆組是由【鋼筆工具】、【自由鋼筆工具】、【彎度鋼筆工具】、【添加錨點(diǎn)工具】、【刪除錨點(diǎn)工具】和【轉(zhuǎn)換點(diǎn)工具】組成的，如圖4.8所示。03Photoshop矢量工具03Photoshop矢量工具繪制直線使用【鋼筆工具】繪制的最簡(jiǎn)單的路徑是直線，通過(guò)單擊【鋼筆工具】在畫布中創(chuàng)建兩個(gè)錨點(diǎn)，即可生成直線，繼續(xù)單擊可創(chuàng)建由角點(diǎn)連接的直線段組成的路徑，如圖4.9所示。繪制曲線在曲線改變方向的位置添加一個(gè)錨點(diǎn)，然后拖動(dòng)構(gòu)成曲線形狀的方向線。方向線的長(zhǎng)度和斜度決定了曲線的形狀，如圖4.10所示03Photoshop矢量工具繪制形狀使用【鋼筆工具】后,確保在“工具選項(xiàng)欄”中,設(shè)置繪制類型為“形狀”,如圖4.11所示。將繪制出矢量圖形，且在圖層面板中以矢量圖層的樣式表示，如圖4.12所示。03Photoshop矢量工具03Photoshop矢量工具路徑選擇工具/直接選擇工具形狀圖形工具【路徑選擇工具】/【直接選擇工具】是選擇矢量圖形時(shí)的工具。【路徑選擇工具】可以整體選擇圖形，并且可以移動(dòng)?！局苯舆x擇工具】可以選擇單個(gè)或多個(gè)構(gòu)成圖形的錨點(diǎn)或路徑，方便對(duì)圖形的操作和控制，但要與【移動(dòng)工具】有所區(qū)別。PhotoshopCC2018中的形狀圖形工具包含【矩形工具】、【圓角矩形工具】、【橢圓工具】、【多邊形工具】、【直線工具】和【自定形狀工具】。03Photoshop矢量工具形狀圖形工具【矩形工具】:屬于實(shí)時(shí)形狀。選擇【矩形工具】，鼠標(biāo)單擊畫布，并拖曳一定范圍，即可繪制出矩形，同時(shí)按住“Shift”鍵可以繪制出正方形，繪制完成會(huì)彈出“實(shí)時(shí)形狀屬性”面板，如圖4.13所示。在“實(shí)時(shí)形狀屬性”面板中可以設(shè)置矩形相關(guān)參數(shù)，并且可隨時(shí)作用在矩形上?！緢A角矩形工具】:屬于實(shí)時(shí)形狀。選擇【圓角矩形工具】，鼠標(biāo)單擊畫布，并拖拽一定范圍,即可繪制出圓角矩形，同時(shí)按住“Shift”鍵可以繪制出正方形，繪制完成會(huì)彈出“實(shí)時(shí)形狀屬性”面板，如圖4.13所示。在“實(shí)時(shí)形狀屬性”面板中可以設(shè)置圓角矩形相關(guān)參數(shù)，并且可隨時(shí)作用在圓角矩形上?！緳E圓工具】:屬于實(shí)時(shí)形狀。選擇【橢圓工具】，鼠標(biāo)單擊畫布，并拖曳一定范圍，即可繪制出橢圓，同時(shí)按住“Shift”鍵，可以繪制出圓形，繪制完成會(huì)彈出“實(shí)時(shí)形狀屬性”面板，如圖4.13所示。在“實(shí)時(shí)形狀屬性”面板中可以設(shè)置橢圓的相關(guān)參數(shù)，并且可隨時(shí)作用在橢圓上。03Photoshop矢量工具需要注意的是，矩形、圓角矩形、橢圓三個(gè)圖形如果在設(shè)計(jì)過(guò)程中對(duì)它們進(jìn)行破壞性操作（如旋轉(zhuǎn)、移動(dòng)錨點(diǎn)等操作)時(shí)，將會(huì)轉(zhuǎn)換為“常規(guī)路徑”，其提示對(duì)話框如圖4.14所示。即不再具有“實(shí)時(shí)形狀屬性”面板。03Photoshop矢量工具【多邊形工具】屬于常規(guī)路徑形狀。繪制多邊形時(shí)，需要先在“工具選項(xiàng)欄”中設(shè)置相關(guān)參數(shù)，如圖4.15所示,再繪制圖形。03Photoshop矢量工具03Photoshop矢量工具【直線工具】【自定形狀工具】屬于常規(guī)路徑形狀。繪制直線時(shí)，可以按住“Shift”鍵，繪制出45°及其倍數(shù)的直線。屬于常規(guī)路徑形狀。通過(guò)Photoshop自帶的形狀進(jìn)行繪制，圖形不夠用可以將圖形文件（.csh），通過(guò)“編輯”>“預(yù)設(shè)”>“預(yù)設(shè)管理器”進(jìn)行載入。設(shè)置顏色方法在PhotoshopCC中，給矢量圖形設(shè)置顏色的方法有以下幾種，熟練并靈活掌握設(shè)置顏色的方法，在設(shè)計(jì)過(guò)程中會(huì)起到事半功倍的效果。通過(guò)“工具選項(xiàng)欄”設(shè)置顏色，當(dāng)顏色確定后，圖形顏色即修改完成,如圖4.16所示。03Photoshop矢量工具03Photoshop矢量工具通過(guò)“實(shí)時(shí)形狀屬性”面板修改顏色。雙擊圖層縮略圖后,在彈出的“拾色器”面板中修改顏色在繪制矩形、圓角矩形、橢圓時(shí),會(huì)彈出“實(shí)時(shí)形狀屬性”面板，在該面板上可以對(duì)上述三種形狀修改顏色。當(dāng)顏色確定后,圖形顏色即修改完成。在選擇顏色的過(guò)程中，圖形中的顏色會(huì)隨著選擇的顏色變化而變化,確定后顏色修改完成。這種方法更加適合在設(shè)計(jì)過(guò)程中的配色時(shí)使用。03Photoshop矢量工具布爾運(yùn)算從PhotoshopCC開始，布爾運(yùn)算操作在矢量圖形設(shè)計(jì)過(guò)程中越來(lái)越重要。隨著Photoshop版本的升級(jí)，該功能操作也越來(lái)越靈活，這是設(shè)計(jì)師必須掌握的技法也是實(shí)現(xiàn)制作精致效果的基礎(chǔ)。為了方便初學(xué)者對(duì)布爾運(yùn)算的掌握，下面將分為兩種情況介紹:相同圖層的布爾運(yùn)算、不同圖層的布爾運(yùn)算。當(dāng)然這是作者為了方便初學(xué)者掌握布爾運(yùn)算，人為進(jìn)行劃分的，但在實(shí)際設(shè)計(jì)過(guò)程中，并沒(méi)有要求這兩種方法的使用場(chǎng)景。布爾運(yùn)算位置在PhotoshopCC2018中，布爾運(yùn)算包括【合并形狀】、【減去頂層形狀】、【與形狀區(qū)域相交】、【排除重疊形狀】和【合并形狀組件】。其位置在兩處可以找到:“選擇工具屬性”面板和“實(shí)時(shí)形狀屬性”面板，常在第一處位置進(jìn)行布爾運(yùn)算操作。布爾運(yùn)算位置如圖4.17所示。03Photoshop矢量工具03Photoshop矢量工具【合并形狀】【減去頂層形狀】繪制一個(gè)形狀，然后按住“Shift”鍵的同時(shí)，再繪制一個(gè)形狀,使新繪制的形狀與原形狀在一個(gè)圖層中，兩個(gè)形狀合并在一起，即完成【合并形狀】運(yùn)算。效果如圖4.18所示。繪制一個(gè)形狀，然后按住“Alt”鍵的同時(shí)，再繪制一個(gè)形狀，使新繪制的形狀與原形狀在一個(gè)圖層中，并且后繪制的圖形減去原圖形，即完成【減去頂層形狀】運(yùn)算。效果如圖4.19所示。03Photoshop矢量工具03Photoshop矢量工具【與形狀區(qū)域相交】【排除重疊形狀】先通過(guò)按住“Shit”鍵或“Alt”鍵將兩個(gè)形狀繪制到一個(gè)圖層中，重新通過(guò)選擇【與形狀區(qū)域相交】運(yùn)算，產(chǎn)生交集效果，如圖4.20所示。先通過(guò)按住“Shit”鍵或“At”鍵將兩個(gè)形狀繪制到一個(gè)圖層中，重新通過(guò)選擇【排除重疊形狀】運(yùn)算，產(chǎn)生補(bǔ)集效果，如圖4.21所示。03Photoshop矢量工具【合并形狀組件】在進(jìn)行布爾運(yùn)算時(shí)，圖形默認(rèn)狀態(tài)之間的關(guān)系并沒(méi)有真正地將路徑合并到一起，即圖形之間還是相互獨(dú)立的。這樣的優(yōu)勢(shì)是，方便設(shè)計(jì)師能夠及時(shí)更改圖形之間的位置、關(guān)系等。如果能將圖形組成最終效果，還是應(yīng)該使用【合并形狀組件】將多個(gè)圖形最終組成一個(gè)整體，效果如圖4.22所示。03Photoshop矢量工具03Photoshop矢量工具不同圖層的布爾運(yùn)算注意事項(xiàng)不同圖層的布爾運(yùn)算在實(shí)際工作中也是常用的一種形式。其操作方法是先將不同圖層合并到一個(gè)圖層中(“Ctrl+E”組合鍵)，剩下的操作與在相同圖層的布爾運(yùn)算相同。在實(shí)施不同圖層【減去頂層形狀】運(yùn)算時(shí)，一定要注意圖層的上下位置關(guān)系，合并圖層后原上層的圖形將被原下層的圖形減去。不同圖層的布爾運(yùn)算，圖層之間必須相鄰，不能有間隔;實(shí)施【減去頂層形狀】運(yùn)算時(shí)，只能顯示閉合路徑;形狀和路徑不能同時(shí)進(jìn)行布爾運(yùn)算。布爾運(yùn)算在設(shè)計(jì)中的靈活應(yīng)用是設(shè)計(jì)師必須掌握的方法。03Photoshop矢量工具對(duì)齊、排列關(guān)系相同圖層的圖形對(duì)齊:在設(shè)計(jì)過(guò)程中，圖形之間是否遵循對(duì)齊規(guī)范，是制作精美效果的基礎(chǔ)和保證。在PhotoshopcC2018中，對(duì)齊的方法可以分為兩種情況。使用【路徑選擇工具】，選中其中的所有圖形，在“工具選項(xiàng)欄”中選擇對(duì)齊方式,如圖4.23所示。有“對(duì)齊到選區(qū)”“對(duì)齊到畫布”兩種方式，如圖4.24所示。“對(duì)齊到選區(qū)”是指所選圖形之間相互對(duì)齊;“對(duì)齊到畫布”是指所選圖形都與畫布對(duì)齊。03Photoshop矢量工具不同圖層的圖形對(duì)齊令排列關(guān)系選中要對(duì)齊的圖形所在圖層，使用【移動(dòng)工具】，在“工具選項(xiàng)欄”中選擇對(duì)齊方式，如圖4.25所示。如果需要所選圖形與背景層對(duì)齊，則在選擇圖層時(shí)加選背景層即可，如圖4.26所示。在相同圖層中的圖形都存在不同的排列關(guān)系，可在“工具選項(xiàng)欄”中進(jìn)行調(diào)整，如圖4.27所示。排列關(guān)系的對(duì)否將決定布爾運(yùn)算能否正確執(zhí)行,尤其是【減去頂層形狀】運(yùn)算;不同圖層的排列關(guān)系，參照“圖層”面板中上下圖層之間的位置關(guān)系及調(diào)整方法，如圖4.28所示。03Photoshop矢量工具03Photoshop矢量工具圖層樣式04添加圖層樣式選擇圖層，單擊“圖層”面板中“圖層樣式(f伙)”按鈕，然后在彈出的選項(xiàng)中選擇對(duì)應(yīng)圖層樣式，如圖4.29所示。雙擊需要添加圖層樣式的圖層中部，也可以打開“圖層樣式”面板，如圖4.30所示。04圖層樣式“圖層樣式”面板“圖層樣式”面板的左側(cè)有10種圖層樣式效果，如圖4.31所示。如果效果名稱前面的復(fù)選框被勾選，則表示在圖層中添加了該效果。從PhotoshopCC2015開始，“描邊”“內(nèi)陰影”“顏色疊加”“漸變疊加”“投影”5種常用的圖層樣式具有了累加效果功能，每種效果累加可以達(dá)到10次，操作方式、排列方式與圖層原理相似。04圖層樣式“圖層樣式”面板“斜面和浮雕”可以對(duì)圖層添加高光與陰影的各種組合，使圖層內(nèi)容呈現(xiàn)立體浮雕效果，其面板如圖4.32所示。在“樣式”中可以選擇效果。“外斜面”可以在圖層外側(cè)邊緣創(chuàng)建斜面;“內(nèi)斜面”可以在圖層內(nèi)容的內(nèi)側(cè)邊緣創(chuàng)建斜面;“浮雕效果”可以模擬浮雕狀的效果;“枕狀浮雕”可以模擬圖層內(nèi)部的邊緣壓入下層圖層中產(chǎn)生的效果;“描邊浮雕”可以將浮雕應(yīng)用于圖層描邊效果的邊界。其效果如圖4.33所示。04圖層樣式“圖層樣式”面板斜面和浮雕的樣式除有多種樣式變化外，也可以通過(guò)光的效果進(jìn)行效果設(shè)置?？梢哉{(diào)整光的高度和角度，還可以調(diào)整高光模式和陰影模式。這都是其他圖層樣式不具備的。修改陰影效果如圖4.34所示。04圖層樣式“圖層樣式”面板“描邊”可以使用顏色、漸變或圖案勾畫出圖形的輪廓，還可以增強(qiáng)立體效果，其面板如圖4.35所示。效果如圖4.36所示。04圖層樣式“圖層樣式”面板“內(nèi)陰影”可以在僅靠圖層內(nèi)容的邊緣向內(nèi)添加陰影，產(chǎn)生凹陷或凸起效果，其面板如圖4.37所示。效果如圖4.38所示。04圖層樣式“圖層樣式”面板“內(nèi)發(fā)光”可以沿著圖層內(nèi)容的邊緣向內(nèi)創(chuàng)建發(fā)光效果，其面板如圖4.39所示。效果如圖4.40所示。04圖層樣式04圖層樣式“光澤”“顏色疊加”“光澤”可以生成光滑的內(nèi)部陰影，通常用于創(chuàng)建金屬表面的光澤外觀，其面板如圖4.41所示。效果如圖4.42所示?！邦伾B加”可以在圖層上指定疊加的顏色，通過(guò)混合方式和不透明度控制疊加效果，原圖形顏色屬性不變，其面板如圖4.43所示。效果如圖4.44所示。04圖層樣式“圖層樣式”面板“漸變疊加”可以在圖層上指定疊加的漸變色，通過(guò)混合方式和不透明度控制疊加效果，原圖形顏色屬性不變，其面板如圖4.45所示。效果如圖4.46所示。04圖層樣式“圖層樣式”面板“圖案疊加”可以在圖層上指定疊加的圖案，通過(guò)混合方式和不透明度控制疊加效果，原圖形顏色屬性不變，其面板如圖4.47所示。效果如圖4.48所示。04圖層樣式“圖層樣式”面板“外發(fā)光”可以沿圖層內(nèi)容的邊緣向外創(chuàng)建發(fā)光效果，其面板如圖4.49所示。效果如圖4.50所示。04圖層樣式“圖層樣式”面板“投影”可以為圖層內(nèi)容添加投影，使其產(chǎn)生立體感，其面板如圖4.51所示。效果如圖4.52所示。04圖層樣式Photoshop圖標(biāo)設(shè)計(jì)實(shí)踐0505Photoshop圖標(biāo)設(shè)計(jì)實(shí)踐圖標(biāo)的扁平化設(shè)計(jì)扁平風(fēng)格優(yōu)點(diǎn)如下扁平化概念的核心意義是:去除冗余、厚重和繁雜的裝飾效果。而具體表現(xiàn)在去掉了多余的透視、紋理、漸變及能做出D效果的元素，這樣可以讓“信息”本身重新作為核心被凸顯出來(lái)。同時(shí)在設(shè)計(jì)元素上，強(qiáng)調(diào)了抽象、極簡(jiǎn)和符號(hào)化。(1）識(shí)別率高,減少認(rèn)知障礙。(2)降低移動(dòng)設(shè)備的硬件需求，降低功耗、延長(zhǎng)待機(jī)時(shí)間和提高運(yùn)算速度。(3)針對(duì)碎片化的屏幕尺寸，扁平化設(shè)計(jì)更簡(jiǎn)約，條理清晰，更好的適應(yīng)性。05Photoshop圖標(biāo)設(shè)計(jì)實(shí)踐扁平風(fēng)格缺點(diǎn)如下常見扁平風(fēng)格圖標(biāo)類型如下(1）降低用戶體驗(yàn),在非移動(dòng)設(shè)備上令人反感。(2）缺乏直觀性,需要—定的學(xué)習(xí)成本。(3）傳達(dá)的感情不豐富，甚至過(guò)于冰冷。1．純平面—般表現(xiàn)為純色或剪影效果。簡(jiǎn)潔、清新、舒服、視覺識(shí)別度好、色彩明朗、設(shè)計(jì)感強(qiáng)烈，效果如圖4.53所示。05Photoshop圖標(biāo)設(shè)計(jì)實(shí)踐輕折疊一般表現(xiàn)為純色、折疊、輕投影效果。比純平面豐富，有輕微的視覺空間感，色彩明朗，輕投影營(yíng)造出輕盈的感覺，視覺統(tǒng)一性好，效果如圖4.54所示。05Photoshop圖標(biāo)設(shè)計(jì)實(shí)踐輕質(zhì)感一般表現(xiàn)為輕漸變、簡(jiǎn)單層次、輕投影效果。內(nèi)容相對(duì)豐富，有一定的立體感,輕盈、清新,效果如圖4.55所示。05Photoshop圖標(biāo)設(shè)計(jì)實(shí)踐折紙效果一般表現(xiàn)為折疊、投影構(gòu)成效果。善于展示扁平化的立體視覺效果,效果如圖4.56所示。05Photoshop圖標(biāo)設(shè)計(jì)實(shí)踐厚度效果一般有厚度并關(guān)注細(xì)節(jié)的設(shè)計(jì)效果，通過(guò)輕投影效果展示厚度，關(guān)注細(xì)節(jié)刻畫。但要注意圖標(biāo)設(shè)計(jì)的統(tǒng)—性,效果如圖4.57所示。05Photoshop圖標(biāo)設(shè)計(jì)實(shí)踐長(zhǎng)投影添加長(zhǎng)投影的漸變效果。增加立體感和表現(xiàn)層次，柔和統(tǒng)一，但設(shè)計(jì)長(zhǎng)投影時(shí)要準(zhǔn)確,效果如圖4.58所示。05Photoshop圖標(biāo)設(shè)計(jì)實(shí)踐05Photoshop圖標(biāo)設(shè)計(jì)實(shí)踐線形圖標(biāo)“Callin”圖標(biāo)設(shè)計(jì)方法使用【鋼筆工具】和【圖形工具】繪制“Callin”圖標(biāo)，最終效果如圖4.59所示。05Photoshop圖標(biāo)設(shè)計(jì)實(shí)踐線形圖標(biāo)(1）創(chuàng)建畫布。寬、高均為1000px，分辨率為72ppi，顏色模式為RGB顏色。(2）使用【橢圓工具】繪制圓。繪制的同時(shí)按住“Shift”鍵和“Alt”鍵，繪制一個(gè)大小為180px的圓，去掉填充顏色，只保留描邊顏色（顏色值為#78B4E3，描邊寬度為20px）。然后復(fù)制該圖層（“Ctrl+J”組合鍵〉再生成一個(gè)圓環(huán)，并且分開擺放，作為兩端話筒。(3）使用【橢圓工具】繪制橢圓。寬為320px，高為550px，并且旋轉(zhuǎn)45°，調(diào)整位置。(4）選擇橢圓，再?gòu)?fù)制一個(gè)(“Ctrl+J”組合鍵)，并且調(diào)整形狀。05Photoshop圖標(biāo)設(shè)計(jì)實(shí)踐線形圖標(biāo)(5）使用【鋼筆工具】中的【添加錨點(diǎn)工具】，分別給兩個(gè)橢圓添加錨點(diǎn)，并且使用【直接選擇工具】選擇要?jiǎng)h除的錨點(diǎn)后，單擊“Delete”鍵刪除。(6)參照第(5）步，對(duì)兩個(gè)圓添加、刪除對(duì)應(yīng)位置錨點(diǎn)。(7）繪制尖頭。使用【圓角矩形工具】繪制寬為180px、高為26px、圓角為13px的圓角矩形，再繪制兩個(gè)寬為90px、高為26px、圓角為13px的圓角矩形。調(diào)整形狀為尖頭。(8）完成效果制作，并命名為“Callin”。保存文件類型為PSD和PNG。05Photoshop圖標(biāo)設(shè)計(jì)實(shí)踐剪影圖標(biāo)"Telephone”圖標(biāo)設(shè)計(jì)方法扁平風(fēng)格中的剪影效果是常見的效果之一。本案例利用“布爾運(yùn)算”與【形狀工具】進(jìn)行設(shè)計(jì)與制作。最終效果如圖4.72所示。05Photoshop圖標(biāo)設(shè)計(jì)實(shí)踐剪影圖標(biāo)(1）創(chuàng)建畫布。寬、高均為800px，分辨率為72ppi，顏色模式為RGB顏色。(2)使用【圓角矩形工具】，繪制寬和高均為512px、圓角為120px的圓角矩形，顏色值為#1DA831。(3）使用【橢圓工具】，繪制寬為460px、高為330px的橢圓。(4）進(jìn)行同層圖層布爾運(yùn)算。按住“Alt”鍵，分別繪制兩個(gè)矩形，做【減去頂層形狀】運(yùn)算。選中所有圖形，進(jìn)行【水平居中對(duì)齊】操作。(5）水平方向從標(biāo)尺拖曳“參考線”，位于圖形中間位置。使用【添加錨點(diǎn)工具】分別對(duì)兩個(gè)矩形的下邊添加錨點(diǎn)，并且使用【直接選擇工具】，向下移動(dòng)，生成下弧線效果。05Photoshop圖標(biāo)設(shè)計(jì)實(shí)踐剪影圖標(biāo)(6)修改圓角。按住“At”鍵繪制矩形,減掉原來(lái)尖角效果。按住“Shift”鍵繪制寬、高均為50px的正圓，補(bǔ)充圓角效果。(7）參照第（6）步操作，完成其他尖角的圓角效果處理。(8）修改內(nèi)角圓角效果。按住“Shift”鍵，繪制正圓，然后按住“Alt”鍵，再繪制一個(gè)圓形【減去頂層形狀】。(9）選中所有圖形，進(jìn)行【合并形狀組件】操作，將所有圖形合并成一個(gè)圖形，并且旋轉(zhuǎn)45°，完成設(shè)置。命名為“Telephone”，保存文件類型為PSD和PNG。05Photoshop圖標(biāo)設(shè)計(jì)實(shí)踐扁平彩色圖標(biāo)“小米互娛”圖標(biāo)設(shè)計(jì)方法小米互娛圖標(biāo)通過(guò)“布爾運(yùn)算”實(shí)現(xiàn)“形”的設(shè)計(jì)，通過(guò)弱漸變顏色實(shí)現(xiàn)視覺展示,層次豐富。最終效果如圖4.92所示。05Photoshop圖標(biāo)設(shè)計(jì)實(shí)踐扁平彩色圖標(biāo)(1）創(chuàng)建畫布。寬、高均為800px，分辨率為72ppi,顏色模式為RGB顏色。(2）創(chuàng)建圓角矩形寬、高均為512px，圓角為8Opx,如圖4.93所示。(3）使用【多邊形工具】，設(shè)置邊為5，繪制寬為340px、高為324px的五角星,如圖4.94所示。(4）使用【鋼筆工具】沿著五角星邊線繪制多邊形,如圖4.95所示。(5）復(fù)制圓角矩形，并調(diào)整與繪制出的多邊形圖層相鄰，合并形狀（“Ctrl+E”組合鍵），執(zhí)行【與形狀區(qū)域相交】運(yùn)算，生成新圖形，如圖4.96所示。05Photoshop圖標(biāo)設(shè)計(jì)實(shí)踐扁平彩色圖標(biāo)(6）參照第(4）步和第（5)步操作方法，完成其他形狀制作，如圖4.97所示。(7)設(shè)置弱漸變效果。參考值為:（#DF4F72、#F45441、角度為60°)、(#F48EO5、#F7AAO2、角度為0°)、(#90CB6F、#86D263、角度為O°)、(#O3ACCD、#O7AED1、角度為90°)、(#9665CE、#BA73C9、角度為90°)，如圖4.98所示。(8）添加文字“小米互娛”，保存文件，保存文件類型為PSD和PNG。05Photoshop圖標(biāo)設(shè)計(jì)實(shí)踐擬物圖標(biāo)的設(shè)計(jì)方法“彩色旋鈕”圖標(biāo)設(shè)計(jì)方法制作精美圖標(biāo)時(shí)，少不了“圖層樣式”的靈活使用。此案例可以綜合掌握“圖層樣式”在圖標(biāo)設(shè)計(jì)過(guò)程中的使用技巧。最終效果如圖4.114所示。05Photoshop圖標(biāo)設(shè)計(jì)實(shí)踐(1）創(chuàng)建畫布。寬、高均為800px，分辨率為72ppi，顏色模式為RGB顏色，設(shè)置背景顏色值為#B8231D。(2)使用【圓角矩形工具】，繪制寬、高均為580px和圓角為120px的圓角矩形。填充線性漸變顏色值為#F6CDC9、#FEF4F3。命名該圓為“圓角矩形”

。(3）使用【橢圓工具】繪制寬、高均為388px的圓形。設(shè)置線性漸變，顏色值為#F9EBEB、#DFAFAB，命名該圓為“圓1”。(4）使用【橢圓工具】繪制寬、高均為338px的圓形。設(shè)置角度漸變，顏色值從左至右依次為#3631B2、#8B307F、#DC502D、#DF882D、#CFD42E、#2EFA2C、#3631B2，命名該圓為“圓2”。擬物圖標(biāo)的設(shè)計(jì)方法05Phot