填充、輪廓

這個(gè)節(jié)點(diǎn)，本教程為你準(zhǔn)備了必須的素材文件。打開(kāi)之后應(yīng)該長(zhǎng)這樣：

這套包含了單個(gè)示例和矢量圖標(biāo)的素材方便你隨時(shí)查閱，這些素材都是在教程前后使用的。

Tab Bar的圖標(biāo)顏色變化是基于選中狀態(tài)，但是一些圖標(biāo)有太多的空間，所以顏色變化太微妙。在這種情況下，蘋果的人機(jī)界面指南推薦使用單獨(dú)填充版本作為selectedImage。RWDevCon應(yīng)用的樣本都有各自的Tab Bar獨(dú)立版本。

在剛才下載的素描文件里，有一個(gè)被稱為日歷入門的畫板，日歷圖標(biāo)其中包含幾個(gè)幾何圖形合并的而來(lái)的圖標(biāo)。就是一些簡(jiǎn)單的幾何圖形拼湊而已，前面已經(jīng)很好的演示過(guò)來(lái)。 下面我們來(lái)創(chuàng)建日歷圖標(biāo)：

• 1.打開(kāi)剛才的Sketch文件，在左側(cè)圖層列表展開(kāi)日歷入門 - Calendar Starter畫板。
• 2.選中日歷主體 - Calendar Body部分和分割線 - Separator部分。
• 3.使用相差 - Subtract功能。
• 4.按住Shift再選中Right Hole圖層，還是使用相差 - Subtract功能。
• 5.同理，再把Left Hole圖層也重復(fù)上述步驟。
• 6.接著按住Shift再選中Right Ring圖層使用融合 - Union功能。
• 7.同理，Left Ring圖層也這么照做。

通過(guò)相差和融合操作，現(xiàn)在的日歷入門的畫板上就只剩一個(gè)包含了剛才所有圖層的單圖層了，一切都看著泛綠。如果按照上述步驟操作之后和效果圖有什么出入，可以參照畫板下方的實(shí)例對(duì)照。 現(xiàn)在，來(lái)搞一個(gè)填充的圖標(biāo)。是時(shí)候重新調(diào)整一下，讓其看起來(lái)像示例版本了。

• 1.在畫布上找到日歷填充 - Calendar Fill。
• 2.在圖層列表里展開(kāi)日歷填充 - Calendar Fill。
• 3.再展開(kāi)日歷主體 - Calendar Body圖層，并選擇分割線 - Separator圖層。
• 4.把分割線 - Separator圖層高度設(shè)置為35即可。

調(diào)整分割線高度的時(shí)候，Sketch不會(huì)有明確的高度指示，所以你可以選擇直接輸入數(shù)值。