製作流程
- 安裝 Adobe Illustrator
- 準備好想設計的文字內容
- 開啟 Adobe Illustrator
- 輸入需要的文字
- 轉外框
- 輸出 .svg 檔案
什麼是轉外框
文字轉外框算是這次整個製作流程的關鍵,這個功能會把文字圖像化,這樣製作出來的才是正確的 SVG 圖片,可以透過以下兩種操作方式將文字轉外框。
- 從視窗工具列
選取文字 → 點擊視窗上方的 文字 欄位 → 選取清單中的 建立外框 → 完成 - 快捷鍵
選取文字 → 按下鍵盤 Ctrl + Shift + O → 完成
符合圖稿邊界
這個動作可以將圖片多餘的白色背景去除,讓內容跟白色背景切齊,對我來說看起來比較舒服,也讓我比較好切圖。
操作方式:點選視窗上方的 物件 欄位 → 選取 工作區域 → 選取 符合圖稿邊界。
辨識 SVG 是否正確
完成輸出 SVG 檔案後,可以使用 VSCode 打開剛才轉出來的 .svg 檔案,如果看到結構是接近 HTML 的格式,那才是正確的格式喔!如果看到像是一堆亂碼的話則是錯誤的結構。
以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫