# 用 HTML 為機器人製作簡易圖示與主選單

大家好，我是做出「LINE 數位版名片」的 LINE API 專家均民。

這篇文章是寫給和我一樣不會用 illustrator 之類的工具畫圖的工程師 XD

我平常會利用自己的空間時間做幾個 LINE chatbot 的 Side Project，但卻苦於自己不會用 illustrator 之類的工具畫圖，所以沒辦法幫它製作漂亮的 icon 和主選單，後來，我想到了一個方法，就是在網路上找一些免費資源，然後用 HTML 製作成自己想要的樣子，然後再用 Chrome 瀏覽器產生截圖，這樣就能順利產生簡易圖示與主選單了！

# 圖示：Flex 開發人員工具

https://github.com/taichunmin/gcf-line-devbot (opens new window)

在 Evan Lin 問我要不要投稿一些非商用的作品到 LINE 開發者社群的作品集 (opens new window) 時，我第一個想到的就是這個之前文章中介紹過的 Flex 開發人員工具 (opens new window)，但是這個工具一直都沒有圖示，為了要投稿，所以我就用這個方法製作了一個！

首先，我在 codepen.io 建立了一個新的 pen：

然後我去 Google Fonts 找了一個看起來順眼的英文字型，引用到 pen 裡面：

然後運用自己會的 HTML 和 CSS 等技術，想辦法讓這個網頁變成我要的樣子：

由於只是做出來為了截圖，所以 HTML 和 CSS 用的很隨便，可以點此來看我做的這個網頁 (opens new window)。

網頁做完以後，就可以切換成 Full Page View 方便截圖：

由於我習慣使用 Chrome，所以我接下來的步驟也都是 Chrome 的操作方法。

切換到 Full Page View 以後，codepen 上方還是會顯示一個討厭的選單，所以我們需要按下 F12 開啟開發人員工具，然後使用左上角的元素選取工具來選取那個選單：

然後在左邊確認選取到要刪除的 DOM，按下 backspace 來刪除：

刪除之後，我們要來調整網頁的大小，點選左上的第二顆按鈕：

然後把上方調整成 Responsive 以及 512x512:

然後按下組合鍵 Ctrl+Shift+P 來打開開發人員工具的指令輸入框：

然後輸入 capture 後執行 Capture screenshot 指令：

然後你應該就會看到 Chrome 出現一個下載的圖片了：

最後做出來的圖示如下：

# 主選單：某個 Side Project

這個是之前試玩 LINE Things 的 Side Project，我也用了同樣的方法製作了主選單，我是去 Flaticon 找了兩個圖示，然後用 HTML 做成我想要的樣子如下：

可以點此查看我做的這個 codepen (opens new window)。

Icon made by Vectors Market (opens new window) and Smashicons (opens new window) from www.flaticon.com (opens new window)

# 原始碼及參考連結

TIP

本文範例程式的原始碼授權為 MIT License。