數位繪圖開心畫：線稿、上色與遊戲 / Let's Draw on the Computer: Outline, Colour and Gamify

9月 01, 2017 Course , Presentation , Programming/JavaScript , Software , Software/Google , Software/GoogleDoc 2 Comments Edit Copy Download

這是2017年我在國立空中大學數位故事研習社講的主題：「數位繪圖開心畫：線稿、上色與遊戲」。這次著重的是借助一些免安裝的免費工具來進行簡單的數位繪圖，是開心畫的課程。而趁著人工智慧風潮的盛行，課程中也加入了Google的AutoDraw繪製線稿、Python的PaintsChainer智慧上色等內容。最後再將成品做成滑塊拼圖遊戲，將繪製的成果分享給其他朋友。

課程架構 / Syllabus

這個課程分成三大部分：繪製線稿、線稿上色、製作滑塊拼圖遊戲。

然而這三大部分中繪製線稿跟線稿上色有不同的做法：

• 人工智慧輔助繪圖：使用智慧線稿AutoDraw跟智慧上色PaintsChainer，用簡單的方式畫出絢麗的圖片。
• 傳統手工繪圖：以傳統的手繪線稿、數位化掃描，搭配線上版的繪圖軟體Pixlr來處理線稿跟上色。

以下我先介紹人工智慧輔助繪圖的做法，然後再講傳統手工繪圖的做法，最後再來說製作滑塊拼圖遊戲的部分。

人工智慧繪圖 / Draw with AI

這部分是介紹如何使用智慧線稿AutoDraw來畫出各種圖形，然後用智慧上色PaintsChainer來添增華麗的水彩顏色。這部分課程的概要可以用以下四張圖來表示：

在智慧線稿中隨手畫畫。

智慧線稿把它變成一顆樹了。

換個工具，到智慧上色中隨手添增一些顏色。

變成有樹、天空跟草地的水彩畫了。

線稿繪製：智慧線稿 AutoDraw / Outline: AutoDraw

• 智慧線稿AutoDraw網址：https://www.autodraw.com/
• 智慧線稿教學：Google投影片 (Power Point、PDF)
• Power Point格式備份：OneDrive、Box、Mega、MediaFire、SlideShare

這個投影片簡單介紹了智慧線稿AutoDraw的服務，說明它的介面，並安排一個操作活動，讓同學試著用AutoDraw來畫一顆樹或其他圖形。

上圖是AutoDraw整個介面的說明。

這是AutoDraw左側工具列的說明。

這張圖則是選單列的說明，這包括了如何儲存畫好的圖片。

也許有人會問說為何要將AutoDraw叫做「智慧線稿」呢？雖然AutoDraw不只能畫線稿，但是一方面是它的著色功能不太好用，另一方面是我在課程中會教到其他上色的工具，那就讓AutoDraw專心做好繪製線稿的工作吧。所以我就把AutoDraw稱作「智慧線稿」了。

(圖片來源：機器學習好威！隨手幾筆，Google「AutoDraw」就知道你要畫什麼)

不過到今天為止，AutoDraw已經相當有名了，應該不少朋友都已經玩過這個服務了吧。

上色：智慧上色 / Colour: PaintsChainer

• 智慧上色PaintsChainer網址：https://paintschainer.preferred.tech/index_zh.html
• 智慧上色教學：Google投影片 (Power Point、PDF)
• Power Point格式備份：OneDrive、Box、Mega、MediaFire、SlideShare

這部分是教大家如何使用人工智慧上色工具PaintsChainer來著色。PaintsChainer上色的方式跟傳統以手動上色或油漆筒填色的方式不同，而是用「指定顏色」來讓人工智慧「自動判斷著色方式」。這種操作方式跟傳統數位繪圖差很多，但是習慣之後就會覺得簡單又有趣。這份投影片介紹了PaintsChainer的服務、操作介面，並安排操作活動讓同學將在AutoDraw中畫好的圖形上色。

這是PaintsChainer的介面說明。

PaintsChainer的著色都用這個工具列，這張是工具列的說明。

要讓PaintChainer畫出好顏色，其實也要下一番功夫呢。不然畫出來的顏色會是非常奇怪的五顏六色喔。

傳統手工繪圖 / Hand-Drawn Digitalization

這部分是在講如何將手工繪製的線稿轉變成數位化的圖片檔案，然後使用免安裝且免費的線上圖片處理工具Pixlr來處理線稿並且著色。這部分課程的概要可以用以下四張圖來表示：

用鉛筆跟黑筆畫好線稿。

使用手機翻拍或掃描機，把繪製在紙張上的線稿變成電腦中的圖片檔案。

使用Pixlr進行線稿的後製處理。

再用Pixlr進行去背、上色，這樣就完成囉。

線稿繪製：紙本線稿數位化 / Outline: Hand-drawn digitalization

• 翻拍與掃描機教學：Google投影片 (Power Point、PDF)
• Power Point格式備份：OneDrive、Box、Mega、MediaFire、SlideShare

這部分簡單說明繪製線稿的做法，然後介紹幾種數位化的方法，包括用手機專用APP Tiny Scanner翻拍，或是用平臺式或手持式掃描機掃描。這邊也跟同學說明兩種掃描機的優缺點。因為我並不是電繪專家，講這個部分實在是有點班門弄斧的感覺。不過這就當作是基本知識，作為銜接後面內容的簡單操作吧。

這是智慧型手機上翻拍文件專用的APP「Tiny Scanner」的操作介紹。詳細介紹可以看電腦玩物的教學：「無紙化掃描器 App： Tiny Scanner 小而快、簡而精」。以下是Tiny Scanner的下載連結：

• iPhone (iOS): App Store
• Android: Google Play

然而不管用哪種方法，數位化變成電腦圖片檔案的結果通常都還是看起來不太乾淨。所以我們還要進行下面的線稿後製處理。

線稿處理與去背 / Retouching: Pixlr

• 線上圖片編輯器 Pixlr網址：http://pixlr.com/editor/
• 練習用的線稿圖片：https://pulipulichen.github.io/HTML5-Client-side-Image-puzzle/img/pulipuli-draft.JPG
• 線稿處理與去背教學：Google投影片 (Power Point、PDF)
• Power Point格式備份：OneDrive、Box、Mega、MediaFire、SlideShare

大部分數位繪圖的人都是學本機端軟體Photoshop或Painter，但這次我教的是免安裝且免費的線上圖片處理器Pixlr。大部分數位繪圖跟照片處理的基本功能，Pixlr一應俱全。而我們要做的線稿處理跟去背，也都可以在Pixlr完成喔。這份投影片說明了如何在Pixlr開啟檔案、Pixlr介面介紹，以及安排讓同學使用Pixlr進行線稿處理跟去背的活動。

這是Pixlr的介面說明，長得跟Photoshop很像吧。以下說明Pixlr的工具列細項：

• 裁切工具：指定長方形範圍，刪去範圍以外的區域
• 移動工具：移動選取範圍
• 選框工具：方框或圓框形狀的選取工具
• 套索工具：不規則形狀的選取工具
• 魔棒工具：以顏色作為選取範圍的選取工具
  

• 鉛筆工具：模擬各種筆觸來繪圖
• 畫筆工具：畫出指定圖形
• 橡皮擦工具：清除繪圖
• 油漆筒工具：為指定範圍上色
• 漸變工具：為指定範圍加上漸層顏色
• 仿製圖章工具：複製指定範圍來繪圖
• 顏色替換工具：深化指定顏色來繪圖的工具
• 繪圖工具：畫出長方形、圓形等形狀
  

• 模糊工具：把指定範圍變得模糊
• 銳化工具：把指定範圍變得尖銳
• 塗抹工具：把顏色塗向另一個方向
• 海綿工具：增加指定範圍的飽和度
• 減淡工具：把指定範圍的顏色變深
• 加深工具：把指定範圍的顏色變深
• 消紅眼工具：消除照片中的紅眼
• 點修復工具：去斑點、雜質的工具
• 膨脹工具：讓指定範圍變寬(眼睛)
• 收縮工具：讓指定範圍變瘦(臉下巴)
  

• 拾色工具：取得指定顏色
• 文字工具：畫出文字
• 手形工具(移動)：移動繪圖畫布(工作區)
• 縮放工具：放大繪圖畫布
• 現在使用的顏色：點此選擇其他顏色
• 過去使用的其他顏色：快速選擇前六種用過的顏色
  

使用Pixlr就可以將左邊線稿處理並去背成右邊的圖片喔，很不錯吧。去背的部分，我以前也在「用線上圖片編輯工具去背：PIXLR EDITOR使用教學」這篇有詳細的說明，到現在我還是覺得很有用呢。

雖然也可以用智慧上色PaintsChainer來著色看看，但看起來好像有點恐怖呢…

上色：在Pixlr手動上色 / Colour: Pixlr

• 線上圖片編輯器 Pixlr網址：http://pixlr.com/editor/
• 手動上色教學：Google投影片 (Power Point、PDF)
• Power Point格式備份：OneDrive、Box、Mega、MediaFire、SlideShare

這部分是教大家如何用Pixlr來進行簡單的著色。這裡用到了圖層(layer)的概念，我們可以把線稿維持在上面的圖層，然後在下面的圖層著色，這樣就可以簡單上色了。雖然這樣的簡單操作，很多人應該都在Photoshop之類的軟體做過了，但這次我們就用Pixlr來做一次這樣的簡單上色吧。

這就是充滿手工感的上色結果囉。

遊戲 / Gamify

畫好了圖片之後，接下來我們就要把這張圖加值應用，變成可以遊玩的滑塊拼圖遊戲囉。不過要做成滑塊拼圖遊戲之前，我們得要先把圖片上傳到網際網路，取得圖片的唯一網址才行。這邊教同學使用的是TinyPic免費圖床，我們可以透過簡單幾個步驟，將圖片傳到網際網路吧。然後我們就可以用滑塊拼圖遊戲來產生獨一無二的滑塊拼圖，並且分享給其他朋友囉。

整個教學活動大致如下：

到滑塊拼圖遊戲中載入圖片，做成拼圖吧。

最後將拼圖分享到Facebook，這樣就完成囉。

上傳圖片 / Upload the image

• 上傳圖片：TinyPic網址：http://tinypic.com/
• 上傳圖片 TinyPic教學：Google投影片 (Power Point、PDF)
• Power Point格式備份：OneDrive、Box、Mega、MediaFire、SlideShare

TinyPic是個相當老牌的圖片上傳空間，而且操作步驟很簡單。不過麻煩的是它的驗證碼方式一直在調整，這篇教學不一定符合現在TinyPic的操作。就請同學自行摸索吧。

最後我們的目標是取得圖片網址，例如：

• http://i67.tinypic.com/30hxxfq.jpg

你可以直接將這個網址分享到Facebook或LINE上，讓其他朋友欣賞你的成果。或著繼續下一步，把它做成滑塊拼圖遊戲。

遊戲化：滑塊拼圖遊戲 / Gamify: Sliding Puzzle

• 滑塊拼圖遊戲網址：https://pulipulichen.github.io/Sliding-Puzzle/
• 滑塊拼圖遊戲教學：Google投影片 (Power Point、PDF)
• Power Point格式備份：OneDrive、Box、Mega、MediaFire、SlideShare

這部分就是滑塊拼圖遊戲的教學。包括如何設定、進行遊戲、分享滑塊拼圖遊戲等操作。詳細內容可以看我寫的「你玩過滑塊拼圖嗎？可自訂的HTML5滑塊拼圖遊戲」這篇喔。

快來分享你做的滑塊拼圖遊戲吧！

結語 / In closing

這個課程雖然看起來蠻簡單的，對電繪高手來說可能覺得很無聊。但本來設計這堂課的目的就是為了讓完全沒用過電腦來繪圖的同學也能感受一下用電腦繪圖的有趣之處，像是可以借助人工智慧的力量來畫線稿和著色，最後還能做成滑塊拼圖遊戲。比起學技能本身，這堂課能讓大家在課堂上用電腦開心畫，這才是課程的目的。除此之外，這堂課對於AutoDraw、PaintsChainer、Pixlr等各種免費工具的介紹，也會對買不起PhotoShop的同學來說有所幫助喔。

封面的圖片是來自於「探究式課程與小論文寫作的結合：小論文寫作數位學習課程」這篇的LOGO圖片學士貓。本來一開始是想教大家用學士貓來著色，不過赫然發現學士貓太複雜了，PaintsChainer處理效果很差，所以就讓牠擔任首頁的吉祥物吧。感謝迷你手女孩！

這份投影片裡面有大量的GIF動畫。我是用ScreenToGIF錄製播放中的影片或YouTube的畫面，以此製作GIF動畫。品質比直接用FormatFactory轉檔還要好上很多，推薦給大家使用。

不過，距離教完這堂課到把它整理成這篇blog，居然已經快要過了將近半年的時間。如果再拖下去的話，很可能我都會忘記當初講了什麼吧。

如果你覺得這樣的課程很有趣的話，不妨在下面留個言，給我鼓勵一下喔！