超簡單「擴增實境」自己做

Apple 去年 6 月出了 Vision Pro,讓擴增實境這項技術瞬間又火紅起來。

我找到個非常簡單的擴增實境作法,簡單易上手、成品又酷又炫!

最終作品影片

挺酷炫的對吧!你也想試試看了嗎?

步驟很簡單,你只要會基本 Photoshop 操作就能輕鬆上手了唷!

一、產生作品圖片

首先,先有一張圖。你可以自己畫,或是請 AI 產圖。

我用 Midjourney,生成一張在宇宙中的太空船插圖。建議畫面元素不要太複雜,能明顯分出前後層次最好

Prompt:spaceship, universe, illustration

所以我選了右下角那張比較乾淨單純的插圖。

二、分層

仔細觀察主體圖片,思考下要怎麼分層。

我拆成最前方的流星、太空船本體、中央大星球、左上中星球、右上超小星球、太空背景底圖,共 6 層。

用 Photoshop 的「快速選取工具」,圈選太空船。

Ctrl+J,選取範圍原地復製一層。把太空船獨立出來,透明背景

不要用 Ctrl+C、Ctrl+V,太空船位置會跑掉,我們需要船在原地同個座標。

同樣的做法,把其他想分層的主體全部獨立拆出分層。

(使用快速選取工具時,你可能會覺得切出來的圖有白邊,我猜是 PS 預設羽化 0.25px。這條羽化過的邊緣完全不影響最終效果,請放心繼續下個步驟。)

小技巧

你可以設定「動作」,把重複 ctrl+J 等操作錄起來,之後只要手動選取主體,點一下「動作」就會跑完分層。

記得,切完圖層後一定要照原本圖片的前後景順序疊回去,圖層名稱也要改一下,之後輸出圖片、到 Slide AR APP 裡疊圖層的時候比較好手動排順序。

切圖匯進 Slide AR 時,前後景圖層順序是亂的!要自己手動調整,所以現階段就先整理好,之後要對照重新排序輕鬆很多。

三、補完背景

當主體全部獨立一層出來後,原本的圖片會被挖空一大半。

不要偷懶不挖空喔!等到最後透過鏡頭預覽的時候,直接留著原本的圖案會變得非常奇怪。

由於這一層是最後的「背景層」,我們需要把挖空的地方補完,擴增實境才不會有破洞。

看你要用 PS 的生成背景、還是自己用剩餘的背景邊角料拼接都可以,請補滿整個畫面。

只要補最後一層的背景層,其他切過的主體層要保持透明背景喔!。

四、檔案輸出

把圖層都獨立出來後,點擊「檔案、轉存、圖層轉存檔案」,這個步驟可以用一個存檔動作就輸出所有的圖層。

png格式,背景才是透明的。

注意修剪圖層不要勾起來,轉存出來的 png 才會每個圖層都一樣尺寸。(和做 UI 元件切圖的思路相反。)

把切好的 png 圖用 AirDrop 傳進手機相簿。

五、Slide AR

在 App Store 裡下載 Slide AR,目前似乎只有 iOS 版本。免費試用。

官網 https://slidear.app

Edit Layers

開啟 APP 後,點選右上角+。進到「Edit Layers」頁面,選取剛剛傳進來的圖檔。

注意在這裡輸入的圖檔是切分後的圖層,包含背景層,原始完整圖片不在這一頁上傳。

輸入進來的圖層順序是亂的!要自己手動重新排序。按住圖層拖動,排好後點「Next」。

Edit Target

在這裡上傳「完整的作品圖片」,就是 Midjourney 生成的那一張原始圖片,沒有拆圖層過的完整作品。

當鏡頭掃到這張圖片時,會出現擴增實境。

Edit

如果你覺得預設值就很好的話,可以直接錄下擴增實境的影片囉!

請把鏡頭對準原始圖片,才能透過鏡頭看到「立體」的作品。

還想微調的話、點上方的 Edit。

右上角按鈕「調整圖層順序」,下方 Slide Bar 調整圖片放大縮小的比例。

附上我的原始圖片

如果你看了以上的教學,想自己做一個的話,可以存這張圖去試看看!

我就是拿這個檔案寫下這篇文的。

做熟悉了的話沒什麼難度,反而是去背比較麻煩。

Slide AR 官方網站也有很清楚的操作教學影片。

就是作品圖片是什麼類型、分層怎麼分要摸索一下才能取得比較明顯的效果。

另一個作品

我把世界名畫「吶喊」用上述的步驟也做了個 AR 影片,效果很不錯。

你覺得呢?

Akane Lee

Akane Lee

如果設計師能和工程師順利合作,那麼老公也就能準時下班了吧!因此努力分享 UI 和 UX 方面的知識、技術、各種踩過的坑與心得。

Comments

wave
comments powered by Disqus

Press ESC to close