注重實用技能培養——打造“互聯網+”UI設計師 突出創意設計訓練——授人以漁而不只是作品臨摹

真實商業項目驅動——行業知識與專業設計相呼應 學習體驗時尚前衛——傳統教材與二維碼革命性攜手

隨著移動互聯技術的飛速發展，“互聯網+”時代已經悄然到來，這自然催生了各行業、企業對UI設計人才的大量需求。與傳統美工、設計人員相比，新“互聯網+”時代對UI設計師提出了更高的要求，傳統美工、設計人員已無法勝任。在這樣的大環境下，這套“互聯網UI設計師”系列教材應運而生，它旨在幫助讀者朋友快速成長為符合“互聯網+”時代企業需求的優秀UI設計師。

這套教材是由課工場（kgc.cn）的UI/UE教研團隊研發的。課工場是北大青鳥集團下屬企業北京課工場教育科技有限公司推出的互聯網教育平臺，專注于互聯網企業各崗位人才的培養。平臺匯聚了數百位來自知名培訓機構、高校的頂級名師和互聯網企業的行業專家，面向大學生以及需要“充電”的在職人員，針對與互聯網相關的產品、設計、開發、運維、推廣和運營等崗位，提供在線的直播和錄播課程，并通過遍及全國的幾十家線下服務中心提供現場面授以及多種形式的教學服務，且同步研發出版最新的課程教材。

課工場為培養互聯網UI設計人才設立了UI/UE設計學院及線下服務中心，提供各種學習資源和支持，包括：

　現場面授課程

　在線直播課程

　錄播視頻課程

　案例素材下載

　學習交流社區

　作業提交批改系統

　QQ討論組（技術、就業、生活）

以上所有資源請訪問課工場UI/UE學院：kgc.cn/uiue。

■ 本套教材特點

（1）課程高端、實用——拒絕培養傳統美工。

　培養符合“互聯網+”時代需求的高端UI設計人才，包括移動UI設計師、網頁UI設計師、平面UI設計師。

　除UI設計師所必須具備的技能外，本課程還涵蓋網絡營銷推廣內容，包括：網絡營銷基本常識、符合SEO標準的網站設計、Landing Page設計優化、營銷型企業網站設計等。

　注重培養產品意識和用戶體驗意識，包括電商網站設計、店鋪設計、用戶體驗、交互設計等。

　學習W3C相關標準和設計規范，包括HTML5/CSS3、移動端Android/iOS相關設計規范等內容。

（2）真實商業項目驅動——行業知識、專業設計一個也不能少。

　與知名4A公司合作，設計開發項目課程。

　幾十個實訓項目，涵蓋電商、金融、教育、旅游、游戲等行業。

　不僅注重商業項目實訓的流程和規范，還傳遞行業知識和業務需求。

（3）更時尚的二維碼學習體驗——傳統紙質教材學習方式的革命。

　每章提供二維碼掃描，可以直接觀看相關視頻講解和案例效果。

　課工場UI/UE學院（kgc.cn）開辟教材配套版塊，提供素材下載、學習社區等豐富的在線學習資源。

■ 讀者對象

（1）初學者：本套教材將幫助你快速進入互聯網UI設計行業，從零開始，逐步成長為專業UI設計師。

（2）設計師：本套教材將帶你進行全面、系統的互聯網UI設計學習，傳遞最全面、科學的設計理論，提供實用的設計技巧和項目經驗，幫助你向互聯網方向迅速轉型，拓寬設計業務范圍。

課工場出品（kgc.cn）

第1章 基礎知識
本章簡介 2
理論講解 2
1.1 轉換色彩模式給紫藤女孩變色 2
1.1.1 Photoshop 軟件介紹 3
1.1.2 圖片文件的格式 5
1.1.3 色彩模式介紹 6
1.1.4 實現案例——轉換色彩模式給紫藤女孩變色 7
1.2  使用輔助工具制作彩旗圖案 9
1.2.1 Photoshop操作面板 9
1.2.2 Photoshop圖像文件的基本操作 14
1.2.3 保存為適合網頁使 用的格式 17
1.2.4 使用輔助工具制作彩旗圖案 18
實戰案例 20
實戰案例1——面板排排看 20
實戰案例2——神秘巨石陣 21
實戰案例3——雪糕圖標瘦身記 22
實戰案例4——給涂鴉墻改變色彩模式 23
本章總結 25
本章作業 26
第2章 Photoshop基本操作
本章簡介 30
理論講解 30
2.1 圖像視圖的調整 30
2.1.1 “縮放工具”與“抓手工具” 30
2.1.2 使用“縮放工具”和“抓手工具”處理圖像 32
2.1.3 實現案例——圖像視圖的調整 34
2.2 使用“裁剪工具”制作美少女圖像 35
2.2.1 畫布與圖像 36
2.2.2 圖像的旋轉 38
2.2.3 “裁剪工具” 39
2.2.4 實現案例——使用“裁剪工具”制作美少女圖像 40
2.3 使用“選區工具”和“自由變換”等命令制作立方體骰子 41
2.3.1 移動工具 42
2.3.2 選區 42
2.3.3 “自由變換”命令 44
2.3.4 實現案例——制作立方體骰子（上） 46
實戰案例 49
實戰案例1——給奧特曼制作一寸黑白照片 49
實戰案例2——邪不勝正 50
實戰案例3——制作立方體骰子（下） 51
本章總結 52
本章作業 53
第3章
Photoshop的繪圖工具
本章簡介 56
理論講解 56
3.1 使用“油漆桶工具”給小丑換裝 56
3.1.1 “油漆桶工具” 57
3.1.2 實現案例——使用“油漆桶工具”給小丑換裝 57
3.2 使用“漸變工具”給按鈕做美容 58
3.2.1 “漸變工具” 59
3.2.2 實現案例——使用“漸變工具”給按鈕做美容 61
3.3 使用“畫筆工具”制作超炫光斑壁紙 64
3.3.1 繪畫工具 64
3.3.2 “橡皮擦工具” 66
3.3.3 實現案例——使用畫筆工具制作超炫光斑壁紙 68
實戰案例 70
實戰案例1——繪制悠閑的橘子 70
實戰案例2——制作日歷精靈 70
實戰案例3——制作“網頁設計師”大賽宣傳欄 72
本章總結 74
本章作業 75
第4章
Photoshop圖像修飾工具
本章簡介 78
理論講解 78
4.1 使用修飾工具美化照片 78
4.1.1 修飾工具簡介 79
4.1.2 “仿制圖章工具” 80
4.1.3 “修復工具” 80
4.1.4 加深/減淡工具組與模糊/銳化工具組 82
4.1.5 實現案例——使用修飾工具處理照片 85
4.2 使用“紅眼工具”處理圖像 87
4.2.1 “紅眼工具” 88
4.2.2 實現案例——使用“紅眼工具”處理圖像 88
4.3 修飾工具的綜合運用 89
實戰案例 93
實戰案例1——“給小狗治病” 93
實戰案例2——制作 照片“雨過天晴” 94
本章總結 95
本章作業 96
第5章
色彩調整與校正
本章簡介 100
理論講解 100
5.1 調整圖像的亮度、對比度以實現過度曝光的藝術效果 100
5.1.1 調整圖像的亮度、對比度 101
5.1.2 實現案例——調整圖像的亮度、
對比度以實現過度曝光的藝術效果 107
5.2 使用“色彩平衡”命令實現黃昏變黎明 111
5.2.1 “色彩平衡”命令 111
5.2.2 實現案例——使用“色彩平衡”
命令實現黃昏變黎明 113
5.3 使用“色相/飽和度”命令調整偏色圖片 117
5.3.1 “色相/飽和度”命令 117
5.3.2 實現案例——使用“色相/飽和度”
命令調整偏色圖片 120
實戰案例 122
實戰案例1——懷舊效果 122
實戰案例2——豐富“海浪”照片色彩 123
實戰案例3——給“菊花”照片調色 124
本章總結 125
本章作業 126
第6章
圖層與蒙版
本章簡介 130
理論講解 130
6.1 應用圖層變幻魔術撲克牌 130
6.1.1 圖層簡介 131
6.1.2 圖層的作用 134
6.1.3 圖層的對齊與分布 135
6.1.4 圖層樣式 137
6.1.5 實現案例——應用圖層變幻魔術撲克牌 137
6.2 應用圖層的混合模式給美女換裝 139
6.2.1 圖層混合模式簡介 140
6.2.2 混合模式的效果 140
6.2.3 實現案例——應用圖層的混合模式給美女換裝 143
6.3 使用圖層蒙版實現夢里那片向日葵 144
6.3.1 圖層蒙版簡介 145
6.3.2 實現案例——使用圖層蒙版實現
夢里那片向日葵 146
6.4 使用剪貼蒙版給手機換壁紙 147
6.4.1 剪貼蒙版簡介 147
6.4.2 實現案例——使用剪貼蒙版給手機換壁紙 149
實戰案例 151
實戰案例1——閃光的手表 151
實戰案例2——黃昏的UFO 151
本章總結 153
本章作業 154
第7章 文字工具
本章簡介 158
理論講解 158
7.1 使用文字工具制作立頓奶茶的包裝 158
7.1.1 文字工具 158
7.1.2 文字蒙版工具 163
7.1.3 轉換文字圖層 165
7.1.4 實現案例——使用文字工具制作
立頓奶茶的包裝 165
7.2 使用文字工具制作樓盤廣告 172
7.2.1 “字符”“段落”調板 173
7.2.2 實現案例——使用“文字工具”
制作樓盤廣告 176
實戰案例 183
實戰案例1——制作形象頁 183
實戰案例2——制作化妝品廣告 184
本章總結 186
本章作業 187
第8章
路徑、形狀工具與選區
本章簡介 192
理論講解 192
8.1 使用鋼筆工具和路徑工具制作合成圖片 192
8.1.1 路徑工具 193
8.1.2 鋼筆工具 194
8.1.3 實現案例——使用鋼筆工具和路徑工具
制作合成圖片 196
8.2 使用形狀工具制作購物流程指示圖 199
8.2.1 “形狀工具” 199
8.2.2 路徑、形狀與選區 200
8.2.3 實現案例——使用形狀工具
制作購物流程指示圖（上） 202
實戰案例 206
實戰案例1——購物流程指示圖（下） 206
實戰案例2——繪制可愛小牛造型 208
本章總結 211
本章作業 212
第9章 濾鏡與通道
本章簡介 216
理論講解 216
9.1 使用濾鏡制作透明彩色特效 216
9.1.1 常用濾鏡組 217
9.1.2 實現案例——使用濾鏡制作透明彩色特效 233
9.2 使用通道制作幻想海報 236
9.2.1 通道的原理和應用 237
9.2.2 實現案例——使用通道制作幻想海報 245
實戰案例 255
實戰案例1——魔法水晶球（上） 255
實戰案例2——魔法水晶球（中） 257
實戰案例3——魔法水晶球（下） 258
本章總結 260
本章作業 261
第10章 圖標設計
本章簡介 264
理論講解 264
10.1 設計制作漂亮的下載圖標 264
10.1.1 初識Icon 264
10.1.2 實現案例——設計制作漂亮的下載圖標 266
10.2 自制收藏夾圖標 271
10.2.1 圖標的表現形式 271
10.2.2 自制收藏夾圖標 272
10.3 自制網絡文件夾圖標 277
10.3.1 圖標的設計原則 277
10.3.2 自制網絡文件夾圖標 279
實戰案例 284
實戰案例1——制作上傳圖標 284
實戰案例2——銀灰色漸變IE瀏覽器圖標 284
實戰案例3——繪制精美的可回收圖標 285
本章總結 286
本章作業 287
第11章 按鈕設計
本章簡介 290
理論講解 290
11.1 設計制作Download按鈕 290
11.1.1 按鈕的基本常識 291
11.1.2 按鈕的表現形式 291
11.1.3 實現案例——設計制作Download按鈕 292
11.2 設計制作磨砂金屬按鈕 298
11.2.1 按鈕的設計原則 298
11.2.2 設計制作磨砂金屬按鈕 299
實戰案例 304
實戰案例1——疑問的紅（上） 304
實戰案例2——疑問的紅（下） 305
本章總結 307
本章作業 308
第12章
Logo設計
本章簡介 312
理論講解 312
12.1 制作寶馬汽車Logo 312
12.1.1 Logo的概念特征 313
12.1.2 Logo的格式 314
12.1.3 實現案例——制作寶馬汽車Logo 314
12.2 制作ATI公司Logo 318
12.2.1 Logo的設計原則 319
12.2.2 Logo的表現形式 320
12.2.3 實現案例——制作ATI公司Logo 321
12.3 優秀Logo賞析 327
實戰案例 329
實戰案例1——制作中國銀行Logo 329
實戰案例2——制作大眾汽車Logo 330
實戰案例3——DIY制作個人BLOG Logo 332
本章總結 335
本章作業 336
第13章
特效字設計
本章簡介 340
理論講解 340
13.1 天空之城特效字 340
13.1.1 文字常識 341
13.1.2 特效字的常用表現形式 343
13.1.3 實現案例——制作天空之城特效字 344
13.2 制作夢幻琉璃特效字 347
13.2.1 特效字的設計原則 348
13.2.2 實現案例——制作夢幻琉璃特效字 349
實戰案例 355
實戰案例1——制作餅干特效字 355
實戰案例2——制作金屬質感文字 357
本章總結 361
本章作業 362
第14章
創意的概念
本章簡介 366
故事背景 366
理論講解 366
14.1 設計是什么 366
14.1.1　設計的含義 366
14.1.2　設計的要素 368
14.1.3　平面設計的特征 370
14.2 創意的概念 371
14.2.1　創意的出現 372
14.2.2　創意的含義 373
14.2.3　創意的本質 373
14.2.4　思維的概述 374
14.3 創意的特點及要素 376
14.3.1　創意的特點 377
14.3.2　創意三要素 379
14.3.3　缺乏創意的原因 380
實戰案例 382
實戰案例1——百變圓形 382
實戰案例2——創意變臉 383
本章總結 385
本章作業 386
第15章
階段項目
本章簡介 390
故事背景 390
項 目 實 戰 “禁止酒后駕車”宣傳海報再設計 390
15.1 原有案例分析 390
15.2 技術要點 391
15.3 案例分析 392
15.4 案例制作 396
15.5 案例總結 400
第16章
項目綜合案例
本章簡介 402
項目實戰 402
16.1 制作“艾爾之光”官方網站首頁 402
16.2 理論概要 404
16.3 技術要點 410
16.4 思路分析 411
16.5 操作步驟 412
16.6 案例總結 434

1. Photoshop 圖形圖像項目化教程 [主編 胡斌斌 黎婭 蘇大椿]
2. 平面設計與制作項目化教程 [主編　李晨]
3. Photoshop 平面設計（微課版） [主編　趙艷莉]
4. 數字圖像處理（OpenCV 實現） [主編 張廣淵]
5. Photoshop圖像處理與制作 [主編 李觀金 林龍健 李春燕]
6. 數字圖像編輯制作 [張立里 夏麗雯 編著]
7. Photoshop圖像處理案例教程 [張志勇 宋陽 唐永林 劉紅梅 ]
8. Photoshop CS6經典案例教程 [主編 李滿 王兆龍]
9. 中文版Photoshop CS6圖形圖像處理案例教程 [主編 石利平]
10. 毫無PS痕跡——你的第一本Photoshop書 [趙鵬 著]
11. 圖形圖像處理Photoshop CS教程 [張峰 龔毅]
12. Photoshop CS5中文版模塊教程 [彭德林 明麗宏]
13. Photoshop圖形圖像處理教程 [主編 朱子江 廖曉芳]
14. Photoshop CS5實訓教程 [方奮奇]
15. 圖像處理與平面設計必備軟件——Photoshop CS5詳解 [主編 李凱 鄭宏]
16. Photoshop圖像處理案例教程 [主編 邵靜 云正富]