做出這類UI插畫需要掌握多少知識/技能？

01-14

如圖。看了很喜歡。想學習一下。

@ui設計@UI設計@ui boke@UI小菜@喵喵ui設計

這一張是我用Sketch臨摹出來的，如果不需要處理噪點細節的話，用Sketch就足夠了（在最後有畫這張圖全過程的視頻，包括如何使用sketch plugin），但是做出這類UI插畫的重點當然不是就會用一個軟體畫就好了～重要的東西有很多：

最初想法
草稿（手繪/圖片拼貼）
增添/刪減元素
色彩/風格
細節處理

1. 最初想法：

最重要的就是想法了。something not right展示成一個顯示錯誤的鐘錶，no connection 顯示成斷線的風箏，broken link是一支斷掉的鉛筆，missing article是新聞紙上少了一塊……有的真的很巧妙啊；尤其是missing article和not enough space那裡，很直觀地illustrate了想要表達的信息，並且巧妙地中和了發生這些negative的事情時候的用戶不開心情緒～

每次拿到一個需要表達的信息的時候，都需要構想怎樣通過illustration表達這個信息。這個思考的過程是最需要的一個技能～

通過看大量的別人充滿創意的作品，不知不覺中，自己也就會有越來越多的想法。除了這種用創意來illustrate一個idea的情況，有時候也需要illustrate一段話或者乾脆給文章網站配插圖，這個時候，就需要理解內容然後構想出需要的元素們。

舉個例子，在這個AI Powered Hospital 插畫裡面，我拿到手的是一片research paper，我的任務是給基於這篇paper的博客畫一個插圖。那我首先要做的事情就是讀一讀理解一下到底講的是什麼東西，然後在腦袋裡構建一下都有哪些元素需要出現的畫面里：例如醫藥，醫生，病人，病例，人工智慧……當元素都清晰之後就可以構想他們怎樣有機地互動起來。

2.草稿（手繪/圖片拼貼）

腦子裡最開始的想法成型之後，就可以來打個草稿了。這一步需要的技能就是怎樣把腦袋中構想的東西具像化起來。當然打草稿不是必須的了～有時候腦子裡想清楚已經有一幅圖了的時候很簡單的一個idea就直接畫就好了～

可以用紙筆迅速畫一畫然後排張照片導入到電腦里當一個圖層，之後照著描～

也可以在網上搜你想好的那些元素，把他們在你的artboard上裁裁剪剪組合試試，之後照著開始描畫～

3.增添/刪減元素

增添/刪減元素可以出現的任何一個步驟里：

在具像化腦子裡想的基本idea的時候，通過畫草稿，會發現有的元素其實並不需要或者自己缺少了什麼元素～這個時候就需要增添或者刪減了；在上色做style完成後，覺得顏色單調或者內容單調就可能需要添加一些新的元素，覺得太複雜了就會刪減……就拿上面那個例子里something not right那張圖來說：最開始的元素就是那個顯示出問題的表了，可能後來添加的元素就是那盆植物和牆上的畫了用來給這個表一個情境，讓整個畫面更鮮活更delightful～

4.色彩/風格

決定色彩和風格就需要使用顏色和紋理的技能。不同的色彩搭配給人的感覺完全不同～需要找到最時候產品identity的色彩搭配。還是需要多看多學習，自己對顏色的感覺才會增強～這裡是一些總結的學習資源[資源] 設計資源匯總(1) Inspirations.Practices.Blogs.Books

5. 細節處理

細節處理對於展現畫面的質感很重要。常見的對一個illustration的細節處理一般有：陰影，光/暗，紋理（噪點……），反射，漸變色等等。這時候就需要很多使用一些基本軟體的技能了～

【。v 。】歡迎關注我的專欄呀～我過段時間會整理一下一些好用的工具網站：比如挑選顏色，查找需要的元素，或者迅速生成一些藝術效果……CY專欄

這裡是具體過程的video：

謝 @Van Shaun 邀，偏矢量的插畫我比較喜歡用 illustrator 來做～( ??? )

這類插畫，只需要幾個步驟就可以畫出來：

背景 - 用鋼筆勾出前景 - 前景添加細節與漸變色 - 前景添加噪點 - 添加按鈕及文字

1 畫出背景，最簡單的一步

2 用鋼筆工具勾出前景

3 前景添加細節與漸變色

添加陰影及漸變色：

4 前景添加噪點

衣服部分的顆粒看起來比較細膩，可以用「效果-紋理-顆粒」來做

這是最簡單的做噪點的方法了！

陰影部分的肌理看起來比較有顆粒感

有顆粒感的部分，可以在ps里的畫筆工具做一個筆刷，用筆刷做出肌理。

很多插畫師都會有自己御用的噪點筆刷～～

筆刷還是蠻好做出效果的！

5 添加按鈕及文字

不要忘了文本輸入框部分的投影哦：

文字部分要調整字間距，行間距，注重細節。

這樣就完成了，撒花～

總結下來，需要的技能是醬紫的：

(σ???)σ 軟體：

圖形部分：「鋼筆工具，路徑查找器，漸變工具」等 illustrator 的基本功能。

肌理部分：「畫筆筆刷」等 ps 的基本功能。

( 軟體部分是比較好解決的，只要掌握基本功能就好 )

(σ???)σ 知識：

畫面含義和要表達的內容上要多加思考，

除此之外，就是配色，構圖，光影關係。

( 知識的部分，取決於創作者自身的修養和長期的積累 )

一開始可以從臨摹起步，實踐是最好的老師！

這裡扁平風的插畫設計需要的知識補充還是挺多的

首先你需要非常熟練掌握一款矢量繪圖軟體，比如：AI、CDR等。這裡不推薦用PS來做矢量插畫

軟體能力是基礎中的基礎，必不可少的一個環節。下面說一下需要掌握的設計基礎知識

這裡主要需要掌握5個方向的基礎知識點：造型設計基礎、構圖設計基礎、色彩搭配基礎、字體編排基礎、排版設計基礎。

這五個基礎知識點，推薦你可以找一些大學藝術設計的課程書籍進行系統的學習補充。下面我以教程為示範給你圖示講解：

希望我的回答能給你一定幫助和啟發，謝謝~

這類的插畫其實還是挺容易的。建議用ps鋼筆工具+筆刷工具可以實現。

具體需要那些技能就比較難說了。

1.基本的軟體技能是基礎。

2.草圖繪製階段你需要一定的手繪技能。

3.在考慮構圖和配色時，需要一定的設計構成知識。

4.再加上一店透視知識。

。。。

其實根本沒這麼複雜~

這種扁平的插畫繪製方式和技法並不難，主要流程無非是前期構思-草圖-精細化作業-上色-搭配文案-完成，技法層面臨摹幾張作品就能快速上手。

你提問做這種插畫需要掌握多少知識和技能。

我所理解的知識是繪製插畫背後的思考和需要傳達的情感以及表現手法等。

技能就是能熟練操作軟體工具以及手繪能力。而前者才是整個作品的核心，也是真正困難的部分，UI插畫也是十分商業的每一個頁面都會根據具體場景來表達情感。

至於如何提升相關知識，首先要做的就是多去看優秀作品，多了解作品背後的故事，學習大師是如何進行畫面構圖配色等技法，然後試著去臨摹-接著半原創-到原創。這些沒法速成的，只有不斷積累不斷思考。

推薦一個UI插畫網站，裡面收錄了國外各種頂尖公司的插畫，可以去上面找找靈感Portfolio

看是做到什麼程度。

如果是照著做出來就行的話，那需要學習一款設計軟體，PS或AI，找一套完整的視頻教程，大概2周左右（每天學習8個小時以上）能學會基本的操作，可以照著做出來。

如果要自己創作的話，則需要掌握更多的知識，包括：三大構造、素描（至少要能理解明暗關係、透視關係）、配色技巧、排版、及創意性思維練習。這個需要的時間比較長，不太可能速成。

恰好這幾張圖我都臨摹過，因為這幾張圖比較簡單，我就用用sketch臨摹的。

我是工科生，手繪很渣的那種，可以說基本沒有多少手繪基礎。

想自己原創畫出這中圖，首先你得有自己能構思場景的能力，這個可以從平時臨摹、欣賞別人的圖慢慢積累的。

能構思場景以後，最好手繪出來，很難看也可以，這樣能給自己一個清晰的場景，至於手繪，這裡慢慢練習嘍，一起努力~

能手繪場景後，就是利用軟體表達了，推薦Ai解決矢量部分，複雜紋理可以PS解決，這項就是多練習，多臨摹，使用工具的話熟能生巧。

其實就是構思場景+手繪需要學習積累工具的話每天去臨摹別人的用著就熟了

————————————————

這幾幅圖的源文件在這裡，文件是sketch格式

21 枚應用錯誤狀態界面 - UI - sketch.imsketch.im

長期學的話，要從素描速寫學起，結合學習軟體，板繪效果....用足夠多時候後基本掌握了。

短期學的話，邊學邊成長這種，基礎知識入門後，臨摹，總結套路，總結效果技能...很快就能畫了。快速學習視頻，要網盤資料，私我。

平面就好，學點插畫

個人覺得這類插畫已經開始泛濫了。

實現並不難，沒有繪畫基礎也能很快上手，找個照片參考，用Ai照著扣出外形，再上色（最好有點漸變色）

然後加噪點，ai裡面可以用效果做，要自定義程度高就用畫筆做（畫筆噪點多了容易導致軟體卡死）。

也可導入到ps做噪點，那樣效果空間更大。

軟體操作而已