# 【Day11】前期素材準備
## 製作icon重點
1. **簡單**的幾何圖形，能夠清楚表達意涵。
2. 嘗試**互換**色彩運用。
3. 色彩與細節的**統一性**。

## 製作icon程序
1. 可先上網查詢他人製作的icon，**參考**並擷取重點。
2. 利用**向量繪圖軟體**(illustrator、sketch、photoshop、inkscape...)開始製作。
3. **統一**線條寬度、圖形大小(建議可在icon外製作同樣大小的方框以檢視量體是否差不多)。
4. **細節**調整(角度、色彩...)，呈現一致風格，例如：色彩偏移風。
5. 在色彩應用上可依據不同頁面背景嘗試互換。

色彩應用提醒：不要選太多顏色，色彩間可互相搭配使用，有時可參雜灰色系的顏色能夠呈現不一樣的質感。

注意：避免太複雜，塞了密密麻麻的東西容易使得觀看者眼花撩亂或畫面看起來廉價。
## 輸出圖片格式
- JPEG 含背景顏色
- PNG 透明背景(常用)
- svg 向量圖

## 圖片該放入哪個圖床空間？
1. 搜尋「[Imgur](https://imgur.com/)」，註冊新帳戶並登入。
2. 點「New post」上傳圖片(JPEG或PNG)。
3. 上傳完成後，點選圖片右上角「ˇ」--->「get share links」，複製BBcode裡的png網址，貼到html img的src=" "中即可使用。

## 網頁管理
- 建立顏色變數
- 建立線框預設粗度
- 螢幕大小邊界設置
- 字體的指定

CSS變數設定參考例子

// COLOR VARIABLE
$color_white: #EFEFEF
$color_white: #E72243
$color_white: #36B9C1
$color_white: #333
$color_white: #DBDCDC

// BASE SIZE
$base_line_width: 5px

// BREAK WIDTH
$break_large: 1024px
$break_medium: 768px
$break_small: 400px

// FONT SETTING
$font_family: 微軟正黑體
$font_size: 10px

*
  font-family: $font_family

:::warning
內容主要整理自「動畫互動網頁程式入門 (HTML/CSS/JS)」課程，網址：https://hahow.in/courses/56189df9df7b3d0b005c6639/discussions?item=5a1e1745a2c4b000589dd21d
:::