本教程主要使用Photoshop制作網(wǎng)頁加載動(dòng)畫教程，作為一個(gè)混跡互聯(lián)網(wǎng)的IT人士，如果想各方面都了解點(diǎn)得話，那么設(shè)計(jì)gif動(dòng)畫也是個(gè)不錯(cuò)的學(xué)習(xí)方向哦。
作為一個(gè)混跡互聯(lián)網(wǎng)的IT人士，如果想各方面都了解點(diǎn)得話，那么設(shè)計(jì)gif動(dòng)畫也是個(gè)不錯(cuò)的學(xué)習(xí)方向哦。
下面就step by step 教大家如何設(shè)計(jì)一個(gè)loading.gif的加載動(dòng)畫圖：
先看效果圖：
1、創(chuàng)建一個(gè)圖層100×100 PX，背景顏色#2d2d2d
2 、在背景文件上用直線工具繪制一條1px的白色縱線：
注意，這條直線要水平居中對齊，具體方法如下：
同時(shí)選中這兩個(gè)浮層：
點(diǎn)擊排列方式中的‘水平居中對齊‘圖標(biāo)：
3、選擇直線圖層，用命令行Control+ T對直線旋轉(zhuǎn)45°
4 、選中變換后的直線浮層，用快捷鍵Control + Alt + Shift + T復(fù)制旋轉(zhuǎn)該直線到如下效果：
5 、創(chuàng)建一個(gè)1px半徑的圓角矩形，如下圖所示，這里加上參考線是為了更好的讓圓角矩形與直線都水平居中
6、對圓角矩形進(jìn)行變形，如下所示：
這里變形方法是先對圓角矩形Control + T，到變形狀態(tài)后，然后點(diǎn)擊鼠標(biāo)右鍵，出現(xiàn)下圖所示的菜單，然后選擇’斜切’屬性，
即可變換左下和右下兩個(gè)點(diǎn)
7、移動(dòng)中心點(diǎn)，具體如下：
把中心點(diǎn)移到如下位置
如果中心點(diǎn)直接移不動(dòng)，試試這樣把中間的小黑點(diǎn)
移動(dòng)到
下面，那么中心點(diǎn)就可以隨意移動(dòng)了
8、選中7步變形后的圓角矩形用快捷鍵，Control + Alt + Shift + T，使其形式如下：
目前整個(gè)圖層的布局形式如下：
9、給‘形狀2’增加一些樣式，打開圖層——圖層樣式：
這里的顏色值是：#242424
最后的效果要如下：
10、 復(fù)制上圖，然后刪除一些葉片，使其如下所示：
刪除葉片的方法：
用刪除苗點(diǎn)工具
11、給shape浮層加如下所示樣式
注：其中投影的樣式是默認(rèn)的樣式，無需修改
12、 給shape1圖層添加的樣式屬性和shape圖層完全相同的樣式，但是外發(fā)光樣式除外(這里shape1圖層不需要添加外發(fā)光樣式)
13、對圖層shape2的修改如下：
14、對shape3的修改如下：
15、最后結(jié)果如下
，這里樣式可以自由發(fā)揮，僅供參考
16、按照以下左圖把下面5個(gè)圖層合成組(ctrl+G)，然后復(fù)制整個(gè)組再按ctrl+T讓其旋轉(zhuǎn)45°，后面復(fù)制同理(注意，tirck3是在復(fù)制 tirck2的基礎(chǔ)上再旋轉(zhuǎn)的45°，以此類推)
17、最后做成動(dòng)畫，步驟如下：
1> 選擇動(dòng)畫屬性：
2> 創(chuàng)建新圖層：
，這里每幀對應(yīng)需顯示的組，其它組則需隱藏。
例如下圖所示：第2幀對應(yīng)下面顯示了trik2的組，但是其它組都需要隱藏，以此類推
18、最后保存：文件——
最終結(jié)果如下所示
總結(jié)：知道gif動(dòng)畫的初步制作原理后，以后為我們制作逐幀動(dòng)畫也奠定了一定基礎(chǔ)!
