Photoshop UI設計基礎教程（移動學習版）

本書以Photoshop 2022為藍本，首先介紹UI設計基礎知識和基本規範，再講解Photoshop在UI設計中的應用 ；最後將Photoshop的操作與UI設計實戰案例相結合，對全書知識進行綜合應用和設計實戰。

為了便於讀者更好地學習本書內容，本書提供了“疑難解答”“技巧提升”“提示”“資源鏈接”“設計素養”等小欄目來輔助學習，並且在操作步驟和部分案例旁附有對應的二維碼，讀者可通過掃描二維碼觀看操作步驟視頻演示，以及案例的高清效果。此外，本書還融入了思政元素，落實了“立德樹人”根本任務。

本书的作者为资深UI设计专家团队，具有多年平面设计和UI设计的教学经验，对于使用Photoshop进行UI设计的操作及应用具有很多的方法和心得。

第1章 UI 設計基礎

1.1　認識UI設計 …………………………………　2

　UI設計的概念 …………………… 2?1.1.1

　UI設計的常見類型 ……………… 3?1.1.2

　UI設計的基本原則 …………… 10?1.1.3

1.2　UI設計要點 ………………………………　12

　構圖 …………………………… 12?1.2.1

　佈局 …………………………… 14?1.2.2

　文字 …………………………… 17?1.2.3

　色彩 …………………………… 19?1.2.4

　風格 …………………………… 21?1.2.5

1.3　UI設計規範 ………………………………　23

　界面元素設計規範 …………… 23?1.3.1

　iOS操作系統設計規範………… 25?1.3.2

　Android操作系統設計規範 …… 26?1.3.3

　Windows操作系統設計規範 … 26?1.3.4

1.4　課堂實訓——策劃“水果淘淘”App UI設計方案 …………………………………　27

1.5　課後練習 …………………………………　30

練習1　分析音樂軟件界面設計 ………　30

練習2　策劃“美食點餐”App界面設計方案 ……………………………　30

第2章　Photoshop 基礎

2.1　瞭解Photoshop…………………………　32

　Photoshop在UI設計中的應用 … 32?2.1.1

　認識Photoshop工作界面 …… 32?2.1.2

2.2　文件和圖像的基本操作 …………………　34

　課堂案例——製作招聘網站界面 …………………………… 34?2.2.1

　新建和打開文件 ……………… 36?2.2.2

　置入與復制圖像 ……………… 36?2.2.3

?2.2.4　保存和關閉文件 ………………　37

　標尺、參考線和網格的應用 … 38?2.2.5

2.3　選區工具組的應用 ………………………　39

　課堂案例——製作多肉養殖網站聚合頁 ………………………… 39?2.3.1

　選區概述 ……………………… 42?2.3.2

　選框工具組 …………………… 42?2.3.3

　套索工具組 …………………… 42?2.3.4

　快速選擇工具組 ……………… 43?2.3.5

2.4　圖層的應用 ………………………………　45

　課堂案例——製作益智小游戲操作界面 ……………………… 45?2.4.1

　圖層的常見類型 ……………… 46?2.4.2

　圖層的基本操作 ……………… 47?2.4.3

　課堂案例——製作外賣App節日閃屏頁 ………………………… 48?2.4.4

　圖層樣式 ……………………… 51?2.4.5

　圖層混合模式 ………………… 51?2.4.6

2.5　文字的應用 ………………………………　52

　課堂案例——製作立體字Logo … 53?2.5.1

　文字工具組 …………………… 54?2.5.2

　設置文字屬性 ………………… 55?2.5.3

　轉換文字屬性 ………………… 56?2.5.4

2.6　課堂實訓 …………………………………　58

　製作“星韻”軟件詳細信息頁 … 58?2.6.1

　製作社交軟件聊天頁 ………… 59?2.6.2

2.7　課後練習 …………………………………　61

練習1　製作科普網站著陸頁 …………　61

練習2　製作旅游攻略App分類頁 ……　61

第3章　繪制界面圖形

3.1　使用矢量工具組繪制圖形 ………………　63

　課堂案例——製作智能家居App活動頁 ………………………… 63?3.1.1

　形狀工具組 …………………… 65?3.1.2

　課堂案例——製作音樂軟件應用圖標 …………………………… 69?3.1.3

　路徑 …………………………… 72?3.1.4

　鋼筆工具組 …………………… 74?3.1.5

3.2　使用繪圖工具組繪制圖形 ………………　77

　課堂案例——製作健身App登錄頁 ………………………… 77?3.2.1

　畫筆工具組 …………………… 79?3.2.2

　填充顏色工具組 ……………… 81?3.2.3

　橡皮擦工具 …………………… 83?3.2.4

3.3　課堂實訓 …………………………………　84

　製作商務系列圖標 …………… 84?3.3.1

　製作社交軟件語音通話界面 … 86?3.3.2

3.4　課後練習 …………………………………　88

練習1　製作播放器圖標 ………………　88

練習2　製作網頁讀取界面 ……………　88

第4章　調整界面色彩

4.1　調整明度 …………………………………　90

　課堂案例——優化美食App首頁界面 …………………………… 90?4.1.1

　亮度/對比度 …………………… 92?4.1.2

　色階 …………………………… 92?4.1.3

　曲線 …………………………… 93?4.1.4

　曝光度 ………………………… 94?4.1.5

　陰影/高光 ……………………… 95?4.1.6

4.2　調整色相及飽和度 ………………………　96

　課堂案例——製作香水網站首頁商品推薦區 …………………… 96?4.2.1

　自然飽和度 …………………… 99?4.2.2

　色相/飽和度 …………………… 99?4.2.3

　課堂案例——製作App抽獎頁 … 100?4.2.4

　色彩平衡 ……………………… 102?4.2.5

　照片濾鏡 ……………………… 103?4.2.6

　替換顏色 ……………………… 103?4.2.7

4.3　應用特殊調色命令 ………………………　104

　課堂案例——製作網頁訪問異常界面 …………………………… 104?4.3.1

　去色 …………………………… 107?4.3.2

　漸變映射 ……………………… 107?4.3.3

　匹配顏色 ……………………… 108?4.3.4

　色調分離 ……………………… 108?4.3.5

4.4　課堂實訓 …………………………………　109

　製作房屋App信息發現頁 …… 109?4.4.1

　優化“新鮮花卉”網站商品詳情頁 ………………………… 112?4.4.2

4.5　課後練習 …………………………………　114

練習1　製作有聲讀物軟件三色配色界面 ……………………………　114

練習2　製作App發布信息頁 …………　114

第5章　合成界面圖像

5.1　應用蒙版 …………………………………　116

　課堂案例——製作音樂App歌單推薦頁 ………………………… 116?5.1.1

　圖層蒙版 ……………………… 119?5.1.2

　剪貼蒙版 ……………………… 121?5.1.3

　快速蒙版 ……………………… 122?5.1.4

　矢量蒙版 ……………………… 123?5.1.5

5.2　應用通道 …………………………………　124

　課堂案例——製作家居網內頁 … 124?5.2.1

　認識通道 ……………………… 128?5.2.2

　通道的基本操作 ……………… 128?5.2.3

5.3　課堂實訓 …………………………………　132

　製作大米網首頁 ……………… 132?5.3.1

　製作生鮮App廣告彈出頁 …… 134?5.3.2

5.4　課後練習 …………………………………　136

練習1　製作讀書App啟動頁界面 ……　136

練習2　製作七夕節開屏界面 …………　137

練習3　製作旅行網內頁 ………………　137

第6章　添加界面特效

6.1　應用濾鏡庫 ………………………………　140

　課堂案例——製作讀書App引導頁 ………………………… 140?6.1.1

　認識濾鏡庫 …………………… 143?6.1.2

　使用濾鏡庫 …………………… 144?6.1.3

6.2　應用獨立濾鏡 ……………………………　147

　課堂案例——製作旅行App登錄頁 ………………………… 147?6.2.1

　Camera Raw 濾鏡 …………… 152?6.2.2

　鏡頭校正 ……………………… 153?6.2.3

　液化 …………………………… 154?6.2.4

　消失點 ………………………… 155?6.2.5

6.3　應用濾鏡組 ………………………………　157

　課堂案例——製作天氣預報日簽 …………………………… 157?6.3.1

　風格化濾鏡組 ………………… 161?6.3.2

　模糊濾鏡組 …………………… 162?6.3.3

　扭曲濾鏡組 …………………… 162?6.3.4

　銳化濾鏡組 …………………… 163?6.3.5

　像素化濾鏡組 ………………… 163?6.3.6

　渲染濾鏡組 …………………… 164?6.3.7

　雜色濾鏡組 …………………… 164?6.3.8

　其他濾鏡組 …………………… 165?6.3.9

6.4　課堂實訓 …………………………………　166

　製作游戲開始按鈕 …………… 166?6.4.1

　製作水鄉土特產網站首頁 …… 167?6.4.2

6.5　課後練習 …………………………………　169

練習1　製作登錄按鈕 …………………　169

練習2　製作網站登錄頁 ………………　170

第7章　切片與輸出界面

7.1　切片基礎 …………………………………　172

　切片的作用 …………………… 172?7.1.1

　切片的要點 …………………… 172?7.1.2

　切片的命名規則 ……………… 173?7.1.3

7.2　界面切片 …………………………………　174

　課堂案例——家居網頁界面切片 …………………………… 175?7.2.1

　創建切片 ……………………… 177?7.2.2

　編輯切片 ……………………… 177?7.2.3

7.3　界面輸出 …………………………………　179

　課堂案例——輸出家居網頁界面 …………………………… 180?7.3.1

　存儲為Web所用格式 ………… 181?7.3.2

　Web圖像文件格式 …………… 182?7.3.3

　Web圖像的輸出設置 ………… 182?7.3.4

7.4　課堂實訓——切片並輸出大米網首頁 …　183

7.5　課後練習 …………………………………　185

練習1　家居網內頁切片 ………………　185

練習2　輸出家居網內頁 ………………　185

第8章　綜合案例

8.1　圖標設計——“半甜”品牌標志 ………　187

　案例背景 ……………………… 187?8.1.1

　案例要求 ……………………… 187?8.1.2

　製作思路 ……………………… 188?8.1.3

8.2　App界面設計——“藝術家居”App界面 ………………………………………　190

　案例背景 ……………………… 190?8.2.1

　案例要求 ……………………… 191?8.2.2

　製作思路 ……………………… 192?8.2.3

8.3　網站界面設計——“青山新能源”企業官網界面 …………………………………　199

　案例背景 ……………………… 199?8.3.1

　案例要求 ……………………… 199?8.3.2

　製作思路 ……………………… 202?8.3.3

8.4　軟件界面設計——數據分析軟件界面 …207

　案例背景 ……………………… 207?8.4.1

　案例要求 ……………………… 208?8.4.2

　製作思路 ……………………… 209?8.4.3

8.5　課後練習 …………………………………　214

練習1　製作科技公司網頁界面 ………　214

練習2　製作美食App界面 ……………　214

練習3　製作辦公軟件登錄界面 ………　215

拓展案例…………………………………………　216