編者按：今天這篇通俗易懂的好文，從零開始帶你認識PS的時間軸工具，附上一個超簡單的顏色動畫實例，十分鐘就可以學會，來收！

我們首先要了解的是PS有5種類型的圖層?按順序依次為像素圖層、調(diào)整圖層、文字圖層、形狀圖層以及智能對象。而對應的時間軸里面，各種類型的圖層都有對應時間軸的動作屬性，如圖所示：

可以得知所有的動作屬性有：位置、不透明度、樣式、圖層蒙版位置、圖層蒙版啟用、變換、文字變形、矢量蒙版位置、矢量蒙版啟用。

名稱描述

位置：像素圖層中元素移動的位置，也可以理解成位移，它不包含旋轉(zhuǎn)和縮放，并且對形狀圖層無效。

不透明度：圖層的透明度，而調(diào)整填充則無效。

樣式：圖層樣式，產(chǎn)生動畫的是各種樣式參數(shù)變化（即顏色、角度、大小、不透明度等參數(shù)）。

圖層蒙版位置：暫不描述。

變換：動作最多的一個屬性，其中包含移動、縮放、旋轉(zhuǎn)、斜切、翻轉(zhuǎn)，因此很多情況下需要把圖層類型轉(zhuǎn)換為智能對象才能做。

矢量蒙版位置：形狀圖層中元素移動的位置。

制作一個動畫的基本步驟

1，創(chuàng)建一個500px×500px的畫布，調(diào)出時間軸面板（窗口—時間軸），

點擊創(chuàng)建時間軸按鈕，等一下！！！因為當前只有一個圖層，所以最好先新建一個圖層再點擊這個按鈕，當然如果是要做背景透明的可以直接點擊（事實上要做透明背景的只需隱藏背景圖就行了），否則在制作動畫的時候會有很繁瑣的事等著你。

額外話：

本人建議，當你要做一個設(shè)計的時候，新建帶背景圖層的文件（切圖及少部分特殊的情況下可以新建透明背景的~），保留原生態(tài)純正的背景圖層，當你不需要的時候可以隱藏。否則，就算你新建一個背景圖層，加上任何鎖定，并且把它改為同樣的ID，它始終不是純正的背景圖層，聰明的你看字體就知道啦。

2，做一個顏色變化的動畫

首先思考，要做一個圖層的顏色變化的動作，是屬于時間軸上的哪個動作屬性，我們可以很輕易的知道是樣式，而如果改變圖層圖像本身的顏色，則無法產(chǎn)生動畫。

先用形狀工具畫一個圓，然后到時間軸面板點擊樣式旁邊的一個小鐘啟用關(guān)鍵幀（出現(xiàn)棱形）動畫→給圖層加上圖層樣式→顏色疊加打上勾并任意給個顏色，

然后回到時間軸拖動時間線到想要的位置→雙擊圖層調(diào)出圖層樣式→在顏色疊加設(shè)置另一種顏色

這個時候已經(jīng)制作好顏色變化的動畫了，接下來你可以調(diào)整關(guān)鍵幀的位置，動畫的長度，剪輯的長度（導出的時候生效）

如果你想要調(diào)整幀速率，點擊時間軸右上角→設(shè)置時間軸幀速率

最后導出動畫，文件→儲存為web所用格式→選擇gif格式→循環(huán)選項，如果文件太大，你可以再確保畫面的質(zhì)量的情況下減少顏色值→導出

現(xiàn)在你已經(jīng)掌握了制作GIF動畫最基本的步驟！

【優(yōu)設(shè)四月人氣過萬的好文】

使用素材站：
《實用干貨！11個人氣超高的設(shè)計素材匯總網(wǎng)站》

自學UI設(shè)計的正確姿勢：
《別著急學軟件！先掌握科學有效的UI設(shè)計自學姿勢（超全面）》

幽默有趣的前端小課堂：
《零基礎(chǔ)也能看懂！寫給設(shè)計師的前端小知識之網(wǎng)頁排版（附實戰(zhàn)）》

作者：矢量人生

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學習平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量112萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導航：http://hao.uisdc.com