UI設計|PS軟件操作應用——GIF動圖


  前  言

JRedu

 在之前的分享中,跟大家主要講解了PS軟件工具的基本操作,對主要的圖層、蒙版、通道和濾鏡都有一些介紹,希望對大家有所幫助,在介紹這些工具時也提到過GIF,而在本次分享中就跟大家交流下關於PS里面的GIF動圖。 對於GIF,相信大家都不陌生,現在流行的表情包,還有一些簡單的卡通形象都可以用GIF做一些動畫效果,由於GIF的學習門檻低,又可以做出一些有趣的小動畫,現在被大家廣泛運用,也可以自娛自樂,同時它與專業的視頻軟件相比還是存在很大區別的,畢竟PS是作為一款圖像處理軟件的。 大家經常看的電影、視頻,都會聽到24、48幀之類的介紹,還有更高標准的60、120幀,其實就是指的每秒播放了的畫面數,一幀就相當於一幅靜止的畫面,連續的幀就變成了動畫,而GIF同樣遵循了這個原理,設計好每幀需要表現的畫面,再做一些簡單的設置和創意,最后存儲成GIF格式就可以了。 接下來我們就通過兩個案例來介紹下GIF的做法。

 

案例一兩張圖片進行滑動切換

 首先還是查看下效果:

1)依次打開兩張風景圖片

2)按住Alt鍵,點擊新建圖層,彈出對話框,設置下:模式改為柔光,填充柔光中性色前面勾選下。確定,就得到一個純灰圖層,對圖層進行描邊設置:大小:3像素,位置:內外都可以(接下來會等比例放大的)顏色為白色。

3)選中灰圖層,Ctrl+t,等比例放大,讓描邊超出畫布大小,再雙擊新建的灰圖層,彈出對話框,把圖層樣式:挖空—設置為深。得到效果:

這樣圖片基本樣式處理完成我們開始GIF動畫

4)打開—窗口—時間軸,會有兩個選擇項,我們先選擇“創建幀動畫”,我們上面講過,怎么完成動畫效果,就是控制好每一幀需要展示的畫面。

接下來我們就設置第一幀:把灰度圖層移動至最左邊,(可以按住shift鍵,點擊左箭頭移動,這樣可以做到水平移動)把船的照片完全顯示出來,

 

設置好第一幀我們再設置第二幀,點擊“復制所選幀”就可以得到第二幀,再把灰度圖層移動至最右邊(一定都要水平移動)

 

兩幀設置好之后,我們再點擊第一幀,這時選擇下方的“過度動畫幀”彈出窗口進行設置:需要添加的幀數為:8,確定,這樣就得到了10幀動畫

 

 

再設置下細節參數:按住shift鍵同時選中這10幀,把時間改為0.2秒(點擊秒后面的小三角設置時間),把一次改為永遠(點擊小三角)

這樣動畫設置就完成了。(點擊播放的小三角就可以預覽播放了)

5)保存—GIF

上面設置的添加幀數和時間設置,大家可以根據需要另行設置,在PS操作練習中,大家千萬不要硬記參數,根據所選圖片,這些參數都是可以變化的。

 

案例二多張圖片漸顯動畫

還是先看下效果:

1)新建一個畫布:名稱:圖片漸顯動畫 大小:1000X800,分辨率:72,填充為黑色。

2)打開第一張圖片,Ctrl+t,縮放下圖片大小,旋轉下角度,設置描邊:大小:3像素,位置:外部 ,顏色:白色

3)依次再打開5張圖片,縮放圖片大小,描邊,(描邊:可以右擊第一張圖片,拷貝圖層樣式,其他幾張就右擊粘貼圖層樣式就可以,這樣就可以把一張圖片的效果復制到多張圖片上)擺放下位置

需要的圖片素材准備完成,接下來我們開始做GIF動畫

這個案例我們選擇“創建視頻時間軸”就進入編輯窗口了

同樣的我們還是去設置每一幀畫面的效果,首先對圖片01進行設置,點擊圖片01前面的小三角就彈出了“位置”“不透明度”“樣式”可進行設置

 

我們把指針移到第一秒的位置,點擊位置前面的小時鍾,就可以出現一個位置圖標,表明我們設置了第一秒的位置,再把圖片01的時間段調整下,再設置第二點位置,同樣的不透明度也是這樣設置的,再第一秒設置下透明度為0,第二點設置為100

 

4)接着設置圖片02,把圖片拖動至圖片01后面,再設置下不透明度(0至100)

5)后面四張照片依次設置位置和不透明度(同理步驟04)

6)為了整個視頻的連貫性,把每張圖片的結尾都拖動至與背景齊平。

7)保存,存儲為Web所有格式,選擇GIF,下面循環選項選擇“永遠”,其他參數不變,點擊存儲。存儲到一個路徑下就可以。

 

這樣六張圖片的漸顯動畫就做出來了。

以上就是介紹了GIF的兩種方法,主要是通過“創建幀動畫”和“創建視頻時間軸”動畫來完成圖片之間的動畫演示,僅供大家參考。

 

作者:傑瑞教育
出處: http://www.cnblogs.com/jerehedu/ 
版權聲明:本文版權歸 傑瑞教育 技有限公司和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接,否則保留追究法律責任的權利。
技術咨詢:JRedu技術交流


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM