Photoshop UI設(shè)計(jì)實(shí)戰(zhàn)案例教程（移動(dòng)端+Web端） 課件全套 第1-7章 Photoshop基礎(chǔ)操作 -綜合案例 設(shè)計(jì)網(wǎng)站歡迎頁

PhotoshopUI設(shè)計(jì)實(shí)戰(zhàn)案例教程

(移動(dòng)端+Web端)本章概述：本章主要介紹Photoshop基礎(chǔ)操作。涵蓋工作界面各區(qū)域功能，如菜單欄、工具欄等。詳細(xì)講解矢量繪畫工具（鋼筆、矩形等）、文字工具的基礎(chǔ)使用，包括輸入編輯變形。同時(shí)闡述圖層基本操作，如新建、復(fù)制等，以及濾鏡的基本概念和操作方法，為后續(xù)UI設(shè)計(jì)學(xué)習(xí)奠定堅(jiān)實(shí)基礎(chǔ)。第1章Photoshop基礎(chǔ)操作第1章Photoshop基礎(chǔ)操作1.1Photoshop工作界面與基礎(chǔ)功能全覽1.2矢量繪畫工具的基礎(chǔ)操作1.3文字工具基礎(chǔ)操作1.4圖層的基本操作1.5濾鏡1.1Photoshop工作界面與基礎(chǔ)功能全覽1.1.1Photoshop工作界面本小節(jié)主要介紹Photoshop安裝后打開的工作界面。它大致分為菜單欄、工具屬性欄、工具欄、畫布和工具參數(shù)面板等區(qū)域。菜單欄提供各類操作命令；工具屬性欄隨工具選擇顯示相關(guān)參數(shù)；工具欄包含多種繪圖和編輯工具；畫布是創(chuàng)作區(qū)域；工具參數(shù)面板用于設(shè)置顏色、圖層等，各區(qū)域相互配合，構(gòu)成完整的工作環(huán)境。1.1.2菜單欄該小節(jié)詳細(xì)闡述菜單欄的11個(gè)菜單。其中“文件”用于工程文件操作，“編輯”針對(duì)圖層元素編輯，“圖像”調(diào)整整個(gè)工程文件，“圖層”操作圖層對(duì)象，“文字”處理文字對(duì)象，“選擇”涉及選區(qū)操作，“濾鏡”添加視覺效果，“3D”處理3D對(duì)象，“視圖”輔助繪畫，“窗口”管理工具面板，“幫助”提供官方教程，等等1.1Photoshop工作界面與基礎(chǔ)功能全覽1.1.3工具欄與工具屬性欄該小節(jié)介紹工具欄及工具屬性欄。工具欄包含眾多設(shè)計(jì)界面的工具，如移動(dòng)工具用于移動(dòng)元素，畫布工具設(shè)置畫布范圍等。每次選擇不同工具，頂部的工具屬性欄會(huì)顯示對(duì)應(yīng)工具的參數(shù)，如矩形選框工具的選區(qū)模式、繪制樣式等，這些工具和參數(shù)是進(jìn)行各種設(shè)計(jì)操作的基礎(chǔ)。1.1Photoshop工作界面與基礎(chǔ)功能全覽1.1.3工具欄與工具屬性欄1.1Photoshop工作界面與基礎(chǔ)功能全覽移動(dòng)工具：用于移動(dòng)圖層，可自動(dòng)選擇圖層、顯示變換控件，對(duì)應(yīng)的頂部屬性欄上還包括對(duì)齊工具和散布均分工具，用于對(duì)齊和均勻分布元素。畫布工具：用于設(shè)置畫布的范圍大小，可通過拖動(dòng)鼠標(biāo)新建畫布，或單擊畫布四周的圖標(biāo)進(jìn)行操作。矩形選框工具功能：在畫布上畫出矩形選區(qū)，最大不超過畫布大小，最小不小于1像素×1像素。屬性欄設(shè)置：包括選區(qū)模式圖標(biāo)（新建選區(qū)、選區(qū)相加、選區(qū)相減、選區(qū)相交）、選區(qū)“羽化”值、繪制樣式（正常、固定比例、固定大?。?。除此之外，還包括橢圓選框工具等套索工具類型：包括常規(guī)套索工具、多邊形套索工具和磁性套索工具，用于創(chuàng)建任意形狀選區(qū)。使用方法：單擊并拖動(dòng)鼠標(biāo)即可創(chuàng)建選區(qū)，可進(jìn)行放大、縮小、羽化邊緣等操作。魔棒工具：用于快速選擇一定范圍內(nèi)的像素和顏色，可通過容差值調(diào)整選區(qū)范圍大小。裁剪工具：通過繪制矩形來裁剪畫面，可在工具屬性欄中調(diào)整裁剪相關(guān)設(shè)置，還包含切片工具和切片選擇工具。吸管工具：功能：用于拾取圖像中某位置的顏色，可用于填充選區(qū)或繪制圖形。其他功能：包含“顯示取樣環(huán)”“顯示標(biāo)尺”等選項(xiàng)。畫筆工具：用途：是Photoshop進(jìn)行繪畫類工作時(shí)最常用的工具，可創(chuàng)建各種形狀和效果的圖形。特點(diǎn)：包含多種不同大小、粗細(xì)、形狀的筆刷，可調(diào)整顏色、不透明度、流量等參數(shù)。橡皮擦工具：用于擦除圖像，可調(diào)整硬度、大小和不透明度等屬性，只能作用于單個(gè)圖層，對(duì)矢量文字和矢量圖形無效。漸變工具：使用方法：用于填充顏色、制作紋理和光影效果，包括設(shè)置不同的漸變方式（線性漸變、徑向漸變、角度漸變等）、在漸變色條上增加或減少顏色手柄等。注意事項(xiàng)：必須先選擇一個(gè)圖層，且無法作用于矢量圖形。文字工具：用于創(chuàng)建文字元素，包括橫排文字工具和豎排文字工具，可在工具屬性欄中調(diào)整文字的字體、字重、大小、段落對(duì)齊方式、字體顏色等。鋼筆工具：用于創(chuàng)建和編輯矢量路徑，可用于繪制形狀、路徑和選區(qū)。選擇工具：分類：包括路徑選擇工具和直接選擇工具，用于選擇矢量路徑。功能：路徑選擇工具只能選擇整條路徑，不能選擇路徑上的單個(gè)錨點(diǎn)；直接選擇工具可以選擇單個(gè)或多個(gè)錨點(diǎn)，并可移動(dòng)錨點(diǎn)和方向點(diǎn)，調(diào)整路徑形狀。預(yù)設(shè)形狀工具：包括矩形工具、圓角矩形工具、橢圓工具和自定形狀工具，可用于繪制各種矢量圖形和矢量路徑抓手工具：用于滾動(dòng)查看畫布不同區(qū)域，按住空格鍵可快速切換到抓手工具。抓手工具：用于滾動(dòng)查看畫布不同區(qū)域，按住空格鍵可快速切換到抓手工具。其他更多工具：其他更多的工具收納在了這個(gè)“更多”圖標(biāo)中，點(diǎn)擊展開可見1.1.4畫布該小節(jié)重點(diǎn)講解畫布。它是Photoshop進(jìn)行繪畫創(chuàng)作、圖像處理和界面設(shè)計(jì)的主要區(qū)域。畫布可顯示正在編輯的圖像或PSD工程文件，能通過縮放工具和抓手工具調(diào)整大小和位置。同時(shí)，畫布上可顯示標(biāo)尺和參考線用于輔助繪圖，頂部還有文件切換欄和底部的狀態(tài)欄顯示相關(guān)信息。1.1Photoshop工作界面與基礎(chǔ)功能全覽1.1.5圖層面板和路徑面板此小節(jié)介紹圖層面板和路徑面板。圖層面板用于管理圖層，包括圖層的顯示隱藏、順序疊加、鎖定透明度等操作，還可通過底部按鈕進(jìn)行相關(guān)功能操作。路徑面板用于創(chuàng)建、編輯和管理路徑，路徑可用于精確選區(qū)、遮罩等操作，兩個(gè)面板的合理使用對(duì)設(shè)計(jì)至關(guān)重要。1.1Photoshop工作界面與基礎(chǔ)功能全覽1.1.6顏色和色板面板該小節(jié)介紹顏色和色板面板。顏色面板可通過單擊選擇顏色作為前景色或背景色。色板面板是預(yù)設(shè)顏色集合，也可創(chuàng)建新色板添加常用顏色，還可載入其他色板庫。這兩個(gè)面板為設(shè)計(jì)提供了便捷的顏色選擇和管理方式，有助于提高設(shè)計(jì)效率和保持色彩一致性。1.1Photoshop工作界面與基礎(chǔ)功能全覽1.1.7文字字符相關(guān)面板本小節(jié)介紹文字字符相關(guān)面板，主要是字符面板和段落面板。字符面板用于設(shè)置文字的字體、大小、顏色、行距、字距、基線偏移等參數(shù)。段落面板則允許用戶對(duì)文本的對(duì)齊方式、行距、縮進(jìn)等進(jìn)行調(diào)整，兩個(gè)面板配合使用，可滿足各種文字排版需求。1.1Photoshop工作界面與基礎(chǔ)功能全覽1.1.8歷史記錄面板本小節(jié)介紹歷史記錄面板。它以時(shí)間線形式記錄編輯圖像時(shí)的操作步驟，每個(gè)操作以圖標(biāo)和文本顯示。用戶可通過單擊歷史記錄狀態(tài)回退到特定操作點(diǎn)，還可使用歷史記錄畫筆工具恢復(fù)到特定歷史狀態(tài)，底部的按鈕可進(jìn)行創(chuàng)建新文檔、創(chuàng)建快照和刪除狀態(tài)等操作。1.1Photoshop工作界面與基礎(chǔ)功能全覽1.1.9屬性面板與調(diào)整面板本小節(jié)介紹屬性面板與調(diào)整面板。屬性面板用于顯示和編輯所選對(duì)象的屬性，如顏色、大小、位置等，不同類型圖層顯示不同參數(shù)。調(diào)整面板是集合多種圖像調(diào)整工具的面板，可調(diào)整圖像顏色、亮度等，單擊按鈕會(huì)在圖層面板生成對(duì)應(yīng)調(diào)整圖層并顯示參數(shù)。1.1Photoshop工作界面與基礎(chǔ)功能全覽1.2矢量繪畫工具的基礎(chǔ)操作1.2.1鋼筆工具本小節(jié)介紹于鋼筆工具。它是一種矢量繪圖工具，有“形狀”和“路徑”兩種繪制模式。在“形狀”模式下，繪制的矢量圖形會(huì)自動(dòng)生成圖層且可設(shè)置樣式；“路徑”模式下，繪制的是臨時(shí)工作路徑，可轉(zhuǎn)換為選區(qū)等。鋼筆工具還包含多種子工具，通過具體的操作方法，如單擊確定錨點(diǎn)、拖動(dòng)繪制曲線等，能準(zhǔn)確創(chuàng)建和編輯矢量路徑。1.2矢量繪畫工具的基礎(chǔ)操作1.2.2矩形工具及圓角矩形工具本小節(jié)介紹矩形工具及圓角矩形工具。矩形工具在畫布上單擊并拖動(dòng)可創(chuàng)建矩形，按住Shift鍵可創(chuàng)建正方形。其繪制模式與鋼筆工具類似，還有“像素”繪制模式。圓角矩形工具多了“半徑”參數(shù)用于設(shè)置圓角大小，通過簡單操作即可繪制出不同形狀的矩形和圓角矩形，滿足多種設(shè)計(jì)需求。1.2矢量繪畫工具的基礎(chǔ)操作1.2.3多邊形工具本小節(jié)介紹講解多邊形工具。它默認(rèn)收納在工具欄更多菜單面板中，可用于繪制多邊形和星形。通過設(shè)置邊數(shù)，如3為三角形、5為五邊形等，按住Shift鍵可繪制等邊多邊形。還可展開下拉面板設(shè)置是否繪制星形及相關(guān)參數(shù)，操作靈活，能繪制出多種規(guī)則的矢量圖形。1.2矢量繪畫工具的基礎(chǔ)操作1.2.4直線工具本小節(jié)介紹直線工具。它用于創(chuàng)建直線，線的粗細(xì)由工具屬性欄最右側(cè)“粗細(xì)”參數(shù)控制。在“形狀”繪制模式下，直線實(shí)際是窄長長方形。通過單擊“粗細(xì)”參數(shù)左側(cè)齒輪按鈕，可設(shè)置直線起點(diǎn)和終點(diǎn)是否帶箭頭，操作簡便，能快速創(chuàng)建出符合要求的直線。1.2矢量繪畫工具的基礎(chǔ)操作1.2.5自定形狀工具本小節(jié)介紹自定形狀工具。它包含數(shù)十種預(yù)設(shè)形狀，用戶也可添加自己繪制的形狀或其他矢量圖形到預(yù)設(shè)形狀庫中。在設(shè)計(jì)過程中，可直接選擇預(yù)設(shè)形狀進(jìn)行使用，為創(chuàng)作提供了更多的圖形選擇，豐富了設(shè)計(jì)元素。1.3文字工具基礎(chǔ)操作1.3.1輸入并編輯文字本小節(jié)介紹文字輸入與編輯方法。通過工具欄選擇文字工具（橫排或豎排），在畫布上單擊即可輸入文字。輸入后，可在屬性、字符、段落面板中調(diào)整字體、大小、顏色、對(duì)齊方式等。還可使用快捷鍵快速切換工具及操作，如按T鍵切換文字工具。同時(shí)，右鍵單擊文字圖層可進(jìn)行柵格化等操作，以滿足不同的文字處理需求。1.3文字工具基礎(chǔ)操作1.3.2文字變形本小節(jié)介紹文字變形功能。在選中文字圖層且保持文字工具選中狀態(tài)下，點(diǎn)擊工具屬性欄“文字變形”按鈕，可調(diào)出對(duì)話框進(jìn)行變形操作。該功能可創(chuàng)建特殊文字效果，如弧形、波浪形等，為文字增添獨(dú)特的視覺效果，豐富設(shè)計(jì)的表現(xiàn)形式。1.3.3創(chuàng)建路徑文字本小節(jié)介紹介紹創(chuàng)建路徑文字的方法。先繪制矢量路徑（形狀或路徑模式均可），然后選擇文字工具，將鼠標(biāo)指針移至路徑上，文字工具圖標(biāo)改變后單擊輸入文字，文字會(huì)沿著路徑分布。這種方式可以創(chuàng)造出富有創(chuàng)意的文字排版效果，使文字與圖形更好地融合。1.4圖層的基本操作1.4.1新建圖層本小節(jié)介紹新建圖層的方法。在Photoshop中，有多種新建圖層的方式?？梢允褂媒M合鍵Shift+Ctrl+N，也可單擊圖層面板底部的創(chuàng)建新圖層按鈕，或者執(zhí)行“圖層>新建>圖層”命令。新建圖層后，還可通過雙擊圖層名稱文字區(qū)域激活重命名操作，方便對(duì)圖層進(jìn)行管理和區(qū)分。1.4圖層的基本操作1.4.2智能對(duì)象圖層本小節(jié)介紹智能對(duì)象圖層。它可由普通圖層轉(zhuǎn)換而來，包含圖像數(shù)據(jù)且保留原始特性。對(duì)其進(jìn)行變換操作不會(huì)破壞原始圖像，具有執(zhí)行非破壞性變換、處理矢量數(shù)據(jù)、添加智能濾鏡、聯(lián)動(dòng)跟隨等優(yōu)點(diǎn)?？赏ㄟ^右擊圖層選擇相關(guān)命令進(jìn)行轉(zhuǎn)換操作。1.4圖層的基本操作1.4.3調(diào)整圖層本小節(jié)介紹調(diào)整圖層。它是一種特殊圖層類型，在調(diào)整圖像屬性時(shí)不會(huì)直接影響原始圖像像素?cái)?shù)據(jù)?？蓭椭淖儓D像的亮度、對(duì)比度、色彩等屬性，還可應(yīng)用濾鏡效果和顏色校正。通過執(zhí)行“圖層>新建調(diào)整圖層”命令或單擊圖層面板底部按鈕來創(chuàng)建，常用的有多種類型。1.4圖層的基本操作1.4.4圖層的編組、復(fù)制、合并與導(dǎo)出本小節(jié)講解圖層的編組、復(fù)制、合并與導(dǎo)出操作。編組可選中多個(gè)圖層后按Ctrl+G組合鍵實(shí)現(xiàn)，方便管理圖層。復(fù)制圖層快捷鍵為Ctrl+J，合并圖層有多種方法。導(dǎo)出圖層可選中圖層后右鍵選擇相關(guān)命令，如快速導(dǎo)出為PNG等，滿足不同的設(shè)計(jì)需求。1.4圖層的基本操作1.4.5設(shè)置圖層不透明度與填充本小節(jié)介紹圖層不透明度與填充的設(shè)置。在圖層面板右上角有相應(yīng)設(shè)置項(xiàng)，不透明度會(huì)同時(shí)影響圖層內(nèi)容和樣式，填充只影響圖層內(nèi)容?？芍苯虞斎霐?shù)值或拖動(dòng)滑動(dòng)條調(diào)整，也可利用鍵盤數(shù)字鍵快速調(diào)整，如按數(shù)字鍵6可設(shè)為60%。1.4圖層的基本操作1.4.6圖層蒙版的使用本小節(jié)介紹圖層蒙版的使用。它是一種非破壞性圖像編輯工具，原理是在圖層上覆蓋一層有透明、半透明和不透明狀態(tài)的“玻璃片”?？赏ㄟ^繪制填充色彩（黑、白、灰）來控制蒙版效果，添加方式多樣，還可進(jìn)行刪除、停用、啟用和應(yīng)用等操作，并且有普通圖層蒙版和矢量蒙版兩種類型。1.4圖層的基本操作1.4.7圖層的疊加模式本小節(jié)介紹圖層的疊加模式。它是確定當(dāng)前圖層和底層圖像之間像素顏色混合的方式，不同的混合模式會(huì)使圖像呈現(xiàn)不同效果。例如“正片疊加”“濾色”“正?！钡饶Ｊ剑粓D像使用不同模式疊加在其他圖層上的效果各異，在設(shè)計(jì)中可根據(jù)需要選擇合適的模式。1.4圖層的基本操作1.4.8圖層樣式簡介這里介紹圖層樣式。在Photoshop中可為圖層添加樣式來創(chuàng)建豐富視覺效果，如漸變、發(fā)光、描邊、陰影等。普通、矢量形狀、智能對(duì)象和文字圖層均可添加，可同時(shí)勾選多個(gè)樣式，且每個(gè)樣式可設(shè)置不同效果、不透明度和混合模式，豐富設(shè)計(jì)的表現(xiàn)形式。1.5濾鏡1.5.1“濾鏡”菜單本小節(jié)介紹“濾鏡”菜單。它是Photoshop強(qiáng)大的工具，可應(yīng)用各種視覺和藝術(shù)效果，改變圖像外觀。菜單包含多組濾鏡，如“模糊”“扭曲”等，每組有子菜單。使用時(shí)先選圖層，再選濾鏡即可生效。不同濾鏡可制作磨砂玻璃、模擬景深模糊等效果，應(yīng)用廣泛，是圖像處理和界面設(shè)計(jì)的重要手段。1.5濾鏡1.5.2濾鏡庫的使用本小節(jié)介紹濾鏡庫。它是一個(gè)方便的濾鏡工具，在一個(gè)窗口中可添加與調(diào)整不同濾鏡效果，無需切換菜單和窗口。窗口包含多組濾鏡，如“風(fēng)格化”“畫筆描邊”等。左側(cè)是圖像預(yù)覽區(qū)，中間是濾鏡組，右側(cè)是參數(shù)設(shè)置區(qū)，通過操作可實(shí)時(shí)預(yù)覽和調(diào)整濾鏡效果。1.5濾鏡1.5.3智能濾鏡本小節(jié)介紹智能濾鏡。選擇圖層后，將其轉(zhuǎn)換為智能濾鏡（類似轉(zhuǎn)換為智能對(duì)象），此時(shí)不添加濾鏡，可手動(dòng)添加。智能濾鏡效果與普通濾鏡相同，但不會(huì)改變原始圖像像素。通過它可隨時(shí)修改參數(shù)或隱藏效果，恢復(fù)原始圖像，提供了更靈活的濾鏡使用方式。PhotoshopUI設(shè)計(jì)實(shí)戰(zhàn)案例教程(移動(dòng)端+Web端)本章概述：本章主要介紹Photoshop基礎(chǔ)操作。涵蓋工作界面各區(qū)域功能，如菜單欄、工具欄等。詳細(xì)講解矢量繪畫工具（鋼筆、矩形等）、文字工具的基礎(chǔ)使用，包括輸入編輯變形。同時(shí)闡述圖層基本操作，如新建、復(fù)制等，以及濾鏡的基本概念和操作方法，為后續(xù)UI設(shè)計(jì)學(xué)習(xí)奠定堅(jiān)實(shí)基礎(chǔ)。第2章移動(dòng)端App的“輕擬物”風(fēng)格UI設(shè)計(jì)第2章移動(dòng)端App的“輕擬物”風(fēng)格UI設(shè)計(jì)2.1什么是“輕擬物”風(fēng)格設(shè)計(jì)2.2實(shí)例1:磨砂玻璃質(zhì)感的音樂播放器設(shè)計(jì)2.3實(shí)例2:“石膏”質(zhì)感的計(jì)時(shí)器表盤設(shè)計(jì)2.4實(shí)例3:清新輕擬物風(fēng)格的日歷組件2.5拓展訓(xùn)練：融合不同輕擬物質(zhì)感的界面設(shè)計(jì)本節(jié)概述視覺風(fēng)格演進(jìn)早期UI設(shè)計(jì)追求擬物風(fēng)格，模擬現(xiàn)實(shí)物體，刻畫光影和質(zhì)感。2010年微軟MetroUI引入極致扁平化風(fēng)格，幾乎去除所有多余視覺元素。2013年iOS7將扁平化風(fēng)格進(jìn)一步推廣，其特點(diǎn)包括圖標(biāo)應(yīng)用色彩漸變、背景模糊和使用圓角?！拜p擬物”風(fēng)格特點(diǎn)在扁平化流行后出現(xiàn)的“輕擬物”風(fēng)格，是一種“輕量”的擬物。它比經(jīng)典擬物更扁平，但相比扁平化增加了漸變、光影、立體以及輕微的物體質(zhì)感等元素。這種風(fēng)格結(jié)合了擬物和扁平的優(yōu)點(diǎn)，既能保留扁平化的高效，又能提供更多細(xì)節(jié)審美感受。它適用于生活、娛樂類應(yīng)用，且有自身色彩搭配特點(diǎn)，較少用大面積高飽和度、強(qiáng)對(duì)比度色彩，多使用高飽和加高明度的柔和色彩或“高級(jí)灰”色調(diào)。2.1什么是“輕擬物”風(fēng)格設(shè)計(jì)2.1.1早期視覺風(fēng)格的演進(jìn)——從擬物到扁平本小節(jié)講述UI設(shè)計(jì)風(fēng)格的演進(jìn)。早期追求擬物風(fēng)格，模擬現(xiàn)實(shí)物體，刻畫光影和質(zhì)感。2010年微軟MetroUI引入扁平化風(fēng)格，去除多余元素。2013年iOS7進(jìn)一步推廣扁平化，有色彩漸變、背景模糊和圓角等特點(diǎn)。這種演進(jìn)是技術(shù)革新和設(shè)計(jì)思想轉(zhuǎn)變的結(jié)果，從精致靜態(tài)向簡約動(dòng)態(tài)轉(zhuǎn)變。2.1什么是“輕擬物”風(fēng)格設(shè)計(jì)2.1.2視覺審美的某種歸途——“輕擬物”風(fēng)格此小節(jié)介紹“輕擬物”風(fēng)格。它在扁平化流行后出現(xiàn)，是一種“輕量”的擬物。相比扁平化，增加了漸變、光影、立體等元素，但又比經(jīng)典擬物更扁平。它結(jié)合了擬物和扁平的優(yōu)點(diǎn)，在情感化和細(xì)節(jié)上更勝一籌，適用于生活、娛樂等應(yīng)用，色彩搭配也有自身特點(diǎn)。2.1什么是“輕擬物”風(fēng)格設(shè)計(jì)2.2實(shí)例1:磨砂玻璃質(zhì)感的音樂播放器設(shè)計(jì)本節(jié)概述設(shè)計(jì)思路該實(shí)例介紹了用Photoshop繪制具有磨砂玻璃質(zhì)感的音樂播放器界面，核心在于利用對(duì)后層背景的模糊來體現(xiàn)這種質(zhì)感，主要借助“高斯模糊”濾鏡和矢量蒙版實(shí)現(xiàn)。同時(shí)，遵循對(duì)比原則，如立體與扁平效果的強(qiáng)烈對(duì)比，以突出界面操作的主次關(guān)系。設(shè)計(jì)過程1.制作頁面背景首先通過圖層樣式繪制漸變背景，將默認(rèn)背景圖層轉(zhuǎn)換為普通圖層后，添加“漸變疊加”樣式。接著添加橢圓形狀的裝飾性元素，設(shè)置其不透明度和漸變蒙版，再復(fù)制、調(diào)整位置和不透明度，豐富背景。還使用鋼筆工具添加曲線點(diǎn)綴，調(diào)節(jié)曲線圖層不透明度，最后將相關(guān)圖層打包為智能對(duì)象并復(fù)制。2.設(shè)計(jì)制作專輯封面繪制圓形專輯封面的磨砂玻璃背景，調(diào)整位置后，通過復(fù)制智能對(duì)象、繪制矢量蒙版、添加濾鏡等操作打造基礎(chǔ)效果。進(jìn)一步添加專輯封面圖并轉(zhuǎn)換為智能對(duì)象圖層，編組后添加矢量蒙版，對(duì)封面圖進(jìn)行縮放、移動(dòng)并添加圖層樣式。3.設(shè)計(jì)制作按鈕組件繪制播放按鈕組件，包括復(fù)制磨砂玻璃質(zhì)感圖層作為背景，微調(diào)質(zhì)感，繪制播放圖標(biāo)并添加效果。按照類似方法繪制“上一首”和“下一首”按鈕，可加強(qiáng)磨砂玻璃質(zhì)感。然后繪制播放進(jìn)度條，設(shè)置其樣式和投影效果。最后添加歌曲名稱等文字元素，并繪制底部的輔助功能按鈕。2.2.1制作頁面背景本小節(jié)介紹磨砂玻璃質(zhì)感音樂播放器的頁面背景制作1.新建文檔與背景圖層處理首先，通過按Ctrl+N組合鍵新建一個(gè)空白文檔，設(shè)置寬度為856像素，高度為1852像素。默認(rèn)生成的背景圖層處于鎖定狀態(tài)，需雙擊將其轉(zhuǎn)換為普通圖層并命名為“底層背景”。2.2實(shí)例1:磨砂玻璃質(zhì)感的音樂播放器設(shè)計(jì)2.添加漸變樣式轉(zhuǎn)換為普通圖層后，再次雙擊該圖層打開“圖層樣式”窗口，勾選“漸變疊加”樣式，選擇“紫色_13”漸變效果，也可根據(jù)喜好調(diào)整色值。2.2實(shí)例1:磨砂玻璃質(zhì)感的音樂播放器設(shè)計(jì)2.2.1制作頁面背景3.橢圓工具繪制與設(shè)置使用橢圓工具，在工具屬性欄設(shè)置矢量工具繪制模式為“形狀”，填充為純白色，描邊為無，繪制一個(gè)大正圓形。選中該圖層后，通過數(shù)字鍵設(shè)置不透明度為40%。2.2.1制作頁面背景4.添加漸變蒙版選擇漸變工具，設(shè)置為“徑向漸變”，從橢圓圓心偏右上位置開始，按住Shift鍵往右上角拖動(dòng)，為橢圓圖層添加一個(gè)從中央到四周的透明度漸變效果。2.2實(shí)例1:磨砂玻璃質(zhì)感的音樂播放器設(shè)計(jì)2.2.1制作頁面背景5.復(fù)制與調(diào)整圖層保持橢圓圖層選中，按Ctrl+J組合鍵復(fù)制，再按Ctrl+T組合鍵調(diào)出縮放調(diào)節(jié)手柄，調(diào)整大小和位置，確定后按Enter鍵，通過數(shù)字鍵修改不透明度為15%。用同樣方法在左上角繪制一組類似的漸變橢圓形狀并縮小。2.2實(shí)例1:磨砂玻璃質(zhì)感的音樂播放器設(shè)計(jì)2.2.1制作頁面背景5.復(fù)制與調(diào)整圖層保持橢圓圖層選中，按Ctrl+J組合鍵復(fù)制，再按Ctrl+T組合鍵調(diào)出縮放調(diào)節(jié)手柄，調(diào)整大小和位置，確定后按Enter鍵，通過數(shù)字鍵修改不透明度為15%。用同樣方法在左上角繪制一組類似的漸變橢圓形狀并縮小。6.鋼筆工具添加曲線使用鋼筆工具，設(shè)置繪制模式為“形狀”，填充為無，描邊為純白色，粗細(xì)為2像素，繪制一條曲線作為參考，還可繪制多條曲線，調(diào)節(jié)各曲線圖層不透明度，形成透明度的梯度變化節(jié)奏感。2.2實(shí)例1:磨砂玻璃質(zhì)感的音樂播放器設(shè)計(jì)2.2.1制作頁面背景7.智能對(duì)象操作將背景圖層和曲線所在圖層打包進(jìn)一個(gè)“智能對(duì)象”圖層，然后復(fù)制該智能對(duì)象圖層。因?yàn)橹悄軐?duì)象圖層的復(fù)制層會(huì)隨初始層內(nèi)容更新而同步更新，所以在制作基于智能對(duì)象圖層復(fù)制層的高斯模糊時(shí)，只需調(diào)整初始智能對(duì)象的內(nèi)容，所有復(fù)制層都會(huì)同步更新。2.2實(shí)例1:磨砂玻璃質(zhì)感的音樂播放器設(shè)計(jì)2.2.2設(shè)計(jì)制作專輯封面1.繪制矢量圓形選擇橢圓工具，在畫面上部繪制一個(gè)寬高參考值為624像素的正圓形狀圖層，填充為純白色，描邊為無。調(diào)整位置時(shí)，可按Ctrl+T組合鍵調(diào)出調(diào)節(jié)手柄框，在工具屬性欄的X和Y文本框中輸入合適數(shù)值，使正圓形位于正中央偏上位置，也可手動(dòng)控制移動(dòng)。2.創(chuàng)建矢量蒙板選中背景智能圖層“形狀11”，按Ctrl+J組合鍵復(fù)制一層智能對(duì)象，該復(fù)制層會(huì)隨原始智能對(duì)象圖層內(nèi)容更新而更新。復(fù)制后，按Ctrl+G組合鍵將智能對(duì)象圖層編組并命名為“專輯封面模糊”。為該組繪制一個(gè)矢量蒙版，先切換到剛才新建的形狀圖層“橢圓2”，按A鍵切換到路徑選擇工具，選中橢圓路徑并復(fù)制，再選中編組“專輯封面模糊”粘貼，即可自動(dòng)生成矢量蒙版。2.2實(shí)例1:磨砂玻璃質(zhì)感的音樂播放器設(shè)計(jì)2.2.2設(shè)計(jì)制作專輯封面3.打造基礎(chǔ)磨砂玻璃效果選中智能對(duì)象復(fù)制層“形狀11復(fù)制”，執(zhí)行“濾鏡>模糊>高斯模糊”命令，設(shè)置“半徑”為18，得到圓形范圍的磨砂玻璃基礎(chǔ)效果樣式。2.2實(shí)例1:磨砂玻璃質(zhì)感的音樂播放器設(shè)計(jì)2.2.2設(shè)計(jì)制作專輯封面4.增強(qiáng)層次感雙擊編組“專輯封面模糊”，彈出“圖層樣式”窗口，先勾選“漸變疊加”添加漸變樣式，設(shè)置“混合模式”為“正常”，“不透明度”為30%，“角度”為135度，調(diào)整漸變色條兩端色值。再勾選“投影”圖層樣式，設(shè)置顏色色值、混合模式、不透明度、角度、距離和大小等參數(shù)，得到淡淡的藍(lán)色大投影效果。還可勾選“內(nèi)陰影”圖層樣式，設(shè)置相關(guān)參數(shù)，進(jìn)一步優(yōu)化效果。2.2實(shí)例1:磨砂玻璃質(zhì)感的音樂播放器設(shè)計(jì)2.2.2設(shè)計(jì)制作專輯封面5.添加專輯封面圖在“實(shí)例文件>第2章>素材”文件夾中找到圖片“專輯封面素材2.jpg”，按Ctrl+C組合鍵復(fù)制，回到Photoshop中不選中任何圖層，按Ctrl+V組合鍵粘貼圖片，并將其所在圖層轉(zhuǎn)換為智能對(duì)象圖層，雙擊圖層名稱處將圖層重命名為“專輯封面圖”。6.添加矢量蒙版并調(diào)整選中“專輯封面圖”圖層，按Ctrl+G組合鍵為該圖層編組并命名為“專輯封面圖編組”。按A鍵切換為路徑選擇工具，選中前面繪制的圓形矢量形狀圖層“橢圓2”的路徑，按Ctrl+C組合鍵復(fù)制路徑；再選中“專輯封面圖編組”圖層，按Ctrl+V組合鍵粘貼圓形路徑，為該圖層添加一個(gè)正圓形矢量蒙版。最后選中“專輯封面圖”智能對(duì)象圖層，按Ctrl+T組合鍵進(jìn)行縮放和移動(dòng)操作，并雙擊編組圖層“專輯封面圖編組”，調(diào)出“圖層樣式”窗口，勾選“描邊”圖層樣式，調(diào)整相關(guān)參數(shù)。2.2實(shí)例1:磨砂玻璃質(zhì)感的音樂播放器設(shè)計(jì)2.2.3設(shè)計(jì)制作按鈕組件1.繪制播放按鈕組件（1）選擇編組圖層“專輯封面模糊”，按Ctrl+J組合鍵復(fù)制出一層新的磨砂玻璃質(zhì)感圖層，重命名為“播放/暫停按鈕背景”，按A鍵切換到路徑選擇工具，選中該編組圖層的矢量蒙版路徑，縮小并移動(dòng)它的位置。（2）微調(diào)播放按鈕的磨砂玻璃質(zhì)感，雙擊編組圖層“播放/暫停按鈕背景”，調(diào)出“圖層樣式”窗口，調(diào)整兩個(gè)“內(nèi)陰影”圖層樣式的參數(shù)。2.2實(shí)例1:磨砂玻璃質(zhì)感的音樂播放器設(shè)計(jì)2.2.3設(shè)計(jì)制作按鈕組件1.繪制播放按鈕組件（3）繪制播放圖標(biāo)，選擇矩形工具，設(shè)置“填充”為純白色，“描邊”為無，圓角為4像素，先繪制一個(gè)豎向的長方形矢量形狀，然后按住Alt鍵拖動(dòng)鼠標(biāo)復(fù)制出一個(gè)相同的長方形，將兩個(gè)長方形矢量形狀圖層選中，按住Shfit鍵拖動(dòng)鼠標(biāo)使其居中，按Ctrl+G組合鍵編組并命名為“播放圖標(biāo)”。最后雙擊“播放圖標(biāo)”編組圖層，打開“圖層樣式”窗口，勾選添加“漸變疊加”圖層樣式并調(diào)整參數(shù)。2.2實(shí)例1:磨砂玻璃質(zhì)感的音樂播放器設(shè)計(jì)2.2.3設(shè)計(jì)制作按鈕組件2.繪制其他按鈕按照上一步驟的方法繪制出“上一首”和“下一首”按鈕，注意背景尺寸要略小于中央的播放按鈕的背景尺寸，中間的雙三角形圖標(biāo)可以使用三角形工具來繪制，并將“播放圖標(biāo)”編組圖層的漸變圖層樣式復(fù)制粘貼到“上一首”“下一首”按鈕的雙三角形圖標(biāo)編組圖層上。如果想進(jìn)一步加強(qiáng)磨砂玻璃的質(zhì)感，可為相關(guān)圖層添加“添加雜色”濾鏡。2.2實(shí)例1:磨砂玻璃質(zhì)感的音樂播放器設(shè)計(jì)2.2實(shí)例1:磨砂玻璃質(zhì)感的音樂播放器設(shè)計(jì)2.2.3設(shè)計(jì)制作按鈕組件3.繪制播放進(jìn)度條（1）繪制進(jìn)度條背景使用矩形工具在播放按鈕組件和專輯封面之間的區(qū)域繪制一個(gè)細(xì)長條形，設(shè)置“填充”為純白色，“描邊”為無，圓角設(shè)為6。將矢量形狀圖層重命名為“播放進(jìn)度條背景”，并按數(shù)字鍵6將圖層不透明度改為60%。（2）設(shè)置樣式和投影效果雙擊“播放進(jìn)度條背景”圖層，調(diào)出“圖層樣式”窗口，勾選添加“漸變疊加”圖層樣式，設(shè)置相關(guān)參數(shù)。按Ctrl+J組合鍵復(fù)制一個(gè)圖層，重命名為“進(jìn)度”，并將圖層的“不透明度”修改為100%，按Ctrl+T組合鍵使用自由縮放控制手柄縮短復(fù)制的矢量形狀橫向?qū)挾取?.2實(shí)例1:磨砂玻璃質(zhì)感的音樂播放器設(shè)計(jì)2.2.3設(shè)計(jì)制作按鈕組件3.繪制播放進(jìn)度條（3）調(diào)整進(jìn)度條的圖層樣式再雙擊新復(fù)制的“進(jìn)度”圖層，打開“圖層樣式”窗口，調(diào)整該圖層的漸變效果。為進(jìn)度條添加投影效果，在“進(jìn)度”圖層的“圖層樣式“窗口中進(jìn)行操作，勾選“投影”圖層樣式，設(shè)置相關(guān)參數(shù)。2.2實(shí)例1:磨砂玻璃質(zhì)感的音樂播放器設(shè)計(jì)2.2.3設(shè)計(jì)制作按鈕組件4.添加文字元素按T鍵選擇文字工具，設(shè)置字符大小為60點(diǎn)，排列設(shè)為居中分布，顏色色值設(shè)為#3518b2，添加歌曲名稱作為最主要的文字元素。還可添加其他輔助文字，如歌曲專輯名稱、進(jìn)度時(shí)間碼、歌曲時(shí)長等，將文字顏色色值統(tǒng)一改為#2d2e5e，字體大小改為40。2.2實(shí)例1:磨砂玻璃質(zhì)感的音樂播放器設(shè)計(jì)2.2.3設(shè)計(jì)制作按鈕組件5.繪制底部輔助按鈕繪制“收藏”圖標(biāo)選擇矢量形狀工具中的多邊形工具，設(shè)置邊數(shù)為5，圓角設(shè)為6像素，在彈出的多邊形屬性面板中將“星形比例”設(shè)為60%，設(shè)置“填充”色值為#3518b2，“描邊”為無，在下方繪制一個(gè)五角星圖標(biāo)。按5鍵將多邊形矢量形狀的圖層不透明度改為50%。2.2實(shí)例1:磨砂玻璃質(zhì)感的音樂播放器設(shè)計(jì)2.2.3設(shè)計(jì)制作按鈕組件5.繪制底部輔助按鈕繪制“播放列表”圖標(biāo)選擇矩形工具，保持填充色、描邊和圓角參數(shù)不變，在星形收藏圖標(biāo)右側(cè)繪制一個(gè)由三條細(xì)橫線組成的圖標(biāo)。按5鍵將播放列表的圖層不透明度改為50%。繪制“分享”圖標(biāo)選擇鋼筆工具，設(shè)置繪制模式為“形狀”，“填充”為無，“描邊”為6像素，“填充”色值保持不變?yōu)?3518b2，設(shè)置端點(diǎn)和角點(diǎn)為“圓頭”和“圓角”，在播放列表圖標(biāo)右側(cè)繪制一個(gè)形狀參考圖標(biāo)的圖標(biāo)。圖層的“不透明度”設(shè)為50%。繪制“更多”圖標(biāo)選擇橢圓工具，將“填充”色值再次設(shè)為#3518b2，“描邊”為無，按住Shift鍵繪制3個(gè)小的正圓形上下排列。將圖層不透明度改為50%。排列4個(gè)圖標(biāo)最后將4個(gè)圖標(biāo)排列整齊，調(diào)整位置使其左右平衡，同時(shí)選中4個(gè)圖標(biāo)所在圖層，選擇移動(dòng)工具，使這4個(gè)圖標(biāo)水平分布并對(duì)齊。2.3實(shí)例2:“石膏”質(zhì)感的計(jì)時(shí)器表盤設(shè)計(jì)本節(jié)概述設(shè)計(jì)思路該實(shí)例介紹了繪制具有“石膏”質(zhì)感的計(jì)時(shí)器界面，核心是模擬石膏的特性。通過不同角度的陰影樣式疊加，營造出表面無高光和反光、陰影和明暗面過渡柔和的效果。同時(shí)，整體界面色彩采用冷白色調(diào)，陰影注意色彩傾向，以體現(xiàn)石膏的質(zhì)感并避免過多寫實(shí)細(xì)節(jié)干擾用戶操作。設(shè)計(jì)過程1.繪制頁面背景和主體時(shí)間撥盤繪制界面背景：新建文檔后，將背景圖層轉(zhuǎn)換為普通圖層，添加漸變圖層樣式，設(shè)置漸變色值、不透明度、樣式和角度等參數(shù)。繪制中央撥盤主體：使用橢圓工具繪制正圓形撥盤主體，設(shè)置填充色值和描邊，添加投影圖層樣式，設(shè)置混合模式、顏色、不透明度、角度、距離、擴(kuò)展和大小等參數(shù)。為撥盤添加細(xì)節(jié)：復(fù)制撥盤主體圖層，調(diào)整投影樣式創(chuàng)建內(nèi)凹立體效果，包括調(diào)整不透明度、角度、距離、擴(kuò)展和大小等參數(shù)。繪制計(jì)時(shí)器進(jìn)度條：復(fù)制撥盤主體圖層并調(diào)整位置和形狀作為進(jìn)度條，添加錨點(diǎn)并調(diào)整路徑形狀，設(shè)置填充、描邊和投影等樣式，添加時(shí)間數(shù)字。2.繪制下方的按鈕組繪制按鈕的背景：對(duì)撥盤相關(guān)圖層編組并復(fù)制，調(diào)整大小和位置作為按鈕背景，調(diào)整圖層內(nèi)各部分的投影樣式。繪制按鈕圖標(biāo)并添加輔助文字：使用矩形工具繪制按鈕圖標(biāo)，添加文字內(nèi)容并設(shè)置字體、顏色、大小和不透明度等參數(shù)。2.3實(shí)例2:“石膏”質(zhì)感的計(jì)時(shí)器表盤設(shè)計(jì)2.3.1繪制頁面背景和主體時(shí)間撥盤1.繪制界面背景新建文檔與圖層設(shè)置打開Photoshop，按Ctrl+N組合鍵新建一個(gè)空白文檔，設(shè)置寬度和高度為856像素和1852像素，將背景圖層轉(zhuǎn)換為普通圖層并命名為“底層背景”。添加漸變圖層樣式雙擊“底層背景”圖層，調(diào)出“圖層樣式”窗口，勾選“漸變疊加”圖層樣式。設(shè)置漸變色條左右兩端色值分別為#cedfff和#edf5fc，不透明度為100%，樣式為“線性”，角度為-90度，縮放為120%。2.3實(shí)例2:“石膏”質(zhì)感的計(jì)時(shí)器表盤設(shè)計(jì)2.3.1繪制頁面背景和主體時(shí)間撥盤2.繪制中央撥盤主體繪制撥盤形狀選擇橢圓工具，設(shè)置繪制模式為“形狀”，填充色值為#edf5fc，描邊為無，在界面中央上方按住Shift鍵繪制一個(gè)正圓形，大小和位置參考圖，重命名為“撥盤主體”添加投影效果雙擊“撥盤主體”圖層，調(diào)出“圖層樣式”窗口，勾選“投影”圖層樣式。設(shè)置投影的混合模式為“正片疊底”，投影顏色色值為#4a50da，不透明度為15%，角度為135度，距離為90像素，擴(kuò)展為10%，大小為150像素。進(jìn)一步完善撥盤投影效果單擊“投影”樣式右端的“添加”按鈕，設(shè)置投影的混合模式為“正常”，投影顏色為純白色，不透明度為90%，角度為-45度，距離為80像素，擴(kuò)展為10%，大小為180像素，初步呈現(xiàn)平緩?fù)蛊鸬膱A盤效果。2.3實(shí)例2:“石膏”質(zhì)感的計(jì)時(shí)器表盤設(shè)計(jì)2.3.1繪制頁面背景和主體時(shí)間撥盤3.為撥盤添加細(xì)節(jié)創(chuàng)建撥盤內(nèi)陷效果選中形狀圖層“撥盤主體”，按Ctrl+J組合鍵復(fù)制，重命名為“撥盤內(nèi)陷”，按Ctrl+T組合鍵調(diào)出自由縮放控制手柄，按住Alt鍵進(jìn)行以圓心為軸心的中央縮放，縮小一圈，大小參考圖。添加漸變和投影樣式雙擊“撥盤內(nèi)陷”圖層，調(diào)出“圖層樣式”窗口，勾選“漸變疊加”圖層樣式，設(shè)置混合模式為“正?！?，漸變色條兩端色值分別為#e4ecff和#f5faff，不透明度為100%，角度為-45度，縮放為100%。修改投影樣式，設(shè)置第一個(gè)投影樣式的不透明度為100%，角度為135度，距離為6像素，擴(kuò)展和大小均為0；設(shè)置第二個(gè)投影樣式的角度為-45度，距離為6像素，擴(kuò)展和大小均為0，創(chuàng)建輕薄的內(nèi)凹立體效果。2.3實(shí)例2:“石膏”質(zhì)感的計(jì)時(shí)器表盤設(shè)計(jì)2.3.1繪制頁面背景和主體時(shí)間撥盤4.繪制計(jì)時(shí)器進(jìn)度條（1）繪制進(jìn)度條形狀選中形狀圖層“撥盤主體”，按Ctrl+J組合鍵復(fù)制該圖層，并將復(fù)制出的圖層重命名為“時(shí)間進(jìn)度條”。按Ctrl+T組合鍵調(diào)出自由縮放變換手柄，然后按住Alt鍵拖動(dòng)手柄對(duì)該圖層進(jìn)行縮放，使其大致位于兩個(gè)圓形之間。（2）調(diào)整進(jìn)度條路徑按A鍵切換到路徑選擇工具，選中形狀圖層“時(shí)間進(jìn)度條”的形狀路徑，再選擇鋼筆工具，并將鼠標(biāo)指針移到形狀圖層“時(shí)間進(jìn)度條”的形狀路徑上，在圓形路徑右下角添加一個(gè)錨點(diǎn)。用鼠標(biāo)右鍵單擊路徑選擇工具，在彈出的面板中選擇直接選擇工具，按住Shift鍵選中兩個(gè)錨點(diǎn)，然后按Delete鍵刪除這兩個(gè)錨點(diǎn)，使原來完整的圓形變成一段斷開的弧形。2.3實(shí)例2:“石膏”質(zhì)感的計(jì)時(shí)器表盤設(shè)計(jì)2.3.1繪制頁面背景和主體時(shí)間撥盤4.繪制計(jì)時(shí)器進(jìn)度條（3）設(shè)置進(jìn)度條樣式確認(rèn)使用工具是直接選擇工具后，修改工具屬性欄中的參數(shù)，將填充改為無，將描邊改為任意一種顏色，這里將描邊粗細(xì)設(shè)為12像素，然后將“描邊選項(xiàng)”中的“端點(diǎn)”改為圓頭。雙擊形狀圖層“時(shí)間進(jìn)度條”，彈出“圖層樣式”窗口，勾選“漸變疊加”圖層樣式，并取消勾選第一個(gè)“投影”樣式，設(shè)置漸變色條左右兩端色值分別為#219eff和#703eff，角度為-90度，縮放為100%。修改時(shí)間進(jìn)度條的投影效果，設(shè)置其不透明度為50%，距離為6像素，擴(kuò)展為0，大小為15像素，添加時(shí)間數(shù)字，設(shè)置字體、顏色和不透明度等參數(shù)。2.3實(shí)例2:“石膏”質(zhì)感的計(jì)時(shí)器表盤設(shè)計(jì)2.3.2繪制下方的按鈕組1.繪制按鈕的背景復(fù)制與調(diào)整圖層選中圖層“撥盤內(nèi)陷”和“撥盤主體”，按Ctrl+G組合鍵對(duì)它們進(jìn)行編組，并重命名為“凸起表盤”。保持編組“凸起表盤”選中的狀態(tài)，按Ctrl+J組合鍵復(fù)制該編組圖層，并重命名為“按鈕1背景”。選擇編組圖層“按鈕1背景”，按Ctrl+T組合鍵對(duì)其進(jìn)行縮放和移動(dòng)，調(diào)整后的大小和位置符合設(shè)計(jì)要求。調(diào)整圖層內(nèi)元素展開編組圖層“按鈕1背景”，選擇其中的“撥盤內(nèi)陷”圖層，重命名為“按鈕內(nèi)陷”，將編組圖層“按鈕1背景”下的“撥盤主體”圖層重命名為“按鈕主體”。按Ctrl+T組合鍵調(diào)出縮放移動(dòng)手柄，按住Alt鍵適當(dāng)縮小一點(diǎn)。雙擊“按鈕主體”圖層調(diào)出“圖層樣式”窗口，設(shè)置第一個(gè)“投影”樣式的不透明度為100%，距離為60像素，擴(kuò)展為6%，大小為100像素；設(shè)置第2個(gè)“投影”樣式的距離為40像素，擴(kuò)展為5%，大小為70像素。2.3實(shí)例2:“石膏”質(zhì)感的計(jì)時(shí)器表盤設(shè)計(jì)2.3.2繪制下方的按鈕組2.繪制按鈕圖標(biāo)并添加輔助文字繪制按鈕圖標(biāo)切換使用矩形工具，設(shè)置“填充”色值為#8f93e7，“描邊”為無，“圓角大小”為12像素，按住Shift鍵在左邊按鈕的中央繪制一個(gè)小正方形作為取消按鈕；再在右邊的按鈕上繪制兩個(gè)窄矩形作為暫停按鈕。添加輔助文字選擇文字工具，將色值設(shè)為#031179，編輯并添加文字內(nèi)容，為兩個(gè)按鈕添加輔助文字Cancel、Pause和為頁面標(biāo)題添加文字Timer，字體均設(shè)為細(xì)體。設(shè)置Cancel和Pause的字體大小為45，圖層不透明度設(shè)為60%，標(biāo)題Timer的字體大小為66。2.4實(shí)例3:清新輕擬物風(fēng)格的日歷組件本節(jié)概述設(shè)計(jì)思路本實(shí)例致力于打造局部輕擬物風(fēng)格與主體扁平化風(fēng)格融合的日歷組件。重點(diǎn)是為所選日期范圍創(chuàng)建突出的立體效果，確保用戶能快速識(shí)別，同時(shí)保持組件其他部分的簡約扁平風(fēng)格，并在部分按鈕上保留立體細(xì)節(jié)，給用戶帶來交互驚喜。設(shè)計(jì)過程1.繪制組件主體背景和編排日歷數(shù)字背景繪制：轉(zhuǎn)換背景圖層后添加漸變樣式。用矩形工具繪制組件主體并設(shè)置投影。再繪制標(biāo)題欄，添加投影和漸變樣式，最后添加標(biāo)題文字。數(shù)字編排：使用文字工具添加星期和日期數(shù)字，部分?jǐn)?shù)字調(diào)整不透明度。2.繪制已選擇日期范圍的效果樣式選擇范圍背景：繪制矩形并調(diào)整為膠囊形狀作為日期范圍背景，設(shè)置填充、描邊、投影和漸變樣式。為組件主體添加底色，設(shè)置漸變樣式。選日期手柄：復(fù)制并調(diào)整頂部藍(lán)色圖層作為選日期手柄，修改字符并添加漸變、投影和內(nèi)陰影樣式。復(fù)制該圖層完成另一個(gè)手柄繪制。3.繪制底部的兩個(gè)按鈕左側(cè)按鈕：繪制膠囊形狀左側(cè)按鈕，添加文字。右側(cè)按鈕：復(fù)制左側(cè)按鈕并調(diào)整，添加多種圖層樣式，再添加文字。2.4實(shí)例3:清新輕擬物風(fēng)格的日歷組件2.4.1繪制組件主體背景和編排日歷數(shù)字1.繪制組件的背景（1）新建文檔與背景設(shè)置打開Photoshop，按Ctrl+N組合鍵新建一個(gè)空白文檔，將寬度和高度均設(shè)為1280像素，命名為“2.4實(shí)例3”。雙擊默認(rèn)的“背景”圖層，轉(zhuǎn)換為普通圖層，重命名為“底層背景”。雙擊“底層背景”圖層，調(diào)出“圖層樣式”窗口，在左側(cè)欄勾選“漸變疊加”圖層樣式，設(shè)置漸變色條左右兩端顏色值分別為#cedfff和#edf5fc，不透明度為100%，樣式為“線性”，角度為-90度，縮放為120%。2.4實(shí)例3:清新輕擬物風(fēng)格的日歷組件2.4.1繪制組件主體背景和編排日歷數(shù)字1.繪制組件的背景（2）繪制組件主體選擇矩形工具，將“填充”顏色設(shè)為純白色，“描邊”設(shè)為無，圓角大小設(shè)為120像素，按住Shift鍵繪制一個(gè)正方形，大小和位置符合要求，重命名為“組件主體”雙擊編組圖層“組件主體”，調(diào)出“圖層樣式”窗口，在左側(cè)欄選擇勾選“投影”圖層樣式，設(shè)置混合模式為“正片疊底”，投影顏色為#4a50da，不透明度為12%，角度為90度，距離為120像素，擴(kuò)展為0%，大小為60像素。再單擊按鈕添加第二個(gè)投影效果，設(shè)置其混合模式為“正片疊底”，不透明度為8%，距離為40像素，大小為30像素。選擇路徑選擇工具，選中形狀圖層“矩形1”的矩形路徑，按Ctrl+C組合鍵復(fù)制路徑，然后切換選中編組圖層“組件主體”，按住Ctrl+V組合鍵粘貼路徑，此時(shí)自動(dòng)生成一個(gè)形狀與“矩形1”完全相同的矢量蒙版。2.4實(shí)例3:清新輕擬物風(fēng)格的日歷組件2.4.1繪制組件主體背景和編排日歷數(shù)字1.繪制組件的背景（3）繪制組件標(biāo)題欄選擇矩形工具，設(shè)置“填充”顏色為藍(lán)色，“描邊”為無，圓角大小為18像素，然后在編組圖層“組件主體”內(nèi)繪制一個(gè)新的矩形，繪制完成后移動(dòng)新繪制的藍(lán)色矩形兩邊自由縮放手柄，使其與背景的白色矩形兩邊對(duì)齊，以作為日歷組件的標(biāo)題背景欄，重命名為“標(biāo)題欄背景”。用鼠標(biāo)右鍵單擊編組圖層“組件主體”，在彈出的菜單中選擇“復(fù)制圖層樣式”選項(xiàng)，再切換選中藍(lán)色形狀圖層“標(biāo)題欄背景”，單擊鼠標(biāo)右鍵，在彈出的菜單中選擇“粘貼圖層樣式”選項(xiàng)，為標(biāo)題欄背景添加投影效果。2.4實(shí)例3:清新輕擬物風(fēng)格的日歷組件2.4.1繪制組件主體背景和編排日歷數(shù)字1.繪制組件的背景（4）調(diào)整圖層樣式和添加標(biāo)題文字雙擊藍(lán)色形狀所在圖層“標(biāo)題欄背景”，調(diào)出“圖層樣式”窗口，設(shè)置第一個(gè)“投影”圖層樣式的不透明度為60%，距離為15像素，大小為36像素。然后調(diào)整第二個(gè)“投影”樣式的不透明度為60%，距離為15像素，大小為36像素。勾選“漸變疊加”圖層樣式，設(shè)置漸變條預(yù)設(shè)為“藍(lán)色_24”，不透明度為100%，角度為180度，縮放為150%。2.4實(shí)例3:清新輕擬物風(fēng)格的日歷組件2.4.1繪制組件主體背景和編排日歷數(shù)字2.添加標(biāo)題文字、日期數(shù)字和星期，繪制日歷視圖（1）添加標(biāo)題文字添加標(biāo)題文字，按T鍵切換到文字工具，設(shè)置“字體”為粗體字，“字體顏色”為純白色，“大小”為72，字符的字距為200，再輸入文字內(nèi)容“JUNE”（1）添加星期和部分日期數(shù)字選擇文字工具，設(shè)置字體大小為48，字體色值為#666597，“不透明度”為30%。再輸入7個(gè)單詞，分別是Sun、Mon、Tue、Wed、Thu、Fri、Sat，它們排布位置符合設(shè)計(jì)要求。（2）添加日歷月視圖數(shù)字將字體設(shè)為細(xì)體字，字體顏色設(shè)為深藍(lán)色，輸入5行數(shù)字（每行7個(gè)數(shù)字）作為日歷月視圖，注意最后一行的1-5這幾個(gè)數(shù)字屬于下個(gè)月，因此需要將不透明度降低50%。2.4實(shí)例3:清新輕擬物風(fēng)格的日歷組件2.4.2繪制已選擇日期范圍的效果樣式1.繪制選擇范圍的背景（1）繪制日期范圍背景形狀選擇矩形工具，“填充”設(shè)為純白色，“描邊”設(shè)為無，在第4行數(shù)字從23-28繪制一個(gè)矩形，調(diào)整為膠囊形狀，重命名為“日期范圍背景”，放置在月視圖數(shù)字組和星期字符組圖層下方。2.4實(shí)例3:清新輕擬物風(fēng)格的日歷組件2.4.2繪制已選擇日期范圍的效果樣式1.繪制選擇范圍的背景（2）設(shè)置日期范圍背景樣式雙擊圖層“日期范圍背景”調(diào)出“圖層樣式”窗口，勾選“漸變疊加”圖層樣式，設(shè)置漸變色條左右兩端色值分別為#cad8f3和#e5edf8，角度設(shè)為-87度，縮放設(shè)為100%。勾選“描邊”圖層樣式，設(shè)置“大小”為5像素。勾選并添加兩個(gè)“投影”圖層樣式，設(shè)置第1個(gè)“投影”圖層樣式的混合模式為“濾色”，顏色為純白色，不透明度為100%，角度為-45度，距離為30像素，大小為45像素。設(shè)置第2個(gè)“投影”圖層樣式的混合模式為“正片疊底”，顏色色值為#4a50da，不透明度為8%，角度為135度，距離為36像素，大小為60像素。2.4實(shí)例3:清新輕擬物風(fēng)格的日歷組件2.4.2繪制已選擇日期范圍的效果樣式1.繪制選擇范圍的背景（2）為組件主體添加底色選中矢量形狀圖層“矩形1”，雙擊該圖層彈出“圖層”樣式窗口，勾選“漸變疊加”圖層樣式，設(shè)置漸變色條左右兩端的色值分別為##e6ebf2和#ffffff，角度為-87度，縮放為100%。2.4實(shí)例3:清新輕擬物風(fēng)格的日歷組件2.4.2繪制已選擇日期范圍的效果樣式2.繪制添加兩個(gè)選日期的手柄組件繪制第一個(gè)選日期手柄切換選中頂部的藍(lán)色形狀圖層“標(biāo)題欄背景”，按Ctrl+J組合鍵復(fù)制出一層新的相同圖層，重命名為“選擇入住日期手柄”，縮放大小并移至合適位置，調(diào)整為膠囊形狀，修改數(shù)字23的字符顏色為白色，內(nèi)容編輯為“23in”，字體改為粗體。設(shè)置第一個(gè)選日期手柄樣式雙擊圖層“選擇入住日期手柄”調(diào)出“圖層樣式”窗口，勾選“漸變疊加”圖層樣式，將漸變色條左右兩端色值分別設(shè)為#2c17cd和#2871fa，角度設(shè)為120度，縮放為150%。添加兩個(gè)投影樣式，設(shè)置第一個(gè)投影樣式的投影顏色為#4a50da，混合模式為“正片疊底”，不透明度為50%，角度為90度，距離為8像素，大小為15。設(shè)置第二個(gè)投影樣式的“不透明度”為15%，距離為30，大小為30，其他參數(shù)和第一個(gè)投影樣式的參數(shù)一樣。2.4實(shí)例3:清新輕擬物風(fēng)格的日歷組件2.4.2繪制已選擇日期范圍的效果樣式2.繪制添加兩個(gè)選日期的手柄組件為第一個(gè)選日期手柄添加內(nèi)陰影樣式勾選“內(nèi)陰影”樣式，設(shè)置“混合模式”為“濾色”，不透明度為40%，角度為120度，距離為3像素，大小為1像素。繪制第二個(gè)選日期手柄選中樣式調(diào)整完畢的“選擇入住日期手柄”，按Ctrl+J組合鍵復(fù)制，重命名為“選擇離開日期手柄”，將其移動(dòng)到右側(cè)，并將數(shù)字28改為純白色，內(nèi)容改為“28out”，其中數(shù)字28改為粗體字。2.4實(shí)例3:清新輕擬物風(fēng)格的日歷組件2.4.3繪制底部的兩個(gè)按鈕1.繪制左側(cè)按鈕（1）繪制按鈕形狀選擇矩形工具，“填充”設(shè)為#e6ebf2，“描邊”設(shè)為無，并將圓角調(diào)到100，繪制出一個(gè)膠囊形狀的左側(cè)按鈕，大小和位置符合設(shè)計(jì)要求，重命名為“左側(cè)按鈕”（2）添加按鈕文字使用文字工具在左側(cè)按鈕中輸入文字“CANCEL”，設(shè)置字體大小為48，字體顏色為#5d637a，字體為細(xì)體。2.4實(shí)例3:清新輕擬物風(fēng)格的日歷組件2.4.3繪制底部的兩個(gè)按鈕2.繪制右側(cè)按鈕（1）復(fù)制與調(diào)整按鈕選中圖層“左側(cè)按鈕”，按Ctrl+J組合鍵復(fù)制并重命名為“右側(cè)按鈕”，將其移動(dòng)到右側(cè)（2）設(shè)置按鈕樣式雙擊圖層“右側(cè)按鈕”，調(diào)出“圖層樣式”窗口，依次勾選添加“描邊”、兩個(gè)“內(nèi)陰影”、“漸變疊加”和“投影”共5個(gè)圖層樣式。設(shè)置“描邊”圖層樣式的“大小”為3像素，“位置”為外部，顏色為純白色設(shè)置第一個(gè)“內(nèi)陰影”樣式的“混合模式”為“正片疊底”，“不透明度”為33%，顏色為#8894f1，“角度”為135度，“時(shí)間戳：2024年1月1日12:00:00距離”為24像素，“大小”為36像素設(shè)置第二個(gè)“內(nèi)陰影”樣式的“混合模式”為“濾色”，“不透明度”為100%，顏色為純白色，“角度”為-45度，“距離”和“大小”與第一個(gè)“內(nèi)陰影”圖層樣式相同設(shè)置“漸變疊加”圖層樣式的“不透明度”為100%，漸變色條左右兩端色值分別為#cad8f3和#e5edf8，“角度”為-87度設(shè)置“投影”圖層樣式的“混合模式”為“正片疊底”，顏色為#4a50da，“不透明度”為8%，“角度”為135度，“距離”為36像素，“大小”為60像素（3）添加按鈕文字使用文字工具設(shè)置字體大小為48，顏色為#412ef5，字體建議設(shè)為regular，在右側(cè)按鈕中輸入文字“CONFIRM”2.5拓展訓(xùn)練:融合不同輕擬物質(zhì)感的界面設(shè)計(jì)最終效果設(shè)計(jì)思路本實(shí)例旨在綜合運(yùn)用前面所學(xué)技巧，將磨砂玻璃、石膏質(zhì)感凸起等不同擬物風(fēng)格整合到一個(gè)界面中。設(shè)計(jì)過程整合主要元素界面中最主要的元素是5張日歷事件卡片，用矩形工具繪制，并通過“漸變疊加”“投影”等圖層樣式實(shí)現(xiàn)效果。制作磨砂玻璃效果將卡片及相關(guān)元素編組，轉(zhuǎn)為智能對(duì)象并復(fù)制一層。用矩形工具繪制矢量蒙版，對(duì)復(fù)制的智能對(duì)象圖層添加“高斯模糊”濾鏡，再添加半透明淺色漸變效果，做出磨砂玻璃效果制作凸起元素卡片中兩個(gè)凸起元素的制作方法和實(shí)例2中的“石膏質(zhì)感撥盤”相同，將形狀由圓形改為圓角矩形，再用文字工具添加字符元素完善其他元素左側(cè)的月視圖組及其代表今天的藍(lán)色標(biāo)識(shí)和右上角的標(biāo)簽切換組件，使用“漸變疊加”和兩個(gè)“投影”即可，參考實(shí)例3中日歷組件底板和頂部標(biāo)題欄背景的投影效果制作2.5拓展訓(xùn)練:融合不同輕擬物質(zhì)感的界面設(shè)計(jì)PhotoshopUI設(shè)計(jì)實(shí)戰(zhàn)案例教程(移動(dòng)端+Web端)第3章移動(dòng)端App的卡片設(shè)計(jì)本章概述：第3章主要介紹移動(dòng)端App的卡片設(shè)計(jì)。首先闡述卡片在UI設(shè)計(jì)中的概念，它是一種綜合性信息集合組件，能有效組織信息。接著介紹其常見類型和應(yīng)用場景，如音樂、天氣、日歷等應(yīng)用中作為核心功能入口或組織分類信息的載體。然后通過多個(gè)實(shí)例詳細(xì)講解設(shè)計(jì)過程，包括2.5D風(fēng)格的天氣卡片、音樂卡片、日程卡片等，涉及各種工具和圖層樣式的運(yùn)用，最后還提及數(shù)據(jù)可視化卡片設(shè)計(jì)作為拓展訓(xùn)練，展示了卡片設(shè)計(jì)的多樣性和實(shí)用性。第3章移動(dòng)端App的卡片設(shè)計(jì)3.1移動(dòng)端UI設(shè)計(jì)中的卡片設(shè)計(jì)3.2實(shí)例1:2.5D風(fēng)格的天氣卡片設(shè)計(jì)3.3實(shí)例2:音樂卡片設(shè)計(jì)3.4實(shí)例3:日程卡片設(shè)計(jì)3.5拓展訓(xùn)練:數(shù)據(jù)可視化卡片設(shè)計(jì)本節(jié)概述概念闡述首先明確了卡片是一種綜合性信息集合組件，它能夠?qū)⑽淖?、圖像、圖標(biāo)等多種元素整合在一起，以一種簡潔、直觀的方式呈現(xiàn)給用戶。作用及優(yōu)勢強(qiáng)調(diào)了卡片在移動(dòng)端UI設(shè)計(jì)中的重要作用。它可以有效地組織信息，使用戶能夠快速瀏覽和獲取關(guān)鍵內(nèi)容。同時(shí)，卡片的形式具有靈活性和可擴(kuò)展性，能夠適應(yīng)不同的屏幕尺寸和設(shè)備類型。設(shè)計(jì)要點(diǎn)還提到了一些卡片設(shè)計(jì)的要點(diǎn)。例如，要注意卡片的尺寸和比例，以確保在不同設(shè)備上的顯示效果；要合理運(yùn)用色彩、字體和圖標(biāo)等元素，增強(qiáng)卡片的視覺吸引力；要考慮卡片之間的間距和排列方式，以提高用戶的操作體驗(yàn)。3.1移動(dòng)端UI設(shè)計(jì)中的卡片設(shè)計(jì)3.1.1UI中的卡片是什么此小節(jié)著重介紹了移動(dòng)端UI設(shè)計(jì)中卡片的定義。卡片是一種集成多種元素的信息集合組件，它將文字、圖像、圖標(biāo)等融合在一起。這種設(shè)計(jì)形式簡潔直觀，能高效地向用戶傳達(dá)信息。它具有一定的獨(dú)立性和完整性，在界面中可作為一個(gè)獨(dú)立的模塊存在，同時(shí)又能與其他卡片或組件相互配合，構(gòu)成完整的UI界面，是移動(dòng)端UI設(shè)計(jì)中一種重要的信息組織和展示方式。3.1移動(dòng)端UI設(shè)計(jì)中的卡片設(shè)計(jì)3.1.2卡片的常見應(yīng)用場景該小節(jié)闡述了卡片在移動(dòng)端UI設(shè)計(jì)中的常見應(yīng)用場景。卡片廣泛應(yīng)用于各類App中，如音樂App中用于展示專輯封面、歌曲信息等；天氣App中呈現(xiàn)天氣狀況和相關(guān)數(shù)據(jù)；日歷App里展示日程安排。它還可用于新聞資訊類App，以卡片形式展示新聞標(biāo)題和圖片等內(nèi)容。通過這些應(yīng)用場景可知，卡片能夠有效地組織和分類信息，使用戶可以快速瀏覽和獲取所需內(nèi)容，提升了用戶體驗(yàn)。3.1移動(dòng)端UI設(shè)計(jì)中的卡片設(shè)計(jì)3.2實(shí)例1:2.5D風(fēng)格的天氣卡片設(shè)計(jì)本節(jié)概述設(shè)計(jì)思路

本實(shí)例旨在打造具有2.5D風(fēng)格的天氣卡片，核心是通過光影和立體效果呈現(xiàn)天氣信息。利用圖層樣式和形狀工具，營造

出卡片的立體感，同時(shí)結(jié)合天氣元素的特點(diǎn)進(jìn)行設(shè)計(jì)，使信息直觀且具有吸引力。設(shè)計(jì)過程1.繪制卡片背景和基本形狀繪制背景：新建文檔，將背景圖層轉(zhuǎn)換為普通圖層，添加漸變圖層樣式，設(shè)置漸變色值和角度等參數(shù)。繪制卡片主體：使用矩形工具繪制卡片形狀，設(shè)置填充顏色和描邊，添加投影圖層樣式，設(shè)置混合模式、顏色、不透明度、角度、距離和大小等參數(shù)，營造立體感。2.添加天氣元素繪制太陽或云朵：根據(jù)天氣情況，使用形狀工具繪制太陽或云朵形狀，設(shè)置填充和描邊，添加圖層樣式，如漸變疊加和投影，使其具有立體感和光影效果。添加溫度和其他信息：使用文字工具添加溫度、天氣狀況等文字信息，設(shè)置字體、顏色和大小，使其與卡片整體風(fēng)格協(xié)調(diào)。3.完善卡片細(xì)節(jié)添加陰影和高光：通過調(diào)整圖層樣式和繪制形狀，為卡片添加陰影和高光，增強(qiáng)立體感。調(diào)整整體效果：檢查卡片的整體效果，對(duì)顏色、光影和元素位置進(jìn)行調(diào)整，確保信息清晰、美觀。3.2.1繪制第一張卡片1.新建文檔與背景設(shè)置新建一個(gè)空白文檔。然后將背景圖層轉(zhuǎn)換為普通圖層，重命名為“底層背景”。雙擊“底層背景”圖層，調(diào)出“圖層樣式”窗口，勾選“漸變疊加”圖層樣式，調(diào)整參數(shù)3.2實(shí)例1:2.5D風(fēng)格的天氣卡片設(shè)計(jì)3.2.1繪制第一張卡片2.繪制卡片主體形狀（1）繪制卡片外形選擇矩形工具，設(shè)置繪制模式為“形狀”，填充色值為#FFFFFF，描邊為無，在畫面中央繪制一個(gè)矩形。3.2實(shí)例1:2.5D風(fēng)格的天氣卡片設(shè)計(jì)3.2.1繪制第一張卡片2.繪制卡片主體形狀（2）添加投影效果雙擊調(diào)出“圖層樣式”窗口，勾選“漸變疊加”樣式和“投影”圖層樣式，調(diào)整參數(shù)。3.2實(shí)例1:2.5D風(fēng)格的天氣卡片設(shè)計(jì)3.2.1繪制第一張卡片3.繪制卡片內(nèi)部元素1)為第一張卡片添加文字元素文字元素包含日期、城市名稱、當(dāng)前溫度、當(dāng)天的最高溫度/最低溫度等信息。3.2實(shí)例1:2.5D風(fēng)格的天氣卡片設(shè)計(jì)2)為第一張卡片繪制天氣圖標(biāo)(1)繪制太陽的主體。(2)繪制太陽的光芒形狀。3.2.1繪制第一張卡片3.繪制卡片內(nèi)部元素3)為第一張卡片繪制天氣圖標(biāo)(3)按Shift鍵選中這兩個(gè)膠囊圓角矩形，再按Ctrl+G組合鍵編組，并命名為“光芒組1”。(4)為太陽填色，添加“漸變”圖層樣式。(5)為太陽添加發(fā)光效果。(6)調(diào)整整體的太陽形狀，模擬一定的透視效果。3.2實(shí)例1:2.5D風(fēng)格的天氣卡片設(shè)計(jì)3.2.1繪制第一張卡片3.繪制卡片內(nèi)部元素4)為天氣圖標(biāo)制作立體效果(1)復(fù)制“太陽”編組圖層，并調(diào)整位置。(2)對(duì)厚度層的路徑形狀進(jìn)行微調(diào)，進(jìn)一步優(yōu)化太陽的厚度效果。(3)使用上一步驟中同樣的方法，對(duì)太陽其他部分的路徑形狀進(jìn)行微調(diào)3.2實(shí)例1:2.5D風(fēng)格的天氣卡片設(shè)計(jì)3.2.1繪制第一張卡片3.繪制卡片內(nèi)部元素5)為太陽圖標(biāo)制作投影(1)繪制投影的形狀,并在圖層面板上更改圖層順序至“太陽”編組圖層之下,按Ctrl+T組合鍵調(diào)出自由縮放變換手柄框，并切換到“透視”狀態(tài)，先向上移動(dòng)右側(cè)中間的端點(diǎn)，再向右上方移動(dòng)下側(cè)中間的端點(diǎn)，調(diào)整圖形3.2實(shí)例1:2.5D風(fēng)格的天氣卡片設(shè)計(jì)3.2.1繪制第一張卡片3.繪制卡片內(nèi)部元素5)為太陽圖標(biāo)制作投影(2)調(diào)整投影的顏色和模糊效果。調(diào)整投影，先調(diào)出“圖層樣式”窗口，添加“漸變疊加”樣式。在漸變編輯器中設(shè)置顏色和不透明度指示器。再設(shè)置角度，然后為投影添加“高斯模糊”濾鏡，需將矢量形狀圖層轉(zhuǎn)換為智能對(duì)象3.2實(shí)例1:2.5D風(fēng)格的天氣卡片設(shè)計(jì)3.2實(shí)例1:2.5D風(fēng)格的天氣卡片設(shè)計(jì)3.2.2繪制多云天氣卡片1.復(fù)制晴天天氣卡片·編組與復(fù)制：同時(shí)選中晴天天氣卡片相關(guān)圖層并編組為“晴天卡片”，按Ctrl+J組合鍵復(fù)制，重命名為“多云卡片”，并移至合適位置?！ふ{(diào)整太陽效果：由于漸變原因，復(fù)制卡片的太陽效果不同，需手動(dòng)調(diào)整。雙擊“多云卡片”編組圖層中的“太陽”圖層，調(diào)出“圖層樣式”窗口，選中“漸變疊加”圖層樣式，在“漸變編輯器”窗口移動(dòng)漸變色條下的手柄調(diào)整太陽漸變，“太陽厚度”圖層的漸變樣式可參考上述步驟進(jìn)行相應(yīng)調(diào)整。·修改文字與太陽圖標(biāo)：選中兩個(gè)太陽編組圖層，按Ctrl+T組合鍵調(diào)出自由縮放變換手柄，適當(dāng)縮小多云卡片的太陽圖標(biāo)，為云朵圖標(biāo)留出空間，之后修改“多云卡片”編組圖層的文字內(nèi)容。3.2實(shí)例1:2.5D風(fēng)格的天氣卡片設(shè)計(jì)3.2.2繪制多云天氣卡片2.添加繪制云朵天氣圖標(biāo)·繪制基礎(chǔ)形狀：使用橢圓工具和圓角矩形工具繪制大小不一的3個(gè)圓形形狀和一個(gè)圓角矩形，移動(dòng)擺放成云朵形狀。·調(diào)整變形：將4個(gè)新繪制的矢量形狀所在的圖層進(jìn)行編組并重命名為“云朵”，按Ctrl+T組合鍵調(diào)出自由縮放變換手柄，使用“透視”模式將云朵形狀調(diào)整至合適形狀?！ぬ砑訚u變效果：將云朵移動(dòng)到合適位置，雙擊“云朵”圖層調(diào)出“圖層樣式”窗口，勾選“漸變疊加”樣式，在“漸變編輯器”窗口設(shè)置漸變色條的2手柄的色值分別為#bbc8e4和#ffffff，然后將“角度”設(shè)為79度。3.2實(shí)例1:2.5D風(fēng)格的天氣卡片設(shè)計(jì)3.2.2繪制多云天氣卡片3.為云朵添加立體效果·復(fù)制并移動(dòng)：復(fù)制“云朵”圖層，重命名為“云朵厚度”，向左、向上移動(dòng)一點(diǎn)位置，增加厚度空間?！ぬ砑訚u變樣式：雙擊“云朵厚度”圖層調(diào)出“圖層樣式”窗口，單擊“漸變疊加”右側(cè)的“+”按鈕，再添加一個(gè)“漸變疊加”圖層樣式，將“不透明度”設(shè)為60%，將漸變色條左右兩端色值分別設(shè)為#051c4d和#8693b8。·豐富云團(tuán)效果：復(fù)制一層“云朵”圖層并將云朵縮小，同時(shí)選中“云朵”和“云朵厚度”2個(gè)圖層，按Ctrl+G組合鍵編組并重命名為“云朵1”，按Ctrl+J組合鍵復(fù)制并重命名為“云朵2”，然后適當(dāng)縮小并移動(dòng)位置，將圖層的“不透明度”改為90%。3.2實(shí)例1:2.5D風(fēng)格的天氣卡片設(shè)計(jì)3.2.2繪制多云天氣卡片3.為云朵添加立體效果·修改云團(tuán)的投影：選中“多云卡片”編組圖層內(nèi)的“投影”圖層，將“不透明度”改為60%，并適當(dāng)向下移動(dòng)放大，讀者也可根據(jù)自身喜好和需求進(jìn)行調(diào)整，至此，多云天氣卡片基本繪制完成。3.2實(shí)例1:2.5D風(fēng)格的天氣卡片設(shè)計(jì)3.2.3繪制雷雨天氣卡片1.復(fù)制并調(diào)整相關(guān)元素·復(fù)制卡片并調(diào)整樣式：選中“多云卡片”編組圖層，按Ctrl+J組合鍵復(fù)制并重命名為“雷雨卡片”，向下移動(dòng)至合適位置。雙擊“云朵1”編組圖層內(nèi)的“云朵”表面圖層，調(diào)出“圖層樣式”窗口，選中“漸變疊加”樣式，調(diào)整漸變色條兩個(gè)手柄的位置?！h除與調(diào)整圖標(biāo)：雷雨天氣不需要太陽圖標(biāo)，將其刪除，隨后將云朵圖標(biāo)略微往上移動(dòng)一段距離，并適當(dāng)縮小，還可將小云朵圖標(biāo)與大云朵圖標(biāo)適當(dāng)拉開一些距離，再修改第三張“雷雨卡片”的文字內(nèi)容。3.2實(shí)例1:2.5D風(fēng)格的天氣卡片設(shè)計(jì)3.2.3繪制雷雨天氣卡片2.繪制閃電圖標(biāo)·繪制形狀：使用鋼筆工具繪制一個(gè)閃電形狀，設(shè)置鋼筆工具的繪制模式為“形狀”，描邊為無，填充為白色，將新繪制的閃電矢量形狀圖層重命名為“閃電”，并在圖層面板上將其拖動(dòng)到“云朵2”編組圖層和“云朵1”編組圖層之間。3.2實(shí)例1:2.5D風(fēng)格的天氣卡片設(shè)計(jì)3.2.3繪制雷雨天氣卡片3.為閃電圖標(biāo)添加光效·添加外發(fā)光效果：雙擊“閃電”圖層調(diào)出“圖層樣式”窗口，添加“外發(fā)光”圖層樣式，設(shè)置顏色值為#517aff，“不透明度”為70%，“擴(kuò)展”為3%，“大小”為50像素。·設(shè)置投影樣式：選中“投影”樣式，設(shè)置“混合模式”為“變亮”，色值為#295bff，“不透明度”設(shè)為80%，“大小”為150像素。3.2實(shí)例1:2.5D風(fēng)格的天氣卡片設(shè)計(jì)3.2.3繪制雷雨天氣卡片4.為閃電圖標(biāo)添加立體效果·復(fù)制并移動(dòng)圖層：選中“閃電”圖層，按Ctrl+J組合鍵復(fù)制并重名為“閃電厚度”，將其拖動(dòng)到“閃電”圖層的下一層，將圖層的“不透明度”修改為40%，單擊“投影”左邊的眼睛圖標(biāo)將“投影”圖層樣式隱藏。·調(diào)整外發(fā)光效果：將“閃電厚度”圖層適當(dāng)移動(dòng)，雙擊“閃電厚度”圖層打開“圖層樣式”窗口，將“外發(fā)光”的“大小”修改為80像素?！ば薷穆窂叫螤睿呵袚Q到鋼筆工具，當(dāng)鼠標(biāo)指針移動(dòng)到路徑上時(shí)，鋼筆工具切換為了添加模式，在閃電的末端位置單擊添加一個(gè)路徑錨點(diǎn)。由于添加的錨點(diǎn)有左右兩個(gè)曲線手柄，移動(dòng)錨點(diǎn)會(huì)形成彎曲形狀，不符合要求，需按住Alt鍵，將鋼筆工具切換成“轉(zhuǎn)換點(diǎn)工具”模式，單擊剛才添加的錨點(diǎn)，取消錨點(diǎn)左右兩側(cè)的曲線手柄，使錨點(diǎn)所在曲線區(qū)域從彎曲形狀變成銳角形狀，并將該錨點(diǎn)移動(dòng)到合適的位置，與閃電表面的末端契合?！ぶ貜?fù)操作并調(diào)整：重復(fù)上述步驟，再添加幾個(gè)錨點(diǎn)并移動(dòng)位置，最終調(diào)整閃電厚度形狀。還可多增加一組閃電，進(jìn)一步豐富天氣效果3.3實(shí)例2:音樂卡片設(shè)計(jì)本節(jié)概述設(shè)計(jì)思路：界面分為3部分，包括一張功能較全的大卡片和2張小卡片。大卡片的播放進(jìn)度條設(shè)計(jì)獨(dú)特，用音波陣列展示歌曲高潮部分。小卡片承載部分信息，下方有磨砂玻璃效果區(qū)域。圖片是重要元素，界面色彩與圖片適配。設(shè)計(jì)過程：1.大卡片繪制新建文檔與繪制背景：新建文檔，將背景圖層轉(zhuǎn)換為普通圖層并命名。添加圓角矩形作為卡片背景，調(diào)整位置并添加漸變圖層樣式。添加圖片素材：創(chuàng)建小圓角矩形作為矢量蒙版，添加圖片素材并調(diào)整大小和位置，添加兩層陰影效果。繪制進(jìn)度條：繪制音波陣列進(jìn)度條，復(fù)制多個(gè)組成陣列，調(diào)整高度，添加播放進(jìn)度和時(shí)長數(shù)字，并添加“顏色疊加”樣式。繪制按鈕：繪制播放、上一首/下一首按鈕，添加“顏色疊加”和“投影”圖層樣式。添加文字：添加歌曲名稱和歌手名稱字符，設(shè)置不同字體樣式和透明度。最后為主卡片整體添加“投影”圖層樣式。2.小卡片繪制繪制矢量蒙版：繪制小卡片的矢量蒙版，調(diào)整位置并編組，粘貼為矢量蒙版路徑。添加圖片素材：添加圖片素材并轉(zhuǎn)換為智能對(duì)象，調(diào)整大小和位置。添加信息與按鈕組件：添加磨砂玻璃質(zhì)感矩形作為組件背景，復(fù)制粘貼為矢量蒙版，添加圖片的模糊效果和顏色疊加。添加歌單信息文本和播放按鈕。復(fù)制創(chuàng)建第三張卡片：復(fù)制編組圖層“音樂小卡片01”，更改圖片素材，更新相關(guān)效果，如“高斯模糊”，至此3張音樂卡片基本繪制完成。3.2.3繪制雷雨天氣卡片1.新建文檔設(shè)置文檔參數(shù)：打開Photoshop后，按Ctrl+N組合鍵新建一個(gè)空白文檔，命名為“3.3實(shí)例2:音樂卡片設(shè)計(jì)”，將寬度設(shè)為1080，高度設(shè)為1920，單位為像素。轉(zhuǎn)換背景圖層：新建空白文檔后，雙擊默認(rèn)生成的背景圖層，轉(zhuǎn)換為普通圖層，并將其命名為“底層背景”。3.3實(shí)例2:音樂卡片設(shè)計(jì)3.2.3繪制雷雨天氣卡片2.繪制主卡片背景添加圓角矩形：在工具欄選中圓角矩形工具，在工具屬性欄中設(shè)置繪制模式為“形狀”，“填充”為任意純色，“描邊”為無，“半徑”即圓角半徑為90像素，在新建文檔的畫布范圍內(nèi)任意位置單擊，調(diào)出“創(chuàng)建矩形”對(duì)話框，設(shè)置寬度為900像素，“高度”為1150像素，單擊“確定”按鈕，生成一個(gè)圓角矩形調(diào)整位置并添加樣式：選中新建的圓角矩形圖層，雙擊圓角矩形圖層名稱的區(qū)域，將圖層重命名為“主卡片背景”，按Ctrl+T組合鍵調(diào)出自由變換手柄工具，在工具屬性欄中將X設(shè)為540像素，Y設(shè)為665像素，即將主卡片背景矩形調(diào)整到頁面水平居中、靠近頂部的位置。雙擊“主卡片背景”圖層除圖層名稱字符以外的區(qū)域，調(diào)出“圖層樣式”窗口，勾選“漸變疊加”圖層樣式，設(shè)置“混合模式”為“正?！保安煌该鞫取睘?00%，“角度”為128度，雙擊漸變色條調(diào)出“漸變編輯器”窗口，將漸變色條左右兩端色值分別設(shè)為#c7fff8和#dfefff，為主卡片背景添加一個(gè)淺藍(lán)色調(diào)的漸變。3.3實(shí)例2:音樂卡片設(shè)計(jì)3.2.3繪制雷雨天氣卡片3.添加圖片素材（1）創(chuàng)建矢量蒙版：再次創(chuàng)建一個(gè)小的圓角矩形，選中圓角矩形工具，將“半徑”改為60像素，在畫布范圍內(nèi)任意位置單擊調(diào)出“創(chuàng)建矩形”對(duì)話框，設(shè)置寬度為800像素，“高度”為500像素，創(chuàng)建一個(gè)新的圓角矩形，將這個(gè)小圓角矩形作為矢量蒙版。3.3實(shí)例2:音樂卡片設(shè)計(jì)3.2.3繪制雷雨天氣卡片3.添加圖片素材（2）添加圖片：從“素材文件>第3章>3.3音樂卡片設(shè)計(jì)”文件夾中找到素材圖片“3.3實(shí)例2圖片素材1.jpg”，按Ctrl+C組合鍵復(fù)制，然后回到Photoshop中，選中編組圖層“主卡片專輯封面”，按Ctrl+V組合鍵粘貼剛才復(fù)制的圖片，圖片顯示區(qū)域僅限于矢量蒙版范圍內(nèi)，調(diào)整圖片大小和位置，按Ctrl+T組合鍵調(diào)出自由變換手柄工具，在工具屬性欄中將X設(shè)為540像素，Y設(shè)為395像素，W和H即寬高尺寸設(shè)為33%。

4.添加陰影效果：雙擊編組圖層“主卡片專輯封面”，調(diào)出“圖層樣式”窗口，單擊左側(cè)欄最底部的“投影”右側(cè)的圖標(biāo)，在勾選“投影”樣式的同時(shí)，在下面添加一個(gè)新的“投影”樣式，設(shè)置第一個(gè)“投影”樣式的“混合模式”為正片疊底，顏色值為#074097，“不透明度”為12%，“角度”為90度，“距離”為20像素，“大小”為30像素，設(shè)置第2個(gè)“投影”樣式的“混合模式”為正片疊底，顏色值為#076297，“不透明度”為30%，“角度”為90度，“距離”為40像素，“大小”為90像素。3.3實(shí)例2:音樂卡片設(shè)計(jì)3.2.3繪制雷雨天氣卡片5.繪制進(jìn)度條（1）繪制音波陣列：創(chuàng)建小圓角矩形作為音波線，選擇圓角矩形工具，單擊畫布調(diào)出“創(chuàng)建矩形”對(duì)話框，將“寬度”為6像素，“高度”設(shè)為40