一名叫馬良的少年獲得了一支神奇的筆,但凡用筆畫下的東西都會變成現實……誰能不對《神筆馬良》故事中的描述的奇幻畫面充滿幻想,希望能一睹那神奇的場面呢?後來玩到一款叫《畫中世界》的遊戲。在遊戲裏玩家走入畫的世界,如夢如幻,若虛若實,感覺是最貼近於小時候對《神筆馬良》的想象了。▲遊戲《畫中世界》本以為要實現像《畫中世界》裏那樣的三維透視效果操作起來會十分複雜,需要很特殊軟件或編程技巧,但只要瞭解到 Mental Canvas 這款 app 後,你就會發現這件事可以變得很簡單。比如在 Bilibili 上 UP 主 @冰戈戈戈 上傳的一條 3D 漫畫視頻,就呈現了一種創新型的漫畫展現方式——漫畫的窗格再也不是平面靜止的,而是變成了可動、可探索的世界,充滿了動感。▲ 圖片來自 B 站 UP 主冰戈戈戈的視頻那麼,Mental Canvas 到底是什麼呢?簡單來説,這是一款多平台的平面設計工具,適用於微軟平板和 iPad,可在微軟商店和 App Store 下載(暫無 Android 版),需配合觸控筆使用。通過讓用户在不同朝向的平面上繪製圖案,Mental Canvas 能讓作品實現一種近似立體的視覺效果——即便你並不掌握建模技術也能畫出三維畫面。在試玩這款 app 後,我們也學着用 iPad 做出了兩張成果圖,雖然比不上大咖們做出來的精緻好看,但相對而言操作起來比較簡單,下面 APPSO 將通過介紹它們的做法,對 Mental Canvas 的功能進行簡要的介紹。
▲成果圖 1
▲成果圖 2
懶人目錄App 頁面功能簡介
3D 作畫的實現
平面設計轉 3D 設計(附成果圖 1 製作方法)
動畫的生成(附成果圖 2 製作方法)
1. App 頁面功能簡介儘管目前 Mental Canvas 只有英文界面,但並不會怎麼影響使用,因為它的頁面較簡潔、文字不多,功能很集中,交互邏輯也比較清晰。除了左上角的菜單,app 的界面可以分成了三個區域:畫布區、編輯區與動畫區。左邊的畫布區是對作畫面以及每個面中圖層的選擇、切換。上方的編輯區的第一組工具分別是:框選、畫筆、橡皮和油漆桶,都是平時常在平面設計應用中看到的。第二組工具比較特別,主要用以對畫布進行調整,能夠新建作畫面,調整畫布的位置。右下方是動畫區,擁有時間軸,在製作動畫時用以調整關鍵幀的先後順序和停留持續時長。Mental Canvas 是有兩種模式的,當右上角的畫筆圖標被點亮時,app 處於作畫模式,畫布中的圖形可以編輯,但較難看清面和麪之間的層次關係。當點擊到畫筆旁邊的攝像機圖標時則切換為鏡頭模式,畫布不可被編輯,但用手指在 iPad 上左右滑動可以清楚地看到不同的面中的圖形的位置交疊。2. 3D 作畫的實現首先要明確的是用 Mental Canvas 實現的 3D 作畫效果實際上和我們用 3D 建模軟件生成的 3D 模型是有區別的。前者只是通過在幾個不同朝向的面上繪畫實現類似 3D 的效果,實質上生成的對象是沒有體積的,而後者是生成一個實體,因此可以進行「雕刻」「變形」等操作。▲偽「 3D 模型」效果在開始進行 3D 作畫前,讓我們先來了解一下 app 獨特的畫布(平面)生成機制。在編輯區域中我們可以找到兩個生成作畫面的按鈕,第一個是生成平行於現有畫布(打開 app 時會首先默認一個初始面)的面,第二個是將舊畫布圍繞中心軸旋轉,從而生成新的面。當需要生成一個平行與現有畫布的面時,點擊按鈕後我們需要手指在屏幕空白處下滑以調整新的面與舊有平面的距離。▲圖片來自:YouTuber 哎呀思的視頻▲右上角預覽窗口中舊平面為白色,新平面為淺藍色切換成鏡頭模式後,我們可以清楚看到新舊畫布的位置關係。▲圖片來自:YouTuber 哎呀思的視頻通過旋轉生成新的面的操作原理大致也與之前相同。點擊生成按鈕後,屏幕將出現一個可以調整首尾位置的軸線,放置好軸線後,移動軸線中央的圓圈,舊平面將以軸線為中軸旋轉,從而生成新的面。▲將軸線放置在舊畫布圖像的中央就能做出像轉硬幣一樣的旋轉▲圖片來自:YouTuber 哎呀思的視頻用以上的方法生成兩個面後,現在畫布就總共有 3 個落在不同位置的面,切換鏡頭模式後可見分佈如下。▲圖片來自:YouTuber 哎呀思的視頻掌握了基本的面的生成操作後,我們來試試繪製一個長方體。首先在初始面繪製一個長方形,塗上黃色。然後點擊旋轉生成面的按鈕,生成一個與黃色長方形相垂直的面。▲預覽窗口中新的面變成一條几不可見的線後就證明基本垂直了在新的屏幕中繪製三條邊,然後點擊平面編輯欄中的第三個圖標(用以改變既有面的縱深關係),手指往下拖動將其拖動至黃色長方形的邊緣處銜接,就製作出了長方體的兩個面。▲首先在新建的垂直面上繪製三條邊▲然後點擊紅框中的圖標▲對面進行推移▲成功銜接在作畫模式下選擇點擊選框工具,選中三條邊,點擊複製後再點擊推移,這三條邊就會被複制到經推移產生的新面中,繼而成為長方體的第三個面。然而新生成的平面上的邊的大小並不合適,此時只需再次選中新面的圖像,點擊縮放與移動圖標,再調整大小使之能與黃色長方形銜接即可。接下來按照上面所述的技巧再把長方形其他面搭建起來,塗上不同的顏色以示區別,一個長方體就繪製完成了。其實從這個極不規整的幾何體就能看出自己從零開始搭建平面的難度之大,好在每次新建一個工程時,app 都會有構圖預設提供,利用它們就能快速搭建合適的幾何場景了。3. 平面設計轉 3D對大部分的人來説,Mental Canvas 最吸引人的地方也許不是能畫出閉合的幾何體,而是能將畫好的二維的作品偽裝成立體畫的樣子。要實現上圖效果也很簡單且快速。首先需你要有一張分好了圖層且每個圖層都完整、獨立、無遮蓋的畫,繼而再將所有的圖層導出到畫冊。(我們將下面案例中的圖層已經整理好,如有興趣可直接保存使用,在 APPSO 微信後台回覆「23D」獲取)▲這裏就先用 Procreate 畫好了一張▲一次導出全部圖層現在我們要在 Mental Canvas 中生成縱深不同的若干個平面,再分別將準備好的圖層放入各個平面中,並調整好大小。▲在平面上貼入準備好的圖層▲生成新平面,再重複圖層粘貼工作▲全數圖層放入完成從正面看也許看不出有什麼蹊蹺,但假如將鏡頭側過來,就能看到每個圖層之間的前後位置關係了。4. 生成動畫接下來是動畫製作環節。Mental Canvas 的動畫製作過程非常直觀且智能——挑選好合適的畫面作為關鍵幀,app 會自動幫你計算好幀與幀之間的鏡頭移動,按播放可以隨時預覽效果。下面以愛範兒太空人與宇宙的壁紙為例,來簡單演示一下動畫製作過程。首先我們要選取一個較遠的正面角度,然後按下動畫區域內的照相機圖標截取為關鍵幀。將畫面往前調整(放大)到看不見愛範兒 Logo 的位置時,再截取一張關鍵幀,此時 Logo 向觀眾視線飛撲過來並消失的效果就產生了。▲拉到這個位置就比較合適了用這個方法將其他的關鍵幀也設置好,便得到一條完整的時間線。點擊「Bookmarks(書籤)」圖標能夠得到一個更豐富時間軸功能,在這裏我們可以調節調幀與幀之間間隔的時間長短。「Visibility(可視性)」一欄用於以自定義哪個畫面在播放到某一幀時不會出現。點擊左邊畫布區域圖像前面的眼睛符號,讓眼睛關閉,再點一下時間軸對應幀下面的刷新圖標,就會關閉該畫面在該幀中的顯現。比如我們看到下圖中第一幀被關閉的畫面有三個,主要是太空人以及太空人身邊的一些裝飾。這樣安排是為了符合「湊近了才能看清星球上有什麼」的敍事需要。也就是説在實際演示中,在一開始除了愛範兒的 Logo 以及後面的星球與宇宙背景,觀眾不會看到其他東西。▲再回顧一下前面的動畫看是不是這樣?點擊播放按鈕,確認動畫效果過關後就可導出視頻了。點擊左上角的菜單,選擇「Export」,再依次選中「Video」和 1080p 即可導出高清視頻。▲視頻去水印功能要付費當學會了如何使用這個 app 後,我很快就將以前畫的幾個平面作品都進行了「立體化」。凝視着成品,我久久挪不開眼睛,一種強烈的滿足感油然而生。沒想到一小時前還是靜止的圖片,經過簡單的操作後竟然能夠變得如此活靈活現,更沒想到實現這一效果的 app 本身竟只有 9 M 的大小。前段時間 Mental Canvas舉辦了 Reimagine Drawing 挑戰賽,各個得獎作品的創意更加令人歎服。▲Reimagine Drawing Challenge 建築類一等獎作品部分畫面展示▲Reimagine Drawing Challenge 故事類一等獎作品部分畫面展示▲Reimagine Drawing Challenge 教育類一等獎作品部分畫面展示現在 Mental Canvas 的團隊為慶祝大賽的圓滿成功開啓了限時免費下載和買斷的活動(買斷價 198 元,活動截至 4 月 1 日,買斷後可去除水印),感興趣的讀者不妨一試。▲ 不同收費策略下的權益. Google 翻譯,僅供參考
* Mental Canvas 適用於 iPadOS 13.4、Windows 10 或更高版本的集成觸控設備,iPadOS 版本大小 9.6 MB,Windows 版本大小 18.3 MB,部分功能付費。點擊「在看」
是對我們最大的鼓勵