Sketch 設計iOS App Icon 簡易教學

Jerry Wang
Jul 18, 2017 · 5 min read

本教學簡易的演示,如何利用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,其餘的功能就留給大家玩囉~

Jerry Wang

Written by

Software Developer / jeerywa@gmail.com https://www.linkedin.com/in/jeerywa/

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade