自製簡易 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 設計師會非常重視基礎。這點差異就是決定眼高手低、想像得出畫面卻畫不出來,以及隨心所欲發揮創意的關鍵。

不知道設計卡在哪?

👉 第一次來?從這裡開始

下面這些文章,從不同角度整理那些容易被忽略的地方

wave
快速製作圓形漸層icon


看到有人問這種圓型 icon 要怎麼做,覺得很有趣稍微思考一下原理,做了個簡易快速版本。比不上原版精緻、只是記錄思考方式。

製作過程:Anna Sui Wallet


Icon Design:My Wallet 真的讓我拿到 Dribbble 帳號了,為了感謝大家的支持(喂)我把創作過程和思路放出來。簡單來說呢就是硬上、沒什麼華麗麗的技巧,不停加圖層加高光加陰影…畢竟這是我第一顆刻這麼細的擬物風 icon,之前都在接案公司工作、哪來 30hr 的時間慢工出細活。(大概是做習慣 iPhone 和 Android 的 App UI,凡是製圖我都優先考慮向量格式,即使這 icon 不可能上架,我還是做成向量格式,至少邊緣乾淨銳利漂亮。)Dribbble:ANNA SUI wallet

Icon Design:My Wallet

20131207-DEMO.png
總時數超過 30 小時,超過 100 個圖層。逼我換 MACBOOK PRO,還得加滿 RAM。舊 AIR 跑不太動。希望有人可以因為這顆 icon,分我個 Dribbble 的邀請碼。(真的拿到了!感謝 Mike Bronk

Layer 可以取代多少遊戲美術工作?
Layer 可以取代多少遊戲美術工作?

前幾個月看到預告就很期待 Layer 快點完工。
我觀望好久!終於開放一般大眾使用了。

Akane Lee

Akane Lee

我是 Akane Lee,10 年 UI/UX 設計教學,帶過 1000+ 學員擺脫焦慮,找出人生方向。不只聊設計,也教你怎麼少繞遠路,摔坑也知道怎麼自己爬起來。

Comments

wave
comments powered by Disqus

Press ESC to close