自製簡易 icon 教學


雖然網路上有很多多多免費的 icon 讓人使用,但大半都禁止「商業用途」,要馬就掏錢買一套、要馬就自己畫。介紹一下我愛用的自動筆和筆記本,以及最基本的 icon 從鉛筆草圖一直到電腦完稿的流程。(相信念廣告設計的學生對這過程非常熟悉。

Uni 三菱 KURU TOGA 自動筆

這隻自動筆最大的好處是「筆心會旋轉」,內建非常特別的機構,讓每一筆畫的粗細差不多。鉛筆素描時邊畫邊轉筆保持線條粗細一致,用 KURU TOGA 就不用自己手動轉,很方便。



(圖片取自官網

我買了 2 支,0.3 和 0.5 各一。0.3、0.5 是筆心規格,書局裡賣的以 0.5 為大宗,0.3 也有但選擇少很多。通常我都用 3B,不過把手上這盒寫完後,0.3 的筆心會改買 B 。

看得出 0.5 的筆我用了很久。KURU TOGA 有分新款舊款,有興趣的人可以研究一下。

無印良品 方眼 筆記本


無印良品的格紋筆記本,無印的文具在台灣賣的算便宜,這種格紋的我一次都是 5 本在帶。
台灣無印良品官網
(對岸的無印我找過、沒進這產品的樣子,不過淘寶上有類似款。)

手繪 icon 草圖


首先、用 0.3 的筆打草圖。有格子的好處能保證每個 icon 差不多大小,之後進電腦時才不用調整尺寸。


(覺得畫太大了、感覺不對,縮小重畫。)
還是拿 0.3 畫細線草圖,下筆要輕一點。等到確定線條後再拿 0.5 加粗。

Illustrator 描圖


拍照或掃描進電腦!(我都用iPhone隨手拍。)要注意鏡頭和紙是平行的,一定要保持格子的方正。拍歪的話 icon 也會畫歪掉。

建議將照片貼進 Illustrator 裡描圖。這種以線條為主的 icon 用外框線(筆畫)處理比較快。等描好後再轉外框筆畫、貼進 Photoshop。

PHOTOSHOP 加樣式


Ctrl + C、Ctrl + V,貼進 PS 選「形狀圖層」,加上圖層樣式就完成了。

當然還有很多細節和注意事項,本文僅介紹一個 icon 最簡單的繪製過程。手繪非常非常重要,一位好的 UI 設計師會非常重視基礎。這點差異就是決定眼高手低、想像得出畫面卻畫不出來,以及隨心所欲發揮創意的關鍵。

Akane Lee

Akane Lee

如果設計師能和工程師順利合作,那麼老公也就能準時下班了吧!因此努力分享 UI 和 UX 方面的知識、技術、各種踩過的坑與心得。

Comments

wave
comments powered by Disqus

Press ESC to close