俞靜：經(jīng)常在網(wǎng)上看到一些介紹手機APP動效設(shè)計的文章，一直好奇這些動態(tài)圖片是怎么保存下來的。今天把這個小技能分享出來，UI設(shè)計師和想學(xué)優(yōu)秀動效的同學(xué)記得收藏！

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

要將手機APP里看到的一段動效保存成動態(tài)圖片（GIF），總的思路不外乎：先將這段動效錄屏，然后將這段錄制好的視頻轉(zhuǎn)換成GIF。

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

需要用到的配料：

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

目前給iPhone錄屏最方便的還是用Mac（好馬配好鞍...）。首先用手機數(shù)據(jù)線連接iPhone和Mac。找到Mac系統(tǒng)自帶的軟件QuickTime，雙擊打開。

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

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

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

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

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

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

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

預(yù)覽最終生成的GIF，點擊右下角的存儲。

好了，一張動態(tài)圖片制作完成！

歡迎關(guān)注作者的微信公眾號：

「優(yōu)設(shè)五月精品教程合集」

提升設(shè)計格調(diào)的漸變教程：
《實用教程！教你巧妙運用漸變色快速提升設(shè)計格調(diào)！》

將人物照轉(zhuǎn)成素描！
《PS教程！巧用濾鏡快速將人物照片轉(zhuǎn)成素描肖像》

3個酷炫的GIF 小動畫：
《PS教程！手把手教你繪制3個效果酷炫的GIF動畫效果》