最近有很多學設計的同學也注意到了，今年的市場可以說是一言難盡，許多公司和職位都受到了波及，因為一些人事變動的原因，交互的重任又落到了我身上，對這個領域七竅通了六竅的我表示，壓力還是有的...
於是最近經常會看一些相關的文章或者視頻，今天想和大家分享的文章是在tutsplus上看到的一篇關於加載動畫製作的教程，感覺講的很細，有興趣的同學可以學習一下
首先是主題：如何設計一個loading.gif的加載動畫圖
我們先看下效果圖：
1、打開ps軟件，創建一個圖層100×100 PX，背景顏色#2d2d2d的文件
2 、在背景文件上用直線工具繪製一條1px的白色縱線：
注意，這條直線要水平居中對齊，具體方法如下：
同時選中這兩個浮層：
點擊排列方式中的‘水平居中對齊‘圖標：
3、選擇直線圖層，用命令行Control+ T對直線旋轉45°
4 、選中變換後的直線浮層，用快捷鍵Control + Alt + Shift + T複製旋轉該直線到如下效果：
5 、創建一個1px半徑的圓角矩形，如下圖所示，這裡加上參考線是為了更好的讓圓角矩形與直線都水平居中
6、對圓角矩形進行變形，如下所示：
這裡變形方法是先對圓角矩形Control + T，到變形狀態後，然後點擊鼠標右鍵，出現下圖所示的菜單，然後選擇’斜切’屬性，
即可變換左下和右下兩個點
7、移動中心點，具體如下：
把中心點移到如下位置
如果中心點直接移不動，試試這樣把中間的小黑點
移動到
下面，那麼中心點就可以隨意移動了
8、選中7步變形後的圓角矩形用快捷鍵，Control + Alt + Shift + T，使其形式如下：
目前整個圖層的佈局形式如下：
9、給‘形狀2’增加一些樣式，打開圖層——圖層樣式：
這裡的顏色值是：#242424
最後的效果要如下：
10、 複製上圖，然後刪除一些葉片，使其如下所示：
刪除葉片的方法：
用刪除苗點工具
11、給shape浮層加如下所示樣式
注：其中投影的樣式是默認的樣式，無需修改
12、 給shape1圖層添加的樣式屬性和shape圖層完全相同的樣式，但是外發光樣式除外（這裡shape1圖層不需要添加外發光樣式）
13、對圖層shape2的修改如下：
14、對shape3的修改如下：
15、最後結果如下
16、按照以下左圖把下面5個圖層合成組（ctrl+G），然後複製整個組再按ctrl+T讓其旋轉45°，後面複製同理（注意，tirck3是在複製 tirck2的基礎上再旋轉的45°，以此類推）
17、最後做成動畫，步驟如下：
1> 選擇動畫屬性：
2> 創建新圖層：
，這裡每幀對應需顯示的組，其它組則需隱藏。
例如下圖所示：第2幀對應下面顯示了trik2的組，但是其它組都需要隱藏，以此類推
18、最後保存：文件——
最終結果如下所示
總結：其實就是製作逐幀動畫的一些基本操作，動畫專業的同學就不要欺負我們這些老實人了。不過對於第一次接觸的同學來說，想必會有許多感悟和想法，記下來，做出來，東西才是自己的，希望以後的日子裡大家可以共同進步，加油！
閱讀更多 設計冷知識 的文章
