PhotoshopUI設計實戰案例教程(移動端+Web端)第3章移動端App的卡片設計本章概述：第3章主要介紹移動端App的卡片設計。首先闡述卡片在UI設計中的概念，它是一種綜合性信息集合組件，能有效組織信息。接著介紹其常見類型和應用場景，如音樂、天氣、日歷等應用中作為核心功能入口或組織分類信息的載體。然后通過多個實例詳細講解設計過程，包括2.5D風格的天氣卡片、音樂卡片、日程卡片等，涉及各種工具和圖層樣式的運用，最后還提及數據可視化卡片設計作為拓展訓練，展示了卡片設計的多樣性和實用性。第3章移動端App的卡片設計3.1移動端UI設計中的卡片設計3.2實例1:2.5D風格的天氣卡片設計3.3實例2:音樂卡片設計3.4實例3:日程卡片設計3.5拓展訓練:數據可視化卡片設計本節概述概念闡述首先明確了卡片是一種綜合性信息集合組件，它能夠將文字、圖像、圖標等多種元素整合在一起，以一種簡潔、直觀的方式呈現給用戶。作用及優勢強調了卡片在移動端UI設計中的重要作用。它可以有效地組織信息，使用戶能夠快速瀏覽和獲取關鍵內容。同時，卡片的形式具有靈活性和可擴展性，能夠適應不同的屏幕尺寸和設備類型。設計要點還提到了一些卡片設計的要點。例如，要注意卡片的尺寸和比例，以確保在不同設備上的顯示效果；要合理運用色彩、字體和圖標等元素，增強卡片的視覺吸引力；要考慮卡片之間的間距和排列方式，以提高用戶的操作體驗。3.1移動端UI設計中的卡片設計3.1.1UI中的卡片是什么此小節著重介紹了移動端UI設計中卡片的定義。卡片是一種集成多種元素的信息集合組件，它將文字、圖像、圖標等融合在一起。這種設計形式簡潔直觀，能高效地向用戶傳達信息。它具有一定的獨立性和完整性，在界面中可作為一個獨立的模塊存在，同時又能與其他卡片或組件相互配合，構成完整的UI界面，是移動端UI設計中一種重要的信息組織和展示方式。3.1移動端UI設計中的卡片設計3.1.2卡片的常見應用場景該小節闡述了卡片在移動端UI設計中的常見應用場景。卡片廣泛應用于各類App中，如音樂App中用于展示專輯封面、歌曲信息等；天氣App中呈現天氣狀況和相關數據；日歷App里展示日程安排。它還可用于新聞資訊類App，以卡片形式展示新聞標題和圖片等內容。通過這些應用場景可知，卡片能夠有效地組織和分類信息，使用戶可以快速瀏覽和獲取所需內容，提升了用戶體驗。3.1移動端UI設計中的卡片設計3.2實例1:2.5D風格的天氣卡片設計本節概述設計思路

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

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

4.添加陰影效果：雙擊編組圖層“主卡片專輯封面”，調出“圖層樣式”窗口，單擊左側欄最底部的“投影”右側的圖標，在勾選“投影”樣式的同時，在下面添加一個新的“投影”樣式，設置第一個“投影”樣式的“混合模式”為正片疊底，顏色值為#074097，“不透明度”為12%，“角度”為90度，“距離”為20像素，“大小”為30像素，設置第2個“投影”樣式的“混合模式”為正片疊底，顏色值為#076297，“不透明度”為30%，“角度”為90度，“距離”為40像素，“大小”為90像素。3.3實例2:音樂卡片設計3.2.3繪制雷雨天氣卡片5.繪制進度條（1）繪制音波陣列：創建小圓角矩形作為音波線，選擇圓角矩形工具，單擊畫布調出“創建矩形”對話框，將“寬度”為6像素，“高度”設為40像素，創建一個細小的圓角矩形，重命名為“音波線”，復制多個音波線，組成陣列，按Ctrl+T組合鍵調出自由變換手柄，向右移動12像素，按Ctrl+Alt+Shift+T組合鍵，自動復制并移動，直至復制出足夠的數量組成陣列，并移動到合適的位置，選中復制出來的矩形，按Ctrl+G組合鍵編組，并重命名為“播放進度條”，調整每一個音波線的高度，組成一條有起伏高低的陣列，以模擬音樂的高潮、低潮，雙擊編組圖層“播放進度條”調出“圖層樣式”窗口，勾選“顏色疊加”樣式，將顏色值設為#4b5f6f。3.3實例2:音樂卡片設計3.2.3繪制雷雨天氣卡片5.繪制進度條（2）添加數字字符：按T鍵切換到文字工具，添加兩組數字字符，內容分別是“0:00”和“4:30”，將顏色值設為與播放進度條音波線一致的#4b5f6f，并擺放到播放進度條兩側。3.3實例2:音樂卡片設計3.2.3繪制雷雨天氣卡片6.繪制播放、上一首/下一首按鈕繪制下一首按鈕：選擇多邊形工具，在工具屬性欄中設置“描邊”為無，“填充”為任意純色，“邊”為3，即三角形，單擊“邊”參數值左側的齒輪圖標打開多邊形設置面板，勾選“平滑拐角”復選框，在播放進度條下方大致位置繪制一個三角形，選中三角形按Ctrl+T組合鍵調出自由縮放變換手柄，在工具屬性欄中將X設為781像素，Y設為1084像素，將三角形放到進度條下方右側位置，使用路徑工具微調形狀，使用圓角矩形工具添加一個圓角半徑為4像素，寬度為10像素，高度為60像素的圓角矩形，將位置參數X設為830像素，Y設為1084像素，然后將圓角矩形和三角形編組，重命名為“下一首按鈕”。繪制上一首按鈕：復制“下一首”按鈕，并按Ctrl+T組合鍵調出自由縮放變換手柄，用鼠標右鍵單擊復制出的按鈕，選擇彈出菜單中的“水平翻轉”選項，便可以作為“上一首”按鈕，并將圖層編組重命名為“上一首”，擺放至進度條下方左側的位置。繪制播放按鈕：選擇圓角矩形工具，將圓角半徑修改為10像素，然后添加一個“寬度”為24像素，“高度”為88像素的圓角矩形，選中創建的圓角矩形，分別按Ctrl+C和Ctrl+V組合鍵，在同一圖層內復制一個相同的圓角矩形，并將其向右移動一定距離，組成一個雙圓角矩形的“播放/暫?！卑粹o，并將其重命名為“播放/暫?！?，選中“播放/暫停”按鈕，將其擺放至中央位置。添加樣式：同時選中“播放/暫?！薄吧弦皇住薄跋乱皇住眻D層，按Ctrl+G組合鍵編組并命名為“播放控制按鈕組”，雙擊該編組圖層調出“圖層樣式”窗口，勾選“顏色疊加”和“投影”樣式，設置“顏色疊加”圖層樣式的顏色值為#192e51，設置“投影”圖層樣式的“混合模式”為“正片疊底”，顏色值為#003173，“不透明度”為24%，“角度”為90度，“時間內”為15像素，“大小”為45像素。3.3實例2:音樂卡片設計3.2.3繪制雷雨天氣卡片6.繪制播放、上一首/下一首按鈕繪制下一首按鈕：選擇多邊形工具，在工具屬性欄中設置“描邊”為無，“填充”為任意純色，“邊”為3，即三角形，單擊“邊”參數值左側的齒輪圖標打開多邊形設置面板，勾選“平滑拐角”復選框，在播放進度條下方大致位置繪制一個三角形，選中三角形按Ctrl+T組合鍵調出自由縮放變換手柄，在工具屬性欄中將X設為781像素，Y設為1084像素，將三角形放到進度條下方右側位置，使用路徑工具微調形狀，使用圓角矩形工具添加一個圓角半徑為4像素，寬度為10像素，高度為60像素的圓角矩形，將位置參數X設為830像素，Y設為1084像素，然后將圓角矩形和三角形編組，重命名為“下一首按鈕”。3.3實例2:音樂卡片設計3.2.3繪制雷雨天氣卡片6.繪制播放、上一首/下一首按鈕繪制上一首按鈕：復制“下一首”按鈕，并按Ctrl+T組合鍵調出自由縮放變換手柄，用鼠標右鍵單擊復制出的按鈕，選擇彈出菜單中的“水平翻轉”選項，便可以作為“上一首”按鈕，并將圖層編組重命名為“上一首”，擺放至進度條下方左側的位置。繪制播放按鈕：選擇圓角矩形工具，將圓角半徑修改為10像素，然后添加一個“寬度”為24像素，“高度”為88像素的圓角矩形，選中創建的圓角矩形，分別按Ctrl+C和Ctrl+V組合鍵，在同一圖層內復制一個相同的圓角矩形，并將其向右移動一定距離，組成一個雙圓角矩形的“播放/暫停”按鈕，并將其重命名為“播放/暫?！?，選中“播放/暫停”按鈕，將其擺放至中央位置。3.3實例2:音樂卡片設計3.2.3繪制雷雨天氣卡片6.繪制播放、上一首/下一首按鈕添加樣式：同時選中“播放/暫?！薄吧弦皇住薄跋乱皇住眻D層，按Ctrl+G組合鍵編組并命名為“播放控制按鈕組”，雙擊該編組圖層調出“圖層樣式”窗口，勾選“顏色疊加”和“投影”樣式，設置“顏色疊加”圖層樣式的顏色值為#192e51，設置“投影”圖層樣式的“混合模式”為“正片疊底”，顏色值為#003173，“不透明度”為24%，“角度”為90度，“時間內”為15像素，“大小”為45像素。3.3實例2:音樂卡片設計3.2.3繪制雷雨天氣卡片7.添加歌曲名稱和歌手名稱字符添加歌曲名稱：選擇文字工具，設置字體為Bold，字體大小為54點，顏色值為#4b5f6f，輸入文本內容“SONGNMAE”，添加一個文本圖層，切換選中任意其他圖層，將字體改為Regular，字體大小改為40點，顏色值不變，然后輸入文本內容“Nameofsinger”，再將圖層的“不透明度”改為50%。3.3實例2:音樂卡片設計3.2.3繪制雷雨天氣卡片8.為主卡片整體添加“投影”圖層樣式：將所有相關UI元素的圖層選中，打包成組并命名為“主卡片”，然后雙擊該編組圖層調出“圖層樣式”窗口，勾選“投影”圖層樣式，設置“混合模式”為“正常”，顏色值為#00a7d1，“不透明度”為12%，“角度”為90度，“距離”為36像素，“大小”為90像素。3.3實例2:音樂卡片設計3.3實例2:音樂卡片設計3.3.2繪制第二張音樂小卡片1.繪制小卡片的矢量蒙版創建并調整蒙版：選擇圓角矩形工具，設置“圓角半徑”為60像素，“寬度”和“高度”均設為420像素，創建正方形圓角矩形，按Ctrl+T組合鍵調出自由變換手柄，在工具屬性欄中將X設為300像素，Y設為1540像素，保持選中狀態，按Ctrl+G組合鍵編組，并重命名為“音樂小卡片01”。復制粘貼路徑：按A鍵切換“路徑選擇工具”，選中圓角矩形路徑，按住Ctrl+C組合鍵復制，選中編組圖層“音樂小卡片01”，按Ctrl+V組合鍵將復制的圓角矩形路徑粘貼為該編組圖層的矢量蒙版路徑，然后刪掉原先的圓角矩形圖層。3.3實例2:音樂卡片設計3.3.2繪制第二張音樂小卡片2.添加作為專輯封面的圖片素材添加圖片并轉換：找到素材圖片，按Ctrl+C組合鍵復制，回到Photoshop中，選中編組圖層“音樂小卡片01”，按Ctrl+V組合鍵粘貼圖片，用鼠標右鍵單擊圖片素材，選擇“轉換為智能對象”選項。調整圖片：按Ctrl+T組合鍵調出自由變換手柄，將X設為405像素，Y設為1575像素，W和H即寬和高均設為原尺寸大小的18%。3.3實例2:音樂卡片設計3.3.2繪制第二張音樂小卡片3.添加歌單信息與播放按鈕組件（1）添加組件背景：選擇圓角矩形工具，設置圓角半徑為45像素，繪制一個寬度為375像素，高度為140像素的圓角矩形，按Ctrl+T組合鍵調出自由縮放變換手柄，將X設為300像素，Y設為1651像素，使其處于小卡片的下半部分區域。（2）復制粘貼為矢量蒙版：移動到合適的位置之后，使用直接選擇工具選中路徑，按Ctrl+C組合鍵復制，然后編組并將其重命名為“歌曲信息與播放組件”，按Ctrl+V組合鍵粘貼復制的路徑作為矢量蒙版，刪除剛才創建的圓角矩形。3.3實例2:音樂卡片設計3.3.2繪制第二張音樂小卡片3.添加歌單信息與播放按鈕組件（3）添加模糊效果：選中圖片圖層“圖層2”，按Ctrl+J組合鍵復制，將復制出的圖層拖入“歌曲信息與播放組件”編組圖層中，執行“濾鏡>模糊>高斯模糊”命令，調出“高斯模糊”窗口，將“半徑”設為24像素，此時基本的磨砂玻璃效果已經出現。（4）添加顏色疊加：雙擊編組圖層“歌曲信息與播放組件”，調出“圖層樣式”窗口，勾選添加“漸變疊加”圖層樣式，設置“混合模式”為“正片疊底”，漸變色條左右兩端色值分別為#156ea6和#07587e，“不透明度”為35%，“角度”為128度。3.3實例2:音樂卡片設計3.3.2繪制第二張音樂小卡片3.添加歌單信息與播放按鈕組件（5）添加歌單信息文本：使用文本工具輸入文本“MusicAlbumX”作為歌單名稱，設置字體為Bold，字體大小為30點，字體顏色為#eaf6ff，然后切換選中任意其他圖層，再次使用文本工具輸入文本“12Tracks”（歌單數量信息），設置字體為Regular，字體大小為30點，字體顏色同為#eaf6ff，將這個文字圖層的不透明度設為60%。3.3實例2:音樂卡片設計3.3.2繪制第二張音樂小卡片3.添加歌單信息與播放按鈕組件（6）添加播放按鈕：選擇橢圓工具，單擊畫布彈出“創建橢圓”對話框，將“寬度”和“高度”都設為84像素，由此創建一個正圓形，然后將正圓形移動到磨砂玻璃組件右側且上下居中位置，將正圓形所在圖層重命名為“播放按鈕背景”；然后雙擊橢圓形狀圖層“播放按鈕背景”，"調出‘圖層樣式’窗口“，勾選“漸變疊加”圖層樣式，將漸變色條左右兩端的色值分別設為#b4d7f0和#ffffff，“角度”設為-56度。3.3實例2:音樂卡片設計3.3.2繪制第二張音樂小卡片3.添加歌單信息與播放按鈕組件（7）添加三角形播放按鈕：在圖層面板中選中“下一首”編組圖層內的“多邊形1”矢量形狀圖層，按Ctrl+J組合鍵復制圖層，再將復制出的圖層拖動到“音樂小卡片01”編組圖層內，需要注意的是，這個圖層需要放在“播放按鈕背景”圖層上方，按住Ctrl+T組合鍵調出自由變換手柄，將X設為425像素，Y設為1654像素，W和H寬高縮小為原先的50%，修改顏色，雙擊新復制、縮小的三角形所在圖層，調出“圖層樣式”窗口，勾選“顏色疊加”圖層樣式，將顏色值修改為#006de8。3.3實例2:音樂卡片設計3.3.3創建第三張音樂小卡片1.復制編組圖層選中繪制完成的編組圖層“音樂小卡片01”，按Ctrl+J組合鍵復制，將復制出的編組圖層重命名為“音樂小卡片02”，將其向右移動一段距離，使該圖層的右邊緣與上方主卡片的右邊緣對齊。3.3實例2:音樂卡片設計3.3.3創建第三張音樂小卡片2.更改圖片素材（1）復制智能對象圖層：選中編組圖層“音樂小卡片02”內的圖片素材圖層“圖層2”，單擊鼠標右鍵，在彈出的菜單中選擇“通過復制新建的智能對象”選項，復制一層新的智能對象圖層“圖層2復制2”，并將其拖動到“音樂小卡片02”編組圖層中。（2）更換圖片并保存：雙擊進入該智能對象圖層，更換新的圖片素材，按Ctrl+C組合鍵復制，回到Photoshop中的智能對象圖層頁簽“圖層2.psb”下，按Ctrl+V組合鍵粘貼新圖片，然后按住Ctrl+S組合鍵保存。3.3實例2:音樂卡片設計3.3.3創建第三張音樂小卡片2.更改圖片素材（3）更新相關圖層：將剛才復制并更新了圖片的智能對象圖層“圖層2復制2”再復制一層出來（復制后的圖層名稱默認為“圖層2復制3”），并將其拖動到編組圖層“歌曲信息與播放組件”中。（4）添加模糊效果：選中智能對象圖層“圖層2復制3”，選擇“高斯模糊”選項，彈出“高斯模糊”窗口，保持上次使用設置的參數值不變，單擊“確定”按鈕添加濾鏡，至此，3張音樂卡片基本繪制完成。同時給讀者留了課后作業，即為播放進度條添加播放進度，用更亮、更飽和的色彩展示已播放的進度。3.4實例3:日程卡片設計本節概述設計思路：本實例設計日程卡片，用于展示日程的具體信息。核心是創建4張不同的日程卡片，包括過去時間的灰色調卡片和不同時長、色調的卡片。日程時長決定卡片高度，卡片包含多種信息，且信息顯示隨卡片高度自適應。設計過程：1.新建文檔并繪制界面背景新建文檔與轉換圖層：新建空白文檔，將寬度設為1170，高度設為2532像素，轉換默認背景圖層為“底層背景”。創建背景并繪制背板：為底層背景添加漸變，繪制日程列表的圓角矩形背板，調整位置并命名，添加投影效果。添加標題和日期：添加標題文字和周一至周六的日期數字，對部分數字進行不透明度調整和樣式設置，添加周一至周日的字符并調整。繪制時間軸：添加時間碼數字并設置樣式，添加時間軸刻度線并編組復制，添加日程背景分割線并復制。繪制當前時間指示線：復制并重命名“日程背景分割線”圖層為“時間指示線”，移動并調整其樣式，添加細節如正圓形并設置圖層樣式，復制圓形并調整樣式和位置，添加漸變層并編組移動。2.繪制第一張日程卡片繪制卡片背景：繪制圓角矩形作為卡片背景，添加漸變樣式，復制并轉換為智能對象作為陰影，添加“高斯模糊”濾鏡。添加標識等信息：添加日程卡片左側的標識色條并設置漸變樣式，添加日程標題文字和時間數字。添加頭像和圖標組：添加頭像圖片并為其添加描邊樣式，繪制功能圖標組的背景并添加樣式，繪制功能圖標選中樣式并添加投影，添加功能圖標并調整樣式。3.復制出其他日程卡片并調整復制并調整灰色卡片：復制日程卡片相關圖層并編組，調整復制的第二張日程卡片各元素為灰色調，修改卡片背景和標識條的漸變樣式，調整相關圖標投影色值和不透明度，修改卡片整體陰影和高度，調整相關元素位置和內容。課后作業：按照相似步驟創建其他日程卡片作為課后作業，讀者可選用自己喜歡的顏色。3.4.1新建文檔并繪制日程界面背景1.新建文檔設置文檔參數：打開Photoshop后，按Ctrl+N組合鍵新建一個空白文檔，命名為“3.4實例3:日程卡片設計”，將寬度設為1170，高度設為2532，單位為像素（對應iPhone14手機屏幕分辨率）。轉換背景圖層：新建空白文檔后，雙擊默認生成的背景圖層，將其轉換為普通圖層，并命名為“底層背景”。3.4實例3:日程卡片設計3.4.1新建文檔并繪制日程界面背景2.創建界面背景添加漸變：雙擊“底層背景”圖層，調出“圖層樣式”窗口，勾選“漸變疊加”圖層樣式，設置“混合模式”為“正?！?，漸變色條左右兩端色值分別為#c8d8ff和#e0d4ff，其中左端顏色手柄的“位置”為25%，設置“角度”為150度。繪制背板：選擇圓角矩形工具，設置繪制模式為“形狀”，“填充”為#ffffff，“描邊”為無，“半徑”為40像素，單擊畫布調出“創建矩形”對話框，創建一個“寬度”為1170像素，“高度”為2400像素的圓角矩形，保持矩形的選中狀態，按Ctrl+T組合鍵調出自由變換手柄，在工具屬性欄中將X設為585像素，Y設為1600像素，并將其重命名為“日程列表背板”。添加投影效果：雙擊“日程列表背板”圖層調出“圖層樣式”窗口，設置投影的相關參數。3.4實例3:日程卡片設計3.4.1新建文檔并繪制日程界面背景3.添加界面標題和日期添加標題文字：按T鍵切換到文字工具，輸入文本“March24/2023”，字體大小設為72點，將“March24”的字體設為Bold，“/2023”的字體設為Light，字體顏色設為#2b3877，創建標題文字圖層后，按Ctrl+T組合鍵調出自由縮放變換手柄，在工具屬性欄中將X設為585像素，Y設為128像素。添加日期數字：繼續使用文字工具，將字體大小設為60點，字體設為Light，字體顏色設為#2b3877，添加7組數字，分別為19、20、2、3、4、5、6（此處疑似有部分數字缺失，原文為19、20、21、22、23、24、25），通過“垂直居中對齊”和“水平居中分布”功能對齊和均分這些數字，對于過去式的數字降低不透明度，將“24”突出顯示并添加投影樣式。添加字符：同時選中數字19-25所在圖層，按Ctrl+J組合鍵復制出7個新圖層，分別更改文字內容為Sun、Mon、Tue、Wed、Thu、Fri、Sat，并向上移動一定距離，再將字體大小統一縮小為48點。3.4實例3:日程卡片設計3.4.1新建文檔并繪制日程界面背景4.繪制時間軸（1）添加時間碼數字：繼續使用文字工具，添加09:00、10:00、11:00、12:00、13:00、14:00、15:00共7組數字，設置字體為Light，大小為48點，字體顏色為#2b3877，將它們擺放在日程列表背板左側，使用“垂直居中分布”功能平均分布，對過去式的數字調整不透明度。（2）添加刻度線：選擇圓角矩形工具，設置“填充”色值為#d2d8e8，在09:00和10:00之間繪制3條平均分布的短線，設置中間那條較長刻度線的寬度為50，高度為4，設置較短刻度線的寬度為25，高度為4，將這3條刻度線編組，并重命名為“時間刻度線”，按6次Ctrl+J組合鍵復制6組，并依次排布在下面的時間碼之間。3.4實例3:日程卡片設計3.4.1新建文檔并繪制日程界面背景4.繪制時間軸（3）添加日程背景分割線：再次選擇圓角矩形工具，設置“填充”色值為#c6cfe6，單擊畫布彈出“創建矩形”對話框，將“寬度”設為1000，“高度”為2，創建矩形，然后將這個矩形放在“09:00”右側，并將其所在圖層重命名為“日程背景分割線”，選中這個細長的矩形，按6次Ctrl+J組合鍵復制6次，依次平均擺放在其他時間碼右側。3.4實例3:日程卡片設計3.4.1新建文檔并繪制日程界面背景5.繪制當前時間指示線（1）復制并移動：選中其中任意一個“日程背景分割線”圖層，按Ctrl+J組合鍵復制并重命名為“時間指示線”，將其移動到10:00和11:00之間，更靠近10:00的位置，保持“時間指示線”圖層的選中狀態，切換為圓角矩形工具，在工具屬性欄中設置“填充”色值為#817bff，W為1170，也就是與屏幕等寬，按V鍵切換到移動工具，按住Shift鍵將“時間指示線”橫向往左移動直至貼到畫布左邊緣。（2）添加細節：然后使用橢圓工具繪制一個寬和高均為28像素的正圓形，生成“橢圓1”圖層；再添加個“漸變疊加”圖層樣式：設置漸變色條左右兩端色值分別為#7ba0ff和#817bff，“不透明度”為100%，“角度”為126度3.4實例3:日程卡片設計3.4.1新建文檔并繪制日程界面背景5.繪制當前時間指示線（3）添加投影：為橢圓添加“投影”圖層樣式，設置“混合模式”為“正片疊底”，色值為#2879ff，“不透明度”為24%，“角度”為90度，“距離”為3像素，“大小”為15像素。（4）第一次復制橢圓并調整按Ctrl+J組合鍵復制“橢圓1”圖層，按Ctrl+T組合鍵調出自由變換手柄。將鼠標指針移到角上手柄端點，按住Shift+Alt組合鍵拖動鼠標，縮小和復制橢圓形狀。單擊“橢圓1復制”圖層下方“效果”下“漸變疊加”左側眼睛圖標，隱藏該樣式。按A鍵切換到直接選擇工具，在工具屬性欄中將“填充”色值改為#ffffff。3.4實例3:日程卡片設計3.4.1新建文檔并繪制日程界面背景5.繪制當前時間指示線（5）第二次復制橢圓并調整再次按Ctrl+J組合鍵復制“橢圓1”圖層，按Ctrl+T組合鍵調出自由變換手柄。將鼠標指針移到角上手柄端點，按住Shift+Alt組合鍵拖動鼠標，縮小和復制橢圓形狀。設置“投影”圖層樣式“不透明度”為80%，“距離”為2像素，“大小”為12像素。3.4實例3:日程卡片設計3.4.1新建文檔并繪制日程界面背景5.繪制當前時間指示線（6）繪制矩形并設置樣式使用矩形工具繪制寬度為1170像素、高度為180像素的矩形，設置圖層“不透明度”為20%，“填充”為0%，擺放位置合適。雙擊矩形圖層調出“圖層樣式”窗口，勾選“漸變疊加”圖層樣式，調出“漸變編輯器”。單擊漸變色條左端上方手柄，將值改為0%，再將左右兩端色值改為#817bff，“角度”改為-90度。將與時間指示線相關的4個圖層編組，重命名為“時間指示組件”，然后向下移動一段距離。3.4實例3:日程卡片設計3.4.2繪制第一張日程卡片1.繪制卡片背景創建矩形：選擇圓角矩形工具，設置“填充”為任意顏色，“描邊”為無，圓角“半徑”為30像素，創建一個寬度為837像素，高度為294像素的圓角矩形，將其命名為“日程1卡片背景”，并拖動到“時間指示組件”編組圖層中2.添加漸變和陰影漸變樣式：雙擊“日程1卡片背景”圖層，調出“圖層樣式”窗口，勾選“漸變疊加”樣式，將漸變色條左右兩端色值分別設為#ffe0d7和#ffd6ea，“角度”設為170度。陰影效果：保持“日程1卡片背景”圖層的選中狀態，按住Ctrl+J組合鍵復制，將復制出的圖層命名為“日程1外陰影”，單擊鼠標右鍵，在彈出的菜單中選擇“轉換為智能對象”選項，執行“濾鏡>高斯模糊”命令，添加一個“高斯模糊”濾鏡，半徑設為20像素3.4實例3:日程卡片設計3.4.2繪制第一張日程卡片3.4實例3:日程卡片設計3.添加日程卡片元素標識色條：使用圓角矩形工具繪制一個寬22像素，高256像素的長矩形，作為日程卡片左側的標識色條，放置在垂直方向上與日程背景卡片居中對齊，將其命名為“日程1標識條”，并添加“漸變疊加”圖層樣式，漸變色條左右兩端色值分別設為#ff4138和#ec1f85。日程標題：選擇文字工具，設置字體大小為48點，字體為Bold，字體顏色為#dc073e，輸入文本“DevelopmentMeeting”。日程時間：選擇文字工具，設置字體大小為40點，字體為Light，輸入文本“10:30-11:30”，將這些文字與主標題左對齊。3.4.2繪制第一張日程卡片3.4實例3:日程卡片設計4.添加頭像組元素頭像圖片：從指定文件夾中選中3張頭像圖片“頭像-1.png”“頭像-2.png”“頭像-3.png”，并將其拖動導入Photoshop工程中，按圖所示位置擺放。頭像描邊：雙擊“頭像-1”圖層，調出“圖層樣式”窗口，勾選“描邊”圖層樣式，將“大小”設為4像素，“顏色”設為#ffffff。復制粘貼圖層樣式：選中“頭像-1”圖層，單擊鼠標右鍵，在彈出的菜單中選擇“復制圖層樣式”選項，再選中“頭像-2”和“頭像-3”兩個圖層，單擊鼠標右鍵，在彈出的菜單中選擇“粘貼圖層樣式”選項3.4.2繪制第一張日程卡片3.4實例3:日程卡片設計5.添加功能圖標組元素（1）繪制圖標組的背景：繪制一個寬度為240像素，高度為68像素，半徑為20像素的圓角矩形，然后添加與日程標識條相似的圖層樣式；3.4.2繪制