迷教學《FB製作3D圖片》:在社群網站炫一波吧!

 太空喵-FB-FACEBOOK-3D圖片-3Dphoto-photo=教學-製作-社群
現今FB行銷的商家為了吸引顧客眼球也算是無所不用其及, 
而目前最炫的宣傳方式莫過於3D照片了,雖然使用iphone的雙鏡頭在照相時就可以輕鬆完成3D照相,但有些需要上字樣的宣傳就比較麻煩了。

那今天就教大家就算沒有雙鏡頭的iphone也能做出最炫3D照片的方法!




目標/準備

目標

平面圖片讓它3D動起來!

製圖準備

  1. FB(沒有你來看這篇幹嘛?)
  2. Adobe系列的 Photoshop/Illustrator 或我也不知道還能用啥的設計軟體
  3. 尋找一個景深明顯/自己做素材


3D照片製圖原理

須製作

  1. 一張原圖  取名:(這張圖).png
  2. 景深depth圖  取名:(這張圖)_depth.png
 太空喵-FB-FACEBOOK-3D圖片-3Dphoto-photo=教學-製作-社群

我使用自己做的圖來製作3D圖片,
工具:Photoshop。
依照自己的想法讓物件的遠近關係做灰階深淺,
然後將原圖與景深depth圖 一起丟到貼文上製成。




景深depth圖顏色關係原理
白(淺):距離近
灰(中):距離介於淺深之間
黑(深):距離遠

 太空喵-FB-FACEBOOK-3D圖片-3Dphoto-photo=教學-製作-社群

簡單來說
越近——>顏色越淺(白)
越遠——>顏色越深(黑)




製圖心路歷程

測試1-先粗略製作深淺關係

思路
製作完成後有明顯破圖(紅色圈起處),開始看depth.png與破圖處的關係,發現破圖處都是灰階對比太強的地方。





測試2-加入漸層_depth

思路
加入漸層之後,移動時破圖沒那麼誇張,但還是有一些。
且發現新的問題,框框旁邊也有破圖。^^有看出來我已經失去耐心了嗎?
 太空喵-FB-FACEBOOK-3D圖片-3Dphoto-photo=教學-製作-社群



測試3-再減弱對比(已失去耐心)_depth

思路
再讓之間對比變弱之後,其實幾乎沒有破圖了,剩下貓耳朵那邊有點破圖。
然後發現一個很大的問題,放飛自我地隨意一個尺寸圖結果3D出來的圖被切掉(真的傻眼貓咪喔)。



Final-再破就破吧(自暴自棄)_depth

思路
最後將貓耳與外框顏色靠近處做偏白,尺寸改為4:3,像框也縮小(增加安全範圍)。



成品

就是開頭的FB文章

看來蠻算成功。


重點整理
  1. 準備兩張圖
    • (這張圖).png
    • (這張圖)_depth.png
      • (這張圖)裡面的取名一定要一樣,不然無法合成。
      • 不會因為製作深淺而讓畫面產出陰影、遠景模糊的景象,所以在原圖就要先視覺製造出來。
  2. _depth.png注意事項:深淺灰階、近白遠黑
    • 製圖時圖與圖的銜接處避免過度強烈的對比,可以減少對比以免破圖。
    • Photoshop會比Illustrator 更好上局部陰影(讓對比減弱)。
    • 可以多試幾次,讓破圖狀態降至最低,沒耐心者請靜下心完成(例如我)。
  3. 一起丟到貼文區讓FB自行運算製作3D圖


最後學到了嗎?
快自己做來炫一波!





polite-smile-cat-尷尬又不失禮貌的微笑-貓-cute
迷評分
 -
不怕被炫:★★★
破圖好麻煩:★★★★★
太空喵喵來襲了:★★★★
需要耐心:★★★★★

Post a Comment

較新的 較舊