Adobe Illustrator 初體驗:製作 SVG 格式的文字 Logo

最近製作的網站需要用到 SVG 的 Logo,自己摸索了一下 Adobe Illustrator,結果只做出一張解析度很高的 PNG 🤪
後來問卡斯伯老師製作流程後,總算成功做出 SVG 檔案了,以下簡單紀錄一下製作流程。

事前準備

  1. 安裝 Adobe Illustrator
  2. 準備好想設計的文字內容

製作流程

  1. 開啟 Adobe Illustrator
  2. 輸入需要的文字
  3. 轉外框
  4. 輸出 .svg

轉外框是什麼

文字轉外框算是這次整個製作流程的關鍵步驟,這個功能會把文字圖像化,這樣製作出來的才是正確的 SVG 圖片,以下分享兩種轉外框的方式:

  1. 從視窗工具列
    選取文字 → 點擊視窗上方的 文字 欄位 → 選取清單中的 建立外框 → 完成
  2. 快捷鍵
    選取文字 → 按下鍵盤 Ctrl + Shift + O → 完成

符合圖稿邊界

這個動作可以將圖片多餘的白色背景去除,讓內容跟白色背景切齊,對我來說看起來比較舒服,也讓我比較好切圖。
操作方式:點選視窗上方的 物件 欄位 → 選取 工作區域 → 選取 符合圖稿邊界

如何辨識 SVG 是否正確

都完成之後,可以使用 VSCode 打開剛才轉出來的 .svg 檔案,如果看到結構是接近 HTML 的格式,那就是正確的格式了!但如果看到像是一堆亂碼的話就是錯誤的結構哩。

以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。