Photoshop UI設(shè)計實戰(zhàn)案例教程（移動端+Web端） 課件 第2章 移動端 App 的“輕擬物”風(fēng)格 UI 設(shè)計

PhotoshopUI設(shè)計實戰(zhàn)案例教程(移動端+Web端)本章概述：本章主要介紹Photoshop基礎(chǔ)操作。涵蓋工作界面各區(qū)域功能，如菜單欄、工具欄等。詳細(xì)講解矢量繪畫工具（鋼筆、矩形等）、文字工具的基礎(chǔ)使用，包括輸入編輯變形。同時闡述圖層基本操作，如新建、復(fù)制等，以及濾鏡的基本概念和操作方法，為后續(xù)UI設(shè)計學(xué)習(xí)奠定堅實基礎(chǔ)。第2章移動端App的“輕擬物”風(fēng)格UI設(shè)計第2章移動端App的“輕擬物”風(fēng)格UI設(shè)計2.1什么是“輕擬物”風(fēng)格設(shè)計2.2實例1:磨砂玻璃質(zhì)感的音樂播放器設(shè)計2.3實例2:“石膏”質(zhì)感的計時器表盤設(shè)計2.4實例3:清新輕擬物風(fēng)格的日歷組件2.5拓展訓(xùn)練：融合不同輕擬物質(zhì)感的界面設(shè)計本節(jié)概述視覺風(fēng)格演進(jìn)早期UI設(shè)計追求擬物風(fēng)格，模擬現(xiàn)實物體，刻畫光影和質(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)對比度色彩，多使用高飽和加高明度的柔和色彩或“高級灰”色調(diào)。2.1什么是“輕擬物”風(fēng)格設(shè)計2.1.1早期視覺風(fēng)格的演進(jìn)——從擬物到扁平本小節(jié)講述UI設(shè)計風(fēng)格的演進(jìn)。早期追求擬物風(fēng)格，模擬現(xiàn)實物體，刻畫光影和質(zhì)感。2010年微軟MetroUI引入扁平化風(fēng)格，去除多余元素。2013年iOS7進(jìn)一步推廣扁平化，有色彩漸變、背景模糊和圓角等特點(diǎn)。這種演進(jìn)是技術(shù)革新和設(shè)計思想轉(zhuǎn)變的結(jié)果，從精致靜態(tài)向簡約動態(tài)轉(zhuǎn)變。2.1什么是“輕擬物”風(fēng)格設(shè)計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è)計2.2實例1:磨砂玻璃質(zhì)感的音樂播放器設(shè)計本節(jié)概述設(shè)計思路該實例介紹了用Photoshop繪制具有磨砂玻璃質(zhì)感的音樂播放器界面，核心在于利用對后層背景的模糊來體現(xiàn)這種質(zhì)感，主要借助“高斯模糊”濾鏡和矢量蒙版實現(xiàn)。同時，遵循對比原則，如立體與扁平效果的強(qiáng)烈對比，以突出界面操作的主次關(guān)系。設(shè)計過程1.制作頁面背景首先通過圖層樣式繪制漸變背景，將默認(rèn)背景圖層轉(zhuǎn)換為普通圖層后，添加“漸變疊加”樣式。接著添加橢圓形狀的裝飾性元素，設(shè)置其不透明度和漸變蒙版，再復(fù)制、調(diào)整位置和不透明度，豐富背景。還使用鋼筆工具添加曲線點(diǎn)綴，調(diào)節(jié)曲線圖層不透明度，最后將相關(guān)圖層打包為智能對象并復(fù)制。2.設(shè)計制作專輯封面繪制圓形專輯封面的磨砂玻璃背景，調(diào)整位置后，通過復(fù)制智能對象、繪制矢量蒙版、添加濾鏡等操作打造基礎(chǔ)效果。進(jìn)一步添加專輯封面圖并轉(zhuǎn)換為智能對象圖層，編組后添加矢量蒙版，對封面圖進(jìn)行縮放、移動并添加圖層樣式。3.設(shè)計制作按鈕組件繪制播放按鈕組件，包括復(fù)制磨砂玻璃質(zhì)感圖層作為背景，微調(diào)質(zhì)感，繪制播放圖標(biāo)并添加效果。按照類似方法繪制“上一首”和“下一首”按鈕，可加強(qiáng)磨砂玻璃質(zhì)感。然后繪制播放進(jìn)度條，設(shè)置其樣式和投影效果。最后添加歌曲名稱等文字元素，并繪制底部的輔助功能按鈕。2.2.1制作頁面背景本小節(jié)介紹磨砂玻璃質(zhì)感音樂播放器的頁面背景制作1.新建文檔與背景圖層處理首先，通過按Ctrl+N組合鍵新建一個空白文檔，設(shè)置寬度為856像素，高度為1852像素。默認(rèn)生成的背景圖層處于鎖定狀態(tài)，需雙擊將其轉(zhuǎn)換為普通圖層并命名為“底層背景”。2.2實例1:磨砂玻璃質(zhì)感的音樂播放器設(shè)計2.添加漸變樣式轉(zhuǎn)換為普通圖層后，再次雙擊該圖層打開“圖層樣式”窗口，勾選“漸變疊加”樣式，選擇“紫色_13”漸變效果，也可根據(jù)喜好調(diào)整色值。2.2實例1:磨砂玻璃質(zhì)感的音樂播放器設(shè)計2.2.1制作頁面背景3.橢圓工具繪制與設(shè)置使用橢圓工具，在工具屬性欄設(shè)置矢量工具繪制模式為“形狀”，填充為純白色，描邊為無，繪制一個大正圓形。選中該圖層后，通過數(shù)字鍵設(shè)置不透明度為40%。2.2.1制作頁面背景4.添加漸變蒙版選擇漸變工具，設(shè)置為“徑向漸變”，從橢圓圓心偏右上位置開始，按住Shift鍵往右上角拖動，為橢圓圖層添加一個從中央到四周的透明度漸變效果。2.2實例1:磨砂玻璃質(zhì)感的音樂播放器設(shè)計2.2.1制作頁面背景5.復(fù)制與調(diào)整圖層保持橢圓圖層選中，按Ctrl+J組合鍵復(fù)制，再按Ctrl+T組合鍵調(diào)出縮放調(diào)節(jié)手柄，調(diào)整大小和位置，確定后按Enter鍵，通過數(shù)字鍵修改不透明度為15%。用同樣方法在左上角繪制一組類似的漸變橢圓形狀并縮小。2.2實例1:磨砂玻璃質(zhì)感的音樂播放器設(shè)計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實例1:磨砂玻璃質(zhì)感的音樂播放器設(shè)計2.2.1制作頁面背景7.智能對象操作將背景圖層和曲線所在圖層打包進(jìn)一個“智能對象”圖層，然后復(fù)制該智能對象圖層。因為智能對象圖層的復(fù)制層會隨初始層內(nèi)容更新而同步更新，所以在制作基于智能對象圖層復(fù)制層的高斯模糊時，只需調(diào)整初始智能對象的內(nèi)容，所有復(fù)制層都會同步更新。2.2實例1:磨砂玻璃質(zhì)感的音樂播放器設(shè)計2.2.2設(shè)計制作專輯封面1.繪制矢量圓形選擇橢圓工具，在畫面上部繪制一個寬高參考值為624像素的正圓形狀圖層，填充為純白色，描邊為無。調(diào)整位置時，可按Ctrl+T組合鍵調(diào)出調(diào)節(jié)手柄框，在工具屬性欄的X和Y文本框中輸入合適數(shù)值，使正圓形位于正中央偏上位置，也可手動控制移動。2.創(chuàng)建矢量蒙板選中背景智能圖層“形狀11”，按Ctrl+J組合鍵復(fù)制一層智能對象，該復(fù)制層會隨原始智能對象圖層內(nèi)容更新而更新。復(fù)制后，按Ctrl+G組合鍵將智能對象圖層編組并命名為“專輯封面模糊”。為該組繪制一個矢量蒙版，先切換到剛才新建的形狀圖層“橢圓2”，按A鍵切換到路徑選擇工具，選中橢圓路徑并復(fù)制，再選中編組“專輯封面模糊”粘貼，即可自動生成矢量蒙版。2.2實例1:磨砂玻璃質(zhì)感的音樂播放器設(shè)計2.2.2設(shè)計制作專輯封面3.打造基礎(chǔ)磨砂玻璃效果選中智能對象復(fù)制層“形狀11復(fù)制”，執(zhí)行“濾鏡>模糊>高斯模糊”命令，設(shè)置“半徑”為18，得到圓形范圍的磨砂玻璃基礎(chǔ)效果樣式。2.2實例1:磨砂玻璃質(zhì)感的音樂播放器設(shè)計2.2.2設(shè)計制作專輯封面4.增強(qiáng)層次感雙擊編組“專輯封面模糊”，彈出“圖層樣式”窗口，先勾選“漸變疊加”添加漸變樣式，設(shè)置“混合模式”為“正?！?，“不透明度”為30%，“角度”為135度，調(diào)整漸變色條兩端色值。再勾選“投影”圖層樣式，設(shè)置顏色色值、混合模式、不透明度、角度、距離和大小等參數(shù)，得到淡淡的藍(lán)色大投影效果。還可勾選“內(nèi)陰影”圖層樣式，設(shè)置相關(guān)參數(shù)，進(jìn)一步優(yōu)化效果。2.2實例1:磨砂玻璃質(zhì)感的音樂播放器設(shè)計2.2.2設(shè)計制作專輯封面5.添加專輯封面圖在“實例文件>第2章>素材”文件夾中找到圖片“專輯封面素材2.jpg”，按Ctrl+C組合鍵復(fù)制，回到Photoshop中不選中任何圖層，按Ctrl+V組合鍵粘貼圖片，并將其所在圖層轉(zhuǎn)換為智能對象圖層，雙擊圖層名稱處將圖層重命名為“專輯封面圖”。6.添加矢量蒙版并調(diào)整選中“專輯封面圖”圖層，按Ctrl+G組合鍵為該圖層編組并命名為“專輯封面圖編組”。按A鍵切換為路徑選擇工具，選中前面繪制的圓形矢量形狀圖層“橢圓2”的路徑，按Ctrl+C組合鍵復(fù)制路徑；再選中“專輯封面圖編組”圖層，按Ctrl+V組合鍵粘貼圓形路徑，為該圖層添加一個正圓形矢量蒙版。最后選中“專輯封面圖”智能對象圖層，按Ctrl+T組合鍵進(jìn)行縮放和移動操作，并雙擊編組圖層“專輯封面圖編組”，調(diào)出“圖層樣式”窗口，勾選“描邊”圖層樣式，調(diào)整相關(guān)參數(shù)。2.2實例1:磨砂玻璃質(zhì)感的音樂播放器設(shè)計2.2.3設(shè)計制作按鈕組件1.繪制播放按鈕組件（1）選擇編組圖層“專輯封面模糊”，按Ctrl+J組合鍵復(fù)制出一層新的磨砂玻璃質(zhì)感圖層，重命名為“播放/暫停按鈕背景”，按A鍵切換到路徑選擇工具，選中該編組圖層的矢量蒙版路徑，縮小并移動它的位置。（2）微調(diào)播放按鈕的磨砂玻璃質(zhì)感，雙擊編組圖層“播放/暫停按鈕背景”，調(diào)出“圖層樣式”窗口，調(diào)整兩個“內(nèi)陰影”圖層樣式的參數(shù)。2.2實例1:磨砂玻璃質(zhì)感的音樂播放器設(shè)計2.2.3設(shè)計制作按鈕組件1.繪制播放按鈕組件（3）繪制播放圖標(biāo)，選擇矩形工具，設(shè)置“填充”為純白色，“描邊”為無，圓角為4像素，先繪制一個豎向的長方形矢量形狀，然后按住Alt鍵拖動鼠標(biāo)復(fù)制出一個相同的長方形，將兩個長方形矢量形狀圖層選中，按住Shfit鍵拖動鼠標(biāo)使其居中，按Ctrl+G組合鍵編組并命名為“播放圖標(biāo)”。最后雙擊“播放圖標(biāo)”編組圖層，打開“圖層樣式”窗口，勾選添加“漸變疊加”圖層樣式并調(diào)整參數(shù)。2.2實例1:磨砂玻璃質(zhì)感的音樂播放器設(shè)計2.2.3設(shè)計制作按鈕組件2.繪制其他按鈕按照上一步驟的方法繪制出“上一首”和“下一首”按鈕，注意背景尺寸要略小于中央的播放按鈕的背景尺寸，中間的雙三角形圖標(biāo)可以使用三角形工具來繪制，并將“播放圖標(biāo)”編組圖層的漸變圖層樣式復(fù)制粘貼到“上一首”“下一首”按鈕的雙三角形圖標(biāo)編組圖層上。如果想進(jìn)一步加強(qiáng)磨砂玻璃的質(zhì)感，可為相關(guān)圖層添加“添加雜色”濾鏡。2.2實例1:磨砂玻璃質(zhì)感的音樂播放器設(shè)計2.2實例1:磨砂玻璃質(zhì)感的音樂播放器設(shè)計2.2.3設(shè)計制作按鈕組件3.繪制播放進(jìn)度條（1）繪制進(jìn)度條背景使用矩形工具在播放按鈕組件和專輯封面之間的區(qū)域繪制一個細(xì)長條形，設(shè)置“填充”為純白色，“描邊”為無，圓角設(shè)為6。將矢量形狀圖層重命名為“播放進(jìn)度條背景”，并按數(shù)字鍵6將圖層不透明度改為60%。（2）設(shè)置樣式和投影效果雙擊“播放進(jìn)度條背景”圖層，調(diào)出“圖層樣式”窗口，勾選添加“漸變疊加”圖層樣式，設(shè)置相關(guān)參數(shù)。按Ctrl+J組合鍵復(fù)制一個圖層，重命名為“進(jìn)度”，并將圖層的“不透明度”修改為100%，按Ctrl+T組合鍵使用自由縮放控制手柄縮短復(fù)制的矢量形狀橫向?qū)挾取?.2實例1:磨砂玻璃質(zhì)感的音樂播放器設(shè)計2.2.3設(shè)計制作按鈕組件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實例1:磨砂玻璃質(zhì)感的音樂播放器設(shè)計2.2.3設(shè)計制作按鈕組件4.添加文字元素按T鍵選擇文字工具，設(shè)置字符大小為60點(diǎn)，排列設(shè)為居中分布，顏色色值設(shè)為#3518b2，添加歌曲名稱作為最主要的文字元素。還可添加其他輔助文字，如歌曲專輯名稱、進(jìn)度時間碼、歌曲時長等，將文字顏色色值統(tǒng)一改為#2d2e5e，字體大小改為40。2.2實例1:磨砂玻璃質(zhì)感的音樂播放器設(shè)計2.2.3設(shè)計制作按鈕組件5.繪制底部輔助按鈕繪制“收藏”圖標(biāo)選擇矢量形狀工具中的多邊形工具，設(shè)置邊數(shù)為5，圓角設(shè)為6像素，在彈出的多邊形屬性面板中將“星形比例”設(shè)為60%，設(shè)置“填充”色值為#3518b2，“描邊”為無，在下方繪制一個五角星圖標(biāo)。按5鍵將多邊形矢量形狀的圖層不透明度改為50%。2.2實例1:磨砂玻璃質(zhì)感的音樂播放器設(shè)計2.2.3設(shè)計制作按鈕組件5.繪制底部輔助按鈕繪制“播放列表”圖標(biāo)選擇矩形工具，保持填充色、描邊和圓角參數(shù)不變，在星形收藏圖標(biāo)右側(cè)繪制一個由三條細(xì)橫線組成的圖標(biāo)。按5鍵將播放列表的圖層不透明度改為50%。繪制“分享”圖標(biāo)選擇鋼筆工具，設(shè)置繪制模式為“形狀”，“填充”為無，“描邊”為6像素，“填充”色值保持不變?yōu)?3518b2，設(shè)置端點(diǎn)和角點(diǎn)為“圓頭”和“圓角”，在播放列表圖標(biāo)右側(cè)繪制一個形狀參考圖標(biāo)的圖標(biāo)。圖層的“不透明度”設(shè)為50%。繪制“更多”圖標(biāo)選擇橢圓工具，將“填充”色值再次設(shè)為#3518b2，“描邊”為無，按住Shift鍵繪制3個小的正圓形上下排列。將圖層不透明度改為50%。排列4個圖標(biāo)最后將4個圖標(biāo)排列整齊，調(diào)整位置使其左右平衡，同時選中4個圖標(biāo)所在圖層，選擇移動工具，使這4個圖標(biāo)水平分布并對齊。2.3實例2:“石膏”質(zhì)感的計時器表盤設(shè)計本節(jié)概述設(shè)計思路該實例介紹了繪制具有“石膏”質(zhì)感的計時器界面，核心是模擬石膏的特性。通過不同角度的陰影樣式疊加，營造出表面無高光和反光、陰影和明暗面過渡柔和的效果。同時，整體界面色彩采用冷白色調(diào)，陰影注意色彩傾向，以體現(xiàn)石膏的質(zhì)感并避免過多寫實細(xì)節(jié)干擾用戶操作。設(shè)計過程1.繪制頁面背景和主體時間撥盤繪制界面背景：新建文檔后，將背景圖層轉(zhuǎn)換為普通圖層，添加漸變圖層樣式，設(shè)置漸變色值、不透明度、樣式和角度等參數(shù)。繪制中央撥盤主體：使用橢圓工具繪制正圓形撥盤主體，設(shè)置填充色值和描邊，添加投影圖層樣式，設(shè)置混合模式、顏色、不透明度、角度、距離、擴(kuò)展和大小等參數(shù)。為撥盤添加細(xì)節(jié)：復(fù)制撥盤主體圖層，調(diào)整投影樣式創(chuàng)建內(nèi)凹立體效果，包括調(diào)整不透明度、角度、距離、擴(kuò)展和大小等參數(shù)。繪制計時器進(jìn)度條：復(fù)制撥盤主體圖層并調(diào)整位置和形狀作為進(jìn)度條，添加錨點(diǎn)并調(diào)整路徑形狀，設(shè)置填充、描邊和投影等樣式，添加時間數(shù)字。2.繪制下方的按鈕組繪制按鈕的背景：對撥盤相關(guān)圖層編組并復(fù)制，調(diào)整大小和位置作為按鈕背景，調(diào)整圖層內(nèi)各部分的投影樣式。繪制按鈕圖標(biāo)并添加輔助文字：使用矩形工具繪制按鈕圖標(biāo)，添加文字內(nèi)容并設(shè)置字體、顏色、大小和不透明度等參數(shù)。2.3實例2:“石膏”質(zhì)感的計時器表盤設(shè)計2.3.1繪制頁面背景和主體時間撥盤1.繪制界面背景新建文檔與圖層設(shè)置打開Photoshop，按Ctrl+N組合鍵新建一個空白文檔，設(shè)置寬度和高度為856像素和1852像素，將背景圖層轉(zhuǎn)換為普通圖層并命名為“底層背景”。添加漸變圖層樣式雙擊“底層背景”圖層，調(diào)出“圖層樣式”窗口，勾選“漸變疊加”圖層樣式。設(shè)置漸變色條左右兩端色值分別為#cedfff和#edf5fc，不透明度為100%，樣式為“線性”，角度為-90度，縮放為120%。2.3實例2:“石膏”質(zhì)感的計時器表盤設(shè)計2.3.1繪制頁面背景和主體時間撥盤2.繪制中央撥盤主體繪制撥盤形狀選擇橢圓工具，設(shè)置繪制模式為“形狀”，填充色值為#edf5fc，描邊為無，在界面中央上方按住Shift鍵繪制一個正圓形，大小和位置參考圖，重命名為“撥盤主體”添加投影效果雙擊“撥盤主體”圖層，調(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實例2:“石膏”質(zhì)感的計時器表盤設(shè)計2.3.1繪制頁面背景和主體時間撥盤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è)置第一個投影樣式的不透明度為100%，角度為135度，距離為6像素，擴(kuò)展和大小均為0；設(shè)置第二個投影樣式的角度為-45度，距離為6像素，擴(kuò)展和大小均為0，創(chuàng)建輕薄的內(nèi)凹立體效果。2.3實例2:“石膏”質(zhì)感的計時器表盤設(shè)計2.3.1繪制頁面背景和主體時間撥盤4.繪制計時器進(jìn)度條（1）繪制進(jìn)度條形狀選中形狀圖層“撥盤主體”，按Ctrl+J組合鍵復(fù)制該圖層，并將復(fù)制出的圖層重命名為“時間進(jìn)度條”。按Ctrl+T組合鍵調(diào)出自由縮放變換手柄，然后按住Alt鍵拖動手柄對該圖層進(jìn)行縮放，使其大致位于兩個圓形之間。（2）調(diào)整進(jìn)度條路徑按A鍵切換到路徑選擇工具，選中形狀圖層“時間進(jìn)度條”的形狀路徑，再選擇鋼筆工具，并將鼠標(biāo)指針移到形狀圖層“時間進(jìn)度條”的形狀路徑上，在圓形路徑右下角添加一個錨點(diǎn)。用鼠標(biāo)右鍵單擊路徑選擇工具，在彈出的面板中選擇直接選擇工具，按住Shift鍵選中兩個錨點(diǎn)，然后按Delete鍵刪除這兩個錨點(diǎn)，使原來完整的圓形變成一段斷開的弧形。2.3實例2:“石膏”質(zhì)感的計時器表盤設(shè)計2.3.1繪制頁面背景和主體時間撥盤4.繪制計時器進(jìn)度條（3）設(shè)置進(jìn)度條樣式確認(rèn)使用工具是直接選擇工具后，修改工具屬性欄中的參數(shù)，將填充改為無，將描邊改為任意一種顏色，這里將描邊粗細(xì)設(shè)為12像素，然后將“描邊選項”中的“端點(diǎn)”改為圓頭。雙擊形狀圖層“時間進(jìn)度條”，彈出“圖層樣式”窗口，勾選“漸變疊加”圖層樣式，并取消勾選第一個“投影”樣式，設(shè)置漸變色條左右兩端色值分別為#219eff和#703eff，角度為-90度，縮放為100%。修改時間進(jìn)度條的投影效果，設(shè)置其不透明度為50%，距離為6像素，擴(kuò)展為0，大小為15像素，添加時間數(shù)字，設(shè)置字體、顏色和不透明度等參數(shù)。2.3實例2:“石膏”質(zhì)感的計時器表盤設(shè)計2.3.2繪制下方的按鈕組1.繪制按鈕的背景復(fù)制與調(diào)整圖層選中圖層“撥盤內(nèi)陷”和“撥盤主體”，按Ctrl+G組合鍵對它們進(jìn)行編組，并重命名為“凸起表盤”。保持編組“凸起表盤”選中的狀態(tài)，按Ctrl+J組合鍵復(fù)制該編組圖層，并重命名為“按鈕1背景”。選擇編組圖層“按鈕1背景”，按Ctrl+T組合鍵對其進(jìn)行縮放和移動，調(diào)整后的大小和位置符合設(shè)計要求。調(diào)整圖層內(nèi)元素展開編組圖層“按鈕1背景”，選擇其中的“撥盤內(nèi)陷”圖層，重命名為“按鈕內(nèi)陷”，將編組圖層“按鈕1背景”下的“撥盤主體”圖層重命名為“按鈕主體”。按Ctrl+T組合鍵調(diào)出縮放移動手柄，按住Alt鍵適當(dāng)縮小一點(diǎn)。雙擊“按鈕主體”圖層調(diào)出“圖層樣式”窗口，設(shè)置第一個“投影”樣式的不透明度為100%，距離為60像素，擴(kuò)展為6%，大小為100像素；設(shè)置第2個“投影”樣式的距離為40像素，擴(kuò)展為5%，大小為70像素。2.3實例2:“石膏”質(zhì)感的計時器表盤設(shè)計2.3.2繪制下方的按鈕組2.繪制按鈕圖標(biāo)并添加輔助文字繪制按鈕圖標(biāo)切換使用矩形工具，設(shè)置“填充”色值為#8f93e7，“描邊”為無，“圓角大小”為12像素，按住Shift鍵在左邊按鈕的中央繪制一個小正方形作為取消按鈕；再在右邊的按鈕上繪制兩個窄矩形作為暫停按鈕。添加輔助文字選擇文字工具，將色值設(shè)為#031179，編輯并添加文字內(nèi)容，為兩個按鈕添加輔助文字Cancel、Pause和為頁面標(biāo)題添加文字Timer，字體均設(shè)為細(xì)體。設(shè)置Cancel和Pause的字體大小為45，圖層不透明度設(shè)為60%，標(biāo)題Timer的字體大小為66。2.4實例3:清新輕擬物風(fēng)格的日歷組件本節(jié)概述設(shè)計思路本實例致力于打造局部輕擬物風(fēng)格與主體扁平化風(fēng)格融合的日歷組件。重點(diǎn)是為所選日期范圍創(chuàng)建突出的立體效果，確保用戶能快速識別，同時保持組件其他部分的簡約扁平風(fēng)格，并在部分按鈕上保留立體細(xì)節(jié)，給用戶帶來交互驚喜。設(shè)計過程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ù)制該圖層完成另一個手柄繪制。3.繪制底部的兩個按鈕左側(cè)按鈕：繪制膠囊形狀左側(cè)按鈕，添加文字。右側(cè)按鈕：復(fù)制左側(cè)按鈕并調(diào)整，添加多種圖層樣式，再添加文字。2.4實例3:清新輕擬物風(fēng)格的日歷組件2.4.1繪制組件主體背景和編排日歷數(shù)字1.繪制組件的背景（1）新建文檔與背景設(shè)置打開Photoshop，按Ctrl+N組合鍵新建一個空白文檔，將寬度和高度均設(shè)為1280像素，命名為“2.4實例3”。雙擊默認(rèn)的“背景”圖層，轉(zhuǎn)換為普通圖層，重命名為“底層背景”。雙擊“底層背景”圖層，調(diào)出“圖層樣式”窗口，在左側(cè)欄勾選“漸變疊加”圖層樣式，設(shè)置漸變色條左右兩端顏色值分別為#cedfff和#edf5fc，不透明度為100%，樣式為“線性”，角度為-90度，縮放為120%。2.4實例3:清新輕擬物風(fēng)格的日歷組件2.4.1繪制組件主體背景和編排日歷數(shù)字1.繪制組件的背景（2）繪制組件主體選擇矩形工具，將“填充”顏色設(shè)為純白色，“描邊”設(shè)為無，圓角大小設(shè)為120像素，按住Shift鍵繪制一個正方形，大小和位置符合要求，重命名為“組件主體”雙擊編組圖層“組件主體”，調(diào)出“圖層樣式”窗口，在左側(cè)欄選擇勾選“投影”圖層樣式，設(shè)置混合模式為“正片疊底”，投影顏色為#4a50da，不透明度為12%，角度為90度，距離為120像素，擴(kuò)展為0%，大小為60像素。再單擊按鈕添加第二個投影效果，設(shè)置其混合模式為“正片疊底”，不透明度為8%，距離為40像素，大小為30像素。選擇路徑選擇工具，選中形狀圖層“矩形1”的矩形路徑，按Ctrl+C組合鍵復(fù)制路徑，然后切換選中編組圖層“組件主體”，按住Ctrl+V組合鍵粘貼路徑，此時自動生成一個形狀與“矩形1”完全相同的矢量蒙版。2.4實例3:清新輕擬物風(fēng)格的日歷組件2.4.1繪制組件主體背景和編排日歷數(shù)字1.繪制組件的背景（3）繪制組件標(biāo)題欄選擇矩形工具，設(shè)置“填充”顏色為藍(lán)色，“描邊”為無，圓角大小為18像素，然后在編組圖層“組件主體”內(nèi)繪制一個新的矩形，繪制完成后移動新繪制的藍(lán)色矩形兩邊自由縮放手柄，使其與背景的白色矩形兩邊對齊，以作為日歷組件的標(biāo)題背景欄，重命名為“標(biāo)題欄背景”。用鼠標(biāo)右鍵單擊編組圖層“組件主體”，在彈出的菜單中選擇“復(fù)制圖層樣式”選項，再切換選中藍(lán)色形狀圖層“標(biāo)題欄背景”，單擊鼠標(biāo)右鍵，在彈出的菜單中選擇“粘貼圖層樣式”選項，為標(biāo)題欄背景添加投影效果。2.4實例3:清新輕擬物風(fēng)格的日歷組件2.4.1繪制組件主體背景和編排日歷數(shù)字1.繪制組件的背景（4）調(diào)整圖層樣式和添加標(biāo)題文字雙擊藍(lán)色形狀所在圖層“標(biāo)題欄背景”，調(diào)出“圖層樣式”窗口，設(shè)置第一個“投影”圖層樣式的不透明度為60%，距離為15像素，大小為36像素。然后調(diào)整第二個“投影”樣式的不透明度為60%，距離為15像素，大小為36像素。勾選“漸變疊加”圖層樣式，設(shè)置漸變條預(yù)設(shè)為“藍(lán)色_24”，不透明度為100%，角度為180度，縮放為150%。2.4實例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個單詞，分別是Sun、Mon、Tue、Wed、Thu、Fri、Sat，它們排布位置符合設(shè)計要求。（2）添加日歷月視圖數(shù)字將字體設(shè)為細(xì)體字，字體顏色設(shè)為深藍(lán)色，輸入5行數(shù)字（每行7個數(shù)字）作為日歷月視圖，注意最后一行的1-5這幾個數(shù)字屬于下個月，因此需要將不透明度降低50%。2.4實例3:清新輕擬物風(fēng)格的日歷組件2.4.2繪制已選擇日期范圍的效果樣式1.繪制選擇范圍的背景（1）繪制日期范圍背景形狀選擇矩形工具，“填充”設(shè)為純白色，“描邊”設(shè)為無，在第4行數(shù)字從23-28繪制一個矩形，調(diào)整為膠囊形狀，重命名為“日期范圍背景”，放置在月視圖數(shù)字組和星期字符組圖層下方。2.4實例3:清新輕擬物風(fēng)格的日歷組件2.4.2繪制已選擇日期范圍的效果樣式1.繪制選擇范圍的背景（2）設(shè)置日期范圍背景樣式雙擊圖層“日期范圍背景”調(diào)出“圖層樣式”窗口，勾選“漸變疊加”圖層樣式，設(shè)置漸變色條左右兩端色值分別為#cad8f3和#e5edf8，角度設(shè)為-87度，縮放設(shè)為100%。勾選“描邊”圖層樣式，設(shè)置“大小”為5像素。勾選并添加兩個“投影”圖層樣式，設(shè)置第1個“投影”圖層樣式的混合模式為“濾色”，顏色為純白色，不透明度為100%，角度為-45度，距離為30像素，大小為45像素。設(shè)置第2個“投影”圖層樣式的混合模式為“正片疊底”，顏色色值為#4a50da，不透明度為8%，角度為135度，距離為36像素，大小為60像素。2.4實例3:清新輕擬物風(fēng)格的日歷組件2.4.2繪制已選擇日期范圍的效果樣式1.繪制選擇范圍的背景（2）為組件主體添加底色選中矢量形狀圖層“矩形1”，雙擊該圖層彈出“圖層”樣式窗口，勾選“漸變疊加”圖層樣式，設(shè)置漸變色條左右兩端的色值分別為##e6ebf2和#ffffff，角度為-87度，縮放為100%。2.4實例3:清新輕擬物風(fēng)格的日歷組件2.4.2繪制已選擇日期范圍的效果樣式2.繪制添加兩個選日期的手柄組件繪制第一個選日期手柄切換選中頂部的藍(lán)色形狀圖層“標(biāo)題欄背景”，按Ctrl+J組合鍵復(fù)制出一層新的相同圖層，重命名為“選擇入住日期手柄”，縮放大小并移至合適位置，調(diào)整為膠囊形狀，修改數(shù)字23的字符顏色為白色，內(nèi)容編輯為“23in”，字體改為粗體。設(shè)置第一個選日期手柄樣式雙擊圖層“選擇入住日期手柄”調(diào)出“圖層樣式”窗口，勾選“漸變疊加”圖層樣式，將漸變色條左右兩端色值分別設(shè)為#2c17cd和#2871fa，角度設(shè)為120度，縮放為150%。添加兩個投影樣式，設(shè)置第一個投影樣式的投影顏色為#4a50da，混合模式為“正片疊底”，不透明度為50%，角度為90度，距離為8像素，大小為15。設(shè)置第二個投影樣式的“不透明度”為15%，距離為30，大小為30，其他參數(shù)和第一個投影樣式的參數(shù)一樣。2.4實例3:清新輕擬物風(fēng)格的日歷組件2.4.2繪制已選擇日期范圍的效果樣式2.繪制添加兩個選日期的手柄組件為第一個選日期手柄添加內(nèi)陰影樣式勾選“內(nèi)陰影”樣式，設(shè)置“混合模式”為“濾色”，不透明度為40%，角度為120度，距離為3像素，大小為1像素。繪制第二個選日期手柄選中樣式調(diào)整完畢的“選擇入住日期手柄”