photoshop-embedded-gif-into-template-1

編者按:前天介紹了如何用PS打造高大上APP效果展示圖,今天出個進階版,@Payshare?來教同學們把Gif動效圖嵌入到手機模板上,高大上的效果實操起來非常簡單,輕松6步搞定,來收!

上期教程:《PS教程!手把手教你打造時下最受歡迎的APP效果展示圖》

很多設計師可以做出動效Gif,但不知道如何嵌入到模版里如下圖這樣展示:

6GIF20151111

昨天有個設計妹子問我這個問題,既然是妹子那我就花五分鐘教你嵌入Gif到模板。

1. 首先利用Hype 或者Pixate做出一張動態的Gif 圖如下:

(注:AE 可以保存成.Mp4 ,Pixate 可以錄屏,Hype可以直接轉換成Gif,視頻格式可以通過軟件或Photoshop轉換成Gif ,總之就是做出你想要的動效Gif)

7GIF20151111

2. 用Photoshop打開Gif 圖片,窗口-時間軸面板,單擊選擇將幀拼合到圖層,這樣就把所有的幀轉換為了圖層:

5GIF20151111

3. 繼續單擊轉換為視頻時間軸(注:視頻時間軸才可以一個圖層進行動畫)

4GIF20151111

4. 選擇圖層面板中所有圖層右鍵轉換為智能對象:

1GIF20151111

5. 將智能對象拖到事先準備好的模板里面,通過嵌套的智能對象放入手機模板或者通過Command+T改變透視關系,然后創建視頻時間軸,播放看一下效果。最后保存web所用格式。(注:保存web格式時可以通過右下角的百分比調整文件大小。)

8GIF20151111

6. 看一下整體效果:

hb20151111003623

7. 以上動效是用Pixate制作的,源文件下載:http://pan.baidu.com/s/1mg0DFtu

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

qruichina

【動效神器Hype零基礎入門教程系列】

先聊一下這個軟件的強大功能,附上簡單教程!
《Sketch神助攻!無代碼做動效神器Hype3入門教程》

臺灣設計師叫你用Hype做原型過場!
《無代碼動效神器!教你用HYPE3做APP原型的基礎過場(附神器)》

美丫姐手把手教你用Hype做Path菜單動畫!
《比AE還方便!教你用HYPE無代碼制作PATH扇形菜單動畫》

作者:@Jaret_杰瑞特

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

================關于優設網================
“優設網uisdc.com“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/。
設計微博:擁有粉絲量104萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com

點贊
收藏 10

發表評論 已發布 1

還可以輸入 800 個字
 
 
載入中....
相關推薦
1 收藏