如何讓靜止的APP界面圖片動起來?
如何讓靜止的APP界面圖片動起來?-移動閱讀二維碼

11

之前發布的幾篇交互動畫手勢的文章,看到熱心的小伙伴提醒我,都說如果是動效的形式展示就會直觀;的圖片做成動畫的效果,這幾天經過搜集相關的教程和熱心人的幫助終于整理了出來,很高興,于是好東西的趕緊和小伙伴分享,直接進入正題:

相關推薦:
如何快速保存App動效??
贊!一組令人愉悅的APP動效設計
掌握動效設計!讓你的設計富有未來科技感

先看下最終的動效圖:

如何讓靜止的APP界面圖片動起來? - guimobile莫貝網

 

1、相關軟件的下載和要求:

A: iTools軟件:
B:photoshop(做設計的朋友估計都安裝了,如果沒有安裝,就安裝一個就行了,哈);
C:移動端手機,我用的是iPhone 5S,同時因為iTools是For Win,所以需要滿足WINPC+無線網絡
連接兩個條件。

2、下載軟件之后安裝啟動:

A:軟件圖標:1
B:點擊安裝

3、點開iTools的最后一個標簽,在常用工具有蘋果錄像大師功能,如圖所示:

2

4、點擊蘋果錄像大師,進入如下界面,如圖所示:

3

5、點開手機上劃菜單中的AirPlay,選擇要連接的菜單(請確保手機和電腦連接到同一無線網絡):

4

6、連接成功后電腦上會出現下面這個界面,點擊界面中的紅色圓點以錄像。

5

7、視頻保存成功,如圖所示。

6

8、首先用PS導入視頻。選取的范圍可以隨意設置:

7??8

9、導入成功,下面我們要開始保存成GIF了。

10

10、利用存儲為Web格式來保存成GIF。

9

在做的過程中可能遇到的問題歸納:

1、在PS里面運用【視頻幀到圖層】,出現對話框提示:
A:不能完成“視頻幀到圖層”命令,因為無法打開影片文件? 【photoshop CC 版本】
B:提示:”不能完成視頻幀到圖層,需安裝QuickTime7.1或更高版本“【photoshop CS4 版本】
答案:A:查看視頻的大小,視頻不要太大,最好在1M之內;
B:一定要安裝QuickTime7.1這個版本,安裝新的版本不可用,會出現丟失dll組件的提示。
下載地址:http://hi.baidu.com/ileehi/item/efe70333b6c664bf633aff3c

2、為什么我找不到我的PC設備?
?答案:檢查下PC和手機的無線連接是不是在同一網絡內;

作者:亞茹有李
來源: BooCSS.com

本文鏈接:http://www.casaleticia.com/make-app-interface-moving-picture.html
本文標簽: , ,