-------------------------------------------

@原創(chuàng)教程

之前在網(wǎng)上看到過一套精美的空狀態(tài)界面，都是加了紋理完成的，配色清新，界面干凈。剛好我前段時間做的產(chǎn)品里也用到了一些紋理插畫，所以這里就給大家講解一下紋理插畫中噪點(diǎn)的運(yùn)用，和大家分享一些小經(jīng)驗吧。（ps：好吧我覺得我對紋理插畫有點(diǎn)執(zhí)念，哈哈）

本文主要內(nèi)容：

1、UI設(shè)計中紋理插畫的分析；

2. 噪聲點(diǎn)如何使用？

3. 紋理插圖教程（附有詳細(xì)的分步圖片）；

4.這是我畫的紋理插圖，啦啦啦。

1. UI設(shè)計中紋理插畫的分析

上面的6張圖是我看的一組圖片中選出來的，我們可以看到這些界面里的插畫在陰影和一些元素上都添加了噪點(diǎn)和漸變，讓插畫的立體感和層次感得到了更好的體現(xiàn)。在下圖中我標(biāo)注了插畫中添加噪點(diǎn)的地方以及具體的參數(shù)。

2. 噪聲點(diǎn)如何使用？

如果我們想畫出這樣的插圖，首先我們必須了解噪聲是如何使用的。

1. 在哪里添加噪音？

A：填寫檢查器中的第六個

2.如何設(shè)置噪聲的參數(shù)？

A：加噪點(diǎn)的文字主要有四種：原圖、黑色、白色、彩色疊加。模式跟PS一樣。通過分析上面的紋理圖，我發(fā)現(xiàn)常用的文字主要有三種：普通、疊加、加暗。強(qiáng)度不需要設(shè)置太高sketch，5%-30%就可以了。

3.《噪音》中的四種文本類型有什么區(qū)別？

答：從下圖可以看出，噪點(diǎn)的濃度為：彩色>白色>原始>黑色。您可以根據(jù)插圖所需的噪點(diǎn)強(qiáng)度選擇不同的文字。

需要注意的是，噪點(diǎn)層要位于顏色填充層上方，否則會遮住噪點(diǎn)。另外，深色背景可以使用變暗疊加模式，淺色背景可以使用疊加模式。這個也需要具體問題具體分析。

4. 噪聲的梯度效應(yīng)

答：以下圖中的光束為例，說明如何創(chuàng)建漸變效果。請注意，您無法使用雜色創(chuàng)建漸變效果，因此您必須在新圖層上進(jìn)行創(chuàng)建。

3. 紋理插圖教程

下面我們以此圖為例講解如何繪制紋理插圖。

1.我們先把這些元素分解一下，分解下來是不是很簡單呢？

2.創(chuàng)建一個375*667的畫板，將畫板顏色設(shè)置為#，然后創(chuàng)建一個375*227的矩形sketch，并用#-#的漸變填充

3. 分解植物并使用鋼筆工具繪制這些形狀。別忘了添加漸變。

4.用同樣的方法把杯子分解，并用筆畫出來。

5.把書也分解一下，畫好之后，直接復(fù)印就可以了。

6、將這些元素組合起來，添加文字，并添加噪點(diǎn)，添加噪點(diǎn)的方法前面已經(jīng)說了，具體參數(shù)如下圖所示。

4. 我畫的紋理插圖

這里選了一些部分，主要是APP啟動頁和一些日程詳情頁，有一部分是自己畫的，有一部分是AI做的，加入了噪點(diǎn)，我加的噪點(diǎn)強(qiáng)度比較小，大家可以根據(jù)自己的情況進(jìn)行調(diào)整。

以上內(nèi)容是我自己總結(jié)的，可能還有很多不足，希望大家互相指正~O(∩_∩)O~

:) 想要案例源文件的同學(xué)可以自行下載附件~~

如有侵權(quán)請聯(lián)系刪除！