keywords:AI插畫技巧,零基礎(chǔ)插畫,哈利波特主題圖標(biāo),專屬圖標(biāo)設(shè)計,AI插畫教程

教程效果圖

教程步驟

步驟一：繪制草稿

根據(jù)哈利波特里面主要元素結(jié)合游戲的形式，進(jìn)行草稿制作。

步驟二：新建文檔

打開Adobe Illustrator，點擊文件->新建（快捷鍵Ctrl+N），創(chuàng)建一個新文件，參數(shù)設(shè)置如下：

圖標(biāo)一：魔法棒-冒險圖標(biāo)

思路：哈利波特里面標(biāo)志性的物品-魔杖，結(jié)合使出魔法的氣息，會更加靈動性。但為了權(quán)衡每個圖標(biāo)的比重關(guān)系，單單一個魔杖還是太細(xì)小了，因此加上哈利波特最有標(biāo)志性的死亡圣器，將魔杖豎放，剛好對應(yīng)的是死亡圣器中間的豎線魔杖標(biāo)志。

1. 先繪制一個89*63px的矩形，無填色，描邊為1pt，顏色為#ffce00；使用小白工具（直接選擇工具）將左右上角往中間點移動得出一個等邊三角形。

2. 在三角形中間添加一個41*41px的正圓，再使用直線段工具繪制一條直線，便能得出下圖死亡圣器的形狀。

3. 繪制一個7*104px的矩形，在矩形下方使用鋼筆工具增加兩個錨點，使用小白將錨點往里面移動，再將四個圓角往內(nèi)拉，得出下圖魔杖的外形。

4. 在繪制幾個形狀不一的圓，使用路徑查找器的交集，便能得出以下的圖。

5. 接下來繪制陰影和光影，使用鋼筆工具在魔杖對半的位置畫個形狀出來，再全選，使用形狀生成器將右邊不要的部分按alt鍵del掉。

6. 接下來，選中右邊陰影部分的形狀，添加外觀，混合模式為正片疊底，不透明度為70%（里面的圖標(biāo)陰影部分均一樣）。

7. 光影部分也跟投影的操作是一樣的，在左邊使用鋼筆工具繪制一個大概的受光面，全選使用形狀生成器將不要的部分按alt鍵del，再點擊外觀，混合模式為濾色，不透明度為50%（里面的圖標(biāo)光影部分?jǐn)?shù)值均一樣）。

8. 最后繪制魔法，使用鋼筆工具勾勒出一個大概的形狀，顏色為#dcbdff，降低不透明度80%，使得有魔法的氣息。選中魔杖和魔法點擊形狀生成器，分別在往下數(shù)第一個第三的轉(zhuǎn)彎處截斷，如右下圖黃色箭頭往上拉。最后將魔杖和魔法右鍵編組放在死亡圣器上就好啦。

圖標(biāo)二：魔法書-任務(wù)圖標(biāo)

思路：魔法課的書籍再結(jié)合哈利的眼鏡作為標(biāo)志，會比較能體現(xiàn)這一系列的ip。

1. 繪制三個矩形，分別為12*52px，45*52px，57x15px,顏色為#995936

2. 使用直接選擇工具+鋼筆工具移動錨點，得到以下形狀。

3. 選中下邊的形狀，點擊對象-路徑-偏移路徑-位移-2px，顏色為#d89f79.

4. 接著是邊角套，繪制兩個7*24px的矩形，和一個14*14的正圓，拼在一起全選使用路徑查找器的聯(lián)集。按住alt鍵可復(fù)制一個到右下角。邊角套就完成啦。

5. 然后繪制哈利波特的眼睛，繪制兩個35*35的正圓，無填充，描邊為2pt，顏色為#ffce00，在兩個圓中間使用鋼筆工具連接一起即可。

6. 最后繪制光影啦！

7. 繪制暗部和亮部方法跟上面的圖標(biāo)是一樣的，分別在書的右面，書的下面，眼鏡添加陰影。

眼鏡的投影可ctrl+c復(fù)制一個，右鍵排列->后移一層，將描邊顏色改為書的顏色再添加外觀就好啦。

圖標(biāo)三：行李箱-背包圖標(biāo)

思路：哈利每一次回霍爾沃茲學(xué)院的行李箱很適合作為游戲圖標(biāo)內(nèi)的冒險背包圖標(biāo)~

1. 先繪制一個100*64px的矩形，顏色為#d89f79，為行李箱的面。

2. 再繪制4個顏色為#995936的邊角，可使用鋼筆工具勾勒，接著是每個邊角都繪制兩個顏色為#d89f79的正圓，并加上內(nèi)陰影，內(nèi)陰影部分需復(fù)制兩次本身的圓，最上面復(fù)制的圓往左側(cè)移動一點，選中兩個圓按路徑查找器的減去底層，便得到一個月亮形狀，給它添加外觀，正片疊底->70%不透明度即可。

3. 使用鋼筆工具繪制把手顏色為#995936；繪制三個矩形顏色#c28c5e的開關(guān)按鈕。

4. 繪制兩個顏色為#995936的矩形；使用鋼筆工具繪制顏色為#c28c5e的行李箱帶子；

5. 使用圓角矩形繪制一個無填充，描邊為3pt、顏色#995936的扣子，和填充色#995936、描邊為1pt、顏色#7d5219的扣子釘。

6. 接著是哈利波特的標(biāo)志，底框為#ffce00，“H”#72321c，可使用鋼筆工具或者矩形疊加后聯(lián)集。（關(guān)于形狀疊加聯(lián)集方式詳情可看步驟二~）

7. 最后是投影部分！

方法也是跟前面的一樣，在背光面使用鋼筆工具勾勒出投影，再使用形狀生成器按alt鍵del就可以了。

圖標(biāo)四：徽章-成就圖標(biāo)

思路：哈利波特所在的格蘭芬多學(xué)院，顏色主要以紅黃搭配，由于畫獅子很復(fù)雜，游戲小小的圖標(biāo)不易于有太多細(xì)節(jié)，因此直接簡化省略掉啦~

1. 先使用鋼筆工具勾勒出徽章的外形，無描邊，填充色為#995936，使用上面所說的對象-路徑-偏移路徑-位移數(shù)值改為一個適當(dāng)?shù)呢?fù)數(shù)即可，重復(fù)兩次，便得出顏色為#d89f79、#72321c的形狀。

2. 接下來是里面的格子，先繪制一個#72321c的矩形，覆蓋在徽章上，然后點擊對象-路徑-分隔為網(wǎng)格，行數(shù)、列數(shù)分別為2。接著還是選中矩形點擊路徑查找器-分割-右鍵矩形取消分組，這時候就分離成四格格子，右上角和左下角顏色改為#ffce00。

3. 將四格選中右鍵-排列-后移一層-選中四格和最上面的徽章-點擊路徑查找器的裁剪，便能得出下圖最右邊的圖案。

4. 陰影部分

將最上面那層ctrl+c復(fù)制兩次得出兩個一樣的圖形,選中兩個圖形使用形狀生成器將最里面的形狀按alt鍵del掉。最后將裁剪好的外框放入徽章內(nèi)，點擊外觀-正片疊底-不透明70%。

5. 彩帶部分

使用鋼筆工具繪制顏色為#ffe6ae的彩帶形狀，再用鋼筆工具勾勒出陰影部分使用形狀生成器alt鍵del掉多余的形狀，外觀-正片疊底-不透明度70%就完成陰影。

圖標(biāo)五：活點地圖-地圖圖標(biāo)

活點地圖是哈利波特內(nèi)的魔法地圖，里面的腳步印最能體現(xiàn)獨(dú)有的特點。

1. 先繪制4個形狀等大的矩形，顏色#d89f79，使用小白工具分別改變它們的四個錨點。

2. 添加地圖上的形狀#ffe6ae，邊邊的形狀可繪制橢圓，再使用形狀生成器alt鍵del，其余形狀使用鋼筆工具隨意勾出一個形狀即可。腳印也是一樣的道理，顏色為#5f408，不透明度降低至70%。

3. 最后是陰影部分！

由于陰影部分涉及到不止一種底色的顏色，因此不能使用形狀生成器。

先把地圖編組，ctrl+c復(fù)制多一層地圖后隱藏。

接著在地圖拐彎處繪制三個無描邊無填充的矩形，選中地圖和矩形，點擊路徑查找器的分割，再回到地圖右鍵-取消編組。

這時候已經(jīng)將每一個矩形根據(jù)底下的圖案分割成幾等份，再分別進(jìn)行外觀設(shè)置就好啦~

圖標(biāo)六：魔法藥劑-商店圖標(biāo)

思路：魔藥是哈利波特內(nèi)類似一種巫師的藥水，有各式各樣的功效，能充分作為商店圖標(biāo)的標(biāo)志。

1. 使用鋼筆工具繪制顏色#dcbdff，不透明度80%的瓶身；以及顏色#5f4089,不透明度為80%和#724d83，不透明度為80%的魔藥液體。2. 使用矩形工具繪制一個瓶塞，用小白工具移動下面的兩個角往中間稍微移動一點，再繼續(xù)用小白點擊四角使得變成圓角。接著使用矩形工具繪制一個小正方形，使用小白點擊左右上角往中間移動成一個三角形。將三角形旋轉(zhuǎn)90度移動到圓角矩形內(nèi)，使用路徑查找器點擊“減去頂層”即可得出最后的造型，再使用小白稍微將下面的三角往上拉成圓角。

3. 使用橢圓工具繪制幾個顏色#000000的等圓作為瓶塞的點綴。

4. 最后是瓶頭，使用圓角矩形工具顏色#dcbdff，不透明度80%。再將以上的拼湊在一起。

5. 接著是魔藥的底座，繪制一個矩形和使用鋼筆工具描繪出一個底座形狀，再拼湊一起使用路徑查找器的“聯(lián)集”。

6. 最后是投影部分！

方法跟上述的投影方式基本一樣的，使用鋼筆工具勾勒形狀或者形狀工具矩形、橢圓+形狀生成器alt鍵del掉，最后組合起來就好啦~

最終效果圖