PS 線性圖標畫法 ?

就是類似這種線形圖標,怎麼做到整合在一個圖形上。簡單的可以圖形相交、相加減。複雜點怎麼破的?


在PS中畫出這種線性圖標,主要是用到形狀工具和鋼筆工具。因為這兩種工具畫出來都是矢量的,可以後期調整細節和大小。下面分享幾個可能用到的小技巧:
1)線性圖標一般不會有太複雜的元素,形狀工具裡面有一些基本圖形畫出來很方便一些形狀工具無法完成可以用鋼筆,需要將鋼筆的工具模式設置為「形狀」,方便以後統一操作。

2)整合到同一形狀用「合併形狀」,注意需要合併的這些形狀必須是統一的「填充」樣式或者「描邊」樣式,如果有混合的話合併後還是只有其中一種樣式,所以需要畫的時候就考慮清楚。

3)布爾運算的使用,就是題主問題中說到的相交和相加減,運用得當會省去很多麻煩。不過線性圖標一般都是2-3px的描邊,使用合併形狀的時候比較多,下面這種圖標經常用到布爾運算。

4)插件的使用。我平時經常用到Cornor Editor這個圓角插件,線形圖標很多地方用到圓角。這個插件不僅可以給圓角矩形之外的形狀添加圓角,還可以給自由變換後的形狀添加圓角。

5)多邊形工具的使用。多邊形工具中有一些比較實用的設置,就是平滑拐角,星形,以及平滑縮進。用這個畫五角星等很方便,還有題主圖中左邊的那個齒輪,就可以通過正六邊形設置這些參數,在修改一下凸起處的圓角就可以完成。

6)繪製帶缺口圖標的小技巧。像題主給出的圖那樣,很多線性圖標都有小缺口,這樣會比較活潑不死板。比如齒輪裡面那個圓,可以用下面的方法畫。
先畫一個橢圓:

在想要有缺口的地方添加錨點:

選中中間那個錨點,delete:

另外可以在描邊樣式裡面選擇帶圓角的描邊效果:

這樣缺口處也會有圓角,效果更統一:

當然如果是APP中2-3像素的線性圖標一點點圓角也分辨不出來,這個技巧適用比較大的圖標,或者在金融APP中會有一些環形圖表也能用得到。


有些小圖標用這個真的會起到神來一筆的效果


在矩形工具里畫,相加減,可以出來,一般像素畫3看起來舒服些


illustrator裡面畫基本圖形,然後剪切蒙版,再保存轉化成非矢量導入PS


鋼筆工具


圓角插件挺好用的


推薦閱讀:

Touch ID 的圖標是怎麼樣畫的?
圖標是否就是我們認為的這麼重要?
繪製 iOS 7 風格的 glyph 細線圖標有何技巧?
如何製作出 Webshocker 那樣風格獨特的寫實應用圖標?
為什麼災害預警會以顏色表示等級?

TAG:AdobePhotoshop | 圖標設計 |