圖標(biāo)設(shè)計(jì),分享圖標(biāo)設(shè)計(jì)流程及小技巧

2023-11-22 17:12:46 來(lái)源/作者: / 己有:1人學(xué)習(xí)過(guò)

圖標(biāo)設(shè)計(jì),分享圖標(biāo)設(shè)計(jì)流程及小技巧

路徑輪廓

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

圖標(biāo)設(shè)計(jì),分享圖標(biāo)設(shè)計(jì)流程及小技巧

筆觸變量

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

圖標(biāo)設(shè)計(jì),分享圖標(biāo)設(shè)計(jì)流程及小技巧

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

圖標(biāo)設(shè)計(jì),分享圖標(biāo)設(shè)計(jì)流程及小技巧

虛線

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

圖標(biāo)設(shè)計(jì),分享圖標(biāo)設(shè)計(jì)流程及小技巧

單個(gè)變換

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

圖標(biāo)設(shè)計(jì),分享圖標(biāo)設(shè)計(jì)流程及小技巧

套索選擇

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

圖標(biāo)設(shè)計(jì),分享圖標(biāo)設(shè)計(jì)流程及小技巧

圖形樣式

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

圖標(biāo)設(shè)計(jì),分享圖標(biāo)設(shè)計(jì)流程及小技巧

像素預(yù)覽

說(shuō)實(shí)話,Illustrator 的像素預(yù)覽圖挺爛的,案例圖中顯示了它究竟是怎么個(gè)爛法——像素零散,沒(méi)有漸變遞色,等等這些都讓它的像素預(yù)覽無(wú)法令人信服。因?yàn)槲易罱K會(huì)在 Photoshop 里進(jìn)行樣式設(shè)定,所以 Illustrator 的像素預(yù)覽對(duì)我并沒(méi)有什么影響,但我們還是要對(duì)這一特點(diǎn)有所知曉。

大家可以在圖中看到 Illustrator 和 Photoshop 的像素預(yù)覽圖對(duì)比,差異相當(dāng)明顯。

圖標(biāo)設(shè)計(jì),分享圖標(biāo)設(shè)計(jì)流程及小技巧

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

Photoshop 樣式設(shè)定

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

輸出

我不建議通過(guò) Illustrator 輸出位圖。

我亦不將 iOS 圖標(biāo)存為 PDF 格式。

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