建立個人的網頁設計素材圖庫

寫網頁相信是很多人的興趣，有人靠此為生，或者是純興趣使然。面對不同的客戶或網頁的特異性，除了寫作上的不同外，所使用的圖型也有所不同。

在這此不同外，還是有些相同的部份，像是在一般互動式網頁(或稱動態網頁)，常有一些基本的機制(action)，像是新增、修改、刪除、存檔、列印、上筆、下筆.. 等共通的部份。

這些功能使用純文字表示並無不可，但有些時候用圖型表示，或許是更好的方式。

這些圖示有一個共通的特點，就是同質性很高，在甲網頁上可使用，乙網頁呢，也可直接套用。是否我們可建一個素材庫來組織這些東東呢？

每個人的方式都有所不同，以我來說，我是使用 openclipart 當我的素材來源，另一個來源就是各個 theme 中的資源了，在這其中有兩種檔案格式，一是 png 格式；另外一種則是 svg 格式。

使用這兩種資源有什麼好處呢？免費加上修改容易。

我比較偏好 svg 格式，why？相對於 png 格式，可做極大程度的修改，例如大小、圖型的增減內容等。

這些圖示可能並不完全符合所需，所以我們可能要東拼西湊、加東減西的，這也是我為何要用 svg 的檔案格式了。像附圖一的 20edit.gif，在上述兩種來源中，就沒有合適的圖型，只能使用兩個 svg 檔，再用 inkscape 來修改。

參考第一張附圖，可以看到很多 svg 的圖檔，這些都是我的原始圖檔，藉由這些我可以衍生出自己風格的圖示。像一些 gif 檔案，由 20 開頭的，就是衍生出來的格式。使用 gif 格式主要是因為 m$ 還未完全支援 png 的去背功能；而為何以 20 開頭呢？主要是其大小都是 20 x 20 px。

一般這類的圖示使用 20x20 或是 16x16 就可以了，為了方便起見，我會在檔案名前前加上其解析度，如 20 或是 16，這樣有個好處，相同大小的圖示會放在一塊，以便檢視。

如果長寬不一樣呢？以高度為準，這是因為網頁上顯示的是由 row(列) 組成。

在 linux 下要編輯這些檔案，可以考慮用 gimp 及 inkscape。inkscape 用來編輯 svg 檔，而 gimp 可用來將 svg 檔轉換成 gif 檔。

在第二張附圖就是將 svg 檔交由 gimp 處理的畫面。gimp 會問要轉換的解析度，以本文所例，可輸入 16 或 20。

第三張圖為一個 16x16 由 svg 檔轉換後的圖型。要注意的是，轉換到較小的解析度時，可能視覺效果不是很好，尤其是在邊框部份可能會糊掉，可能需要加強一個邊緣部份的暗度。

或許做這些動作有點給它無聊，但想想只要做一次後，以後都可直接套用，是不是很方便呢？我們也可以多做幾套風格不同的，如大小、顏色差異的素材庫，在使用上就更方便了。