小工具是讓客戶記住您的品牌、產品或服務的好方法。事實上,它們甚至可以提供比應用程式本身更簡化的使用者體驗。而且我們有好消息。使用 Sketch 建立小工具很容易!
在本系列中,我們將教您如何為天文應用程式建立一個吸睛的小工具。為此,我們將設計一個星空夜景。以下是您將製作的內容的快速概覽

小工具允許行動使用者無需開啟應用程式即可獲取資訊。
透過本教學,您將學習如何建立背景、使用符號來填充您的小工具,以及使用智慧佈局來確保您的內容自動調整大小以適應響應式小工具的不同版本。
準備好了嗎?讓我們開始吧!
一切從背景開始
每個小工具都需要一個背景,因此我們將設計一個符合我們天文主題的夜空背景。首先,建立一個矩形的畫板,並賦予它一個深藍色背景。
使用 A 快速鍵建立畫板,使用 O 快速鍵建立橢圓形。
現在,是時候加入星星了。建立一個 2x2 的橢圓形,並賦予它淺灰色的填色。然後,前往檢查器中的「陰影」區段 — 就在「填色」下方 — 並新增幾個白色陰影,讓我們的星星發光。您可以隨時點擊區段右上角的「+」號來新增更多陰影。
我們把星星做得比需要的稍大一些,以便您可以清楚地看到變化。
我們的星星看起來已經很不錯了!但讓我們更進一步。讓我們新增一個內部白色陰影,並將擴散設定為 0.25,以使其呈現發光的外觀。如果您看不到它,別擔心。它將在後續步驟中變得生動!現在,點擊混合模式圖示 並選擇「加亮」來柔化陰影。
變化很細微,但很快就會產生明顯的效果。
使用顏色
現在,這裡有一個在 Sketch 中使用顏色的方便技巧。在我們一直在處理的星星上按一下滑鼠右鍵,然後選擇「群組選取」。您會注意到檢查器上的選項已更改。您現在可以透過在檢查器中找到「色調」區段來為您的星星新增顏色。色調非常適合用於具有不同不透明度的元素,因為色調將為群組中的所有內容著色,包括任何填色、邊框、陰影等 — 一步到位。

在這裡,我們建議使用淺色,例如長春花藍(#CCCCFF),以保持星星的外觀。新增色調後,您將能夠看到「加亮」內部陰影如何為您的星星新增明亮的邊緣。
在處理高光和陰影時,「加亮」和「加深」是很棒的混合選項,因此請隨時在您的設計專案中嘗試使用它們!
完成星星後,您現在可以開始填充您的天空了。根據需要多次複製群組,並將您的星星排列在畫板上。請務必改變顏色和大小,使其更具動態感。
當你完成星星的散佈後,讓我們加上最後的點綴:一顆北極星。要創造這顆更閃亮的星星,選一個你最喜歡的星星,並將它的大小加倍。現在,在橢圓形上畫一個 X,加上兩條延伸到橢圓形外的細斜線。為了讓它發光,將這些線條組合在一起,並給它們一個白色的放射狀漸層。

漸層的中心應該是完全不透明的,而邊緣則幾乎是透明的。最後,加上「加亮」的混合模式。噠啦!現在你就有了一顆漂亮、閃耀的星星。
接下來呢?
我們的背景已經準備好了!在下一篇文章中,我們將學習如何處理小工具的其餘元素,例如文字和按鈕。你也會學到關於「符號」的知識,這是一個方便的 Sketch 工具,可以用於處理想要一次更新的重複元素。到時候見。