Sketch 設計iOS App Icon 簡易教學

本教學簡易的演示,如何利用sketch產出app內的icon,及app icon。其中,各icon的素材皆來自網路免費資源。

打開sketch後,選擇New Document

進入sketch後,選擇“Artboard”,點下後,到畫面中央隨意圈選出想要的大小,此即後續做圖的位置,可想像為畫布。

在上面網站免費資源內,下載任一svg檔案,拖曳入Artboard中

此時畫面上為放入的任一圖案,還需加上一個底圖,當作整個icon。點擊新增 -> shape -> rectangle (若為app icon要選rectangle,app 內的icon可任選)

選擇完後,框岀任一位置包住圖案。

在sketch內的layer階層概念與iOS中的layer階層概念雷同,一個一個疊加上去。目前新增的rectangle最為靠近使用者,因此擋住了下方的圖案,由左手邊的階層圖可看出。

將其拖曳到最下方,即可顯示出下方圖案

點擊最上方的資料夾,代表選取了整個圖案,包含rectangle。

在最右方,若打算製作App Icon,則將size調為1024 * 1024,若打算製作App內的icon,則將size調整為44 * 44。

p.s. 旁邊的鎖頭鎖起來,可維持固定比例,避免拉伸時跑掉比例。

調整完大小後,點選rectangle,在右方顯示出color,可開始調整顏色。

點選其他的layer,也可修改其顏色

一切完成後,這就是app icon了,此時點選右下角的”Make Exportable”。

p.s. 要點選整張圖

若為App Icon,選擇1x即可,若為App內icon,則點選右上方“+”,加入1x, 2x, 3x,接著輸出即可。

輸出後,確認為設定的size,可使用在App icon上,再將其丟入prepo,輸出所有大小,接著拉進xcode內即可。

以上,本教學示範如何使用網路免費素材,快速生成App Icon,及App內icon,其餘的功能就留給大家玩囉~