超能陸戰隊！手把手教你用Sketch繪制萌萌噠的大白

編者按：這部電影特別火，很多同學都特別喜歡這個萌萌噠大白同學，今天@JingDesign?來一篇應景的教程，手把手教同學們用Sketch繪制大白形象。想換個頭像？來感受下 >>>

木有Mac，裝不了Sketch？別怕，辦法在這：《用虛擬機體驗Sketch！為設計師準備的MAC OSX安裝指南》

Hi，靜電的Sketch教程好久沒和大家見面了，這段時間發生了好多事情，不過印象最深刻的就數電影《超能陸戰隊》了，片中的Baymax讓人印象尤為深刻。大白胖子在面前賣萌是不是很治愈呢？ 哦對，它不是胖，只是氣很足哦。那么先來個開場吧！

你好，我叫靜電，教你學Sketch的哦 ●—●

那么從1到10，你對大白的喜歡指數有多少呢？●—●

什么？100？好吧。萌化了有木有？ 那么我們用sketch來次挑戰，畫個白胖子吧！哦不對，只是氣很足（-_-|||）如果你還是Sketch初學者，建議去靜電的主頁看看Sketch的基礎教程先，不過大白怎么看起來都很容易畫對吧？來來來，跟靜電一起畫一個，通過這個練習，我們可以對Sketch的鋼筆特性有更深入的了解，首先看看靜電畫好的成品。

一、分析角色構成

大白很簡單，并沒有過多的光影效果，基本屬于純色。我們先將其分解，有幾部分：頭部，眼睛嘴巴，身體，胳膊，手指，還有一行文字。

二、頭部及眼睛

大白的頭部使用sketch的圓形工具即可實現，首先畫一個圓形，設置圖形的Fills與Borders的屬性如下圖所示（Fill的顏色：#FDFAEB，Border的顏色：#494949? ）：

將圓形壓扁，并使用鋼筆工具調整錨點，使它看起來更像“頭部”。要使用鋼筆工具，可以直接在圓形的邊框上雙擊鼠標，即可進入鋼筆編輯模式，這時鼠標會變成鋼筆形狀，分別點擊四個節點，并分別將其滑桿適當拉寬，注意保持圖形的對稱。調整完成，點擊屬性欄的Finish Editing或者按鍵盤上的回車鍵退出鋼筆模式。

再次選擇這個橢圓，在sketch的右側屬性欄中選擇Inner Shadows，點擊加號，為它加上內陰影，內陰影顏色為（#E3C6BE）。請注意屬性中X與Y的位置，如X值為正，則內陰影將出現在橢圓的左側，Y值依此類推。Blur為投影的模糊程度，這里我們不需要模糊，將其設置為0。Spread為陰影的寬度，數值越大，投影越大。

這時頭部輪廓已經完成，接著是眼睛和嘴巴，還有臉上的紅暈。使用圓形工具畫出眼睛，不需描邊，將其填充為純黑色#000000。接下來是嘴巴，使用鋼筆工具勾出線條，同樣調整節點使其看起來合適。

臉部紅暈為兩個橢圓，這里可以稍做的不規則一些。與頭部的畫法一樣，使用圓形工具Oval，不需描邊，填充顏色為#FF825B。然后將其壓扁。雙擊進入鋼筆編輯模式，調整四個節點的位置到合適。接著將頭部，和“五官”組合在一起，并調整圖層位置到你認為合適即可，最后使用旋轉工具（Rotate）將頭部適當傾斜。

三、繪制身體

同樣使用圓形工具繪制身體。同樣，身體也不是規則的橢圓形，首先繪制圓形，設定描邊顏色為#534B4A，寬度為13，填充顏色#FDFAEB。接著雙擊圖形進入鋼筆編輯模式，調整節點與杠桿，保證身體上部在畫布中正確呈現。

四、繪制胳膊及其手指

胳膊及手指是考驗我們使用鋼筆工具熟練程度的時候了。在這里我們推薦初學者將手指線條分段繪制，當然如果你對鋼筆工具足夠熟練，也可以將線條一次繪制完成。

四個手指及手臂的線條進行分解，得到下圖的元素。

較復雜的鋼筆操作，需要對sketch的鋼筆工具做更深入的了解。當我們點擊鍵盤上的快捷鍵V或者從工具欄選擇鋼筆工具時，即可進入路徑編輯模式，這時右側屬性欄會發生變化，請看下圖。

這四種方式代表節點的杠桿的四種使用形式，當使用鋼筆工具點擊曲線上的某個錨點時，調節杠桿即可出現。通過選擇合適的杠桿調節方式，即可繪制出不同的曲線。

Straight：不使用貝塞爾曲線。

Mirrored：使用貝塞爾曲線的鏡像模式，也就是調節時兩端的把手始終在一條直線上同時運動，并且兩端把手始終與錨點的距離相同。

Disconnected：與mirrored相反，選中它時，只有一個把手跟隨鼠標移動，另一個把手不動。

Asymmetric：不對稱。比Mirror少了一個特性，也就是說調節一個把手時，兩端的把手會同時運動，但他們距離錨點的距離可以不相同。

繪制完成，將所有這些元素組合成一個完整的手臂。但好像還有一點問題，由于線條是分散的，我們無法填充顏色，這時我們需要將他組合為一條路徑。選中你所繪制的所有手臂線條，接著選擇菜單Layer>Paths>Join即可完成組合。但貌似還是有點問題，我們發現線條結合處不夠平滑，選中線條，打開Boarder選項，將Ends及Joins工具設置為如下圖所示即可。請注意觀察線條末端，大家應該可以看出變化來了。

五、組合所有元素

將所有元素組合并進行大小，角度的調節，可愛的大白就繪制完成了。接著我們可以換上自己喜歡的背景及文字，快拿出來炫耀吧~很有成就感是不是，來個棒棒糖吧！贊！

最終效果：

源文件 ?微盤下載

靜電的Sketch教程合集持續更新中：

1. 《SKETCH設計教室！從零開始學APP設計利器SKETCH（一）》
2. 《SKETCH設計教室！從零開始學APP設計利器SKETCH（二）》
3. 《SKETCH設計教室！帶你了解超好用的SKETCH插件》
4. 《想要一稿過不加班？SKETCH絕配神器MIRROR搶先體驗》

靜電的Xcode教程合集持續更新中：

1. 《搞定一像素不求人！為設計師量身打造的XCODE教程（1）》
2. 《搞定一像素不求人！為設計師量身打造的XCODE教程（2）》
3. 《零代碼搞定交互動畫！為設計師量身打造的XCODE教程（3）》
4. 《搞定Tab bar交互！為設計師量身打造的XCODE教程（4）》

作者：@JingDesign

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量91萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：