APP展示圖,教你把Gif動效圖嵌入到手機模版

2023-11-20 17:42:26 來源/作者: / 己有:1人學(xué)習(xí)過

前天介紹了《APP展示圖,教你怎么用PS制作APP的界面圖片》,今天教大家怎么把Gif動效圖嵌入到手機模板上,十分簡單,只要幾步就能做出來。

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

APP展示圖,教你把Gif動效圖嵌入到手機模版

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

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

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

APP展示圖,教你把Gif動效圖嵌入到手機模版

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

APP展示圖,教你把Gif動效圖嵌入到手機模版

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

APP展示圖,教你把Gif動效圖嵌入到手機模版

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

APP展示圖,教你把Gif動效圖嵌入到手機模版

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

APP展示圖,教你把Gif動效圖嵌入到手機模版

6. 看一下整體效果:

APP展示圖,教你把Gif動效圖嵌入到手機模版

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