Zi 字媒體

Illustrator繪製時尚簡約的扁平化的線性圖標 這一次的教學是屬於矢量教程領域中的Illustrator教程的相關教學。 文章出處是來自ifeiwu的矢量教程類文章，寫教學的作者是飛屋睿UIdesign，感謝飛屋睿UIdesign提供Illustrator教程的實作教學。 教學大綱: 線性風格一直是很多網頁和插畫師的最愛，在這篇教程里，我們將教大家繪製一組造型明朗，線條幹凈且風格簡潔的線性圖標，比如潔面乳、指甲油、眼影、口紅和香水等，趕緊來練手吧。 Illustrator教程教學開始 線性風格一直是很多網頁和插畫師的最愛，在這篇教程里，我們將教大家繪製一組造型明朗，線條幹凈且風格簡潔的線性圖標，比如潔面乳、指甲油、眼影、口紅和香水等，趕緊來練手吧。 一、觀察和草圖 當我們要將一個物體繪製成為線條的時候，我們第一件事是需要觀察物體本身。比如，在本例中運用幾個平時日常化妝品作為創作對象，我會打開天貓，分別在搜索框中輸入這些物品。先列出一個所繪製對象的小清單。 每個物品我們都要找到它的共同點，比如第一個洗面奶，其實有各種包裝樣式，但你需要從中提取出某一類的共性，而不能以偏概全。這是觀察進入分析的第一步，接下你需要概括這個樣式，去掉各種複雜細節，再保留那些能明顯突出物品特徵的線條細節。 觀察物品的時候要學會化繁為簡，把最本質的造型線條給表現出來。 二、繪製第一個圖標 STEP 01 打開AI，新建文檔，文檔的參數可以參考下圖所示 STEP 02 你可以打開網格，在網格的輔助下進行繪製，或者也可以打開智能參考線。總之如果你是初學者，最好能有一個輔助的工具對繪製的對象有所控制。 我的做法是做好每個圖標的大小控制，因為你的圖標不可能製作到剛好佔據整個版面，所繪製的對象到邊緣需要一個視覺緩衝。但這純屬一種心理偏好。實際操作中，也有越過參考範圍的情況也有。 很多人很好奇，AI既然是矢量軟件應該就不會有大小之別，因為它可以任意縮放的啊。的確，這是一個值得說明的問題，但比例上你還是遵守一定的秩序，否則你做出的圖標在比例上的失衡會影響整體的美觀。 STEP 05 第一個所繪製的對象是潔面乳。雖然我們說是用線條來表現，但是實際繪製中我們並不會直接用到直線工具，而是在繪製中突出表現線條。線條所起的是視覺上的強調作用。 了解這一點后，讓我們開始畫一個瓶身，瓶身用矩形來表現。如果你的AI不是舊版本，那應該就會知道直角的矩形可以直接可以拖動角內的圓點變為一個圓角矩形。如果是舊的版本那就需要運用圓角工具來處理。 矩形的描邊設置為4pt，描邊為黑色，填充為白色。這一步並不需要考慮色彩。 為了方便你隨時縮放圖形大小時，描邊大小都保持不變，請進入【編輯>首選項>常規】，去掉“縮放描邊和效果”這一欄的勾選。 STEP 06 接下再運用矩形畫上瓶身的上部，這些矩形都要居中對齊。在瓶身的上部，由於並不是一個幾何圖形，因此你需要運用不同的幾何圖形進行相互合併或增減。比如梯形是調整了矩形下方兩個錨點的位置后得到的，能得到最終的圖形的方法有很多，你可以嘗試出最適合自己的方式。 STEP 07 再增加一些裝飾性細節，裝飾性線條與原有線條保持同樣粗細。這裡是一個比較隨意的創作步驟，你完全可以自由發揮。 STEP 08 產品的初次印象是美在包裝，對包裝的裝飾需要增加一些豐富的細節，比如增加圖案和文字。你可以先畫一個圓，給這個圓增加一個瓶身的形狀作為矢量剪切蒙版。剪切蒙版的含義即用上面的“形”去顯示下面的“內容”，根據這個原理，你只需要複製瓶身並粘貼於最上層，再選中這個複製層與你所畫的圓，進入【對象>剪切蒙版>建立】即可。 再增加花朵的裝飾，先畫一片花瓣，再採用旋轉工具就很容易組成一朵花形。 文字應該選用線性無襯線字體，線條粗細都能盡量靠近圖形本身的線條粗細。 三、其他幾個圖標的畫法 STEP 09 按照我們上一步對瓶身的形狀組合，指甲油的瓶身是很容易做到的事。關鍵是對包裝的裝飾細節上的考慮，作為一個圖標，你沒有辦法去窮盡所有的細節，因此需要抽取更多裝飾的特徵。最好的方法，是把自己當作一個包裝設計師，並搭配着一整套圖標的風格特徵進行思考。 STEP 10 眼影盒的結構比較簡單，但需要注意的地方是矩形間的間隔盡量保持一致，這樣從視覺上看起來效果更好。 矩形間的間隔也不應該太緊密，否則當圖標縮小時就會“連成一片” STEP 11 口紅的畫法更簡單，構建基本的造型即可。但需要注意一點就是口紅的塗抹的部分帶着圓角，且有傾斜，當我們要處理傾斜的形狀時，直角是比圓角更容易處理的。因此，即使要轉為圓角，也先安排好傾斜的形狀再轉為圓角。 STEP 13 最後我們畫出香水的圖標，基本上繪製這類圖標有種組合形狀的樂趣，因此怎樣將形狀通過增減拼湊進行組合也是值得往下鑽的問題，我的畫法可供大家參考如下 先畫好基礎形狀，再增添裝飾細節 我們的基礎外形繪製完成。 四、色彩 在我們對這組圖標上色前，我們需要有一個總體規劃，這裡的意思就是說有個方向，比如我們可以給大致的色彩基調定一個方向，即以白色為主，搭配一些清新的色調。 我們做的線性圖標中的線條是保持為黑色，因此填色的部分只是內部填充，形狀里的描邊並不需要改變。 STEP 14 你可以先做一組色板，這樣可以讓整個圖標保持色彩風格上的統一。但請注意，這個色板只是參考，因為涉及到具體的物品里的某一種特定的色彩選擇保持原來色調為好，比如，口紅的顏色必然是紅色較好，這樣能體現出圖標的“共性”概括的特徵。即使你的色板中沒有紅色，也無需一定要偏執某一個特定的色彩。 此外注意冷暖色彩的搭配。 STEP 15 潔面乳的部分，因為瓶身大量使用冷色，因此利用紅色來平衡視覺。瓶身所使用的兩類色彩差別並不大，體現清爽之感。 STEP 16 指甲油的包裝部分，其中瓶身的設想是一個玻璃，因此保持白色填充。一個圖標最好不要超過三種顏色。 STEP 17 眼影的畫法，因為眼影本身就有許多不同的色彩，但其實只要圍繞一個色彩做一些特別臨近的變化即可。 STEP 18 口紅填色相對很簡單，紅色的唇膏體部分我們直接選用色板里的顏色。 STEP 19 香水的瓶身和指甲油一樣為玻璃特質，因此保留白色，甚至讓它有透明感，即留一條線條壓過本身的香水液體的部分。 填色的部分完成後，我們可以說整體的繪製就結束了。 後記 矢量的繪製是很精確的，因此對錨點的處理最重要在於精簡，懂得控制錨點來塑形，恐怕這其中還需多加實踐才能逐步領會。網頁插畫可能和書籍、海報的插畫有所不同就在於，它需要更加簡潔的形式來減少加載時間，因此，選用最為簡潔的線條來表達物體本身，這需要結合日常的觀察力和自身對生活的體會和領悟。 –本文轉載自 http://www.missyuan.net 教學網 — 文章永久連結為: Illustrator繪製時尚簡約的扁平化的線性圖標