如何用 Instagram 的濾鏡特效製作 AR 明信片
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
本篇教學將帶你如何使用 Instagram 濾鏡特效的工具程式「Meta Spark Studio」來實現具有 AR(擴增實境)效果的明信片。
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
(繪師:碧兒、使用素材:音楽の卵)
第一步 – 事前準備
- 首先到以下網址下載「Meta Spark Studio」,登入帳號後下載工具程式並等待安裝完成。
https://spark.meta.com/download/
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
- 執行「Meta Spark Studio」,選擇「Blank Project」建立空白專案。
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
- 先在左下角的「齒輪」圖示,在「Experiences」頁籤的右下角點擊「Add Experience」,然後在「Sharing Effect」的右下角點擊「Insert」之後,將 Facebook 取消勾選,只保留 Instagram 的 Camera 選項,然後按下「Done」。
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
第二步 – 編輯專案
- 首先在「Device」圖層按下滑鼠右鍵,選擇「Add Object」→「Target Tracker」,接著點擊剛才新增的「targetTracker0」圖層,在右邊面板的「Texture」點擊「Choose File…」,並且選擇你想作為掃描目標的圖檔,匯入之後將「Target Type」改成「Fixed」。
這邊我個人建議是將圖檔轉存為 PNG 的圖片格式,並且將圖檔尺寸壓在 480 像素(PX) 以內,以及解析度 72 像素/英吋(PPI),然後使用「線上轉換為 WebP 格式網站」轉換圖檔。
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
- 然後在「targetTracker0」圖層按下滑鼠右鍵,選擇「Add Object」→「Plane」。
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
第三步 – 製作連續圖檔
- 開啟 Photoshop 軟體,將你想作為 AR 特效的連續圖檔(例如 GIF 或 MP4),並且選擇「檔案」→「轉存」→「演算視訊」。
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
- 接著按照以下圖解設定,尤其是設定圖檔格式和圖檔品質調低,還有圖檔尺寸、影格速率等,這是因為到時候上傳 Instagram 的 AR 濾鏡特效,盡量保留在 2MB 的規定容量,後面步驟會再詳細說明。
這邊我個人建議是將連續圖檔轉存為 PNG 的圖片格式,並且將圖檔尺寸壓在 480 像素(PX) 以內,以及解析度 72 像素/英吋(PPI),然後使用「線上轉換為 WebP 格式網站」批次轉換連續圖檔。
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
- 回到「Meta Spark Studio」這邊,點擊剛才新增的「plane0」圖層,在右邊面板的「Materials」旁邊點擊「+」。
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
- 點擊剛才新增的「material0」圖層,在右邊面板的「Texture」點擊下拉式選項,並且選擇「New Animation Sequence」。
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
- 點擊剛才新增的「animationSequence0」圖層,在右邊面板的「Texture」點擊「Choose File…」,並且選擇剛才在 Photoshop 建立的多張連續圖檔後,按你的喜好設定「Controls」的參數。
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
- 接著在上方的「Editing Mode」切換為「Edit 2D Objects」模式,選擇「plane0」圖層,並且使用變形工具將該圖層拉大到剛好蓋過「targetTracker0」圖層的尺寸。
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
第四步 – 發佈特效
- 首先選擇「File」→「Save」進行專案保存。
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
- 接著選擇「File」→「Publish…」進行發佈特效前的準備。
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
- 然後在「Platform Requirements」之下,點擊「View File Sizes」後,需要很長的一段時間等待上方的進度處理完成,如果進度結果的「File Size」有任何一項超過 2MB 的時候,可能需要刪除連續圖檔,並回到「第三步 – 製作動態圖檔」那邊重新設定並輸出連續圖檔。
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
- 如果容量方面都通過的話,可以按下「Back」,接著開始準備發佈特效的步驟,而這邊有兩種方式可以進行上傳,一是透過目前的「Publish」面板進行「Upload」,二是直接按下「Export」匯出特效檔案,並且在「Meta Spark」的網頁後台上傳特效檔案,這邊我個人建議選擇後者。
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
- 到以下網址登入之後,在右上角點擊「發佈特效」。
https://www.spark.meta.com/sparkarhub/effects/
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
- 接著設定特效名稱、上傳特效檔案、僅勾選 Instagram、勾選「在 Instagram 個人檔案隱藏」、上傳示範影片和圖示之後,點擊發佈等待審查通過完成。
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
- 通過審查之後,點擊你目前已發佈的 AR 特效,接著按下「分享」按鈕後,點擊分享網址即可複製,之後你就能將該網址轉換為 QR Code並印製在明信片上。
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
如何刪除連續圖檔
- 在Textures圖層群組下找到該連續圖檔的圖層,並且按滑鼠右鍵選擇「Delete」。
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
- 接著在專案資料夾之下的「textures」資料夾內,將連續圖檔跟textures檔案按滑鼠右鍵選擇「刪除」,只保留作為掃描目標的圖檔和textures檔案。
如何更新專案版本
- 在「Meta Spark Studio」上方選擇「Project」→「Update Runtime」→「Latest」即可。
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
如何更新目前已有的 AR 特效
- 到以下網址登入之後,點擊你目前已發佈的 AR 特效,接著按下「更新」按鈕即可編輯。
https://www.spark.meta.com/sparkarhub/effects/
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
《Mirai》個人推特(X):
https://twitter.com/Mirai_so_Sad
《Mirai》itch.io頁面:
https://miraisosad.itch.io
《Mirai》個人Instagram
https://www.instagram.com/miraisosad/