自製 FB 3D Photos 貼文

不需要雙鏡頭攝影也能自製 FB 3D 照片貼文。

除了線上的一些軟體可達成之外,只要了解原理,就能自己完成擁有 3D 效果的貼文照片。


大綱
1. FB 3D Photos 貼文原理
2. Depth Map 深度圖原理
3. 使用 Photoshop 或 illustrator 製作深度圖
4. 補充

FB 3D Photos 貼文原理

上傳原圖與深度圖 (Depth Map) 至 Facebook,Facebook 運算出最終的 3D 效果圖。

透過命名,在深度圖檔上使用原檔名加上 “_depth” ,告訴 Facebook 哪張圖檔是你的深度圖。

Design by Jhane Chou

效果圖

Design by Jhane Chou

實際互動請見 FB 貼文


Depth Map 深度圖原理

Depth Map 深度圖,表現場景中每個點與攝影機的距離。製作出對應的灰階圖,表現出不同物件與視線的距離。

Design by Jhane Chou
  • 白(淺):距離近
  • 灰(中):越淺色越近,越深色越遠
  • 黑(深):距離遠

使用 Photoshop 或 illustrator 製作深度圖

Photoshop 和 illustrator 兩種都使用過,上述貓的範例,就是使用 illustrator 製作。不論你使用哪種軟體,只要能做出灰階的繪圖即可,接下來的範例使用 Photoshop 製作。

過程中可以反覆將原圖、深度圖同時上傳至 Facebook 測試 3D 效果。

命名方式

  • 原圖:原圖名稱.png
  • 深度圖:原圖名稱_depth.png

1. 將圖檔區分基本的深度

使用圖層資料夾:foreground(前景)、midground(中景)、background(背景)將原圖區分,並置放在 origin 群組資料夾(原圖)中。

Design by Jhane Chou

2. 將圖檔區分基本的深度

複製 origin 群組資料夾(原圖),命名為_depth 資料夾(深度圖),一開始先以簡單的三個色調:白、灰、黑區分。

這時,最陽春的深度圖已經完成,我們將原圖、深度圖同時上傳至 Facebook 測試 3D 效果,效果只會有簡易的位移效果,不同物件之間的破圖非常明顯。

Design by Jhane Chou

3. 為深度圖增加細節

我們在各區域中,依據想表現的距離,為灰階增加細節。可以為每個區域分層中加入細節,並維持些微的對比,避免過度強烈的對比,以免破圖。

在此範例中,於背景的黑色加入了些微的灰階變化,讓背景的效果不這麼死板,保持畫面的拉伸。各區域內容物也加入了些微的變化,讓整體的效果更自然。相片的白框效果,為了讓它保持穩定,於是維持整塊純白色。

Design by Jhane Chou

4. 發布

製作好兩張圖檔,確認 3D 效果即可發佈。

命名方式

  • 原圖:原圖名稱.png
  • 深度圖:原圖名稱_depth.png
Design by Jhane Chou

效果圖

Design by Jhane Chou

實際互動請見 FB 貼文


補充

若使用自製的方式繪出深度圖,有些插圖設計的效果不一定能達到理想的狀態,需要較多的時間反覆測試與調整,尤其是設計的畫面,打破一般看到的實際影像的前後關係。

實際的照片較容易達成效果,也好調整,因為它的畫面貼近現實。

多數製作出來的 3D Photos 效果貼文都能有一定程度的趣味性,也能跟讀者產生些許的互動。


文章同步發佈平台&支持,可前往不同平台進行拍手支持,或透過下方的 Like 讚賞(註冊 Liker 完全免費)讓創作者獲得額外收入!

.Medium

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

🥯 設計指南
設計基礎:點.線.面 Point and Line to Plane
🥯 設計指南
設計法則:格式塔理論 Gestalt Theory
🧇 自由接案
LINE Theme 主題製作指南
🌕 原創主題
LINE 原創主題|豆芽 ── 夢之花
🧇 接案秘辛
自由接案者的請款方式-勞務報酬
🪐 凡人 ✶ Mortal
蕁麻疹
🪐 學徒 ✹ Apprentice
夢|圓盤裝置
🍞 書籍評論
《秒睡》書評:我很晚睡,也捨不得結束今天

Share