Photoshop UI設(shè)計實戰(zhàn)案例教程（移動端+Web端） 課件 第3章 移動端 App 的卡片設(shè)計

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

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

出卡片的立體感，同時結(jié)合天氣元素的特點進(jìn)行設(shè)計，使信息直觀且具有吸引力。設(shè)計過程1.繪制卡片背景和基本形狀繪制背景：新建文檔，將背景圖層轉(zhuǎn)換為普通圖層，添加漸變圖層樣式，設(shè)置漸變色值和角度等參數(shù)。繪制卡片主體：使用矩形工具繪制卡片形狀，設(shè)置填充顏色和描邊，添加投影圖層樣式，設(shè)置混合模式、顏色、不透明度、角度、距離和大小等參數(shù)，營造立體感。2.添加天氣元素繪制太陽或云朵：根據(jù)天氣情況，使用形狀工具繪制太陽或云朵形狀，設(shè)置填充和描邊，添加圖層樣式，如漸變疊加和投影，使其具有立體感和光影效果。添加溫度和其他信息：使用文字工具添加溫度、天氣狀況等文字信息，設(shè)置字體、顏色和大小，使其與卡片整體風(fēng)格協(xié)調(diào)。3.完善卡片細(xì)節(jié)添加陰影和高光：通過調(diào)整圖層樣式和繪制形狀，為卡片添加陰影和高光，增強立體感。調(diào)整整體效果：檢查卡片的整體效果，對顏色、光影和元素位置進(jìn)行調(diào)整，確保信息清晰、美觀。3.2.1繪制第一張卡片1.新建文檔與背景設(shè)置新建一個空白文檔。然后將背景圖層轉(zhuǎn)換為普通圖層，重命名為“底層背景”。雙擊“底層背景”圖層，調(diào)出“圖層樣式”窗口，勾選“漸變疊加”圖層樣式，調(diào)整參數(shù)3.2實例1:2.5D風(fēng)格的天氣卡片設(shè)計3.2.1繪制第一張卡片2.繪制卡片主體形狀（1）繪制卡片外形選擇矩形工具，設(shè)置繪制模式為“形狀”，填充色值為#FFFFFF，描邊為無，在畫面中央繪制一個矩形。3.2實例1:2.5D風(fēng)格的天氣卡片設(shè)計3.2.1繪制第一張卡片2.繪制卡片主體形狀（2）添加投影效果雙擊調(diào)出“圖層樣式”窗口，勾選“漸變疊加”樣式和“投影”圖層樣式，調(diào)整參數(shù)。3.2實例1:2.5D風(fēng)格的天氣卡片設(shè)計3.2.1繪制第一張卡片3.繪制卡片內(nèi)部元素1)為第一張卡片添加文字元素文字元素包含日期、城市名稱、當(dāng)前溫度、當(dāng)天的最高溫度/最低溫度等信息。3.2實例1:2.5D風(fēng)格的天氣卡片設(shè)計2)為第一張卡片繪制天氣圖標(biāo)(1)繪制太陽的主體。(2)繪制太陽的光芒形狀。3.2.1繪制第一張卡片3.繪制卡片內(nèi)部元素3)為第一張卡片繪制天氣圖標(biāo)(3)按Shift鍵選中這兩個膠囊圓角矩形，再按Ctrl+G組合鍵編組，并命名為“光芒組1”。(4)為太陽填色，添加“漸變”圖層樣式。(5)為太陽添加發(fā)光效果。(6)調(diào)整整體的太陽形狀，模擬一定的透視效果。3.2實例1:2.5D風(fēng)格的天氣卡片設(shè)計3.2.1繪制第一張卡片3.繪制卡片內(nèi)部元素4)為天氣圖標(biāo)制作立體效果(1)復(fù)制“太陽”編組圖層，并調(diào)整位置。(2)對厚度層的路徑形狀進(jìn)行微調(diào)，進(jìn)一步優(yōu)化太陽的厚度效果。(3)使用上一步驟中同樣的方法，對太陽其他部分的路徑形狀進(jìn)行微調(diào)3.2實例1:2.5D風(fēng)格的天氣卡片設(shè)計3.2.1繪制第一張卡片3.繪制卡片內(nèi)部元素5)為太陽圖標(biāo)制作投影(1)繪制投影的形狀,并在圖層面板上更改圖層順序至“太陽”編組圖層之下,按Ctrl+T組合鍵調(diào)出自由縮放變換手柄框，并切換到“透視”狀態(tài)，先向上移動右側(cè)中間的端點，再向右上方移動下側(cè)中間的端點，調(diào)整圖形3.2實例1:2.5D風(fēng)格的天氣卡片設(shè)計3.2.1繪制第一張卡片3.繪制卡片內(nèi)部元素5)為太陽圖標(biāo)制作投影(2)調(diào)整投影的顏色和模糊效果。調(diào)整投影，先調(diào)出“圖層樣式”窗口，添加“漸變疊加”樣式。在漸變編輯器中設(shè)置顏色和不透明度指示器。再設(shè)置角度，然后為投影添加“高斯模糊”濾鏡，需將矢量形狀圖層轉(zhuǎn)換為智能對象3.2實例1:2.5D風(fēng)格的天氣卡片設(shè)計3.2實例1:2.5D風(fēng)格的天氣卡片設(shè)計3.2.2繪制多云天氣卡片1.復(fù)制晴天天氣卡片·編組與復(fù)制：同時選中晴天天氣卡片相關(guān)圖層并編組為“晴天卡片”，按Ctrl+J組合鍵復(fù)制，重命名為“多云卡片”，并移至合適位置?！ふ{(diào)整太陽效果：由于漸變原因，復(fù)制卡片的太陽效果不同，需手動調(diào)整。雙擊“多云卡片”編組圖層中的“太陽”圖層，調(diào)出“圖層樣式”窗口，選中“漸變疊加”圖層樣式，在“漸變編輯器”窗口移動漸變色條下的手柄調(diào)整太陽漸變，“太陽厚度”圖層的漸變樣式可參考上述步驟進(jìn)行相應(yīng)調(diào)整。·修改文字與太陽圖標(biāo)：選中兩個太陽編組圖層，按Ctrl+T組合鍵調(diào)出自由縮放變換手柄，適當(dāng)縮小多云卡片的太陽圖標(biāo)，為云朵圖標(biāo)留出空間，之后修改“多云卡片”編組圖層的文字內(nèi)容。3.2實例1:2.5D風(fēng)格的天氣卡片設(shè)計3.2.2繪制多云天氣卡片2.添加繪制云朵天氣圖標(biāo)·繪制基礎(chǔ)形狀：使用橢圓工具和圓角矩形工具繪制大小不一的3個圓形形狀和一個圓角矩形，移動擺放成云朵形狀?！ふ{(diào)整變形：將4個新繪制的矢量形狀所在的圖層進(jìn)行編組并重命名為“云朵”，按Ctrl+T組合鍵調(diào)出自由縮放變換手柄，使用“透視”模式將云朵形狀調(diào)整至合適形狀?！ぬ砑訚u變效果：將云朵移動到合適位置，雙擊“云朵”圖層調(diào)出“圖層樣式”窗口，勾選“漸變疊加”樣式，在“漸變編輯器”窗口設(shè)置漸變色條的2手柄的色值分別為#bbc8e4和#ffffff，然后將“角度”設(shè)為79度。3.2實例1:2.5D風(fēng)格的天氣卡片設(shè)計3.2.2繪制多云天氣卡片3.為云朵添加立體效果·復(fù)制并移動：復(fù)制“云朵”圖層，重命名為“云朵厚度”，向左、向上移動一點位置，增加厚度空間?！ぬ砑訚u變樣式：雙擊“云朵厚度”圖層調(diào)出“圖層樣式”窗口，單擊“漸變疊加”右側(cè)的“+”按鈕，再添加一個“漸變疊加”圖層樣式，將“不透明度”設(shè)為60%，將漸變色條左右兩端色值分別設(shè)為#051c4d和#8693b8?！へS富云團(tuán)效果：復(fù)制一層“云朵”圖層并將云朵縮小，同時選中“云朵”和“云朵厚度”2個圖層，按Ctrl+G組合鍵編組并重命名為“云朵1”，按Ctrl+J組合鍵復(fù)制并重命名為“云朵2”，然后適當(dāng)縮小并移動位置，將圖層的“不透明度”改為90%。3.2實例1:2.5D風(fēng)格的天氣卡片設(shè)計3.2.2繪制多云天氣卡片3.為云朵添加立體效果·修改云團(tuán)的投影：選中“多云卡片”編組圖層內(nèi)的“投影”圖層，將“不透明度”改為60%，并適當(dāng)向下移動放大，讀者也可根據(jù)自身喜好和需求進(jìn)行調(diào)整，至此，多云天氣卡片基本繪制完成。3.2實例1:2.5D風(fēng)格的天氣卡片設(shè)計3.2.3繪制雷雨天氣卡片1.復(fù)制并調(diào)整相關(guān)元素·復(fù)制卡片并調(diào)整樣式：選中“多云卡片”編組圖層，按Ctrl+J組合鍵復(fù)制并重命名為“雷雨卡片”，向下移動至合適位置。雙擊“云朵1”編組圖層內(nèi)的“云朵”表面圖層，調(diào)出“圖層樣式”窗口，選中“漸變疊加”樣式，調(diào)整漸變色條兩個手柄的位置?！h除與調(diào)整圖標(biāo)：雷雨天氣不需要太陽圖標(biāo)，將其刪除，隨后將云朵圖標(biāo)略微往上移動一段距離，并適當(dāng)縮小，還可將小云朵圖標(biāo)與大云朵圖標(biāo)適當(dāng)拉開一些距離，再修改第三張“雷雨卡片”的文字內(nèi)容。3.2實例1:2.5D風(fēng)格的天氣卡片設(shè)計3.2.3繪制雷雨天氣卡片2.繪制閃電圖標(biāo)·繪制形狀：使用鋼筆工具繪制一個閃電形狀，設(shè)置鋼筆工具的繪制模式為“形狀”，描邊為無，填充為白色，將新繪制的閃電矢量形狀圖層重命名為“閃電”，并在圖層面板上將其拖動到“云朵2”編組圖層和“云朵1”編組圖層之間。3.2實例1:2.5D風(fēng)格的天氣卡片設(shè)計3.2.3繪制雷雨天氣卡片3.為閃電圖標(biāo)添加光效·添加外發(fā)光效果：雙擊“閃電”圖層調(diào)出“圖層樣式”窗口，添加“外發(fā)光”圖層樣式，設(shè)置顏色值為#517aff，“不透明度”為70%，“擴(kuò)展”為3%，“大小”為50像素?！ぴO(shè)置投影樣式：選中“投影”樣式，設(shè)置“混合模式”為“變亮”，色值為#295bff，“不透明度”設(shè)為80%，“大小”為150像素。3.2實例1:2.5D風(fēng)格的天氣卡片設(shè)計3.2.3繪制雷雨天氣卡片4.為閃電圖標(biāo)添加立體效果·復(fù)制并移動圖層：選中“閃電”圖層，按Ctrl+J組合鍵復(fù)制并重名為“閃電厚度”，將其拖動到“閃電”圖層的下一層，將圖層的“不透明度”修改為40%，單擊“投影”左邊的眼睛圖標(biāo)將“投影”圖層樣式隱藏?！ふ{(diào)整外發(fā)光效果：將“閃電厚度”圖層適當(dāng)移動，雙擊“閃電厚度”圖層打開“圖層樣式”窗口，將“外發(fā)光”的“大小”修改為80像素。·修改路徑形狀：切換到鋼筆工具，當(dāng)鼠標(biāo)指針移動到路徑上時，鋼筆工具切換為了添加模式，在閃電的末端位置單擊添加一個路徑錨點。由于添加的錨點有左右兩個曲線手柄，移動錨點會形成彎曲形狀，不符合要求，需按住Alt鍵，將鋼筆工具切換成“轉(zhuǎn)換點工具”模式，單擊剛才添加的錨點，取消錨點左右兩側(cè)的曲線手柄，使錨點所在曲線區(qū)域從彎曲形狀變成銳角形狀，并將該錨點移動到合適的位置，與閃電表面的末端契合。·重復(fù)操作并調(diào)整：重復(fù)上述步驟，再添加幾個錨點并移動位置，最終調(diào)整閃電厚度形狀。還可多增加一組閃電，進(jìn)一步豐富天氣效果3.3實例2:音樂卡片設(shè)計本節(jié)概述設(shè)計思路：界面分為3部分，包括一張功能較全的大卡片和2張小卡片。大卡片的播放進(jìn)度條設(shè)計獨特，用音波陣列展示歌曲高潮部分。小卡片承載部分信息，下方有磨砂玻璃效果區(qū)域。圖片是重要元素，界面色彩與圖片適配。設(shè)計過程：1.大卡片繪制新建文檔與繪制背景：新建文檔，將背景圖層轉(zhuǎn)換為普通圖層并命名。添加圓角矩形作為卡片背景，調(diào)整位置并添加漸變圖層樣式。添加圖片素材：創(chuàng)建小圓角矩形作為矢量蒙版，添加圖片素材并調(diào)整大小和位置，添加兩層陰影效果。繪制進(jìn)度條：繪制音波陣列進(jìn)度條，復(fù)制多個組成陣列，調(diào)整高度，添加播放進(jìn)度和時長數(shù)字，并添加“顏色疊加”樣式。繪制按鈕：繪制播放、上一首/下一首按鈕，添加“顏色疊加”和“投影”圖層樣式。添加文字：添加歌曲名稱和歌手名稱字符，設(shè)置不同字體樣式和透明度。最后為主卡片整體添加“投影”圖層樣式。2.小卡片繪制繪制矢量蒙版：繪制小卡片的矢量蒙版，調(diào)整位置并編組，粘貼為矢量蒙版路徑。添加圖片素材：添加圖片素材并轉(zhuǎn)換為智能對象，調(diào)整大小和位置。添加信息與按鈕組件：添加磨砂玻璃質(zhì)感矩形作為組件背景，復(fù)制粘貼為矢量蒙版，添加圖片的模糊效果和顏色疊加。添加歌單信息文本和播放按鈕。復(fù)制創(chuàng)建第三張卡片：復(fù)制編組圖層“音樂小卡片01”，更改圖片素材，更新相關(guān)效果，如“高斯模糊”，至此3張音樂卡片基本繪制完成。3.2.3繪制雷雨天氣卡片1.新建文檔設(shè)置文檔參數(shù)：打開Photoshop后，按Ctrl+N組合鍵新建一個空白文檔，命名為“3.3實例2:音樂卡片設(shè)計”，將寬度設(shè)為1080，高度設(shè)為1920，單位為像素。轉(zhuǎn)換背景圖層：新建空白文檔后，雙擊默認(rèn)生成的背景圖層，轉(zhuǎn)換為普通圖層，并將其命名為“底層背景”。3.3實例2:音樂卡片設(shè)計3.2.3繪制雷雨天氣卡片2.繪制主卡片背景添加圓角矩形：在工具欄選中圓角矩形工具，在工具屬性欄中設(shè)置繪制模式為“形狀”，“填充”為任意純色，“描邊”為無，“半徑”即圓角半徑為90像素，在新建文檔的畫布范圍內(nèi)任意位置單擊，調(diào)出“創(chuàng)建矩形”對話框，設(shè)置寬度為900像素，“高度”為1150像素，單擊“確定”按鈕，生成一個圓角矩形調(diào)整位置并添加樣式：選中新建的圓角矩形圖層，雙擊圓角矩形圖層名稱的區(qū)域，將圖層重命名為“主卡片背景”，按Ctrl+T組合鍵調(diào)出自由變換手柄工具，在工具屬性欄中將X設(shè)為540像素，Y設(shè)為665像素，即將主卡片背景矩形調(diào)整到頁面水平居中、靠近頂部的位置。雙擊“主卡片背景”圖層除圖層名稱字符以外的區(qū)域，調(diào)出“圖層樣式”窗口，勾選“漸變疊加”圖層樣式，設(shè)置“混合模式”為“正?！?，“不透明度”為100%，“角度”為128度，雙擊漸變色條調(diào)出“漸變編輯器”窗口，將漸變色條左右兩端色值分別設(shè)為#c7fff8和#dfefff，為主卡片背景添加一個淺藍(lán)色調(diào)的漸變。3.3實例2:音樂卡片設(shè)計3.2.3繪制雷雨天氣卡片3.添加圖片素材（1）創(chuàng)建矢量蒙版：再次創(chuàng)建一個小的圓角矩形，選中圓角矩形工具，將“半徑”改為60像素，在畫布范圍內(nèi)任意位置單擊調(diào)出“創(chuàng)建矩形”對話框，設(shè)置寬度為800像素，“高度”為500像素，創(chuàng)建一個新的圓角矩形，將這個小圓角矩形作為矢量蒙版。3.3實例2:音樂卡片設(shè)計3.2.3繪制雷雨天氣卡片3.添加圖片素材（2）添加圖片：從“素材文件>第3章>3.3音樂卡片設(shè)計”文件夾中找到素材圖片“3.3實例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è)置第一個“投影”樣式的“混合模式”為正片疊底，顏色值為#074097，“不透明度”為12%，“角度”為90度，“距離”為20像素，“大小”為30像素，設(shè)置第2個“投影”樣式的“混合模式”為正片疊底，顏色值為#076297，“不透明度”為30%，“角度”為90度，“距離”為40像素，“大小”為90像素。3.3實例2:音樂卡片設(shè)計3.2.3繪制雷雨天氣卡片5.繪制進(jìn)度條（1）繪制音波陣列：創(chuàng)建小圓角矩形作為音波線，選擇圓角矩形工具，單擊畫布調(diào)出“創(chuàng)建矩形”對話框，將“寬度”為6像素，“高度”設(shè)為40像素，創(chuàng)建一個細(xì)小的圓角矩形，重命名為“音波線”，復(fù)制多個音波線，組成陣列，按Ctrl+T組合鍵調(diào)出自由變換手柄，向右移動12像素，按Ctrl+Alt+Shift+T組合鍵，自動復(fù)制并移動，直至復(fù)制出足夠的數(shù)量組成陣列，并移動到合適的位置，選中復(fù)制出來的矩形，按Ctrl+G組合鍵編組，并重命名為“播放進(jìn)度條”，調(diào)整每一個音波線的高度，組成一條有起伏高低的陣列，以模擬音樂的高潮、低潮，雙擊編組圖層“播放進(jìn)度條”調(diào)出“圖層樣式”窗口，勾選“顏色疊加”樣式，將顏色值設(shè)為#4b5f6f。3.3實例2:音樂卡片設(shè)計3.2.3繪制雷雨天氣卡片5.繪制進(jìn)度條（2）添加數(shù)字字符：按T鍵切換到文字工具，添加兩組數(shù)字字符，內(nèi)容分別是“0:00”和“4:30”，將顏色值設(shè)為與播放進(jìn)度條音波線一致的#4b5f6f，并擺放到播放進(jìn)度條兩側(cè)。3.3實例2:音樂卡片設(shè)計3.2.3繪制雷雨天氣卡片6.繪制播放、上一首/下一首按鈕繪制下一首按鈕：選擇多邊形工具，在工具屬性欄中設(shè)置“描邊”為無，“填充”為任意純色，“邊”為3，即三角形，單擊“邊”參數(shù)值左側(cè)的齒輪圖標(biāo)打開多邊形設(shè)置面板，勾選“平滑拐角”復(fù)選框，在播放進(jìn)度條下方大致位置繪制一個三角形，選中三角形按Ctrl+T組合鍵調(diào)出自由縮放變換手柄，在工具屬性欄中將X設(shè)為781像素，Y設(shè)為1084像素，將三角形放到進(jìn)度條下方右側(cè)位置，使用路徑工具微調(diào)形狀，使用圓角矩形工具添加一個圓角半徑為4像素，寬度為10像素，高度為60像素的圓角矩形，將位置參數(shù)X設(shè)為830像素，Y設(shè)為1084像素，然后將圓角矩形和三角形編組，重命名為“下一首按鈕”。繪制上一首按鈕：復(fù)制“下一首”按鈕，并按Ctrl+T組合鍵調(diào)出自由縮放變換手柄，用鼠標(biāo)右鍵單擊復(fù)制出的按鈕，選擇彈出菜單中的“水平翻轉(zhuǎn)”選項，便可以作為“上一首”按鈕，并將圖層編組重命名為“上一首”，擺放至進(jìn)度條下方左側(cè)的位置。繪制播放按鈕：選擇圓角矩形工具，將圓角半徑修改為10像素，然后添加一個“寬度”為24像素，“高度”為88像素的圓角矩形，選中創(chuàng)建的圓角矩形，分別按Ctrl+C和Ctrl+V組合鍵，在同一圖層內(nèi)復(fù)制一個相同的圓角矩形，并將其向右移動一定距離，組成一個雙圓角矩形的“播放/暫停”按鈕，并將其重命名為“播放/暫?！?，選中“播放/暫?！卑粹o，將其擺放至中央位置。添加樣式：同時選中“播放/暫停”“上一首”“下一首”圖層，按Ctrl+G組合鍵編組并命名為“播放控制按鈕組”，雙擊該編組圖層調(diào)出“圖層樣式”窗口，勾選“顏色疊加”和“投影”樣式，設(shè)置“顏色疊加”圖層樣式的顏色值為#192e51，設(shè)置“投影”圖層樣式的“混合模式”為“正片疊底”，顏色值為#003173，“不透明度”為24%，“角度”為90度，“時間內(nèi)”為15像素，“大小”為45像素。3.3實例2:音樂卡片設(shè)計3.2.3繪制雷雨天氣卡片6.繪制播放、上一首/下一首按鈕繪制下一首按鈕：選擇多邊形工具，在工具屬性欄中設(shè)置“描邊”為無，“填充”為任意純色，“邊”為3，即三角形，單擊“邊”參數(shù)值左側(cè)的齒輪圖標(biāo)打開多邊形設(shè)置面板，勾選“平滑拐角”復(fù)選框，在播放進(jìn)度條下方大致位置繪制一個三角形，選中三角形按Ctrl+T組合鍵調(diào)出自由縮放變換手柄，在工具屬性欄中將X設(shè)為781像素，Y設(shè)為1084像素，將三角形放到進(jìn)度條下方右側(cè)位置，使用路徑工具微調(diào)形狀，使用圓角矩形工具添加一個圓角半徑為4像素，寬度為10像素，高度為60像素的圓角矩形，將位置參數(shù)X設(shè)為830像素，Y設(shè)為1084像素，然后將圓角矩形和三角形編組，重命名為“下一首按鈕”。3.3實例2:音樂卡片設(shè)計3.2.3繪制雷雨天氣卡片6.繪制播放、上一首/下一首按鈕繪制上一首按鈕：復(fù)制“下一首”按鈕，并按Ctrl+T組合鍵調(diào)出自由縮放變換手柄，用鼠標(biāo)右鍵單擊復(fù)制出的按鈕，選擇彈出菜單中的“水平翻轉(zhuǎn)”選項，便可以作為“上一首”按鈕，并將圖層編組重命名為“上一首”，擺放至進(jìn)度條下方左側(cè)的位置。繪制播放按鈕：選擇圓角矩形工具，將圓角半徑修改為10像素，然后添加一個“寬度”為24像素，“高度”為88像素的圓角矩形，選中創(chuàng)建的圓角矩形，分別按Ctrl+C和Ctrl+V組合鍵，在同一圖層內(nèi)復(fù)制一個相同的圓角矩形，并將其向右移動一定距離，組成一個雙圓角矩形的“播放/暫停”按鈕，并將其重命名為“播放/暫停”，選中“播放/暫停”按鈕，將其擺放至中央位置。3.3實例2:音樂卡片設(shè)計3.2.3繪制雷雨天氣卡片6.繪制播放、上一首/下一首按鈕添加樣式：同時選中“播放/暫停”“上一首”“下一首”圖層，按Ctrl+G組合鍵編組并命名為“播放控制按鈕組”，雙擊該編組圖層調(diào)出“圖層樣式”窗口，勾選“顏色疊加”和“投影”樣式，設(shè)置“顏色疊加”圖層樣式的顏色值為#192e51，設(shè)置“投影”圖層樣式的“混合模式”為“正片疊底”，顏色值為#003173，“不透明度”為24%，“角度”為90度，“時間內(nèi)”為15像素，“大小”為45像素。3.3實例2:音樂卡片設(shè)計3.2.3繪制雷雨天氣卡片7.添加歌曲名稱和歌手名稱字符添加歌曲名稱：選擇文字工具，設(shè)置字體為Bold，字體大小為54點，顏色值為#4b5f6f，輸入文本內(nèi)容“SONGNMAE”，添加一個文本圖層，切換選中任意其他圖層，將字體改為Regular，字體大小改為40點，顏色值不變，然后輸入文本內(nèi)容“Nameofsinger”，再將圖層的“不透明度”改為50%。3.3實例2:音樂卡片設(shè)計3.2.3繪制雷雨天氣卡片8.為主卡片整體添加“投影”圖層樣式：將所有相關(guān)UI元素的圖層選中，打包成組并命名為“主卡片”，然后雙擊該編組圖層調(diào)出“圖層樣式”窗口，勾選“投影”圖層樣式，設(shè)置“混合模式”為“正?！?，顏色值為#00a7d1，“不透明度”為12%，“角度”為90度，“距離”為36像素，“大小”為90像素。3.3實例2:音樂卡片設(shè)計3.3實例2:音樂卡片設(shè)計3.3.2繪制第二張音樂小卡片1.繪制小卡片的矢量蒙版創(chuàng)建并調(diào)整蒙版：選擇圓角矩形工具，設(shè)置“圓角半徑”為60像素，“寬度”和“高度”均設(shè)為420像素，創(chuàng)建正方形圓角矩形，按Ctrl+T組合鍵調(diào)出自由變換手柄，在工具屬性欄中將X設(shè)為300像素，Y設(shè)為1540像素，保持選中狀態(tài)，按Ctrl+G組合鍵編組，并重命名為“音樂小卡片01”。復(fù)制粘貼路徑：按A鍵切換“路徑選擇工具”，選中圓角矩形路徑，按住Ctrl+C組合鍵復(fù)制，選中編組圖層“音樂小卡片01”，按Ctrl+V組合鍵將復(fù)制的圓角矩形路徑粘貼為該編組圖層的矢量蒙版路徑，然后刪掉原先的圓角矩形圖層。3.3實例2:音樂卡片設(shè)計3.3.2繪制第二張音樂小卡片2.添加作為專輯封面的圖片素材添加圖片并轉(zhuǎn)換：找到素材圖片，按Ctrl+C組合鍵復(fù)制，回到Photoshop中，選中編組圖層“音樂小卡片01”，按Ctrl+V組合鍵粘貼圖片，用鼠標(biāo)右鍵單擊圖片素材，選擇“轉(zhuǎn)換為智能對象”選項。調(diào)整圖片：按Ctrl+T組合鍵調(diào)出自由變換手柄，將X設(shè)為405像素，Y設(shè)為1575像素，W和H即寬和高均設(shè)為原尺寸大小的18%。3.3實例2:音樂卡片設(shè)計3.3.2繪制第二張音樂小卡片3.添加歌單信息與播放按鈕組件（1）添加組件背景：選擇圓角矩形工具，設(shè)置圓角半徑為45像素，繪制一個寬度為375像素，高度為140像素的圓角矩形，按Ctrl+T組合鍵調(diào)出自由縮放變換手柄，將X設(shè)為300像素，Y設(shè)為1651像素，使其處于小卡片的下半部分區(qū)域。（2）復(fù)制粘貼為矢量蒙版：移動到合適的位置之后，使用直接選擇工具選中路徑，按Ctrl+C組合鍵復(fù)制，然后編組并將其重命名為“歌曲信息與播放組件”，按Ctrl+V組合鍵粘貼復(fù)制的路徑作為矢量蒙版，刪除剛才創(chuàng)建的圓角矩形。3.3實例2:音樂卡片設(shè)計3.3.2繪制第二張音樂小卡片3.添加歌單信息與播放按鈕組件（3）添加模糊效果：選中圖片圖層“圖層2”，按Ctrl+J組合鍵復(fù)制，將復(fù)制出的圖層拖入“歌曲信息與播放組件”編組圖層中，執(zhí)行“濾鏡>模糊>高斯模糊”命令，調(diào)出“高斯模糊”窗口，將“半徑”設(shè)為24像素，此時基本的磨砂玻璃效果已經(jīng)出現(xiàn)。（4）添加顏色疊加：雙擊編組圖層“歌曲信息與播放組件”，調(diào)出“圖層樣式”窗口，勾選添加“漸變疊加”圖層樣式，設(shè)置“混合模式”為“正片疊底”，漸變色條左右兩端色值分別為#156ea6和#07587e，“不透明度”為35%，“角度”為128度。3.3實例2:音樂卡片設(shè)計3.3.2繪制第二張音樂小卡片3.添加歌單信息與播放按鈕組件（5）添加歌單信息文本：使用文本工具輸入文本“MusicAlbumX”作為歌單名稱，設(shè)置字體為Bold，字體大小為30點，字體顏色為#eaf6ff，然后切換選中任意其他圖層，再次使用文本工具輸入文本“12Tracks”（歌單數(shù)量信息），設(shè)置字體為Regular，字體大小為30點，字體顏色同為#eaf6ff，將這個文字圖層的不透明度設(shè)為60%。3.3實例2:音樂卡片設(shè)計3.3.2繪制第二張音樂小卡片3.添加歌單信息與播放按鈕組件（6）添加播放按鈕：選擇橢圓工具，單擊畫布彈出“創(chuàng)建橢圓”對話框，將“寬度”和“高度”都設(shè)為84像素，由此創(chuàng)建一個正圓形，然后將正圓形移動到磨砂玻璃組件右側(cè)且上下居中位置，將正圓形所在圖層重命名為“播放按鈕背景”；然后雙擊橢圓形狀圖層“播放按鈕背景”，"調(diào)出‘圖層樣式’窗口“，勾選“漸變疊加”圖層樣式，將漸變色條左右兩端的色值分別設(shè)為#b4d7f0和#ffffff，“角度”設(shè)為-56度。3.3實例2:音樂卡片設(shè)計3.3.2繪制第二張音樂小卡片3.添加歌單信息與播放按鈕組件（7）添加三角形播放按鈕：在圖層面板中選中“下一首”編組圖層內(nèi)的“多邊形1”矢量形狀圖層，按Ctrl+J組合鍵復(fù)制圖層，再將復(fù)制出的圖層拖動到“音樂小卡片01”編組圖層內(nèi)，需要注意的是，這個圖層需要放在“播放按鈕背景”圖層上方，按住Ctrl+T組合鍵調(diào)出自由變換手柄，將X設(shè)為425像素，Y設(shè)為1654像素，W和H寬高縮小為原先的50%，修改顏色，雙擊新復(fù)制、縮小的三角形所在圖層，調(diào)出“圖層樣式”窗口，勾選“顏色疊加”圖層樣式，將顏色值修改為#006de8。3.3實例2:音樂卡片設(shè)計3.3.3創(chuàng)建第三張音樂小卡片1.復(fù)制編組圖層選中繪制完成的編組圖層“音樂小卡片01”，按Ctrl+J組合鍵復(fù)制，將復(fù)制出的編組圖層重命名為“音樂小卡片02”，將其向右移動一段距離，使該圖層的右邊緣與上方主卡片的右邊緣對齊。3.3實例2:音樂卡片設(shè)計3.3.3創(chuàng)建第三張音樂小卡片2.更改圖片素材（1）復(fù)制智能對象圖層：選中編組圖層“音樂小卡片02”內(nèi)的圖片素材圖層“圖層2”，單擊鼠標(biāo)右鍵，在彈出的菜單中選擇“通過復(fù)制新建的智能對象”選項，復(fù)制一層新的智能對象圖層“圖層2復(fù)制2”，并將其拖動到“音樂小卡片02”編組圖層中。（2）更換圖片并保存：雙擊進(jìn)入該智能對象圖層，更換新的圖片素材，按Ctrl+C組合鍵復(fù)制，回到Photoshop中的智能對象圖層頁簽“圖層2.psb”下，按Ctrl+V組合鍵粘貼新圖片，然后按住Ctrl+S組合鍵保存。3.3實例2:音樂卡片設(shè)計3.3.3創(chuàng)建第三張音樂小卡片2.更改圖片素材（3）更新相關(guān)圖層：將剛才復(fù)制并更新了圖片的智能對象圖層“圖層2復(fù)制2”再復(fù)制一層出來（復(fù)制后的圖層名稱默認(rèn)為“圖層2復(fù)制3”），并將其拖動到編組圖層“歌曲信息與播放組件”中。（4）添加模糊效果：選中智能對象圖層“圖層2復(fù)制3”，選擇“高斯模糊”選項，彈出“高斯模糊”窗口，保持上次使用設(shè)置的參數(shù)值不變，單擊“確定”按鈕添加濾鏡，至此，3張音樂卡片基本繪制完成。同時給讀者留了課后作業(yè)，即為播放進(jìn)度條添加播放進(jìn)度，用更亮、更飽和的色彩展示已播放的進(jìn)度。3.4實例3:日程卡片設(shè)計本節(jié)概述設(shè)計思路：本實例設(shè)計日程卡片，用于展示日程的具體信息。核心是創(chuàng)建4張不同的日程卡片，包括過去時間的灰色調(diào)卡片和不同時長、色調(diào)的卡片。日程時長決定卡片高度，卡片包含多種信息，且信息顯示隨卡片高度自適應(yīng)。設(shè)計過程：1.新建文檔并繪制界面背景新建文檔與轉(zhuǎn)換圖層：新建空白文檔，將寬度設(shè)為1170，高度設(shè)為2532像素，轉(zhuǎn)換默認(rèn)背景圖層為“底層背景”。創(chuàng)建背景并繪制背板：為底層背景添加漸變，繪制日程列表的圓角矩形背板，調(diào)整位置并命名，添加投影效果。添加標(biāo)題和日期：添加標(biāo)題文字和周一至周六的日期數(shù)字，對部分?jǐn)?shù)字進(jìn)行不透明度調(diào)整和樣式設(shè)置，添加周一至周日的字符并調(diào)整。繪制時間軸：添加時間碼數(shù)字并設(shè)置樣式，添加時間軸刻度線并編組復(fù)制，添加日程背景分割線并復(fù)制。繪制當(dāng)前時間指示線：復(fù)制并重命名“日程背景分割線”圖層為“時間指示線”，移動并調(diào)整其樣式，添加細(xì)節(jié)如正圓形并設(shè)置圖層樣式，復(fù)制圓形并調(diào)整樣式和位置，添加漸變層并編組移動。2.繪制第一張日程卡片繪制卡片背景：繪制圓角矩形作為卡片背景，添加漸變樣式，復(fù)制并轉(zhuǎn)換為智能對象作為陰影，添加“高斯模糊”濾鏡。添加標(biāo)識等信息：添加日程卡片左側(cè)的標(biāo)識色條并設(shè)置漸變樣式，添加日程標(biāo)題文字和時間數(shù)字。添加頭像和圖標(biāo)組：添加頭像圖片并為其添加描邊樣式，繪制功能圖標(biāo)組的背景并添加樣式，繪制功能圖標(biāo)選中樣式并添加投影，添加功能圖標(biāo)并調(diào)整樣式。3.復(fù)制出其他日程卡片并調(diào)整復(fù)制并調(diào)整灰色卡片：復(fù)制日程卡片相關(guān)圖層并編組，調(diào)整復(fù)制的第二張日程卡片各元素為灰色調(diào)，修改卡片背景和標(biāo)識條的漸變樣式，調(diào)整相關(guān)圖標(biāo)投影色值和不透明度，修改卡片整體陰影和高度，調(diào)整相關(guān)元素位置和內(nèi)容。課后作業(yè)：按照相似步驟創(chuàng)建其他日程卡片作為課后作業(yè)，讀者可選用自己喜歡的顏色。3.4.1新建文檔并繪制日程界面背景1.新建文檔設(shè)置文檔參數(shù)：打開Photoshop后，按Ctrl+N組合鍵新建一個空白文檔，命名為“3.4實例3:日程卡片設(shè)計”，將寬度設(shè)為1170，高度設(shè)為2532，單位為像素（對應(yīng)iPhone14手機(jī)屏幕分辨率）。轉(zhuǎn)換背景圖層：新建空白文檔后，雙擊默認(rèn)生成的背景圖層，將其轉(zhuǎn)換為普通圖層，并命名為“底層背景”。3.4實例3:日程卡片設(shè)計3.4.1新建文檔并繪制日程界面背景2.創(chuàng)建界面背景添加漸變：雙擊“底層背景”圖層，調(diào)出“圖層樣式”窗口，勾選“漸變疊加”圖層樣式，設(shè)置“混合模式”為“正?！?，漸變色條左右兩端色值分別為#c8d8ff和#e0d4ff，其中左端顏色手柄的“位置”為25%，設(shè)置“角度”為150度。繪制背板：選擇圓角矩形工具，設(shè)置繪制模式為“形狀”，“填充”為#ffffff，“描邊”為無，“半徑”為40像素，單擊畫布調(diào)出“創(chuàng)建矩形”對話框，創(chuàng)建一個“寬度”為1170像素，“高度”為2400像素的圓角矩形，保持矩形的選中狀態(tài)，按Ctrl+T組合鍵調(diào)出自由變換手柄，在工具屬性欄中將X設(shè)為585像素，Y設(shè)為1600像素，并將其重命名為“日程列表背板”。添加投影效果：雙擊“日程列表背板”圖層調(diào)出“圖層樣式”窗口，設(shè)置投影的相關(guān)參數(shù)。3.4實例3:日程卡片設(shè)計3.4.1新建文檔并繪制日程界面背景3.添加界面標(biāo)題和日期添加標(biāo)題文字：按T鍵切換到文字工具，輸入文本“March24/2023”，字體大小設(shè)為72點，將“March24”的字體設(shè)為Bold，“/2023”的字體設(shè)為Light，字體顏色設(shè)為#2b3877，創(chuàng)建標(biāo)題文字圖層后，按Ctrl+T組合鍵調(diào)出自由縮放變換手柄，在工具屬性欄中將X設(shè)為585像素，Y設(shè)為128像素。添加日期數(shù)字：繼續(xù)使用文字工具，將字體大小設(shè)為60點，字體設(shè)為Light，字體顏色設(shè)為#2b3877，添加7組數(shù)字，分別為19、20、2、3、4、5、6（此處疑似有部分?jǐn)?shù)字缺失，原文為19、20、21、22、23、24、25），通過“垂直居中對齊”和“水平居中分布”功能對齊和均分這些數(shù)字，對于過去式的數(shù)字降低不透明度，將“24”突出顯示并添加投影樣式。添加字符：同時選中數(shù)字19-25所在圖層，按Ctrl+J組合鍵復(fù)制出7個新圖層，分別更改文字內(nèi)容為Sun、Mon、Tue、Wed、Thu、Fri、Sat，并向上移動一定距離，再將字體大小統(tǒng)一縮小為48點。3.4實例3:日程卡片設(shè)計3.4.1新建文檔并繪制日程界面背景4.繪制時間軸（1）添加時間碼數(shù)字：繼續(xù)使用文字工具，添加09:00、10:00、11:00、12:00、13:00、14:00、15:00共7組數(shù)字，設(shè)置字體為Light，大小為48點，字體顏色為#2b3877，將它們擺放在日程列表背板左側(cè)，使用“垂直居中分布”功能平均分布，對過去式的數(shù)字調(diào)整不透明度。（2）添加刻度線：選擇圓角矩形工具，設(shè)置“填充”色值為#d2d8e8，在09:00和10:00之間繪制3條平均分布的短線，設(shè)置中間那條較長刻度線的寬度為50，高度為4，設(shè)置較短刻度線的寬度為25，高度為4，將這3條刻度線編組，并重命名為“時間刻度線”，按6次Ctrl+J組合鍵復(fù)制6組，并依次排布在下面的時間碼之間。3.4實例3:日程卡片設(shè)計3.4.1新建文檔并繪制日程界面背景4.繪制時間軸（3）添加日程背景分割線：再次選擇圓角矩形工具，設(shè)置“填充”色值為#c6cfe6，單擊畫布彈出“創(chuàng)建矩形”對話框，將“寬度”設(shè)為1000，“高度”為2，創(chuàng)建矩形，然后將這個矩形放在“09:00”右側(cè)，并將其所在圖層重命名為“日程背景分割線”，選中這個細(xì)長的矩形，按6次Ctrl+J組合鍵復(fù)制6次，依次平均擺放在其他時間碼右側(cè)。3.4實例3:日程卡片設(shè)計3.4.1新建文檔并繪制日程界面背景5.繪制當(dāng)前時間指示線（1）復(fù)制并移動：選中其中任意一個“日程背景分割線”圖層，按Ctrl+J組合鍵復(fù)制并重命名為“時間指示線”，將其移動到10:00和11:00之間，更靠近10:00的位置，保持“時間指示線”圖層的選中狀態(tài)，切換為圓角矩形工具，在工具屬性欄中設(shè)置“填充”色值為#817bff，W為1170，也就是與屏幕等寬，按V鍵切換到移動工具，按住Shift鍵將“時間指示線”橫向往左移動直至貼到畫布左邊緣。（2）添加細(xì)節(jié)：然后使用橢圓工具繪制一個寬和高均為28像素的正圓形，生成“橢圓1”圖層；再添加個“漸變疊加”圖層樣式：設(shè)置漸變色條左右兩端色值分別為#7ba0ff和#817bff，“不透明度”為100%，“角度”為126度3.4實例3:日程卡片設(shè)計3.4.1新建文檔并繪制日程界面背景5.繪制當(dāng)前時間指示線（3）添加投影：為橢圓添加“投影”圖層樣式，設(shè)置“混合模式”為“正片疊底”，色值為#2879ff，“不透明度”為24%，“角度”為90度，“距離”為3像素，“大小”為15像素。（4）第一次復(fù)制橢圓并調(diào)整按Ctrl+J組合鍵復(fù)制“橢圓1”圖層，按Ctrl+T組合鍵調(diào)出自由變換手柄。將鼠標(biāo)指針移到角上手柄端點，按住Shift+Alt組合鍵拖動鼠標(biāo)，縮小和復(fù)制橢圓形狀。單擊“橢圓1復(fù)制”圖層下方“效果”下“漸變疊加”左側(cè)眼睛圖標(biāo)，隱藏該樣式。按A鍵切換到直接選擇工具，在工具屬性欄中將“填充”色值改為#ffffff。3.4實例3:日程卡片設(shè)計3.4.1新建文檔并繪制日程界面背景5.繪制當(dāng)前時間指示線（5）第二次復(fù)制橢圓并調(diào)整再次按Ctrl+J組合鍵復(fù)制“橢圓1”圖層，按Ctrl+T組合鍵調(diào)出自由變換手柄。將鼠標(biāo)指針移到角上手柄端點，按住Shift+Alt組合鍵拖動鼠標(biāo)，縮小和復(fù)制橢圓形狀。設(shè)置“投影”圖層樣式“不透明度”為80%，“距離”為2像素，“大小”為12像素。3.4實例3:日程卡片設(shè)計3.4.1新建文檔并繪制日程界面背景5.繪制當(dāng)前時間指示線（6）繪制矩形并設(shè)置樣式使用矩形工具繪制寬度為1170像素、高度為180像素的矩形，設(shè)置圖層“不透明度”為20%，“填充”為0%，擺放位置合適。雙擊矩形圖層調(diào)出“圖層樣式”窗口，勾選“漸變疊加”圖層樣式，調(diào)出“漸變編輯器”。單擊漸變色條左端上方手柄，將值改為0%，再將左右兩端色值改為#817bff，“角度”改為-90度。將與時間指示線相關(guān)的4個圖層編組，重命名為“時間指示組件”，然后向下移動一段距離。3.4實例3:日程卡片設(shè)計3.4.2繪制第一張日程卡片1.繪制卡片背景創(chuàng)建矩形：選擇圓角矩形工具，設(shè)置“填充”為任意顏色，“描邊”為無，圓角“半徑”為30像素，創(chuàng)建一個寬度為837像素，高度為294像素的圓角矩形，將其命名為“日程1卡片背景”，并拖動到“時間指示組件”編組圖層中2.添加漸變和陰影漸變樣式：雙擊“日程1卡片背景”圖層，調(diào)出“圖層樣式”窗口，勾選“漸變疊加”樣式，將漸變色條左右兩端色值分別設(shè)為#ffe0d7和#ffd6ea，“角度”設(shè)為170度。陰影效果：保持“日程1卡片背景”圖層的選中狀態(tài)，按住Ctrl+J組合鍵復(fù)制，將復(fù)制出的圖層命名為“日程1外陰影”，單擊鼠標(biāo)右鍵，在彈出的菜單中選擇“轉(zhuǎn)換為智能對象”選項，執(zhí)行“濾鏡>高斯模糊”命令，添加一個“高斯模糊”濾鏡，半徑設(shè)為20像素3.4實例3:日程卡片設(shè)計3.4.2繪制第一張日程卡片3.4實例3:日程卡片設(shè)計3.添加日程卡片元素標(biāo)識色條：使用圓角矩形工具繪制一個寬22像素，高256像素的長矩形，作為日程卡片左側(cè)的標(biāo)識色條，放置在垂直方向上與日程背景卡片居中對齊，將其命名為“日程1標(biāo)識條”，并添加“漸變疊加”圖層樣式，漸變色條左右兩端色值分別設(shè)為#ff4138和#ec1f85。日程標(biāo)題：選擇文字工具，設(shè)置字體大小為48點，字體為Bold，字體顏色為#dc073e，輸入文本“DevelopmentMeeting”。日程時間：選擇文字工具，設(shè)置字體大小為40點，字體為Light，輸入文本“10:30-11:30”，將這些文字與主標(biāo)題左對齊。3.4.2繪制第一張日程卡片3.4實例3:日程卡片設(shè)計4.添加頭像組元素頭像圖片：從指定文件夾中選中3張頭像圖片“頭像-1.png”“頭像-2.png”“頭像-3.png”，并將其拖動導(dǎo)入Photoshop工程中，按圖所示位置擺放。頭像描邊：雙擊“頭像-1”圖層，調(diào)出“圖層樣式”窗口，勾選“描邊”圖層樣式，將“大小”設(shè)為4像素，“顏色”設(shè)為#ffffff。復(fù)制粘貼圖層樣式：選中“頭像-1”圖層，單擊鼠標(biāo)右鍵，在彈出的菜單中選擇“復(fù)制圖層樣式”選項，再選中“頭像-2”和“頭像-3”兩個圖層，單擊鼠標(biāo)右鍵，在彈出的菜單中選擇“粘貼圖層樣式”選項3.4.2繪制第一張日程卡片3.4實例3:日程卡片設(shè)計5.添加功能圖標(biāo)組元素（1）繪制圖標(biāo)組的背景：繪制一個寬度為240像素，高度為68像素，半徑為20像素的圓角矩形，然后添加與日程標(biāo)識條相似的圖層樣式；3.4.2繪制