使用向量軟體繪製Scratch畫面素材
賢北國小 張志仁老師
使用Inkscape快速解決
Scratch 提供簡單的圖形編輯功能，可以
修改內建的造型與背景，也可以繪製所需的圖形或透過攝影機拍照，每個造型或背景都可以獨立進行編輯，不會互相影響，繪製後的圖形立刻就可以和程式互相搭配，這也是 Scratch 與眾不同的地方。
Scratch 的造型/背景編輯器主要分成幾個部分：
造型清單
造型與繪圖功能
繪圖區 ( 點陣圖 )
繪圖區 ( 向量圖 )
造型/背景編輯器
造型清單
「造型清單」可以增加角色的造型，一個角色可以有多個造型，例如貓咪的角色有「腳分開」和「腳併攏」兩種造型，
屆時就可以透過程式積木，讓兩種造型互相切換，做出跑步的動畫效果。
將滑鼠移到下方的按鈕，會出現四個新增造型的選項，分別是上傳圖片、驚喜 ( 從圖庫中隨機挑選 )、繪圖和選個造型。
上傳圖片
驚喜 ( 從圖庫中隨機挑選 )
繪圖
選個造型
造型/背景編輯器
造型與繪圖功能
「造型與繪圖功能」可以設定造型的名稱，以及繪製造型每個元素的功能，功能又分成「向量圖」和「點陣圖」兩種，
向量圖的功能較多，包含 群組、復原、圖層、填滿、外框、複製、貼上、刪除、垂直水平翻轉。
向量圖
點陣圖
向量圖的功能較多，包含 群組、復原、圖層、填滿、
外框、複製、貼上、刪除、垂直水平翻轉
點陣圖可編輯的功能較少，只有
復原、複製、貼上、刪除、垂直水平翻轉
造型/背景編輯器
用滑鼠點選繪製的元素，選單就會有對應的變化，
主要變化有兩種：
造型與繪圖功能
造型/背景編輯器
點陣圖可編輯的功能較少，
只有復原、複製、貼上、刪除、垂直水平翻轉。
不論是向量圖還是點陣圖，只要用滑鼠點擊想要的繪畫工具，就會出現對應的選項 ( 例如使用筆刷，功能列就會出現筆刷大小的選項，使用圓形或方形，就會出現填滿選項 )。
造型與繪圖功能
特別注意: 當向量圖變成點陣圖後再變回向量圖後，仍然會維持點陣圖狀態，無法以向量模式編輯。
造型/背景編輯器
繪圖區 ( 向量圖 )
繪圖區的右邊是畫布，左邊是繪圖工具
「向量圖」的繪圖工具包含 選取、筆刷、填滿、直線、方形、圓形、重新塑形、擦子和文字。
可以利用繪圖工具在畫布裡畫圖，繪製過程中如果想要復原，除了點選上方的復原按鈕
也可以按下鍵盤的 Ctrl + z 就可以復原。
選取
筆刷
填滿
直線
方形
圓形
重新塑形
擦子
文字
造型/背景編輯器
繪圖區 ( 向量圖 )
「向量圖」的繪圖工具
選取
選取：選取圖形或群組，可改變位置、大小、旋轉角度、翻轉或鏡射，選取後按住鍵盤的 shift 再調整，就「不會」按照原比例縮放或以每次 45 度的角度旋轉。
造型/背景編輯器
繪圖區 ( 向量圖 )
「向量圖」的繪圖工具
筆刷
筆刷：用滑鼠繪製圖形，繪製的圖形皆是封閉區域 ( 因為筆刷是使用「填滿」進行繪製 ) ，繪製完成後，可以針對圖案進行填色或邊框的設定。
筆刷是使用「填滿」進行繪製
設定筆刷大小
造型/背景編輯器
繪圖區 ( 向量圖 )
「向量圖」的繪圖工具
填滿
填滿：用指定的顏色將「封閉區域」填滿，填滿除了可以透過拉霸的工具填充單一顏色，也可以填充上下漸層、左右漸層與放射狀漸層。
填充單一顏色
填充上下漸層、左右漸層
填充放射狀漸層
造型/背景編輯器
繪圖區 ( 向量圖 )
「向量圖」的繪圖工具
直線
直線：畫直線，繪製直線後，在直線端點繼續畫直線，則兩條直線會連在一起。
造型/背景編輯器
繪圖區 ( 向量圖 )
「向量圖」的繪圖工具
方形
方形：畫實心或空心的矩形
按住鍵盤的 shift 可以畫出正方形
圓形：畫實心或空心的圓形
按住鍵盤的 shift 可以畫出正圓形
圓形
造型/背景編輯器
繪圖區 ( 向量圖 )
「向量圖」的繪圖工具
重新塑形
重新塑形：使用滑鼠「拖曳節點」，如果在圖形的邊緣或線段裡，沒有節點的地方點一下，就會「新增節點」，用滑鼠在節點的地方點兩下，就會「刪除節點」。
如果用滑鼠點擊節點，可以改變節點為「尖角或圓弧」。
用滑鼠在節點
的地方點兩下
可以刪除節點
造型/背景編輯器
繪圖區 ( 向量圖 )
「向量圖」的繪圖工具
重新塑形
新增的節點或是圓弧節點，在節點的兩側會出現「控制點」，用滑鼠拖曳控制點，就能改變節點的弧度。
單純用滑鼠拖曳，兩個控制點會像翹翹板一樣的移動，如果按住鍵盤的 alt 再用滑鼠拖曳，就能單純拖曳一個控制點，也就能做到更多造型變化，如果要恢復，只要再按一下上方的圓弧，就能恢復。
�
這種向量的繪製方式，就是使用貝茲曲線繪圖
造型/背景編輯器
繪圖區 ( 向量圖 )
「向量圖」的繪圖工具
擦子
擦子：擦掉圖形或群組，被擦掉的圖形如果有外框，外框用原本外框的顏色補滿。
造型/背景編輯器
繪圖區 ( 向量圖 )
「向量圖」的繪圖工具
文字
文字：輸入文字，文字輸入完成後，可以用選取工具進行放大縮小或旋轉。
當文字一直疊上去時是否有更好的解決方式？
造型/背景編輯器
繪圖區 ( 點陣圖 )
繪圖區的右邊是畫布，左邊是繪圖工具， 「點陣圖」的繪圖工具包含 選取、筆刷、填滿、直線、方形、圓形、擦子和文字，可以利用繪圖工具在畫布裡畫圖，繪製過程中如果想要復原，除了點選上方的復原按鈕，也可以按下鍵盤的 Ctrl + z 就可以復原。
注意，點陣圖和向量圖在繪製時，
有幾個最大的不同點：�
繪製或擦除。
再調整，就「不會」按照原比例縮放或以每次 45 度的角度旋轉。
畫面分析練習
組成分析
除了背景
畫面分析練習
組成分析
除了背景
配色參考
如何設定畫布
在 [檔案] \ 文件屬性 or 命令列上的文件屬性按鈕，設定頁面大小
將頁面調整成圖畫或選擇範圍大小
縮放畫面
以鍵盤操作
■ 放大：點一下按鍵 ＋
■ 縮小：點一下按鍵 －
以滑鼠操作 ( 任一工具 )
■ 放大：Ctrl + 滾輪向上滑動
■ 縮小：Ctrl + 滾輪向下滑動
以滑鼠操作 ( 放大鏡工具 )
■ 放大：左鍵點一下 or 框選欲放大的範圍
■ 縮小：Shift + 左鍵點一下
移動版面:
滑鼠滾輪按住後拖曳滑鼠
如何取出畫面色彩
如何設定外框與填充色
如何設定漸層色
練習：
匯入配色圖檔到 inkscape
建立多個形狀
使用汲取顏色工具
練習：
可以使用自配色圖檔汲取出的色彩
或是使用調色盤上的色彩
1. 選取物件
2. 選取漸層填色工具
3. 在物件上拖曳
色彩填充
面的填色（調色盤任一色彩 左鍵點一下）
框線填色（調色盤任一色彩 Shift + 左鍵點一下）
實作時間
設定遮罩
填滿圖樣
漸層字
環繞字
直角改成彎角
製作圖樣背景（使用 物件/ 剪裁）
外框字
陰影字