ScrollingMockup.io 只要五分鐘就能製作漂亮、捲動網頁效果的模型影片

ScrollingMockup.io 只要五分鐘就能製作漂亮、捲動網頁效果的模型影片

如果有在關注免費資源網路社群的文章,可能會注意到有不少文章會使用帶有電腦或手機螢幕畫面做為首圖,這不是由我拍攝,而是透過各種模型工具(Mockups)產生器製作而成,只要預先選擇要使用的素材,再加上網址或擷圖就能線上將它們整合在一起,舉例來說,Mockup Photos 就收錄數千張高畫質素材,使用者也可以自行上傳相片整合;或是以前我經常使用 Smartmockups 也能製作出以假亂真的好看模型照,對於要展示畫面來說也更有質感。

本文要推薦「ScrollingMockup.io」是一個製作模型影片(Mockup videos)的工具,不同於前面提到的模型工具只能套用相片,這項服務可以做出捲動特定網頁效果影片,同時整合預先選擇好的圖庫素材中,看起來就像真的在捲動網頁。

如果要看範例,可以直接拖曳到本文章最後,我有製作了一個範例影片。

ScrollingMockup.io

使用者在 ScrollingMockup.io 除了設定要擷取錄製的頁面網址,也能選擇要錄製的長度、一開始的暫停時間,製作後產生為 .mp4 影片格式免費下載。要注意的是免費方案每個月只能免費製作三段影片,付費升級可以提高配額,亦或是加入自己的背景音樂,價格最低每月 $3.99 美金。

ScrollingMockup.io
https://scrollingmockup.io/

使用教學

STEP 1

開啟 ScrollingMockup.io 網站建議先點選右上角「Get started for free」免費註冊帳號,註冊時輸入 Email、設定一組密碼就能完成。

ScrollingMockup.io

STEP 2

接著從「Templates」選擇要使用的模型圖庫,不過目前的素材還不多,有 iMac 和 MacBook 分別在不同樣式背景的效果。

ScrollingMockup.io

STEP 3

選擇要使用的素材後,在設定頁面第一個欄位填入要擷取錄製的網站網址,免費版無法上傳自己的背景音樂,這項功能需要升級才能使用,接著設定一下影片長度(預設 15 秒)和一開始的暫停時間(預設 2 秒),也就是從第三秒才會開始捲動網頁。

ScrollingMockup.io

STEP 4

設定完點選「Generate My Scrolling Mockup!」開始處理,ScrollingMockup.io 會在影片製作完成後以 Email 通知使用者,在此之前可以先離開網站,不過處理時間也不會太長,大概幾分鐘左右就會收到通知。

ScrollingMockup.io

完成後回到 ScrollingMockup.io 點選後方的「Mockup」即可下載、獲取 MP4 影片。

ScrollingMockup.io

STEP 5

下圖就是我以 ScrollingMockup.io 製作出來的模型影片,讀者可以稍微瀏覽一下看看是不是自己需要的效果,如果喜歡,透過這項服務就能做到,完全不用額外安裝軟體,非常好玩!

ScrollingMockup.io 實際運作效果

值得一試的三個理由:

  1. 模型影片(Mockup videos)製作工具,產生帶有捲動網頁效果的影片
  2. 可自訂影片長度、影片一開始的暫停時間,付費方案可加入背景音樂
  3. 製作完成以 Email 通知,使用者返回網站下載 MP4 影片檔案
分享到...