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

《Photoshop+Illustrator+After Effects UI動效設計3合1》是2021年人民郵電出版社出版的圖書。

基本介紹

• 中文名：Photoshop+Illustrator+After Effects UI動效設計3合1
• 作者：孫麗娜
• 出版社：人民郵電出版社
• 出版時間：2021年5月1日
• 開本：16 開
• 裝幀：平裝
• ISBN：9787115557735

內容簡介

本書是一本運用Photoshop、Illustrator和After Effects進行UI動效製作的教程。全書共8章，分為基礎部分和案例部分。基礎部分講解了UI動效設計的常用工具、色彩知識及常見組件，Photoshop的功能、基本操作及利用該軟體製作UI界面和元素的方法，Illustrator的功能、基本操作及利用該軟體繪製矢量圖示的方法，After Effects的功能、基本操作及利用該軟體將靜態的UI界面製作為動態效果的方法，網頁界面、手機界面和智慧型手錶界面的UI設計規範；案例部分以網頁端、手機端及智慧型手錶UI為例，介紹了網頁界面UI動效、手機界面UI動效及智慧型手錶界面UI動效的設計與製作流程。

本書提供配套資源檔案，包含本書實戰、練習和習題的素材檔案、效果檔案和操作演示視頻，供讀者在學習的過程中隨時調用。同時提供教師專享資源，包含配套PPT教學課件及教學大綱，供教師使用。

本書適合想要從事和已經從事UI設計行業相關工作的讀者閱讀，也適合UI設計、動效設計初學者學習，同時也適合UI培訓機構、相關專業學生使用。

圖書目錄

目錄

第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

作者簡介

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