圖標設(shè)計,分享圖標設(shè)計流程及小技巧(3)

來源:站酷 作者:dooplus 學習:4693人次

圖標設(shè)計,分享圖標設(shè)計流程及小技巧_www.theoat.com.cn

路徑輪廓

我通常會先將筆觸轉(zhuǎn)路徑后,再進入 Photoshop 設(shè)定樣式。有些軟件也有這個功能,但是不多。對我來說,該功能是矢量編輯軟件必不可少的。

圖標設(shè)計,分享圖標設(shè)計流程及小技巧_www.theoat.com.cn

筆觸變量

在 Illustrator 中,我們可以對筆觸各個部位的寬度進行調(diào)整。

圖標設(shè)計,分享圖標設(shè)計流程及小技巧_www.theoat.com.cn

選擇寬度工具(shift-W),雙擊需要編輯的節(jié)點后,會出現(xiàn)控制面板供輸入數(shù)據(jù)精確控制寬度。該工具可以精準繪制出其它工具所無法繪制的圖形。

圖標設(shè)計,分享圖標設(shè)計流程及小技巧_www.theoat.com.cn

虛線

Illustrator 中的虛線有兩種模式——轉(zhuǎn)角對齊以及常規(guī)間隔。轉(zhuǎn)角對齊虛線總是看起來更舒服,然而多數(shù)設(shè)計軟件里并不包含這一選項。虛線可轉(zhuǎn)化為路徑后置入 Photoshop 中作后續(xù)編輯。

圖標設(shè)計,分享圖標設(shè)計流程及小技巧_www.theoat.com.cn

單個變換

在 Illustrator 中,同時對多個對象進行大小、旋轉(zhuǎn)角度及位移等調(diào)整是相當輕松的,并且它還能做到以每個單獨物體為單位進行上述各類調(diào)整。這個小小的功能可以為我們省去大量的時間和精力。

圖標設(shè)計,分享圖標設(shè)計流程及小技巧_www.theoat.com.cn

套索選擇

當選取框無法滿足復雜的選區(qū)時,套索工具可以做到?膳c按鍵結(jié)合使用套索工具:(加選), (減選)。

圖標設(shè)計,分享圖標設(shè)計流程及小技巧_www.theoat.com.cn

圖形樣式

為提高工作效率,我在 Illustrator 中設(shè)定了一些圖形樣式。如果你的圖標中含有很多圖形樣式相同的元素,這么做一定能幫你節(jié)省不少時間。

圖標設(shè)計,分享圖標設(shè)計流程及小技巧_www.theoat.com.cn

像素預覽

說實話,Illustrator 的像素預覽圖挺爛的,案例圖中顯示了它究竟是怎么個爛法——像素零散,沒有漸變遞色,等等這些都讓它的像素預覽無法令人信服。因為我最終會在 Photoshop 里進行樣式設(shè)定,所以 Illustrator 的像素預覽對我并沒有什么影響,但我們還是要對這一特點有所知曉。

大家可以在圖中看到 Illustrator 和 Photoshop 的像素預覽圖對比,差異相當明顯。

圖標設(shè)計,分享圖標設(shè)計流程及小技巧_www.theoat.com.cn

零星的像素是很危險的,iOS 和 OS X 界面圖像的規(guī)格須為精確成倍的數(shù)據(jù),所以一個圖像所多出的1個零散像素就會出現(xiàn)問題。

Photoshop 樣式設(shè)定

一旦完成圖標的路徑構(gòu)建后,我會將他們作為形狀涂層貼入 Photoshop。如果你有多個路徑,可以在 Illustrator 中將它們同時選中拷貝,在貼入 Photoshop 后仍可以分為單獨圖層。單獨選中一個路徑,并同時按??J鍵,即可將其移入一個新圖層。

輸出

我不建議通過 Illustrator 輸出位圖。

我亦不將 iOS 圖標存為 PDF 格式。

我使用 Photoshop 切片來輸出 PNG 格式或其他位圖格式。這一做法有諸多好處,譬如:可以選用一張需 10 秒載入的圖層,或是一整套需 100 秒載入的圖標;保持樣式的整體性;易編輯。(原作者另著有一篇應用設(shè)計流程,其中錄入了更多有關(guān)切片工具的詳情,如果童鞋們有興趣,小編可以進行后續(xù)編譯。)如果是輸出 SVG 格式,我通常結(jié)合使用 Photoshop 的生成器和 Illustrator。

學習 · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學就能學:ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
6782018-02-27 08:26
頂一下....
絲襪誘惑你2015-10-10 02:58
<蠟燭>
絲襪誘惑你2015-10-10 02:10
<蠟燭>
深海一點紅2015-07-16 01:42
謝謝老師的分享
深海一點紅2015-07-16 01:42
謝謝老師的分享
八月份的瑋巴2015-07-16 01:04
頂一下....
八月份的瑋巴2015-07-16 01:04
頂一下....
魔鬼般的善良2015-07-16 12:30
不太懂啊哎
魔鬼般的善良2015-07-16 12:30
不太懂啊哎
大風刮個2015-07-15 06:18
新手果斷過來看看~~
大風刮個2015-07-15 06:18
新手果斷過來看看~~
斷了的弦6542015-07-15 12:18
新手果斷過來看看
斷了的弦6542015-07-15 12:18
新手果斷過來看看
歌子小菜2015-07-15 10:51
我是來看隱藏的~·
歌子小菜2015-07-15 10:51
我是來看隱藏的~·

關(guān)注大神微博加入>>

網(wǎng)友求助,請回答!