Photoshop + Illustrator + After Effects UI動效設計3合1

孫麗娜，畢業於北京印刷學院設計藝術學專業，藝術學碩士，目前主要從事數字媒體藝術領域的研究和教學。
現任北京郵電大學世紀學院藝術與傳媒學院數字媒體藝術專業專職教師。
其主要教授課程《網頁設計技術》《網頁交互動畫》《網絡項目設計實踐》等。
曾編著圖書《網頁設計技術》，且參寫、參編著作、教材多部。
曾獲選北京高校“優質本科課程”和“優質本科教材課件”優質本科課件。

第1章初識UI動效設計
1．1什麼是UI動效設計011
1．1．1先說UI 011
1．1．2再說“動效” 011
1．1．3 UI動效的應用領域012
1．1．4 UI動效喜迎5G時代013
1．2 UI設計師常用的軟件013
1．2．1 Photoshop\ Illustrator 013
1．2．2 After Effects 014
1．2．3 1．2 ．4其他014
1．3 UI色彩設計015
1．3．1認識色彩015
1．3．2色彩基本知識015
1．3．3配色方式016
1．4 UI常見組件017
1．4．1圖標017
1．4．2按鈕017
1．4．3導航018
1．4．4欄018

第2章UI入門之Photoshop
2．1軟件的基本操作020
2．1．1新建文件020
2．1．2打開文件020
2．1．3置入文件020
2．1．4輔助工具021
【練習2-1】使用標尺021
【練習2-2】使用參考線022
2．1．5圖像變換與變形022
【練習2-3】旋轉與縮放023
【練習2-4】傾斜與扭曲024
2．2 Photoshop工具組024
2．2．1選區工具組024
【練習2-5】使用矩形選框工具創建矩形選區025
【練習2-6】使用單列選框工具創建選區026
2．2．2形狀工具組026
【練習2-7】使用多邊形工具繪製星形圖標027
2．2．3繪圖工具組029
【練習2 -8】使用畫筆工具繪製玩偶圖標029
【練習2-9】使用漸變工具繪製按鈕030
【練習2-10】用油漆桶工具為圖標填色031
2．2．4文字工具組032
2．3色調調整與濾鏡032
2．3．1色調調整032
2．3．2濾鏡033
2．4蒙版034
2．4．1矢量蒙版034
【練習2-11】創建矢量蒙版034
2．4 ．2剪貼蒙版035
【練習2-12】創建剪貼蒙版035
2．4．3圖層蒙版036
【練習2-13】創建圖層蒙版036
2．5圖層混合模式與圖層樣式037
2．5．1圖層透明效果037
2．5．2圖層混合模式037
2．5．3圖層樣式038
2．6實戰：繪製太陽天氣圖標040
2．7習題：製作手機App登錄界面043
2．8習題：製作小程序遊戲開始菜單界面044

第3章UI入門之Illustrator
3．1文檔的基本操作046
3．1．1新建文檔046
3．1．2打開文檔046
3．1．3置入文檔046
3．2基本繪圖工具047
3．2．1簡單繪圖工具047
延伸講解：直線段的調整047
【練習3-1】繪製無線網絡圖標048
3．2．2幾何繪圖工具048
【練習3-2】繪製保險箱圖標048
【練習3-3】繪製分類圖標049
【練習3 -4】繪製笑臉表情050
3．2．3徒手繪圖工具052
【練習3-5】繪製點贊圖標052
3．2．4鋼筆工具繪圖053
【練習3-6】繪製氣象圖標054
3．3填色與文字055
3．3．1單色填充055
3．3．2漸變填充056
3．3．3漸變網格056
【練習3-7】繪製漸變愛心圖標056
3．3．4文字工具057
【練習3-8】完善保護傘圖標057
3．4編輯圖形對象058
3．4．1路徑編輯058
3．4．2變換對象059
【練習3-9】繪製電量圖標061
3．5不透明度和混合模式062
3．5．1 “透明度”面板062
3．5．2混合模式063
3．6實戰：製作登錄界面063
3．7習題：繪製火龍果圖標066
3．8習題：製作購物車界面067

第4章UI動效之After Effects
4．1 After Effects的基本操作069
4．1．1新建項目069
4．1．2新建合成069
4．1．3導入素材069
4．2圖層的基本操作070
4．2．1新建圖層070
4．2．2編輯圖層070
4．2．3圖層疊加模式071
延伸講解：添加圖層樣式071
【練習4-1】製作彈窗界面071
4．2 ．4常用圖層類型072
4．3層基礎動畫屬性073
4．3．1層列表073
4．3．2錨點074
【練習4-2】改變圖標錨點位置075
4．3．3位置075
【練習4-3】製作移動動畫075
4．3．4縮放076
4．3．5旋轉077
【練習4-4】製作圖標旋轉動畫077
4．3．6不透明度078
【練習4-5】製作啟動界面淡入動畫078
4．4蒙版與遮罩079
4．4．1創建蒙版的工具079
延伸講解：形狀與蒙版的切換080
4．4．2蒙版屬性的修改080
【練習4- 6】製作文字掃光效果081
4．5關鍵幀和表達式082
4．5．1添加關鍵幀082
4．5．2查看關鍵幀083
延伸講解：調整時間導航器和工作區083
4．5． 3編輯關鍵幀083
【練習4-7】製作圖標大小變化的動畫084
4．5．4關鍵幀輔助085
延伸講解：對素材進行變速操作086
4．5．5圖表編輯器086
【練習4-8 】製作圖標緩動效果086
4．5．6基本表達式087
延伸講解：設置關聯圖層088
【練習4-9】齒輪轉動效果088
4．6實戰：製作表情按鈕動效089
4．7習題：製作加載動效093
4．8習題：彈出按鈕動畫094

第5章UI的設計規範
5．1網頁界面設計096
5．1．1了解網頁界面096
5．1．2網頁界面的設計原則096
5．1．3網頁界面的構成元素098
5．2 iOS手機界面設計099
5．2．1 iOS操作系統概述099
5．2．2 iOS手機界面主要設計元素099
5．2．3 iOS手機界面設計規範101
5．3 Android手機界面設計103
5．3．1 Android操作系統概述103
5．3．2 Android手機界面設計元素103
5．3．3 Android設計特色104
5．4智能手錶界面設計106
5．4．1 iOS智能手錶設計特點106
5．4．2 Android智能手錶設計特點108

第6章網頁端的UI動效設計
6．1網頁切換動效110
6．1．1設計分析110
6．1．2實戰：Illustrator繪製指針和按鈕111
6．1．3實戰：Photoshop設計網頁切換界面112
延伸講解：柵格化圖層113
6．1．4實戰：After Effects製作網頁切換動效114
6．2網頁滑動效果126
6．2．1設計分析126
6．2．2實戰：Illustrator繪製幾何圖形元素126
延伸講解：調整圓角矩形半徑並指定大小128
6．2．3實戰：Photoshop設計網頁滑動界面129
6．2．4實戰：After Effects製作網頁滑動效果132
6．3網絡錯誤動效139
6．3．1設計分析139
6．3．2實戰：Illustrator繪製場景元素140
6．3．3實戰：Photoshop設計網絡錯誤界面142
6．3．4實戰： After Effects製作網絡錯誤動效145
6．4習題：網頁404動效151

第7章手機端的UI動效設計
7．1App登錄動效153
7．1．1設計分析153
7．1．2實戰：Illustrator繪製App圖標154
延伸講解：調整錨點154
7．1．3實戰：Photoshop設計App登錄界面155
7．1．4實戰：After Effects製作App登錄動效159
7．2主菜單上滑動效167
7． 2．1設計分析167
7．2．2實戰：Illustrator繪製主菜單圖標168
延伸講解：使用“添加錨點工具”製作斷點169
7．2．3實戰：Photoshop設計主菜單界面172
延伸講解：將內容轉換為光柵圖像173
7．2．4實戰：After Effects製作主菜單上滑動效175
延伸講解：調整時間刻度的顯示176
延伸講解：蒙版的運用177
7．3來電彈窗動效181
7．3．1設計分析181
7．3．2實戰：Illustrator繪製來電圖標182
7．3．3實戰：Photoshop設計來電彈窗184
7．3．4實戰：After Effects製作來電彈窗動效186
7．4習題：優惠券動效194

第8章智能手錶的UI動效設計
8．1 iOS智能手錶動效196
8．1．1設計分析196
8．1．2實戰：Illustrator繪製iOS智能手錶圖標197
8．1．3實戰：Photoshop設計iOS智能手錶界面198
8．1．4實戰：After Effects製作iOS智能手錶動效201
8．2 Android智能手錶動效208
8．2．1設計分析208
8 ．2．2實戰： Illustrator繪製Android智能手錶圖標209
8．2．3實戰：Photoshop設計Android智能手錶界面211
8．2．4實戰：After Effects製作Android智能手錶動效213
8．3習題：計時動效216

附錄A Photoshop 2020常用快捷鍵217
附錄B llustrator 2020常用快捷鍵220
附錄C After Effects 2020常用快捷鍵222