02 youtube to mp3 買粉絲 app i買粉絲n設計說明(APP設計、i買粉絲n設計、UI設計之間有什么區別)

教你用Sketch設計超贊的I買粉絲n

本教程為翻譯教程，原文地址為：

買粉絲://買粉絲.sketchtips.info/articles/how-to-use-sketch-app-to-build-great-i買粉絲ns

雖然Sketch主要是設計用戶界面的軟件，可是用來設計i買粉絲n也同樣順手。這正是我們將要做的，我會一步步指導你設計出下面三個圖標。

我們首先按 A ，創建一個矩形畫板。在左側的 Layers List 里面將這個畫板命名為“ I買粉絲ns ”。不用太在意它的位置和大小，我們馬上來重新調整。首先，我們在右側的 Inspector 中輸入一些數值。將 Position 中的 XY 值都設為0，然后將寬度設為400，高度設為100。通過按 cmd+3來讓畫板到我們的視野中心，接下來按 cmd+0將畫板放大到100%。最后，按兩次 cmd+ +來得到更好的視野。

你只需要記住一個重要的原則： 盡量用基礎形狀來構成你的圖標，而不是使用向量工具。 這也是我們用來制作第一個圖標" Followers ”的原則。

第一步，按 O 鍵畫一個40*40的圓，按住 Shift 鍵確保它是正圓。現在，在它的下面，我們畫另一個圓，這一次不要按 Shift 鍵，因為我們需要一個50*75的橢圓。將這個橢圓拖拽到第一個正圓的附近（如截圖那樣）。

現在，我們還差一個矩形。按 R 鍵畫一個60*50的矩形，使之位于兩個圓形的正下方。將矩形的上邊與橢圓的中心對齊。

為了完成這個圖標，我們將用到 Sketch 中的布爾運算體系，它使得不同的形狀，能夠組成一個新的形狀。所以，現在把兩個圓形都選中（點擊其中一個，按住 Shift 后點擊另一個），然后按下工具欄中的“ Union ”按鈕。你能在左側的 Layer List 中看到它們已經組成了新的形狀。

但這還不是我們想要的呢，因為矩形還沒被減去。讓我們再次運用布爾運算吧：選擇剛剛合并的形狀，同時選擇矩形，按下工具欄中的“ Substract ”按鈕。這樣做之前，我希望你確保矩形圖層在合并的形狀圖層之上。

最后，將這個圖標的 Fill 去除，然后更改它的 Borders 。點擊整個圖標，將 Inspector 中 Fill 前面的勾勾點掉。之后，將描邊的位置改為 Inside 然后設置粗細值為5。噠噠，我們完成啦！

接下來我們制作“ Tweets ”圖標，這個圖標由一個對話框氣泡和三個位于中間的點構成。像之前一樣，畫一個70*50的圓。不過，光靠基礎形狀并不能構成所有圖標，我們現在需要修改這個圓形的向量點。點擊這個圓然后按 Enter （或者雙擊它）來進入向量編輯模式。在此模式中，你可以調整構成形狀的向量點。你能在這個圓上看到四個向量點，一邊一個，它們由小圓圈來表示。

不過我們不去改變預先設定好的點，取而代之，我們為這個圓增加一些新的點。光標在橢圓右下方的線段上盤旋時，你將看到這條線變成了藍色，按住cmd鍵，你將得到這段曲線的中點，點擊它，為這段曲線增加一個向量點。

這之后，在這個點的左右兩側各增加一個向量點。這時，你也許想要再按一下 cmd＋＋來獲取更好的視圖。現在，選擇我們添加的第一個點，將其向右下方拖拽。這樣我們就得到了想要的對話氣泡形狀。請注意，這個點由兩條線來控制，決定它的彎曲度。這里我們不需要任何弧度，我們只需要一個尖角，所以我們通過點擊 Inspector 中的第一個按鍵，將這個點改變為“ Straight ”點。

這樣對話氣泡就做好啦，但我們還需要添加一些點在它中間。但首先還是把  Fill 去掉，再增加 Border。我們先按 Esc 離開向量點編輯模式。把 Inspector 里面 Fill 前面的勾去掉，再像之前那樣設置邊框。現在我們來加小圓點吧！再次按下 O 鍵去畫一個12*12的正圓。點擊這個圓，按 Alt 之后拖拽一個它的副本在它右邊；再這樣做一次以得到第三個圓。現在你所需要的只是把這三個圓在氣泡形狀中分布開，然后移除它們初始的 Border。

現在我們來做第三個“ Following ”圖標。第一件事是按 U 來創建一個圓角矩形，同時按住 Shift 來確保它是正方形的。讓這個圓角正方形的大小為55*55，圓角半徑為10。和之前一樣，我們想把這個圓角正方形的 Fill 移除而換成 Border，這樣我們可以在里面添加一些什么。

我們會采用一個新的方法來繪制方形中的加號。我們按下 T 然后進入輸入模式，選擇一個清爽的字體，比如“ Avenir next bold ”，點擊矩形中間然后輸入“＋”。字號差不多是55。按 Esc 離開輸入模式，然后將加號移動到圖標的中間。最后將它轉變成一個形狀（選擇 Type>Convert Text to Outlines）。

圖標們基本上要完成了，但是我們還需要統一它們然后將默認的灰色換成更有生機的綠色。點擊所有圖標的外邊框，然后點擊邊框前面的小色塊來選擇一個你喜歡的綠色。之后，我們還需要將里面的部分也換成這個顏色。點擊里面的部分，然后點擊填充前面的小色塊來選擇相同的顏色。

到此我們就完成啦～

很赞哦!（832）