Photoshop+AE UI動效設計從新手到高手

目錄

第1章　UI動效設計概念

1.1?什麽是UI設計

1.2?UI設計的重要性

1.3?平面UI與手機UI的不同

1.4?動態圖形與UI動效

1.4.1?什麽是動態圖形

1.4.2?動態圖形的歷史

1.4.3?動態圖形的原理

1.4.4?什麽是UI動效

1.5?製作UI動效的軟件

1.5.1?Photoshop軟件

1.5.2?After Effects軟件

1.6?UI動效在產品設計中的重要性

1.6.1?UI動效善於展示軟件的特色

1.6.2?UI動效利於軟件的推廣

1.6.3?UI動效降低使用成本

1.7?UI動效的運動規律

1.7.1?UI動效概念

1.7.2?動效的持續時長和速度

1.7.3?動效的緩動

1.7.4?界面動效的編排

1.8?製作第一個UI動效

1.8.1?設計一個UI小圖標

1.8.2?圖標的UI動效製作

1.8.3?導出UI動畫

第2章　Photoshop編輯操作

2.1?Photoshop的工作界面

2.1.1?瞭解工作界面的工作組建

2.1.2?瞭解工具箱

2.1.3?瞭解選項欄

2.1.4?瞭解狀態欄

2.1.5?瞭解面板

2.2?圖標設計技巧和原則

2.3?跟大師設計一組圖標

2.3.1?準備工作

2.3.2?構思、草圖

2.3.3?輔助背景的製作

2.3.4?基本形、放大

2.3.5?創作過程

2.3.6?常用方法——變形

2.3.7?進階方法——改進

2.3.8?成品

2.3.9?形狀工具和選區的區別

2.4?對圖層的基本理解

2.5?路徑的運算方法

2.6?製作可回收資源圖標

2.7?製作短信圖標

2.8?製作照相機圖標

2.9?鋼筆工具的使用

2.10?認識錨點

第3章　UI圖標設計

3.1?Tumblr圖標的製作

3.1.1?製作基本形狀

3.1.2?繪制高光和陰影

3.1.3?表現圖標質感和立體感

3.2?工具箱圖標

3.2.1?製作基本形狀

3.2.2?製作工具箱的正面

3.2.3?製作工具箱的四邊

3.2.4?製作工具箱的四角

3.2.5?製作工具箱的鎖

3.2.6?製作工具箱的提手

3.2.7?製作工具箱的支角

3.3?條形碼圖形

3.3.1?製作條形碼的外形

3.3.2?添加陰影

3.3.3?繪制條形碼

3.3.4?繪制掃描條

3.4?工具圖形

3.4.1?製作工具錘的手柄

3.4.2?製作手柄的外觀

3.4.3?製作錘的底部與頂部

3.4.4?製作錘鉤

3.4.5?製作錘頭

3.4.6?製作扳手工具

第4章　Photoshop按鈕製作

4.1?簡單的水晶方按鈕

4.1.1?製作按鈕的外形

4.1.2?添加陰影和高光

4.2?音樂播放器按鈕

4.2.1?製作背景

4.2.2?製作播放器的外形

4.2.3?製作按鈕底部的背景

4.2.4?製作向前播放按鈕

4.2.5?繪制高光

4.2.6?製作向後播放按鈕

4.2.7?製作暫停按鈕

4.2.8?製作電源亮光

4.2.9?製作播放按鈕

4.3?日歷界面

4.3.1?製作日歷的背景

4.3.2?製作日歷界面

4.3.3?製作日期顯示框

4.3.4?輸入日期

4.3.5?製作翻閱按鈕

第5章　Photoshop輸入框和列表設計

5.1?搜索界面輸入框

5.1.1?製作搜索界面的背景

5.1.2?製作標題欄

5.1.3?製作按鈕

5.1.4?製作搜索欄

5.1.5?製作菜單欄

5.2?通知列表

5.2.1?製作通知列表的背景

5.2.2?添加高光

5.2.3?製作列表的內部

5.2.4?製作列表通知欄

5.2.5?製作圖標

第6章　After Effects動畫製作

6.1?瞭解AE

6.2?AE的工作界面

6.3?導入素材

6.3.1?導入單個素材

6.3.2?一次導入多個素材

6.3.3?導入文件夾

6.3.4?替換素材

6.4?創建合成

6.4.1?建立一個合成

6.4.2?用其他方式建立合成

6.5?時間線操作

6.5.1?時間線窗口和合成

6.5.2?時間的定位

6.6?AE的圖層操作

6.6.1?建立文字圖層

6.6.2?創建純色層

6.7?導出動畫

6.8?AE的關鍵幀操作

6.8.1?在時間線窗口中查看屬性

6.8.2?設置關鍵幀

6.8.3?移動關鍵幀

6.8.4?復制和粘貼關鍵幀

6.8.5?修改關鍵幀

6.9?捆綁父子關系

6.10?製作透明度動畫

6.11?製作路徑動畫

6.12?動畫控制的插值運算

6.13?用AI製作路徑動畫

6.13.1?雙十二海報（在AI中分層）

6.13.2?在AE中製作矢量路徑動畫

6.14?製作信封UI動效動畫

6.14.1?製作信封和愛心

6.14.2?製作信封打開動畫

第7章　高級UI動效製作

7.1?理解表達式

7.1.1?表達式的添加

7.1.2?建立自己的第一個表達式

7.2?解讀表達式

7.2.1?錯誤提示

7.2.2?數組和表達式

   7.2.3?程序變量和語句

7.3?常用的一些程序變量

7.3.1?Time（時間）表達式

7.3.2?Wiggle（擺動）表達式

7.3.3?將表達式動畫轉換成關鍵幀

7.3.4?用聲音來控制動畫

7.4?在AE中實現UI動效緩動

7.4.1?手機的UI動效製作

7.4.2?UI動效緩動曲線的調整

7.5?UI動效高級實踐

7.5.1?鬧鈴抖動UI動效的製作

7.5.2?圓形旋轉進度條UI動效的製作

第8章　UI字幕特效製作

8.1?創建文字圖層

8.1.1?創建一個文字圖層

8.1.2?用文字工具添加文字圖層

8.1.3?文字的豎排和橫排

8.2?創建文字動畫

8.2.1?車身文字動畫

8.2.2?文字特性動畫

8.2.3?選擇器的高級設置

8.2.4?文字動畫預設

第9章　動態圖形轉場動畫

9.1?認識轉場

9.2?快速模糊轉場

9.3?刷牆過渡轉場

9.4?條形轉場

9.5?卡片擦除轉場