IPHONE上看到好的動效設計,如何保存成GIF?
IPHONE上看到好的動效設計,如何保存成GIF?-移動閱讀二維碼

俞靜:經常在網上看到一些介紹手機APP動效設計的文章,一直好奇這些動態圖片是怎么保存下來的。今天把這個小技能分享出來,UI設計師和想學優秀動效的同學記得收藏!

1dt20160523

自己在日常工作中也有看到好的動效設計要保存下來的需求——留著APP太占手機空間,刪了APP要用的時候又無法跟開發描述清楚。

要將手機APP里看到的一段動效保存成動態圖片(GIF),總的思路不外乎:先將這段動效錄屏,然后將這段錄制好的視頻轉換成GIF。

但由于iPhone系統權限問題,在不越獄的情況下,無法做到只用一部手機就搞定這些事情。在網上查閱了不少相關帖子,也咨詢了其他設計同行,摸索出一套自己目前覺得最滿意的方法,現分享給大家。

需要用到的配料:

  • iPhone(iOS 需要升級至iOS 8)
  • Mac(OS X 需要升級為Yosemite)
  • PicGIF for Mac(一款小巧的格式轉換軟件)

目前給iPhone錄屏最方便的還是用Mac(好馬配好鞍…)。首先用手機數據線連接iPhone和Mac。找到Mac系統自帶的軟件QuickTime,雙擊打開。

2dt20160523

在Dock欄上右鍵該圖標,選擇新建影片錄制(注意是影片錄制而不是屏幕錄制哦,這個設計的心智模型是不是很棒…)。

3dt20160523

這時候你會看到默認打開的是mac攝像頭錄制的畫面(通常是自己的一張大臉)而不是手機屏幕的畫面。這時你需要點擊界面下方紅色圓點邊上的下拉箭頭,在菜單里選擇XX的iPhone這一項。

4dt20160523

這時候就窗口變成了和你手機屏幕一樣的比例,同時顯示出了手機屏幕上的畫面。

5dt20160523

That’s it~?準備好之后,點擊界面下方的紅色圓點開始錄制,再次點擊停止錄制,這樣兩次點擊之間的操作畫面就被錄制下來了。點擊左上角關閉,在彈窗里選擇存儲。

6dt20160523

接下來打開PicGIF這個軟件,點擊添加視頻,選擇剛才保存的那段視頻。

7dt20160523

會看到一個視頻預覽畫面,右下角有一些參數供選擇:幀數越多,最后保存的圖片動效流暢度越好,但同時生成的圖片體積也越大。根據自己的需求把握,若沒有要更改的,直接點擊右下角的加載。

8dt20160523

可以看到在界面底部,視頻已經被分成了一張張連續的靜態圖片(每一張代表一幀),你可以手動刪除其中看上去重復的幀,以減小最后生成的文件體積(通常在開始錄制和結束錄制時,操作會停止一會兒,這里會產生很多相同的幀,是可以刪掉的)。編輯完以后,點擊右上角的”創建GIF”。

9dt20160523

預覽最終生成的GIF,點擊右下角的存儲。

10dt20160523

好了,一張動態圖片制作完成!

11dt20160523

歡迎關注作者的微信公眾號:

yyyqr

來源:優設

本文鏈接:http://www.casaleticia.com/iphone-motion-save-gif.html
本文標簽: , ,