Photoshop UI設(shè)計實戰(zhàn)案例教程（移動端+Web端） 課件 第4章 移動端 App 的創(chuàng)意小組件設(shè)計

PhotoshopUI設(shè)計實戰(zhàn)案例教程(移動端+Web端)第4章移動端App的創(chuàng)意小組件設(shè)計本章概述：第4章主要介紹了移動端App的創(chuàng)意小組件設(shè)計。首先闡述了移動端App界面常見小組件，包括切換標(biāo)簽組件（用于切換不同模塊或頁面）、開關(guān)組件（控制功能開啟/關(guān)閉）、復(fù)選框/單選按鈕組件（表示勾選和單選操作）、進(jìn)度條組件（控制指標(biāo)數(shù)據(jù)變化）以及表盤類組件（控制指標(biāo)數(shù)據(jù)區(qū)間量大小且交互較復(fù)雜）。接著通過實例詳細(xì)講解了創(chuàng)意組件的設(shè)計過程。如創(chuàng)意進(jìn)度條組件設(shè)計，涵蓋制作進(jìn)度條背景（新建文檔、添加漸變效果、添加主副標(biāo)題）、繪制創(chuàng)意進(jìn)度組件（進(jìn)度條背景及進(jìn)度條繪制、添加光效、繪制樹葉圖標(biāo)組并添加效果）以及繪制進(jìn)度條刻度等步驟。還介紹了創(chuàng)意切換標(biāo)簽組設(shè)計和拓展訓(xùn)練的創(chuàng)意時鐘表盤設(shè)計，包括各自的設(shè)計思路和詳細(xì)設(shè)計過程。第4章移動端App的創(chuàng)意小組件設(shè)計4.1移動端App界面的常見小組件4.2實例1:創(chuàng)意進(jìn)度條組件設(shè)計4.3實例2:創(chuàng)意切換標(biāo)簽組設(shè)計4.4拓展訓(xùn)練:創(chuàng)意時鐘表盤設(shè)計本節(jié)概述介紹了移動端App界面常見的小組件，具體如下：4.1移動端App界面的常見小組件切換標(biāo)簽組件（Tag/Tab）用途：用于切換不同模塊或頁面，常見于電商App底部導(dǎo)航欄和iOS系統(tǒng)應(yīng)用。優(yōu)勢：充分利用屏幕空間，使用戶聚焦所需內(nèi)容，交互簡單。開關(guān)組件（Switch）用途：控制某項功能開啟/關(guān)閉或信息內(nèi)容顯示與否，如Wi-fi、藍(lán)牙、電池百分比顯示開關(guān)。特點：設(shè)計創(chuàng)意空間大。復(fù)選框/單選按鈕組件復(fù)選框（CheckBox）用途：表示是否勾選。樣式：多數(shù)為矩形或圓角矩形外形，勾選狀態(tài)為打鉤形狀圖標(biāo)。單選按鈕（Radiobutton）用途：用于單選選項。樣式：一般為正圓形狀，選中狀態(tài)多為同心圓樣式。進(jìn)度條組件用途：控制某項指標(biāo)數(shù)據(jù)的變化，如音量、亮度等。樣式：有較細(xì)且?guī)Т笫直鷪D標(biāo)和自身較大兩種樣式。表盤類組件用途：控制指標(biāo)數(shù)據(jù)區(qū)間量大小，如設(shè)置睡眠時長。特點：設(shè)計復(fù)雜且體積大，交互相對復(fù)雜，有兩個可交互點。4.1.1切換標(biāo)簽組件功能與定義切換標(biāo)簽組件英文術(shù)語一般稱為Tag或Tab，用于在移動端App界面中切換不同的模塊或者頁面。應(yīng)用場景電商App與iOS系統(tǒng)應(yīng)用：在電商類App底部導(dǎo)航欄用于切換首頁、購物車、會員中心等模塊；在iOS系統(tǒng)自帶的“電話”應(yīng)用中用于切換“個人收藏”“最近通話”“通訊錄”“撥號鍵盤”“語音流言”等界面。設(shè)計優(yōu)勢這些頁面在功能或信息層級上是平行的，移動端屏幕空間有限，該組件按標(biāo)簽分類內(nèi)容，用戶切換標(biāo)簽才能看到對應(yīng)內(nèi)容，能聚焦所需內(nèi)容，且交互簡單，所見即所得。4.1移動端App界面的常見小組件4.1.2開關(guān)組件功能與定義開關(guān)組件英文術(shù)語一般稱為Switch，是一種用于控制某項功能開啟/關(guān)閉，或者信息內(nèi)容顯示與否的組件。應(yīng)用場景例如控制移動設(shè)備Wi-fi和藍(lán)牙的開啟與關(guān)閉，以及控制是否顯示“電池百分比”信息等。設(shè)計特點開關(guān)組件雖然看起來很小且簡單，但設(shè)計創(chuàng)意空間很大，可以融入各種創(chuàng)意元素，如太陽和月亮元素表示設(shè)備的白天或夜晚模式，也可模擬復(fù)古樣式的物理開關(guān)等。4.1移動端App界面的常見小組件4.1.3復(fù)選框/單選按鈕組件功能與定義復(fù)選框：英文術(shù)語為CheckBox，用于表示是否勾選單選按鈕：英文術(shù)語為Radiobutton，用于只能單選的選項設(shè)計樣式復(fù)選框：多數(shù)采用矩形或圓角矩形外形，勾選狀態(tài)一般使用打鉤形狀的圖標(biāo)。部分如iOS系統(tǒng)應(yīng)用可能采用圓形外框，但選中狀態(tài)仍為打鉤形狀圖標(biāo)。單選按鈕：一般使用正圓形狀，選中狀態(tài)多數(shù)采用同心圓的樣式，但iOS系統(tǒng)部分單選按鈕使用無背景的簡單打鉤形狀。傳統(tǒng)同心圓選中樣式一般不用于表示多選，以免用戶產(chǎn)生疑惑。4.1移動端App界面的常見小組件4.1.4進(jìn)度條組件功能與定義進(jìn)度條組件是移動端App界面設(shè)計中常見的一類組件，用于控制某項指標(biāo)數(shù)據(jù)的變化，如音量大小、亮度的高低等。設(shè)計樣式一種是較細(xì)的進(jìn)度條，通常需要一個比較大的手柄圖標(biāo)，方便用戶在較小的移動設(shè)備屏幕上進(jìn)行交互操作。另一種是本身較大的進(jìn)度條，沒有手柄元素，但也能便于用戶操作，例如iOS系統(tǒng)控制中心上的亮度控制和音量控制進(jìn)度條。4.1移動端App界面的常見小組件4.1.5表盤類組件功能與定義表盤類組件是一類設(shè)計比較復(fù)雜且體積通常比較大的UI組件，用于控制某個指標(biāo)數(shù)據(jù)區(qū)間量的大小，例如設(shè)置一段睡眠時長。設(shè)計樣式與進(jìn)度條組件不同，它有兩個可交互的點，表盤中的弧形兩端均可以拖動，可分別控制兩個時間點，如就寢時間點和起床時間點，以此控制時間區(qū)間的大小。4.1移動端App界面的常見小組件4.2實例1:創(chuàng)意進(jìn)度條組件設(shè)計本節(jié)概述設(shè)計思路設(shè)計創(chuàng)意進(jìn)度條組件，通過多種特效和自定義圖標(biāo)展現(xiàn)進(jìn)度，包括利用智能對象與高斯模糊發(fā)光，內(nèi)陰影模擬凹陷，遠(yuǎn)距離投影模擬燈光，以及使用自定義形狀圖標(biāo)。設(shè)計過程1.制作進(jìn)度條背景2.繪制創(chuàng)意進(jìn)度組件繪制進(jìn)度條背景：繪制圓角矩形作背景，添加“漸變疊加”和“內(nèi)陰影”樣式并設(shè)相關(guān)參數(shù)。繪制進(jìn)度條：復(fù)制背景路徑為矢量蒙版，在蒙版內(nèi)繪新矩形作進(jìn)度條，添加“漸變疊加”設(shè)為“變亮”模式，復(fù)制進(jìn)度條層轉(zhuǎn)為智能對象并添加“高斯模糊”濾鏡實現(xiàn)光效。繪制樹葉圖標(biāo)組：添加自定義形狀，繪制8個樹葉圖標(biāo)并排列編組。為樹葉圖標(biāo)添加效果：為進(jìn)度條位置樹葉添加發(fā)光效果，復(fù)制粘貼相關(guān)樣式，復(fù)制樹葉圖標(biāo)轉(zhuǎn)為智能對象添加“高斯模糊”濾鏡，為其他圖標(biāo)復(fù)制粘貼不同樣式并調(diào)不透明度。3.繪制進(jìn)度條刻度繪制高亮刻度：用橢圓工具繪小圓點，圓角矩形工具繪矩形作刻度，編組后復(fù)制粘貼發(fā)光樹葉樣式并設(shè)“填充”為0%。繪制其他刻度：復(fù)制部分刻度線和圓點編組移動，復(fù)制粘貼進(jìn)度條背景樣式。添加刻度數(shù)字：添加文字層作刻度數(shù)字，復(fù)制粘貼發(fā)光樹葉樣式，復(fù)制數(shù)字層轉(zhuǎn)為智能對象添加“高斯模糊”濾鏡并為數(shù)字刻度添加投影。4.2.1制作進(jìn)度條背景1.新建文檔設(shè)置文檔參數(shù)：打開Photoshop后，按Ctrl+N組合鍵新建一個空白文檔，將寬度設(shè)為1080，高度設(shè)為640像素，單擊“創(chuàng)建”按鈕，然后雙擊背景圖層，將其轉(zhuǎn)換為普通圖層，并命名為“底層背景”。2.為背景添加漸變效果添加圖層樣式：雙擊“底層背景”圖層調(diào)出圖層樣式，勾選“漸變疊加”圖層樣式，將漸變色條左右兩端色值分別設(shè)為#3f3f40和#292b2c，“角度”為135度。繪制橢圓并添加模糊效果：選擇橢圓工具，設(shè)置“填充”色值為#515156，描邊設(shè)為無，繪制一個橢圓形狀，將其轉(zhuǎn)換為智能對象圖層，添加一個“半徑”為150像素的“高斯模糊”濾鏡，將圖層混合模式改為“濾色”，并與“底層背景”圖層編組，命名為“背景”。4.2實例1:創(chuàng)意進(jìn)度條組件設(shè)計4.2.1制作進(jìn)度條背景3.添加主副標(biāo)題添加主標(biāo)題：按T鍵切換到橫排文字工具，設(shè)置字體為Light，字體大小為60點，“字距調(diào)整”為150，輸入文本“PROGRESSBAR”，雙擊字符圖層調(diào)出“圖層樣式”窗口，勾選“投影”圖層樣式，設(shè)置“混合模式”為“正片疊底”，顏色值為#000000，“不透明度”為45%，“角度”為135度，“距離”為30像素，“大小”為9像素。添加副標(biāo)題：復(fù)制主標(biāo)題文本圖層，將文本內(nèi)容修改為“Dataindicatorgrowth”，字體大小改為40點，“字距調(diào)整”改為50，修改“投影”圖層樣式的參數(shù)，將“不透明度”改為20%，“大小”為6像素。4.2實例1:創(chuàng)意進(jìn)度條組件設(shè)計4.2.2繪制創(chuàng)意進(jìn)度組件1.繪制進(jìn)度條背景繪制圓角矩形：選擇橢圓工具，設(shè)置“填充”為任意顏色，“描邊”為無，“半徑”為10像素，繪制一個寬度為860像素，高度為40像素的圓角矩形，將該圖層重命名為“進(jìn)度條背景”，“填充”改為0%。添加圖層樣式：雙擊“進(jìn)度條背景”調(diào)出“圖層樣式”窗口，勾選“漸變疊加”和“內(nèi)陰影”圖層樣式，設(shè)置“漸變疊加”圖層樣式的“混合模式”為“正片疊底”，漸變色條左右兩端色值分別為#6d6f72和#555357，“角度”為4度；設(shè)置“內(nèi)陰影”圖層樣式的“混合模式”為“正片疊底”，內(nèi)陰影的色值為#323748，“不透明度”為30%，“角度”為90度，“距離”為12像素，“大小”為24像素。4.2實例1:創(chuàng)意進(jìn)度條組件設(shè)計4.2.2繪制創(chuàng)意進(jìn)度組件2.繪制進(jìn)度條（1）制作矢量蒙版：切換到路徑選擇工具，選中“進(jìn)度條背景”路徑形狀，按Ctrl+C組合鍵復(fù)制，然后按Ctrl+G組合鍵編組并重命名為“進(jìn)度+背景”，再按Ctrl+V組合鍵粘貼剛才復(fù)制的矢量路徑作為矢量蒙版。（2）繪制進(jìn)度條并添加樣式：選擇圓角矩形工具，將“半徑”改為5像素，在新建的編組圖層“進(jìn)度+背景”中繪制一個寬度為480像素，高度為40像素的圓角矩形，并將所在圖層重命名為“進(jìn)度”4.2實例1:創(chuàng)意進(jìn)度條組件設(shè)計4.2.2繪制創(chuàng)意進(jìn)度組件2.繪制進(jìn)度條（3）為進(jìn)度條添加樣式：添加“漸變疊加”圖層樣式，設(shè)置“混合模式”為“變亮”，漸變色條左右兩端色值分別為#b7ffe0和#ffefa4，“角度”為4度。（4）添加光效：按Ctrl+J組合鍵復(fù)制“進(jìn)度”圖層，將其拖出到編組圖層“進(jìn)度+背景”之外，重命名為“進(jìn)度發(fā)光”，將“不透明度”改為40%，轉(zhuǎn)換為智能對象，添加“高斯模糊”濾鏡，“半徑”設(shè)為15像素。4.2實例1:創(chuàng)意進(jìn)度條組件設(shè)計4.2實例1:創(chuàng)意進(jìn)度條組件設(shè)計4.2.2繪制創(chuàng)意進(jìn)度組件3.繪制象征參數(shù)變化的樹葉圖標(biāo)組添加預(yù)設(shè)形狀：選擇自定義形狀工具，單擊工具屬性欄中“形狀”右側(cè)的向下箭頭按鈕彈出形狀下拉面板，單擊齒輪圖標(biāo)，在彈出的菜單中選擇“全部”，追加全部預(yù)設(shè)圖標(biāo)。繪制樹葉圖標(biāo)：從追加的預(yù)設(shè)圖標(biāo)中選擇8個樹葉圖標(biāo)，繪制在進(jìn)度條上方，橫向平均分布排列，按Ctrl+T組合鍵調(diào)出自由變換手柄，調(diào)整圖標(biāo)大小，從左到右逐個放大并調(diào)整傾斜角度，將圖標(biāo)圖層依次命名為樹葉1-樹葉8，再選中這8個圖層編組，命名為“樹葉icon組”。注：讀者也可以任意選擇其他自己喜歡的圖形圖標(biāo)4.2實例1:創(chuàng)意進(jìn)度條組件設(shè)計4.2.2繪制創(chuàng)意進(jìn)度組件4.為樹葉圖標(biāo)添加效果（1）為進(jìn)度條位置樹葉添加發(fā)光效果：為樹葉添加發(fā)光效果的步驟和為進(jìn)度條添加發(fā)光效果相同，首先復(fù)制“進(jìn)度”圖層的圖層樣式，然后選中“樹葉5”圖層，單擊鼠標(biāo)右鍵，選擇彈出菜單中的“粘貼圖層樣式”選項。（2）復(fù)制并轉(zhuǎn)換為智能對象添加模糊效果：按Ctrl+J組合鍵復(fù)制“樹葉5”圖層，重命名為“樹葉發(fā)光”，然后將其轉(zhuǎn)換為智能對象，并添加“高斯模糊”濾鏡。4.2實例1:創(chuàng)意進(jìn)度條組件設(shè)計4.2.2繪制創(chuàng)意進(jìn)度組件4.為樹葉圖標(biāo)添加效果（3）為其他樹葉圖標(biāo)添加不同效果：先復(fù)制進(jìn)度條背景的圖層樣式，然后同時選中發(fā)光樹葉右側(cè)的3個樹葉圖標(biāo)，粘貼圖層樣式；先復(fù)制發(fā)光的“樹葉5”圖標(biāo)的圖層樣式，然后將這個圖層樣式粘貼到圖層“樹葉5”左側(cè)的4個圖標(biāo)上，并將這4個圖層的不透明度改為40%。4.2實例1:創(chuàng)意進(jìn)度條組件設(shè)計4.2.2繪制創(chuàng)意進(jìn)度組件1.繪制高亮刻度繪制刻度形狀：使用橢圓工具繪制一排5個寬高都是8像素的小圓點，切換到圓角矩形工具，在每兩個圓點之間繪制5條寬度為1像素，高度為12像素的矩形作為刻度，且平均分布。添加圖層樣式：將所有刻度圖層編組并重命名為“高亮刻度組”，然后復(fù)制發(fā)光樹葉的圖層樣式，粘貼到“高亮刻度組”編組圖層上，并將“填充”改為0%。4.2實例1:創(chuàng)意進(jìn)度條組件設(shè)計4.2.2繪制創(chuàng)意進(jìn)度組件2.繪制其他刻度復(fù)制刻度組：將第1個圓點和第2個圓點之間的5條刻度線和第2個圓點同時選中，按Ctrl+J組合鍵復(fù)制，再將新復(fù)制的形狀圖層編組，重命名為“暗刻度組1”，將該編組圖層拖出編組圖層“高亮刻度組”之外，然后復(fù)制2組，分別重命名為“暗刻度組2”“暗刻度組3”，最后分別移動它們的位置。添加圖層樣式：復(fù)制“進(jìn)度條背景”圖層的圖層樣式，然后粘貼到編組圖層“暗刻度組1”“暗刻度組2”和“暗刻度組3”上。4.2實例1:創(chuàng)意進(jìn)度條組件設(shè)計4.2.2繪制創(chuàng)意進(jìn)度組件3.添加刻度數(shù)字添加文字圖層：使用橫排文字工具在發(fā)光樹葉所在的刻度下，添加一個字體大小為48點，字體為Light，字體顏色任意的數(shù)字“5.0”。添加發(fā)光效果：復(fù)制數(shù)字圖層并轉(zhuǎn)換為智能對象，并添加“高斯模糊”濾鏡。添加投影：將作為發(fā)光效果的智能對象圖層“5.0復(fù)制”移動到文字圖層“5.0”下方，雙擊數(shù)字圖層“5.0”調(diào)出“圖層樣式”窗口，勾選“投影”圖層樣式，設(shè)置“混合模式”為“正片疊底”，顏色為#000000，“不透明度”為76%，“角度”為135度，“距離”為24像素，“大小”為12像素。4.3實例2:創(chuàng)意切換標(biāo)簽組設(shè)計本節(jié)概述設(shè)計思路本實例要繪制一個創(chuàng)意切換標(biāo)簽組，被選中的標(biāo)簽自身發(fā)光且照亮底板。通過外發(fā)光、圖層漸變和高斯模糊模擬標(biāo)簽發(fā)光效果，綜合智能對象、高斯模糊和漸變圖層蒙版實現(xiàn)底板照亮效果。設(shè)計過程1.繪制標(biāo)簽組背景新建文檔并設(shè)置背景：新建文檔，轉(zhuǎn)換背景圖層，添加“漸變疊加”圖層樣式，設(shè)置漸變色值和角度。2.創(chuàng)建標(biāo)簽底座的照亮效果和未選中標(biāo)簽的文字圖標(biāo)繪制標(biāo)簽底座并添加樣式，包括更深色調(diào)的漸變和邊緣照亮效果（通過復(fù)制、添加內(nèi)陰影和外發(fā)光圖層樣式，并設(shè)置矢量蒙版），添加底座下方照亮效果（創(chuàng)建蒙版并添加投影樣式，用畫筆繪制照亮效果），添加未選中標(biāo)簽的圖標(biāo)和文字（拖入圖片素材調(diào)整樣式，添加文字并設(shè)置不透明度）。3.繪制選中樣式的標(biāo)簽繪制圓形背景并添加漸變樣式，添加細(xì)節(jié)（復(fù)制、調(diào)整不透明度和添加矢量形狀蒙版），用畫筆繪制內(nèi)部發(fā)光效果，添加外發(fā)光和選中標(biāo)簽的圖標(biāo)及文字（導(dǎo)入圖片素材并調(diào)整樣式，添加文字）4.3.1繪制標(biāo)簽組背景1.新建文檔設(shè)置文檔參數(shù)：打開Photoshop后，按Ctrl+N組合鍵新建一個空白文檔，將寬度設(shè)為1080，高度設(shè)為640像素，然后雙擊背景圖層，將其轉(zhuǎn)換為普通圖層，并命名為“底層背景”。2.為背景添加漸變效果設(shè)置漸變樣式：雙擊“底層背景”圖層調(diào)出圖層樣式，勾選“漸變疊加”圖層樣式，設(shè)置漸變色條左右兩端色值分別為#222227和#37383f，“角度”為135度，創(chuàng)建深藍(lán)紫色調(diào)的漸變背景。4.3實例2:創(chuàng)意切換標(biāo)簽組設(shè)計4.3.1繪制標(biāo)簽組背景1.新建文檔設(shè)置文檔參數(shù)：打開Photoshop后，按Ctrl+N組合鍵新建一個空白文檔，將寬度設(shè)為1080，高度設(shè)為640像素，然后雙擊背景圖層，將其轉(zhuǎn)換為普通圖層，并命名為“底層背景”。2.為背景添加漸變效果設(shè)置漸變樣式：雙擊“底層背景”圖層調(diào)出圖層樣式，勾選“漸變疊加”圖層樣式，設(shè)置漸變色條左右兩端色值分別為#222227和#37383f，“角度”為135度，創(chuàng)建深藍(lán)紫色調(diào)的漸變背景。3.繪制標(biāo)簽底座用鋼筆工具繪制矢量形狀（可參考視頻教程），確定其大小和位置。把新建矢量形狀所在圖層轉(zhuǎn)為智能對象層，按Ctrl+J復(fù)制并水平翻轉(zhuǎn)，移至合適位置拼成完整標(biāo)簽底座形狀。因智能對象層調(diào)整方便，只需調(diào)整原始層，復(fù)制層會同步更新。將兩個智能對象層編組，重命名為“標(biāo)簽底座”。4.3實例2:創(chuàng)意切換標(biāo)簽組設(shè)計4.3.2創(chuàng)建標(biāo)簽底座的照亮效果和未選中標(biāo)簽的文字圖標(biāo)1.為標(biāo)簽底座添加樣式雙擊“標(biāo)簽底座”編組圖層，打開“圖層樣式”窗口，勾選“漸變疊加”圖層樣式，將“角度”改為160度，漸變色條左右兩端色值分別改為#161618和#1f2122，繪制一個比背景更深的深灰色調(diào)。4.3實例2:創(chuàng)意切換標(biāo)簽組設(shè)計4.3.2創(chuàng)建標(biāo)簽底座的照亮效果和未選中標(biāo)簽的文字圖標(biāo)2.為標(biāo)簽底座添加照亮效果（1）復(fù)制“標(biāo)簽底座”圖層，添加一個“內(nèi)陰影”圖層樣式，設(shè)置“混合模式”為變亮，陰影色值為#ff9abb，“角度”為90度，“距離”為4像素，“大小”為2像素（2）按Ctrl+G組合鍵再次編組并重命名為“標(biāo)簽底座照亮邊緣”，添加“外發(fā)光”圖層樣式，設(shè)置“混合模式”為“線性減淡(添加)”，“不透明度”為30%，發(fā)光顏色為#ff517a，“大小”為30像素4.3實例2:創(chuàng)意切換標(biāo)簽組設(shè)計4.3.2創(chuàng)建標(biāo)簽底座的照亮效果和未選中標(biāo)簽的文字圖標(biāo)2.為標(biāo)簽底座添加照亮效果（3）添加圖層蒙版。保持編組圖層“標(biāo)簽底座照亮邊緣”的選中狀態(tài)，單擊圖層面板底部的“添加矢量蒙版”按鈕，為該編組圖層添加一個矢量蒙版，按G鍵切換到漸變工具，單擊工具屬性欄中的漸變色條調(diào)出“漸變編輯器”窗口，再單擊漸變色條中間位置，為其添加一個顏色手柄并設(shè)為#ffffff，兩端手柄均設(shè)為#000000。（4）設(shè)置好漸變工具之后，返回畫布，選中編組圖層“標(biāo)簽底座照亮邊緣”的圖層蒙版，將漸變工具從左往右拉出一條兩邊黑，中間白的漸變，這樣就使得亮粉色邊緣有了“兩邊黑，中間亮”的效果4.3實例2:創(chuàng)意切換標(biāo)簽組設(shè)計4.3.2創(chuàng)建標(biāo)簽底座的照亮效果和未選中標(biāo)簽的文字圖標(biāo)2.為標(biāo)簽底座添加照亮效果（5）細(xì)化照亮效果。復(fù)制多個“標(biāo)簽底座照亮邊緣”編組圖層并微調(diào)，使這個初步成型的照亮效果更加豐富。單擊“標(biāo)簽底座照亮邊緣”編組圖層的文件夾圖標(biāo)，切換選中圖層本身(剛才選中的是圖層蒙版)，然后按2次Ctrl+J組合鍵復(fù)制2個編組圖層，再使用漸變工具在兩個圖層蒙版上分別繪制一個更寬和更窄的黑白漸變條。將蒙版漸變條比較寬的那一個圖層的“不透明度”改為10%，并關(guān)閉這一圖層原先的“外發(fā)光”圖層樣式4.3實例2:創(chuàng)意切換標(biāo)簽組設(shè)計4.3.2創(chuàng)建標(biāo)簽底座的照亮效果和未選中標(biāo)簽的文字圖標(biāo)4.3實例2:創(chuàng)意切換標(biāo)簽組設(shè)計3.添加底座下方的照亮效果(1)創(chuàng)建蒙版并編組。選中“標(biāo)簽底座”相關(guān)圖層按Ctrl+G編組并命名為“標(biāo)簽底座+效果”作為總編組。(2)形成完整選擇區(qū)域。切換到“標(biāo)簽底座”層，按住Ctrl單擊“圓角矩形1”，再按Ctrl+Shift單擊“圓角矩形1復(fù)制”形成完整底座選擇區(qū)域。(3)添加矢量蒙版。保持選擇區(qū)域激活，選中總編組圖層，點擊“添加矢量蒙版”按鈕生成蒙版。(4)創(chuàng)建投影樣式。雙擊總編組圖層調(diào)出“圖層樣式”窗口，勾選“投影”并設(shè)置顏色、不透明度等參數(shù)。4.3.2創(chuàng)建標(biāo)簽底座的照亮效果和未選中標(biāo)簽的文字圖標(biāo)4.3實例2:創(chuàng)意切換標(biāo)簽組設(shè)計3.添加底座下方的照亮效果(1)創(chuàng)建蒙版并編組。選中“標(biāo)簽底座”相關(guān)圖層按Ctrl+G編組并命名為“標(biāo)簽底座+效果”作為總編組(2)形成完整選擇區(qū)域。切換到“標(biāo)簽底座”層，按住Ctrl單擊“圓角矩形1”，再按Ctrl+Shift單擊“圓角矩形1復(fù)制”形成完整底座選擇區(qū)域。(3)添加矢量蒙版。保持選擇區(qū)域激活，選中總編組圖層，點擊“添加矢量蒙版”按鈕生成蒙版。(4)創(chuàng)建投影樣式。雙擊總編組圖層調(diào)出“圖層樣式”窗口，勾選“投影”并設(shè)置顏色、不透明度等參數(shù)。(5)繪制照亮效果圖層。按B鍵切換畫筆工具，設(shè)置顏色、大小、硬度和不透明度等參數(shù)，新建圖層繪制圓形模擬照亮效果。4.3.2創(chuàng)建標(biāo)簽底座的照亮效果和未選中標(biāo)簽的文字圖標(biāo)4.3實例2:創(chuàng)意切換標(biāo)簽組設(shè)計4.為未選中標(biāo)簽添加圖標(biāo)和文字圖標(biāo)添加從“圖片素材/第4章/4.3綜合實例:創(chuàng)意切換標(biāo)簽組”文件夾中找到圖片素材“RecommendIcon.png”和“ProfileIcon.png”，并將其拖入Photoshop當(dāng)前正打開的工程文件中，可以看到拖進(jìn)來的圖片素材自動轉(zhuǎn)換為智能對象圖層。將這2個圖標(biāo)分別擺放在底座的左右兩側(cè)，縮小其尺寸并移動到合適位置，并將這兩個圖層的“不透明度”改為20%。文字添加設(shè)置文字字體大小為28點，字體為Light，字體顏色為純白色#ffffff，添加兩個字符圖層并編輯字符內(nèi)容為“Recommend”和“MyProfile”，并擺放在左右兩側(cè)各自對應(yīng)的圖標(biāo)下面，將字符圖層的“不透明度”改為50%，4.3.3繪制選中樣式的標(biāo)簽4.3實例2:創(chuàng)意切換標(biāo)簽組設(shè)計1.繪制圓形背景并添加漸變樣式繪制圓形：使用橢圓工具繪制一個填充色值為#ffefe9，描邊為無的圓形作為選中標(biāo)簽的背景，將其轉(zhuǎn)換為智能對象圖層并命名為“選中標(biāo)簽背景”添加漸變樣式：為“選中標(biāo)簽背景”圖層添加“漸變疊加”圖層樣式，設(shè)置漸變色條左右兩端色值分別為#ffefe9和#ffa9bb，“角度”為135度。4.3.3繪制選中樣式的標(biāo)簽4.3實例2:創(chuàng)意切換標(biāo)簽組設(shè)計2.添加細(xì)節(jié)（1）復(fù)制選中標(biāo)簽背景圓形，將“不透明度”改為60%，在新圖層上雙擊調(diào)出“圖層樣式”窗口，將“混合模式”改為“濾色”，漸變色條左端色值改為#ff709c，單擊選中漸變色條上面右端的手柄(用以控制顏色的不透明度)，將“不透明度”改為0%，（2）為選中的標(biāo)簽背景添加矢量形狀蒙版。選擇路徑選擇工具，選中“橢圓1”的正圓形矢量形狀，按Ctrl+C組合鍵復(fù)制一個矢量形狀圖層，然后將這兩個正圓形矢量形狀圖層編組，重命名為“選中標(biāo)簽背景”。保持這個編組圖層的選中狀態(tài)，按Ctrl+V組合鍵粘貼矢量形狀為矢量蒙版，4.3.3繪制選中樣式的標(biāo)簽4.3實例2:創(chuàng)意切換標(biāo)簽組設(shè)計2.添加細(xì)節(jié)(3)用畫筆工具繪制內(nèi)部發(fā)光效果。按B鍵切換到畫筆工具，將畫筆色值設(shè)為#ffb1b1，筆刷大小設(shè)為500像素，硬度設(shè)為0。新建一個圖層，將其放置在標(biāo)簽背景矢量形狀圖層之上，然后在圓形上方區(qū)域單擊，繪制一個筆刷點，也就是一個羽化模糊的圓點(4)新建一個圖層，繼續(xù)使用畫筆工具，將顏色改為#ffbcd4，筆刷大小適當(dāng)縮小一些，再將“硬度”設(shè)為0，在標(biāo)簽背景圓形下方區(qū)域單擊，添加一個新的筆刷圓點。

(5)將兩個圖層的混合模式均改為“濾色”，再將兩個圖層同時選中，并將其拖動到編組圖層“選中標(biāo)簽背景”內(nèi)4.3.3繪制選中樣式的標(biāo)簽4.3實例2:創(chuàng)意切換標(biāo)簽組設(shè)計3.為選中標(biāo)簽添加外發(fā)光雙擊編組圖層“選中標(biāo)簽背景”，調(diào)出“圖層樣式”窗口，勾選“投影”圖層樣式，設(shè)置“混合模式”為“變亮”，投影顏色為#f24360，“不透明度”為30%，“距離”為