搜尋

使用 Scratch 繪製圖形 ( 製作 SVG )

雖然 Canva 的功能很強大,但繪製圖形的功能卻非常陽春,無法繪製比較複雜的圖形或角色,這篇教學會介紹使用 Scratch 的繪圖功能,進行圖形或角色的繪製,並將繪製的圖形輸出為 SVG,最後在 Canva 中使用 SVG 向量圖形。

Scratch 教學參考:Scratch 教學繪製造型&背景

快速導覽:

Canva 教學 - 使用 Scratch 繪製圖形 ( 製作 SVG )

使用 Scratch 繪製圖形

前往 Scratch ( 不需註冊 ),從最下方設定語言為繁體中文後,點擊上方「創造」開啟新專案。

前往 Scratch:https://scratch.mit.edu/

Canva 教學 -  使用 Scratch 繪製圖形 ( 製作 SVG ) - 點擊上方「創造」開啟新專案

新專案開啟後,點擊上方「造型」頁籤,就能切換到 Scratch 的向量圖繪圖工具。

Canva 教學 -  使用 Scratch 繪製圖形 ( 製作 SVG ) - 點擊上方「造型」頁籤

雖然 Scratch 的向量繪圖功能沒有專門向量繪圖工具來得專業,但已經提供相當完整的功能,包含選取工具、重新塑形 ( 貝茲曲線調整 )、筆刷、油漆桶、橡皮擦、線段、圓形和方形總共八個繪圖功能,下圖列出各個功能的相關設定,更多教學參考:「繪製造型&背景」。

Canva 教學 -  使用 Scratch 繪製圖形 ( 製作 SVG ) - Scratch 繪圖功能

運用 Scratch 的繪圖功能,就能夠輕鬆畫出屬於自己的向量圖形。

Canva 教學 -  使用 Scratch 繪製圖形 ( 製作 SVG ) - Scratch 繪圖功能

輸出並轉換 SVG

使用 Scratch 繪製圖形後,只要在繪圖的造型上按右鍵選擇「匯出」,這種方式會將「這個造型」匯出為「SVG」向量圖檔

Canva 教學 -  使用 Scratch 繪製圖形 ( 製作 SVG ) - 匯出為「SVG」向量圖檔

除了匯出成向量圖,在繪圖區域按右鍵「另存圖片」,這種方式會將「繪圖區域」的「可視範圍」另存成「PNG」點陣圖檔,但會出現格子狀背景,所以不建議使用這種方式。

Canva 教學 -  使用 Scratch 繪製圖形 ( 製作 SVG ) - 在繪圖區域按右鍵,另存圖片

如果要白色背景或自訂背景的點陣圖,需要在右側舞台區按右鍵「另存圖片」,這種方式會將「舞台區域」的「可視範圍」另存成「PNG」點陣圖檔

Canva 教學 -  使用 Scratch 繪製圖形 ( 製作 SVG ) - 在右側舞台區按右鍵,另存圖片

由於 Scratch 匯出的 SVG 包含一些程式碼資訊,無法直接放到 Canva 中使用,所以需要經過「SVG 最佳化」的程序,開啟STEAM 教育學習網開發的 SVG 最佳化的工具,開啟剛剛匯出的 SVG 檔案。

前往:SVG 最佳化

Canva 教學 -  使用 Scratch 繪製圖形 ( 製作 SVG ) - SVG 最佳化的工具

開啟 SVG 後就會自動進行最佳化,下方出現預覽畫面後,點擊「下載 SVG 檔案」就能下載最佳化的 SVG。

Canva 教學 -  使用 Scratch 繪製圖形 ( 製作 SVG ) - 下載最佳化的 SVG

Canva 上傳 SVG

回到 Canva,上傳剛剛的 SVG 圖檔,就能夠使用向量圖的方式操作自己繪製的圖形。

Canva 教學 -  使用 Scratch 繪製圖形 ( 製作 SVG ) - Canva 上傳 SVG

小結

向量圖的繪圖工具是 Canva 美中不足的地方,但透過 Scratch 的繪圖功能,就能彌補 Canva 在繪圖上的缺陷,大幅提升自定圖片的能力。

意見回饋

如果有任何建議或問題,可傳送「意見表單」給我,謝謝~

Canva 教學

基本介紹

關於 Canva 註冊、登入、方案 主畫面 專案管理 ( 資料夾、課程 ) 專案管理 ( 設計、影像 ) 專案類型 相關設定

展示&分享&下載

展示簡報的方式 分享簡報 下載檔案 網頁中嵌入簡報

共用設計功能

專案設計介面 使用範本和樣式 添加元素 加入文字 上傳檔案 繪圖工具 加入專案

簡報&設計

基本功能、使用範本 頁面管理、背景圖片 儲存、下載、匯入

文件&白板

文件 ( 建立、文字樣式 ) 文件 ( 圖片、表格、清單 ) 文件 ( 圖表、嵌入網頁 ) 文件轉換成簡報 使用白板

影像&照片

編輯向量圖 編輯點陣圖 單純編輯照片 使用 Scratch 繪製圖形

影片&聲音

剪輯、調整、播放速度 串連其他影片 分割頁面、轉場 加入文字和圖形 影片靜音、背景音樂 使用雅婷文字轉語音

網頁設計

建置、發佈網站 網域設定管理 常用網頁元素

應用程式

YouTube Google 地圖 圖片快速套用模型 角色製作工具 表情符號和小動畫 可愛&趣味貼圖 產生 QRCode AI 人像表情 AI 手繪影像轉換 AI 清晰&放大照片

AI 魔法功能

AI 魔法媒體工具 AI 魔法工作室 AI 魔法變形工具 AI 魔法文案工具