平面設計之像素風城堡
Ai的「從到1」| 10次練習全面提升AI技巧
文章6Ai平面設計之像素風城堡
這是「MooDesign設計學堂」的
第006篇文章
歡迎點贊分享，謝絕擅自轉載。
本文是一篇簡單教學文章。
全文約4000字，閱讀時間約為15分鐘。
拍攝於澳大利亞 | 黃金海岸
Hello，又到周末啦！
大家這一周過得怎麼樣？工作、學習、球賽都順利嗎？還是先給大家帶來今周末的「世界盃賽程」：
- 6月22日 周五 -
20:00 | 巴西 vs 哥斯大黎加
23:00 | 奈及利亞 vs 冰島
- 6月23日 周六 -
02:00 | 塞爾維亞 vs 瑞士
20:00 | 比利時 vs 突尼西亞
23:00 | 韓國 vs 墨西哥
- 6月24日 周日 -
02:00 | 德國 vs 瑞典
20:00 | 英格蘭 vs 巴拿馬
23:00 | 日本 vs 塞內加爾
希望大家支持的球隊都可以取得好成績！希望阿根廷球迷保持樂觀堅強！理性看球，遠離菠菜
幾句閑話，
首先想要吐槽一下6月20號的這次微信公眾號更新。在大家更新了最新版本的微信後，會發現公眾號的界面相比之前有了很大的變動：現在大家點開公眾號對話框後，首先出現的不是之前的公眾號列表了，而是類似於微博或者Instagram這樣、按時間順序直接展示文章的「標題+頭圖」的方式。
這次改版對公眾號造成的影響可能要等上一段時間才能完全展現出來，不過就目前的狀況來看，微信無疑是要求各個公眾號提高自己的輸出質量。因為公眾號入口變得更淺，用戶可以更快速地看到自己所關注的內容。所以如果圖文的質量不夠或者不夠吸引人的話，就會對用戶造成一種負面的觀感，從而可能會導致一部分的用戶流失。
好的方面，這次改動使得圖文對視頻、語音等多媒體內容的兼容性更加完善。所以我們今後會在一如既往地高質量輸出的前提下，逐漸推出「動圖」和「視頻」教程喔，敬請期待！
言歸正傳，
在本周一的更新中，我們為大家帶來了「天空之城」的教程，不知道大家有沒有在課後練習呢？今天我們會給大家介紹「天空之城」的姊妹篇「像素風城堡」。
這一篇教程的靈感來源於我最近迷上的一款休閑手游「Will Hero」或者中文名「鐵頭英雄」。它的整體設計風格與之前大火的「Minecraft」類似，都採用了「像素風格」，給玩家營造出一種「簡明」「可愛」的氛圍。
在今天的教程中，我們會用到很多與上一期類似的繪製工具和方法，所以請還沒有看過上一期的同學，先走樓下的任意門：
「
」
好啦，讓我們打開Ai，開一包零食，教程馬上開始！
Ai平面設計之「城堡」
第一步：新建一個「800 * 600 px」的文檔。
第二步：基本設置。
這是我們每一次教程都要提及的。因為對於新同學來說，第一次使用Ai都要進行一些基本設置來確保之後繪製過程可以更加順利。
這些設置包括兩大部分：「視圖」和「窗口」。
在「視圖」菜單中，我們要勾選「智能參考線」並關閉預設的「對齊像素」設置。這樣可以讓我們更方便地「移動」「對齊」圖形。
在「窗口」菜單中，我標註出了一些常用的工具，大家也可以根據自己的習慣來自由設置。
第三步：添加一個淺藍色的背景。
步驟一：我們用「矩形工具」畫一個和畫布一樣大小的藍色矩形。
步驟二：在「圖層」界面里把當前圖層命名為「背景」並鎖定。
步驟三：最後再添加一個「新圖層」。
第四步：開始畫平台。
我們首先要給城堡畫一個平台。
步驟一：使用「矩形工具」畫一個「400 * 30 px」的矩形。
步驟二：給矩形上一個淺綠色。這裡我選擇的是「#91E904」。
第五步：豐富平台的細節。
這一步我們要為平台添加更多的細節。
步驟一：添加「高光」和「厚度」。這一步我們可以通過繪製一個稍大一點的矩形來完成。並把矩形染成略淺一些的綠色「#B4F900」。
步驟二：在平台左邊繪製一個小矩形，並染色為稍微深一些的綠色「#8DD307」。
步驟三：用平台自己的顏色「#91E904」沿著剛剛的矩形繪製一個高一些的矩形。
步驟四：同時選中平台和把剛繪製好的矩形，在「路徑查找器」中點擊「聯集」圖標，把它們合併在一起。
第六步：向下繪製山體。
在畫好平台後，我們首先繪製平台下方的山體。繪製的方法與我們上一期「天空之城」中介紹的方法類似。都是需要使用「鋼筆」工具來完成。
步驟一：選擇「鋼筆工具」，按圖中「1 - 2 - 3 - 4 - 1」的順序畫好這個山體。
步驟二：給山體塗上一個深藍色「#71C3C5」。
步驟三：把這個山體移動到最後方。「右鍵」點擊山體，在「排列」菜單中選擇「置於底層」。
第七步：繼續繪製山體。
這一步我們將繼續完善城堡底層的山體。繪製的方法和上一步中介紹的完全相同。
步驟一：使用「鋼筆工具」，按照「1 - 2 - 3 - 4 - 1」的順序畫出山體的輪廓。
步驟二：給它塗上一個深藍綠色「#46A4AA」。
步驟三：把山體移動到底層。
步驟四：在山體右側用鋼筆畫出一個小的「平行四邊形」，來表示山體的「厚度」，並上色為「#55BCBC」。
第八步：完成向下繪製山體。
這一步與上一步的繪製方法一樣。大家可以根據圖中的提示自己完成山體的繪製啦。
第九步：為山體添加陰影。
這一步是繪製山體中比較關鍵的一步。我們之前繪製的山體都是扁平的。而在這一步中，我們將通過添加陰影的方式使得山體更立體，更有層次。
我們首先要「全選」所有的山體，然後再頂部菜單的「效果」欄中，選擇「Illustrator 風格化」- 「投影」。
然後再「投影」對話框中，選擇：
「模式 | 柔光」，
「不透明度 | 75%」，
「X位移 | 2px」，
「Y位移 | 1px」，
「模糊 | 2.5px」，
「顏色 | 黑色」。
這樣我們每一塊的下方山體都可以自己的陰影啦。
第十步：畫塔樓。
塔樓是組成城堡的基本部分。我們在這一步中將要繪製出一個像素風個的塔樓，並把它放置在平台上。
步驟一：用「矩形工具」畫出一個長寬比大約為「1 : 3」的矩形作為塔樓的主體，並給它一個灰綠色「#D1EFD8」。
步驟二：在塔樓主體右側畫一個細長的矩形作為它的「厚度」。並使用一個稍淺的顏色「#EFFFE4」。
步驟三：用「矩形工具」在塔樓中間畫一個黑色矩形「#424031」作為窗子，並用「鋼筆工具」給窗子添加一個三角形陰影「#BDD7AF」。
步驟四：用「矩形工具」在塔樓牆壁上添加一些裝飾。顏色可以使用「#B7D6C0」和「#DDFFEF」等。
步驟五：畫出三個紅色矩形「#992900」，並把它們「水平居中對齊」在作為塔樓的屋頂。
步驟六：給屋頂添加一個「厚度」，顏色為稍淺的「#B12E01」。
最後，我們把屋頂和塔樓對接並使用「ctrl / command + G 編組」，再把它放置在平台上。
第十一步：繪製樹木。
繪製完塔樓後，我們在繪製一些像素風格的樹木。在這一步中，大家只需要熟練運用「矩形工具」就可以啦。具體的過程和使用的顏色可以參照下圖。
在繪製完樹木後，大家需要把它們分別編組，然後按照自己的喜好放置到平台上來。這樣我們的第一個浮島就繪製完成啦。
第十二步：繪製風車。
塔樓作為城堡的基礎，有著很強的可塑性。在第二個浮島中，我們將要把塔樓改造成一部風車。
步驟一：使用「矩形工具」繪製一個純白色的矩形作為風車的扇頁。
步驟二：在扇頁上添加一個紅色的矩形斑紋「#DB3A00」。
步驟三：繼續豐富紅色的斑紋。
步驟四：添加兩個藍色的斑紋，作用是去鏤空扇頁。
步驟五：選中兩個藍色斑紋和白色扇頁，在「路徑查找器」中點擊「減去頂層」按鈕。這樣就可以在扇頁上做出鏤空的斑紋啦。
最後，把扇頁和紅色斑紋全選後「編組」。
小tip：如果大家發現點擊了「減去頂層」後，之前的紅色斑紋都不見了的話，也不需要擔心。只用把白色扇頁「右鍵」-「排列」-「置於底層」即可。
第十三步：繼續繪製風車。
在繪製完扇頁後，我們要來繪製風車的六邊形轉軸。
步驟一：「長按 矩形工具」後，從下拉菜單中選擇「多邊形工具」，並建立一個半徑為「20px」的六邊形，給它一個灰綠色「#B7D6C0」。
步驟二：再畫一個稍小的六邊形，把它的「填色」設為「無」，「描邊」使用「#666666」的灰色。
步驟三：再繪製一個更小一些的圓形，「描邊」使用「#B3B3B3」的淺灰色。
步驟四：在轉軸的正下方繪製一個灰色矩形「#808080」。
步驟五：把剛才繪製好的扇頁拼接到灰色矩形上，並把它們「ctrl / command + G 編組」。
第十四步：完成風車的繪製。
這一步我們會用到之前介紹過的「旋轉工具」。
步驟一：選中已經「編組」的扇頁和灰色矩形。
步驟二：點擊「旋轉工具」後，扇頁中間會出現藍色圓圈的「旋轉中心」。我們按住「alt / option」鍵，使用滑鼠把「旋轉中心」拖動到「轉軸的中心」。
步驟三：出現「旋轉」對話框後，我們把「角度」設置為「120度」。並點擊「複製」。這樣就可以在轉軸的另一側複製出一個扇頁上。這時，我們直接按「ctrl / command + D」鍵，就可以重複剛才的操作，複製出第三片扇頁啦。
最後，我們把畫好的風扇「編組」，並和塔樓安置在一起。這樣我們第二個浮島也畫好啦。
第十五步：城堡。
城堡看似複雜，實現上它就是由若干個塔樓拼接而成的。這裡我們把它當成練習留給大家，大家可以根據自己的喜好組合出多種多樣的城堡！
第十六步：藍天。
其實藍天的繪製方法非常簡單，只需要把背景設置為「漸變色」即可。
步驟一：在「背景圖層」中，選中背景矩形，在「漸變工具欄」中點擊「漸變」。默認的漸變色為黑白漸變。
步驟二：把角度調整為「90度」。並把兩個端點的顏色分別設置為淡藍色。我選用的顏色是「#C8F5FE」和「#32DEFF」。
第十七步：白雲。
在上一期的「天空之城」中，我們為大家介紹了如何用「圓形」來組成出白雲的形狀。而這一期中，我們會使用矩形來完成「像素風的白雲」。
步驟一：先畫一個淺灰色矩形出來「#C9E8EF」。
步驟二：使用「alt / option + 左鍵拖動」的方式，複製出若干大小形狀不一的矩形。
步驟三：全選後在「路徑查找器」中點擊「聯集」按鈕將它們合併在一起。
步驟四：為白雲添加一個「厚度」，「#E6FAFD」。
最後一步：完成。
在畫好了多個浮島和藍天白雲後，我們就可以按自己的喜好把他們組合在一起啦。
希望大家喜歡我們這一期的「像素風城堡」教程喔！
最後的最後，請大家及時「保存」文件喔。
如果想要把畫好的盆栽導出，可以通過「文件」-「導出」-「導出為Web所用格式」實現。這裡我們選擇「PNG-24」格式，導出比例為100% - 800*600px，並勾選上「剪切到畫板」。之後點擊儲存就可以啦！
今日小結：
今天我們為大家介紹了如何繪製「像素風城堡」。
在今天的教程中，我們再次複習了「鋼筆工具」「路徑選擇器」和「旋轉工具好」的用法。請大家課後多多練習。
下期預告：
文章7 Ai的「從0到1」| 沙漠
TAG:MooDesign設計學堂 |