Home 小教學 我也會做AR!如何將Procreate插畫轉換成令人驚豔的AR擴增實境教學

我也會做AR!如何將Procreate插畫轉換成令人驚豔的AR擴增實境教學

by CHHung

這是我做的AR作品,過程比想像中的簡單!本篇教學是受到Akane老師寫的教學啟發,加上自己使用Procreate的一點心得,希望能幫你找到新的插畫詮釋方式。

AR是什麼?

在資訊爆炸的時代,擴增實境(Augmented Reality,簡稱AR)是一項不可不知的技術,隨著像Google galsses或是Apple的Vision Pro問世,延伸實體空間的資訊量、增加互動方式等作法,讓使用者得以遊走在虛實之間,拓展生命體驗。

AR在藝術和創意領域,更可以視為一種詮釋手法,可以說為插畫帶來了全新的可能性,目前也可看到許多展覽將AR技術結合靜態展品,帶領觀者「走進」大師作品,像是伊藤潤二展覽。無論你是一位單純喜歡畫圖的插畫愛好者,還是一名專業設計師,本文都能為你提供實用的作法,幫助你將創意轉化為令人驚嘆的AR擴增實境作品喔!讓我們一起開始動手做吧!

需要的軟體

1.Procreate/ iPad 

Procreate是一個功能強大的繪圖軟體,目前只支援iOS跟iPadOS。安裝需要一點費用(佛心價),有各式的筆刷、多種圖層效果、非常彈性的分享格式,網路上也非常多的教學與自製資源,是個在設計上很好用的工具喔!

因為本篇教學是主打將Procreate製作的插畫AR化,以下的截圖都是Procreate的介面;不過用手繪、Photoshop繪製,或是用其他的繪圖軟體(譬如Sai),當然都是沒問題的,只要準備好每一層的去背圖片,直接跳到第三步,參考Slide AR的操作步驟即可。

可以準備一個現有的小作品(多簡單都沒關係,但建議是一個主體+一個前景+一個背景 = 至少3個圖層,才能在後面的AR呈現有比較明顯的效果喔!尺寸大小也沒有關係,自行決定即可。)沒有現成作品也沒關係,這裡提供以下教學用到的檔案(檔案雲端),可下載後再參考第三步Slide AR的操作步驟來試做。

 

2.Slide AR/ iPhone or iPad

Slide AR是個製作AR的app,目前免費試用中。擁有簡易介面,對於科技小白(就我)非常友善。但目前只支援iOS跟iPadOS。

準備好一個插畫小作品,先複製出一個新的procreate檔案(重要~不要動到原本的檔案),就可以開始了!以下用我先前繪製的「立夏」示範。

第一步:整理圖層

在「立夏」我用了39個圖層,但很多是為了後續方便修改才新增的圖層,像是作為前景的葵葉,就用了8個圖層。這時先想一下最後想呈現的效果,我選擇把葵葉集中成一層,前景石頭一個圖層,把人魚跟靠著的石頭整理成一個圖層,把月亮星星整理成一個……最後整理出7層。多少層都沒有關係,只是太多的話,到SlideAR裡面要調整圖層順序時就有點燒腦。

第二步:輸出PNG檔案

我們要來製作去背的PNG檔案,請記得不要勾選背景顏色!這樣匯出時才會是去背(背景透明)的檔案喔!

利用Procreate的「分享」功能,就能「一鍵輸出」成每張「尺寸相同」的去背檔案。尺寸相同非常重要,否則在後續做成AR圖層時,元素位置不會在你想要的地方。點選分享>分享圖層的「PNG檔案」>儲存7個影像(也就是存在ipad本機,如果接下來你是使用iphone安裝的Slide AR,就是將這些影像存到iPhone,可用AirDrop功能存取)。

再輸出一份完整圖片的jpeg檔案,後續會用到。分享>分享圖像的「JPEG」>儲存1個影像

第三步:製作AR

到App store下載好Slide AR並開啟,可以看到主畫面。

按右上角的+號,開始製作新的AR檔案。允許app取用相片資訊後,就可以選擇要製作成AR的圖層。按右上角的+號,因為當初在Procreate匯出的圖檔是存在相片裡,所以我選Photo library,選出需要的那7張圖片,按右上角「加入」。

可以看到圖層已經匯入了,但是順序都亂了(而且就算當初有命名也在這裡重新被改成Layers1~7),需要手動調整,直接點選拖拉,最上層代表圖層在最前面。完成後點選「Next」。

接著畫面顯示需要選擇Target,也就是Slide AR會需要一個圖像來引發AR效果,可以是原圖,也可以是桌上的滑鼠(可以拍攝手邊的任何東西當作Target)…這裡就選擇原圖。

觀看AR效果

接著準備好這個Target圖像(我是在電腦上打開這個jpeg檔),就能來看看效果了。在Slide AR點選剛剛製作好的AR檔案,會打開ipad相機,將鏡頭對準電腦上的原圖,就出現AR效果了,可是……怎麼看起來沒有很立體?

這時可以點選上方的Edit來調整圖層間的距離,就可以有比較好的呈現囉!最後利用app本身的錄影功能,把你的AR作品錄起來分享給朋友吧!

最後加碼

官方也支援gif檔,也就是支援動態圖片,可以讓某些元素動起來,以下簡單做了兩條游來游去的小魚可以參考效果。(小魚動畫也是用Procreate製作,記得匯出時的尺寸要跟原圖一樣,小魚的位置才會是對的。)

做好的作品可以分享給朋友,讓朋友掃Qrcode就能看到你的AR作品,只是這個功能就需要付費才能使用(目前是美金$90/年…如果只是純分享我覺得有點貴)。

非常鼓勵大家試試,提供本篇教學用的PNG檔及gif檔給大家自己試玩Slide AR(雲端連結),有趣的話請幫我分享囉!

Leave a Comment