AI教程！手把手教你創建童趣十足的玩具水槍

編者按：精通軟件呢，最要緊的就是多練習啦，特別推薦今天分享的這類教程，涉及的基礎操作和技巧非常多，過程也足夠詳細，新手依著步驟來，也能創造出同樣漂亮的效果，大大滿足成就感，好像這么復雜的軟件也不可怕了呢，說了這么多，現在問題來了，你是轉發呢還是馬上動手呢？老師說，后者才有前途呦 ^ ^

@陌北默?：在本教程中，你將學習如何建立一個簡單的網格，以及如何使用基本工具創建主體的形狀以及使用漸變效果添加手柄。

接下來學習利用新形狀，可自由轉換圓角，一些簡單的特效和蒙板技術來創建管道，噴嘴和水容器。最后，您將學習如何通過混合模式添加微妙的陰影和高光，和一個簡單的陰影效果。

一、創建新文檔

按ctrl+N創建的新文檔。選擇單位為像素，在寬度和高度框中輸入600，然后單擊高級按鈕。選擇RGB ，屏幕（72 ppi） ，并確保在對齊新對象像素網格選中該復選框，然后單擊確定。啟用網格（視圖>顯示網格）和對齊網格（視圖>對齊到網格）。

對于初學者，您將需要網格線間隔設為5像素，所以去編輯>首選項>參考線和網格，設置網格線間隔為5和次分隔線為1。它會減輕你的工作，你可以很容易通過ctrl+“ 鍵盤快捷鍵啟用或禁用網格。你也應該打開信息面板（窗口>信息）預覽大小和形狀的位置。不要忘了度量單位的設置，去編輯>首選項>單位>常規為像素，所有這些設置將顯著提高你的工作效率。

想成為專業UI設計師？先完整學習 Photoshop 配置吧！《超實用！UI設計師的Photoshop配置技巧》

二、創建主體，手柄和觸發器

第1步

選擇矩形工具（M） ，創建一個130 X 25像素的矩形，并設置其填充色為R = 255，G = 200，B = 0。 選中黃色形狀，去效果>風格化>圓角。輸入半徑為5像素，單擊確定，然后去對象>擴展外觀。

第2步

選擇矩形工具（M），創建一個35 * 75像素的矩形，設置填充色為橙色。切換到直接選擇工具（A） ，選擇矩形底部的兩個錨點將它們向右拖動25像素。

選中矩形，去效果>風格化>圓角。輸入半徑為5像素，單擊確定，然后轉到對象>擴展外觀。

第3步

重新選中黃色圓角矩形，并在當前位置復制一層（Ctrl+C>Ctrl+F ），然后將復制層置于頂層（按住Shift+Ctrl+ ]）。選中橘色形狀和剛復制的副本，打開路徑查找器面板（窗口>路徑查找器），然后單擊減去頂層按鈕。

第4步

使用矩形工具（M） ，創建一個40PX的矩形，并把它置于頂層。保持選中狀態，調出外觀面板（窗口>外觀）。取消填充色，設置描邊顏色為R = 189，G = 15，B = 4，然后點擊“描邊”，打開描邊面板。將粗細設為8像素，并設置對齊描邊“使描邊內側對齊”按鈕。

切換到直接選擇工具（A） ，選擇紅色形狀底部的兩個錨點，將它們向右拖動15px。確保紅色形狀保持選定狀態，去效果>風格化>圓角，設置半徑為5像素，單擊確定，然后轉到對象>路徑>輪廓化描邊。

第5步

復制黃色和橙色形狀（Ctrl+C>Ctrl+F ）。將這些副本置前（按住Shift+Ctrl+ ]），確保兩個形狀選中，在路徑查找器面板點擊聯集。選擇生成的形狀和紅色的形狀，在路徑查找器面板點擊減去頂層。

第6步

選中黃色形狀，打開漸變面板（窗口>漸變），點擊漸變縮略圖，添加默認的黑色到白色的線性漸變。

在你的漸變面板中，設置角度為90度。然后移動到漸變的顏色，選擇右邊的滑塊，設置顏色為R = 255，G = 230，B = 30，然后選擇左邊的滑塊設置為顏色R = 245，G = 160 ，B = 0。添加新滑塊，將其顏色設置R = 245，G = 160，B = 0時，將位置定于15％ 。請記住，藍色數字代表滑塊的位置。依次增加五個新的滑塊，然后使顏色和位置如下圖所示。

第7步

選擇橘色形狀，將其填充色換為如下圖所示的漸變填充。

第8步

選中手柄形狀，在外觀面板，使用添加新填色按鈕。添加如下圖所示的線性漸變。請記住，藍色數字表示位置的百分比，而黃色表示不透明度的百分比。

第9步

選中手柄形狀，在外觀面板，并使用添加新填色按鈕。單擊“ 不透明度?”，打開不透明面板。降低不透明度為5％ ，改變混合模式為柔光，然后添加如下圖所示的線性漸變。

第10步

選擇紅色形狀，設置其填充色如下圖所示的徑向漸變。（小編提示：本步驟要給手柄加個陰影，如第14步的投影操作）

第11步

使用矩形工具（M） ，創建一個35 * 40PX的矩形。選中這個形狀，去效果>風格化>圓角，輸入3px的半徑，單擊OK（確定），然后轉到對象>擴展外觀。將其填充色改為如下圖所示的線性漸變。

第12步

使用矩形工具（M） ，創建一個35 *10px的矩形，設置填充色為白色（R = 255，G = 255，B = 255），降低其不透明度為20％ ，改變混合模式為疊加。

第13步

去編輯>首選項>參考線和網格>網格線間隔設為1px。使用鋼筆工具（P） ，創建一個10px的垂直路徑，選中路徑，取消填充，設置描邊為5像素的暗紅色，點擊“描邊”彈出面板，設置其端點為圓頭端點。

切換直接選擇工具（A），選擇此路徑底部的錨點，將其向右邊移動8像素，然后去效果>變形>弧形，設置如下圖所示的屬性，單擊OK（確定）。然后轉到對象>路徑>輪廓化描邊。

第14步

選中紅色形狀，將其填充色改為如下圖所示的線性漸變，然后去效果>風格化>投影。設置如下圖所示的屬性，單擊OK（確定）。

三、創建管道，噴嘴和水箱

第1步

去編輯>首選項>參考線和網格>網格線間隔，設置網格線間隔為5像素。使用矩形工具（M） ，創建一個 5*15px的矩形。切換到直接選擇工具（A），選擇這個形狀右邊的兩個錨點，在頂端菜單欄設置邊角為3px。

此功能僅適用于CC用戶。代替這個效果最好的解決辦法是圓角插件，可以在這篇文章中找到：《AI圓角插件！助你更快設計字體 Xtream Path1.4的安裝使用教程》。將它保存到你的電腦上，返回到AI中選擇直接選擇工具（A） 。選擇錨點并轉到文件>腳本>其他腳本。打開圓形的任何一個圓角腳本，輸入24PX半徑，然后單擊OK（確定）。最終的結果可能看起來有點不同。

選中此形狀并用如下圖所示的線性漸變取代現有的填充顏色。

第2步

使用矩形工具（M） ，創建一個5*20像素的矩形 。切換到直接選擇工具（A），選擇這個形狀右邊的兩個錨點，在頂端菜單欄設置邊角為3px。填充與上一步一樣的漸變色。使用矩形工具（M） ，創建一個10*20像素的矩形，用同樣的線性漸變填充它，并把它放在如圖3所示的位置。

第3步

去編輯>首選項>參考線和網格>網格線間隔，設置網格線間隔為1像素。使用矩形工具（M） ，創建一個 25*12像素的矩形，如下所示的線性漸變填充它，并把它放于底部。

第4步

選中25*12像素的矩形，在外觀面板，使用添加新填色按鈕。填充如下圖所示漸變，改變其混合模式為柔光，將其移動到現有填充色才下面。去效果>扭曲和變換>變換。拖動移動，垂直移動設為10px，然后單擊確定。（小編注：變換應放在不透明度上面）

第5步

使用矩形工具（M） ，創建一個1*12像素的矩形，設置填充色為黑色 。選中這個矩形，降低其不透明度為30％ ，改變 混合模式為柔光，去效果>扭曲和變換>變換。移動水平為2px的，在副本框輸入11，然后單擊確定。

第6步

設置網格線間隔為5像素。使用矩形工具（M） ，創建一個70*10px的矩形，用如下所示的線性漸變填充它。選中這個形狀，在外觀面板中添加第二個填充色為R = 128，G = 130，B = 133，改變其混合模式為顏色加深。使用矩形工具（M） ，創建一個70*5像素的矩形，給其填充與第一個矩形一樣的漸變，將其放在如圖2所示的位置。

第7步

切換到網格線間隔為1 px。使用矩形工具（M），創建一個10*19px的矩形，用如下圖所示的線性漸變填充它 。選中此矩形，切換到直接選擇工具（A） ，在頂部的菜單欄的邊角輸入2px。

第8步

禁用對齊網格（視圖>對齊到網格），然后去編輯>首選項>常規，并確保在鍵盤增量設置為1像素。選中紅色圓角矩形，并復制兩個副本（Ctrl+C>Ctrl+F>Ctrl+F ）。選擇頂部的副本，將其向右移動1px。重新選擇的兩個副本，然后路徑查找器面板中，單擊減去頂層按鈕。給新形狀填充白色，降低其不透明度為30％ ，改變混合模式為疊加。

選中紅色圓角矩形，并復制兩個副本（Ctrl+C>Ctrl+F>Ctrl+F ）。選擇頂部的副本，將其向左移動1px。重新選擇的兩個副本，然后路徑查找器面板中，單擊減去頂層按鈕。給新形狀填充黑色，降低其不透明度為30％ ，改變混合模式為柔光。

第9步

啟用對齊網格（視圖>對齊到網格）。使用矩形工具（M） ，創建一個3*5像素的形狀，填充藍色。切換到直接選擇工具（A） ，選擇左邊的兩個錨點，設置邊角為 2px。

用矩形工具（M） ，創建一個3*10px的形狀，填充藍色。重新選擇直接選擇工具（A） ，選擇左邊的兩個錨點，設置邊角為 2px。

第10步

重新選擇兩個藍色形狀，使用ctrl+8 （或轉到對象>復合路徑>制作），使之成為一個復合路徑。選中新形狀，填充線性漸變色與它旁邊的形狀一樣的紅色。

給這個新形狀添加第二層填充色為黑色，改變其混合模式為柔光。使用矩形工具（M） ，創建一個1×15px的形狀，給其填充黑色，降低其不透明度為50％ ，改變混合模式為柔光。

四、創建水容器

第1步

設置網格線間隔為5像素。使用矩形工具（M） ，創建一個130 * 50像素的形狀，設置填充顏色為R = 57，G = 181， B = 74。 選中綠色矩形，去效果>風格化>圓角。輸入半徑為25像素，單擊確定，然后轉到對象>擴展外觀。

使用矩形工具（M），創建一個90×10px的形狀，設置填充顏色為R = 161，G = 218， B = 103，。選中此矩形，切換到直接選擇工具（A） ，設置邊角為 5像素。

第2步

在工具欄雙擊混合工具來打開混合選項窗口。在下拉菜單中選擇指定的步數，數值為100。重新選擇的兩個綠色的形狀，只需點擊Alt+Ctrl+B組合來創建一個新的混合。最后應為圖二所示。

第3步

使用矩形工具（M） ，創建一個90*5像素的形狀，設置填充顏色為白色， 。 選中這個矩形，在外觀面板中，選擇現有的填充，改變其混合模式為疊加，不透明度為10%。去效果>風格化>圓角，輸入2.5px半徑，單擊OK（確定）。去效果>模糊>高斯模糊，輸入10px的半徑，單擊OK（確定），。

然后返回到外觀面板，添加第二個填充色為白色，選擇它。降低其不透明度為10％ ，改變混合模式為疊加，去效果>風格化>圓角。輸入2.5px半徑，然后單擊OK（確定）。

第4步

使用矩形工具（M） ，創建一個100*25像素的形狀，用如下圖所示的線性漸變填充它， 。選中這個矩形，降低其不透明度為50％，改變混合模式為柔光，去效果>風格化>圓角。輸入12.5px半徑，然后單擊OK（確定）。

第5步

使用矩形工具（M） ，創建一個130 *50px的形狀，設置填充顏色為白色 。選中新矩形，切換到直接選擇工具（A） 。在頂部的菜單欄的邊角輸入25px。

第6步

選中白色圓角矩形，然后轉到對象>路徑>偏移路徑。位移設置為-5px，然后單擊OK（確定）。選擇生成的形狀，復制副本（Ctrl+C>Ctrl+F）。選擇副本，將其向上移動5像素。

重新選中在這個步驟做的兩個形狀，然后在路徑查找器面板中點擊減去頂層按鈕。給新形狀填充顏色，R = 0，G = 104， B = 56，去效果>模糊>高斯模糊。設置半徑為5像素，然后點擊確定。

第7步

選擇所有水容器（除了白色，圓角矩形），將這些形狀編組（ctrl+G）。將白色形狀置于頂層（按住Shift+ctrl+ ]），將它與新編組一起選中，在透明度面板（窗口>透明），點擊制作蒙板按鈕。

如果你不是CC用戶，在打開的彈出菜單透明面板，直接去制作不透明蒙版。

第8步

使用矩形工具（M） ，創建一個5*30像素的形狀，用如下所示的線性漸變填充它。選中新矩形，去效果>風格化>圓角。輸入2.5px半徑，單擊OK（確定），然后轉到對象>擴展外觀。

第9步

使用矩形工具（M） ，創建一個10*20px的形狀，給填充一個紅色色。切換到直接選擇工具（A），選擇左邊的兩個錨點，設置邊角為2px。選中紅色形狀，去效果>變形>上弧形。進入如下圖所示的屬性，單擊OK（確定），然后轉到對象>擴展外觀。

第10步

禁用對齊網格（視圖>對齊到網格），然后去編輯>首選項>常規，并確保在鍵盤增量設置為1像素。將紅色形狀的填充色改為線性漸變與5×30px的圓角矩形相同的填充色。

選中這部中改變填充色的形狀，并復制兩個副本（Ctrl+C>Ctrl+F>Ctrl+F ）。選擇頂部的副本，并將其向右移動1px。重新選擇兩個副本，在路徑查找器面板中點擊減去頂層按鈕。給新形狀填充白色，降低其不透明度為30％ ，改變混合模式為柔光。

第11步

重新選擇，與手槍（一個編輯在之前的步驟）的其余部分連接的形狀，去效果>風格化>陰影。進入如下圖所示的屬性，然后單擊OK（確定）。

第12步

啟用對齊網格（視圖>對齊到網格），然后切換到網格線間隔1px的。使用矩形工具（M） ，創建一個10*54px的形狀，用如下所示的線性漸變填充它 。選中此新矩形，切換到直接選擇工具（A），設置邊角為2px。

第13步

禁用對齊網格（視圖>對齊到網格）。選中黃色圓角矩形，并復制兩個副本（Ctrl+C>Ctrl+F>Ctrl+F ）。選擇頂部的副本，并將其向右移動1像素。重新選擇兩個副本，然后在路徑查找器面板中點擊減去頂層按鈕。給新形狀填充黑色，降低其不透明度為30％ ，改變混合模式為柔光。

第14步

選中黃色圓角矩形，并復制兩個副本（Ctrl+C>Ctrl+F>Ctrl+F ）。選擇頂部的副本，并將其向左移動1像素。重新選擇兩個副本，然后在路徑查找器面板中點擊減去頂層按鈕。給新形狀填充黑色，降低其不透明度為30％ ，改變混合模式為柔光。

第15步

選中黃色圓角矩形，并復制一個副本（Ctrl+C>Ctrl+F）。。選擇這個副本，將其向右移動1像素，然后復制它（Ctrl+C>Ctrl+F）。選擇這個新的副本，將其向右移動1像素。重新選擇在這個步驟做的兩個形狀，然后在路徑查找器面板中點擊減去頂層按鈕。給新形狀填充白色，降低其不透明度為70％ ，改變混合模式為柔光。

第16步

啟用對齊網格（視圖>對齊到網格）。使用矩形工具（M） ，創建一個2*3px的形狀，用如下所示的線性漸變填充它，并把它放在下圖放大鏡內的位置。

五、添加陰影和高光

第1步

使用矩形工具（M） ，創建一個2*15px的形狀，填充黑色。選中它，降低其不透明度為30％ ，改變混合模式為柔光。

再創建一個1*15px的形狀，填充黑色。選中它，降低其不透明度為50％ ，改變混合模式為柔光。

選中剛創建的兩個矩形，將他們編組（ctrl+G ）。選中這個編組，去效果>扭曲和變換>變換，勾選對稱X，在副本框中輸入1，，水平移動68px，然后單擊確定。

第2步

使用矩形工具（M） ，創建一個1*50像素的形狀，填充黑色。選中它，降低其不透明度為25％ ，改變混合模式為柔光。

再創建一個3×50像素的形狀，填充黑色。選中它，降低其不透明度為15％ ，改變混合模式為柔光。

選中剛創建的兩個矩形，將他們編組（ctrl+G ）。選中這個編組，去效果>扭曲和變換>變換。設置如下圖所示的屬性，然后單擊OK（確定）。

第3步

使用矩形工具（M） ，創建一個1*20像素的形狀，使填充黑色。選中它，降低其不透明度為15％ ，改變混合模式為柔光。

再創建一個2×20像素的形狀，填充黑色。選中它，降低其不透明度為15％ ，改變混合模式為柔光。

選中剛創建的兩個矩形，將他們編組（ctrl+G ）。選中這個編組，去效果>扭曲和變換>變換。設置如下圖所示的屬性，然后單擊OK（確定）。

第4步

使用矩形工具（M） ，創建一個2*20像素和1*20像素的形狀，均填充黑色，選中它們，降低不透明度為15％ ，改變 混合模式為柔光。

再創建一個2*15px的和一個1*15px的形狀，均填充黑色，選中它們，降低不透明度為15％ ，改變混合模式為柔光。

再次創建一個2*20像素和1*20像素的形狀，均填充黑色，選中它們，降低不透明度為10％ ，改變 混合模式為柔光。

第5步

選中所有的形狀，然后復制它們（Ctrl+C>Ctrl+F ）。選中所有的形狀，在路徑查找器面板中點擊聯集按鈕。給新形狀填充顏色為：R = 245，G = 160 ，B = 0。

第6步

選中上一步的橙色形狀，把它置于底層（按住Shift+Ctrl+ [），然后添加1像素的黑色描邊，降低其不透明度為5％，在描邊的彈出面板中設置對齊面板為外側對齊 。返回外觀面板中，選擇現有的填充，去影響>風格化>陰影。進入如下圖所示的屬性，然后單擊OK（確定）。

恭喜您！大功告成！

下面是它的外觀。我希望你喜歡這個教程，可以在你未來的項目中應用這些技術。

想精通Illustrator？這些教程必須入手！

通俗易懂的小課堂！
《小課堂第二彈！使用ILLUSTRATOR做UI設計系列教程》

絕對不能不學的快捷鍵！設計師最愛！
《平面設計師最愛的illustrator快捷鍵》

實戰篇！很多同學都做完咯！
《AI教程！教你在Illustrator中創建胖胖的可愛卡通頭像》

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