AI巧用完美像素法制作一幅精致的紋理效果城市插畫教程

飛特網(wǎng) 發(fā)布時(shí)間：2018-03-01 12:24:57 作者：葉碉堡了

本教程教腳本之家的Illustrator教程學(xué)習(xí)者在AI中如何巧用完美像素法制作一幅精致的紋理效果城市插畫，教程很詳細(xì)，打造的城市插畫紋理效果非常棒，感興趣的朋友歡迎前來一起分享學(xué)習(xí)

AI如何巧用完美像素法制作一幅精致的紋理效果城市插畫，教程一步步講解的很詳細(xì)，運(yùn)用完美像素法，加上一些基礎(chǔ)形狀，再添加顆粒效果來制作這幅城市插畫，主要分為創(chuàng)建背景、創(chuàng)建寶麗來照片堆疊效果、在右側(cè)創(chuàng)建建筑、在左側(cè)創(chuàng)建建筑、創(chuàng)建橋梁、創(chuàng)建云等9大步驟，好了，話不多說，下面讓我們一起去看看具體的制作步驟吧！

版權(quán)申明：本文原創(chuàng)作者“葉碉堡了”，感謝“葉碉堡了”的原創(chuàng)經(jīng)驗(yàn)分享！

效果圖：

自譯外文原作者：Andrei Stefan

全文字?jǐn)?shù)：3494，預(yù)計(jì)閱讀時(shí)間：11分鐘

Hello guys!

Welcome to Superyeah's Study Room.

Sit down, and have fun!

前言

首先給大家拜個(gè)晚年，新年快樂！

年后第一篇文章，接著上一期分享的"完美像素圖稿法"，今天給大家分享一篇實(shí)戰(zhàn)插畫教程，運(yùn)用完美像素法，加上一些基礎(chǔ)形狀，再添加顆粒效果，一幅精致的紋理插畫就出爐了~開始今天的練習(xí)吧。

主要過程：

1.新建文檔

打開你的Adobe Illustrator，第一步：Ctrl+N新建文檔，建一個(gè)800*600的RGB文檔即可，如圖。

2.設(shè)置自定義網(wǎng)格

使用快捷鍵Ctrl+K，打開首選項(xiàng)。

第一步："常規(guī)"里的鍵盤增量設(shè)置為1px，"參考線和網(wǎng)格"里的最后兩項(xiàng)都設(shè)置為1，如圖。

第二步：點(diǎn)擊頂欄菜單上的"視圖"，勾選"對(duì)齊網(wǎng)格"。

關(guān)于完美像素的工作流程，可以再閱讀這篇文章AI大法 | 完美像素圖稿法，通過學(xué)習(xí)大神總結(jié)的實(shí)用方法，來拓寬你的設(shè)計(jì)技能。

3.設(shè)置圖層

一旦我們完成了我們的項(xiàng)目文件的設(shè)置，使用幾個(gè)圖層來構(gòu)建我們的文檔將是一個(gè)不錯(cuò)的主意，因?yàn)檫@樣我們就可以一次關(guān)注插圖的一個(gè)部分，從而保持穩(wěn)定的工作流程。

這就是說，調(diào)出圖層面板（窗口-圖層）并共創(chuàng)建三層，我們將重新命名如下：

第1層：背景

第2層：照片

第3層：城市

4. 創(chuàng)建背景

點(diǎn)擊背景圖層右邊那個(gè)圓圈（見上圖），圓圈會(huì)變成圓環(huán)，確保你現(xiàn)在是在背景層，然后我們就可以開始創(chuàng)建背景了。

步驟1

創(chuàng)建一個(gè)800 x 600px的矩形，我們將使用該顏色#FFF8F0，然后使用"對(duì)齊"面板的水平和垂直對(duì)齊中心選項(xiàng)將其對(duì)齊到畫板。

步驟2

復(fù)制該矩形（選中矩形，Ctrl+C復(fù)制，再Ctrl+F粘貼到上層），將復(fù)制出的矩形的顏色更改為#808080。然后，在頂部菜單欄找到"效果"，點(diǎn)擊"紋理"，選擇"顆粒"，在彈出框中，設(shè)置強(qiáng)度為40，對(duì)比度50，顆粒類型為噴灑。

步驟3

調(diào)整顆粒層的混合模式，我設(shè)置的是"疊加"，原作者是"柔光"，葉哥個(gè)人認(rèn)為這個(gè)顏色用柔光會(huì)顯得太淡，顆粒效果不明顯，這個(gè)大家可以自己試一下，選一個(gè)你喜歡的效果就好。

步驟4

鎖定背景層，然后進(jìn)入下一個(gè)圖層。如何鎖定？直接點(diǎn)擊下圖眼睛右邊那個(gè)位置，出現(xiàn)鎖的圖標(biāo)就代表鎖定好了。如何進(jìn)入下一個(gè)圖層？之前不是給你說了的嗎，點(diǎn)圈圈呀。

5.創(chuàng)建寶麗來照片堆疊效果

首先確保你已經(jīng)選中了照片層，這樣我們才能進(jìn)行下一步，就是寶麗來照片堆疊效果哦。

步驟1

使用360x460px矩形創(chuàng)建底部寶麗來的主要形狀，設(shè)置顏色為#E8D4BF，然后將其放置在畫板中心。

步驟2

使用旋轉(zhuǎn)工具（右鍵單擊>變換>旋轉(zhuǎn)> -8像素）順時(shí)針旋轉(zhuǎn)角度為8º，調(diào)整剛創(chuàng)建的形狀。

步驟3

為該矩形創(chuàng)建顆粒層（回顧一下之前在背景層的操作），顆粒層的顏色為#666666，不透明度為40%，這次混合模式我用的"柔光"。

步驟4

創(chuàng)建一個(gè)380x480px的矩形（#333333），使其位于畫板中心，將其混合模式設(shè)置為柔光并將其不透明度設(shè)置為64％，添加顆粒效果，同時(shí)選中矩形和顆粒層右擊選擇編組，快捷鍵Ctrl+G，作為頂部寶麗萊投影的陰影。

步驟5

這一步我們需要?jiǎng)?chuàng)建"剪切蒙版"了，我這里只講操作，零基礎(chǔ)的同學(xué)之后可以百度一下AI中的剪切蒙版了解概念。

選中下方那個(gè)傾斜的矩形，先Ctrl+C復(fù)制，Ctrl+F粘貼，再Ctrl+Shift+]移至頂層（AI中遮罩層需要在頂層）。同時(shí)選中復(fù)制出的這個(gè)形狀和第四步中的打組的圖層，右擊選擇"建立剪切蒙版"，快捷鍵是Ctrl+7，這時(shí)黑色區(qū)域就被傾斜矩形遮罩了，多余的邊角被剪切進(jìn)蒙版了。

步驟6

創(chuàng)建360x460px的矩形，顏色#FFEED9，居中畫板。完成后，鎖定畫板。

6. 在右側(cè)創(chuàng)建建筑

現(xiàn)在咱們終于可以進(jìn)入城市建筑的繪制了！有沒有很興奮，你就快要擁有一座自己的完美小城市啦。

步驟1

創(chuàng)建280x340px的矩形作為背景，我們將在其上應(yīng)用線性漸變，左側(cè)#F9C958，右側(cè)#F97E58。將角度設(shè)置為90º，根據(jù)下圖標(biāo)注的數(shù)據(jù)定位。

步驟2

創(chuàng)建112x112px的圓作為太陽，顏色#FFD18D，放在距離底邊中心16px的位置。

步驟3

創(chuàng)建108x112px的矩形作為第一個(gè)建筑，顏色#E87D60，然后對(duì)齊到漸變圖層的右下角，開始在建筑物上工作。

步驟4

使用七行五個(gè)12x8px矩形（#BA473C）添加窗口，將它們沿水平和垂直方向彼此隔開8 px。然后將它們編組（Ctrl+G）并將它們放置在建筑物中，如圖。

步驟5

創(chuàng)建112x12px的矩形（#FFEDD7）作為屋頂，在其上添加兩個(gè)112x2px的水平細(xì)節(jié)線（#BA473C），垂直堆疊2 px，并且從較大形狀的頂部邊緣垂直堆疊。將所有三種形狀編組，將它們放置在當(dāng)前建筑物的頂部。

步驟6

分別創(chuàng)建一個(gè)20×20px、4×36px、8×8px、16×16px的矩形，然后打組，放在樓頂。

步驟7

創(chuàng)建68x104px矩形作為主體，開始制作下一座建筑物，顏色#FFE5C0 ，然后將其放置在如圖位置。

步驟8

使用12個(gè)68x4px的矩形（#BA473C）作為窗口，垂直堆疊4px，Ctrl+G打組，然后將它們對(duì)齊到較大矩形的底部。

步驟9

將這座建筑整體打組，確保將它們放置在底部天線的下方（右鍵點(diǎn)擊>排列>后移一層），然后進(jìn)入下一步。

步驟10

創(chuàng)建20x52px的矩形，顏色#CCCCCC，位置如圖所示。

步驟11

創(chuàng)建8x52px的矩形, 顏色#BA473C，放在灰色矩形的右側(cè)。

步驟12

使用6個(gè)12x4px的矩形（#BA473C）作為窗口，垂直堆疊4px，Ctrl+G打組，然后將它們放在建筑物底部。

步驟13

分別創(chuàng)建一個(gè)8x8px和一個(gè)2×8px的矩形，顏色#BA473C，作為建筑物的頂部，完成后將該建筑整體打組。

步驟14

創(chuàng)建52x56px的矩形，顏色#DDD4C8，放在最高建筑的頂部。

步驟15

使用12x56px的矩形（#BA473C）作為建筑物的硬陰影，放在灰色矩形右側(cè)。

步驟16

使用4個(gè)4x56px的矩形（#BA473C）作為窗口，水平堆疊4px，Ctrl+G打組，然后將它們放在如圖位置。

步驟17

分別創(chuàng)建20x8px、8×4px、2×16px的矩形，顏色#BA473C，放在建筑物的頂部如圖位置，完成后將該建筑整體打組。

步驟18

畫一個(gè)顏色為#BA473C的起重機(jī)作為點(diǎn)綴，具體參數(shù)可以參考葉哥畫的，也可以自由發(fā)揮。畫藍(lán)色圈處，我繪制時(shí)出現(xiàn)了無法對(duì)齊的情況，但我采取了布爾運(yùn)算和錨點(diǎn)調(diào)整的方式，如果大家遇到同樣的問題，不要太糾結(jié)，能實(shí)現(xiàn)效果即可。

右側(cè)的建筑我們就已經(jīng)完成了！

7. 在左側(cè)創(chuàng)建建筑

右側(cè)建筑看似復(fù)雜，實(shí)際上操作起來十分簡單，左側(cè)同樣如此，讓我們一起來看一下吧。

步驟1

創(chuàng)建172x36px的矩形，顏色#FFE5C0，放在漸變背景的左下角。

步驟2

使用12x36px的矩形（#BA473C）作為建筑物的硬陰影，放在上一步中矩形的右側(cè)。

步驟3

使用4個(gè)160x4px的矩形（#BA473C）作為窗口，垂直堆疊4px，Ctrl+G打組，然后將它們放在如圖位置。

步驟4

創(chuàng)建一個(gè)96x16px的矩形（#FFEDD7）作為建筑物的上半部分，在其上我們將添加三個(gè)96x2px的矩形（#BA473C），它們彼此垂直堆疊2px。打組，并將形狀定位在下半身的頂部，之后對(duì)整個(gè)建筑物進(jìn)行相同的操作。

步驟5

創(chuàng)建76x140px的矩形，顏色#CADDCF，然后將其放置在剛剛完成的矩形的頂部。

步驟6

使用16個(gè)8x4px的矩形（#BA473C）作為窗口，相互之間水平和垂直間隔4px，Ctrl+G打組，然后將它們放在如圖位置。

步驟7

通過添加水平參考線，使用兩個(gè)垂直堆疊2px的76x2px的矩形（#BA473C）來添加細(xì)節(jié)，打組，然后將其放置在距離其頂邊2px的位置。慢慢來，完成后整體打組，確保將其放置在底部下方（右鍵單擊>排列>后移一層）。

步驟8

創(chuàng)建32x88px的矩形, 顏色#CCCCCC，位置如圖所示。

步驟9

使用10x88px的矩形（#BA473C）作為建筑物的硬陰影，居中對(duì)齊到建筑物的左邊。

步驟10

使用3個(gè)4x88px的矩形（#BA473C）作為窗口，它們彼此水平間隔2px，打組，然后將其放置在距離陰影2px的位置。

步驟11

分別創(chuàng)建12x8px、6×8px、2×12px的矩形，顏色#BA473C，放在建筑物的頂部如圖位置，打組。慢慢來，一旦你完成了，整個(gè)建筑物也要這樣做。

步驟12

創(chuàng)建56x100px的矩形，顏色#E87D60，位置如圖所示。用"直接選擇工具"選中它的右上角錨點(diǎn)，按住shift的同時(shí)按鍵盤"下"鍵，使錨點(diǎn)下移10px。

步驟13

使用10個(gè)56x4px的矩形（#BA473C）將窗口彼此垂直堆疊4px，打組，然后放置在與前一個(gè)形狀的底部相距4px的位置。

步驟14

創(chuàng)建48x20px的矩形，顏色#BA473C，作為建筑物的上半身，然后將其放置在建筑物主體的后面（右鍵單擊>排列>后移一層）。

步驟15

分別創(chuàng)建12x8、16×12、2×32、4×12px的矩形，顏色#BA473C，作為建筑物的頂部，打組，放置在如圖位置，然后整個(gè)建筑打組。

步驟16

通過使用幾種#BA473C顏色的形狀快速創(chuàng)建水塔，完成當(dāng)前的城市部分，具體數(shù)值大家根據(jù)圖上規(guī)律自行設(shè)定哈，完成后打組。

8. 創(chuàng)建橋梁

一旦我們完成了建筑物的工作，我們可以將我們的重點(diǎn)轉(zhuǎn)移到我們插畫的中心，在這里我們將創(chuàng)建橋梁。

步驟1

首先創(chuàng)建橋墩，使用兩個(gè)4x24px的矩形，顏色#BA473C，水平間隔18px，打組，然后將它們放置在城市中心，如圖所示。

步驟2

創(chuàng)建64x4px的矩形，顏色#BA473C，作為橋身，放置在橋墩上面。

步驟3

創(chuàng)建64x2px的矩形，顏色#BA473C，作為水平支撐部分，距離橋身2px。

步驟4

創(chuàng)建2個(gè)64x48px的橢圓，顏色#BA473C，由填充變?yōu)槊柽?，描邊大小?px，橢圓相切，距離橋身8px。選擇"直接選擇工具"，選中不要的錨點(diǎn)，delete刪除。最后Ctrl+J連接中間那個(gè)錨點(diǎn)（如果這一步你不能理解，那你可以直接打組）。