Canva 如何做出 3D Pop-out 效果?讓你的照片更加生動!

2023 年 5 月 17 日 更新

Canva 3D Pop-out

一般我們拿到照片的時候,可能都是裁切大小、套用濾鏡、色調等平面上的調整,但如果想把圖片做得比較立體一點,可以使用一種「3D Pop-out」的技巧,讓照片裡的角色能脫離框架,變得更加立體而生動!是很有趣的照片視覺效果!

追蹤數位小幫手社群平台:Instagram、Twitter…等等。

3D Pop-out 的圖片範例

一般我們如果想讓圖片看上去更加立體,大多都是在人物或物體旁邊加上一點「陰影」,或是在圖片下使用「鏡面倒影」的效果。但除了這些的方法之外,也可以使用「3D Pop-out」的技巧,讓照片中的角色能脫離照片的框架之外。

那「3D Pop-out」實際上是怎麼樣的效果?你可以參考下面這張圖,這張圖就是這篇文章最後會完成的設計作品,我透過「3D Pop-out」的技巧讓照片中貓頭鷹的頭部露出筆電外面,那這張圖是不是就有一種「貓頭鷹從筆電裡冒出頭」的圖片意境呢!

「貓頭鷹從筆電裡冒出頭」的3D Pop-out圖片

而這種 3D Pop-out 的圖片用 Canva 做得出來嗎?其實是可以的,雖然 Canva 沒有專業的設計軟體那樣強大的功能,但基本的 Pop-out 效果還是做得出來的!詳細的製作方法我都寫在下面了~

如何做出 3D Pop-out 效果?

Step 1:插入照片

首先我們在 Canva 的圖片編輯器裡面插入一張照片,可以的話,盡量找照片角色跟背景有明顯界線 (分離) 的那種照片。

插入一張照片

Step 2:複製照片並去除背景

如果你是 Canva Pro 的用戶的話,可以把剛剛插入的照片額外複製一份出來,然後利用 Canva 內建的影像去背功能,將照片的背景去除掉。

如果沒有 Canva Pro 的話也沒關係,網路上也有很多很好用的去背網站可以用,這種角色跟背景有明顯區隔的很容易就可以完成去背了,去背之後在上傳到 Canva 就好。

複製另一份照片出來,並且去除背景



Step 3:插入框架元素

除了照片之外,我們要使用一個比較特別的元素,那就是框架元素 (Frame),你可以在左邊的功能區裡面點擊 元素框架,就可以找到一大堆可以放進照片的框架元素。

你也可以利用元素上面的搜尋框來搜尋,像我想用筆電的框架,只要直接輸入「筆電框架」就好,它自動會篩選出相關的框架模板 (如下圖)。

插入Canva的框架元素

Step 4:把照片放進框架

我們先把那張「有背景的照片」放進框架裡面。

把照片放進框架之中

Step 5:調整框架中的照片位置與大小

把照片放進框架之後,用滑鼠連點框架的照片兩下,進入它的照片調整模式,這樣可以調整照片的尺寸大小跟位置。以下圖為例,由於我後面想讓貓頭鷹的頭可以露出筆電框架之外,所以我把照片拉得大一點,故意用框架把貓頭鷹的頭裁掉一部分。

調整框架裡面的照片尺寸大小跟位置

Step 6:需先鎖定住框架

處理完框架的部分之後,我們還不能使用「去背照片」,因為去背照片也是一張照片,如果這時候把它拖到框架的位置上的話,它會覆蓋掉原本的背景照。(如下圖)

這時候還不能將去背照片疊在框架上面

這時候可以先點擊框架,然後按右上角工具列的 鎖定,把這個框架元素給固定起來,這樣在移動「去背照」的時候,就不會一直放進框架裡面了。

把框架鎖定住

Step 7:調整去背圖的位置到上層

如果你的去背圖有被框架擋到的話,先調整它的「位置」到框架的上層。

把去背照片移動到最上層並且調整圖片大小

Step 8:調整去背圖的位置與大小

把「去背圖」移動到框架的上層之後,可能要稍微花點時間調整圖片的大小跟位置,盡量讓圖片的角色可以跟框架中的角色位置重疊吻合。

這裡有個小技巧,就是你可以把上層去背圖的「透明度」調淡一點,這樣跟上下層的角色會比較好對齊。

調整去背照片的位置跟框架中的角色位置吻合

Step 9:建立群組

當位置都調整好了之後,我們可以先將原本的框架「解鎖」,然後把「去背照」跟「框架」框選起來,並且組成一個群組,這樣好不容易疊好的位置才不會跑掉,也比較方便移動。

建立群組



結語

基本上要製作這種 Pop-out 照片,關鍵就在於「去背照」,照片的背景去除效果也決定了 Pop-out 的效果,所以找那種角色跟背景有明顯界線的照片,才比較容易去背,也不會影響到框架裡的照片。

除了「去背照」之外,其他製作的步驟應該不算難,雖然 Canva 在這方面的功能比較有限,但是基本的 3D Pop-out 效果還是可以做得出來的,有興趣的話可以再多試試幾張人物照或動物照,讓這個技巧更加純熟!

另外,如果想製作其他 3D 立體類型的效果,也可以參考下面這些文章:

延伸閱讀

原網站| digitalyoming.com ( 未經許可,禁止轉載 ) 
原網址|https://digitalyoming.com/how-to-make-a-3d-pop-out-effect-in-canva/
返回頂端