幾何

前幾天的時候在網上看到了一組很漂亮的空狀態界面,全部都是由Sketch完成,并且添加了肌理,顏色清爽、界面干凈。正好我前一段做的產品當中也用到Sketch做了一些肌理插畫,所以在這里給大家講解一下如何用sketch當中的雜點繪制肌理插畫,分享一些小經驗給大家。(ps:好吧,我覺得我對肌理插畫有執念,哈哈)

本文主要內容:

1、UI設計中的肌理插畫分析

2、Sketch中的雜點是如何運用的

3、肌理插畫教程(附詳細步驟圖)

4、我畫的肌理插畫展示,啦啦啦

 

一、UI設計中的肌理插畫分析

Image title

上面的6幅圖是我從看到的那組圖當中選取出來的,我們可以看到,這些界面中的插畫在陰影部分和某些元素上都添加了雜點和漸變,使插畫的立體感和層次感都更好的體現了出來。下圖當中我把插畫當中添加雜點的地方以及具體的參數都標注了出來。

Image title

二、Sketch中的雜點是如何運用的?

想要畫出這樣的插畫,我們就要先了解一下Sketch中的雜點是如何使用的。

1、雜點在哪里添加? ? ?

答:在檢查器里填充的第六個

Image title

 

2、雜點的參數如何設置 ?? ??

答:雜點的文本主要有四種:原始、黑、白、顏色? 疊加模式和PS當中的一樣,通過分析上面的肌理插畫,我發現常用的主要有三種:正常、疊加、變暗。 強度不用設置太大,在5%-30%以內就可以了。

Image title

 

3、雜點的四種文本有什么區別?

答:通過下面的圖我們可以發現,雜點的密度:顏色>白>原始>黑,可以根據插畫所需要的雜點強度選擇不用的文本。

需要注意的是,雜點層要在顏色填充層的上方,不然雜點會被蓋住。另外在深色背景上可以選用變暗疊加模式,在淺色背景上可以選用疊加模式。這個也需要具體問題具體分析。

Image title

4、關于雜點的漸變效果

答:以下面這幅插畫當中的光束為例,講解一下怎么做漸變效果,注意雜點是做不了漸變效果的,要在新的一個圖層上作。

Image title

三、肌理插畫教程

下面我們以這幅圖為例,來講解一下如何使用Sketch繪制一幅肌理插畫

Image title

1、先來分解一下這些元素,是不是分解開就覺得很簡單了呢

Image title

2、新建一個375*667的畫板,設置畫板的Background color為#EFF1F3,再新建一個375*227的矩形,填充漸變為#ffffff-#DFE2E6

Image title

3、把植物進行分解,用鋼筆工具把這些形狀繪制出來,不要忘記加漸變哦。

Image title

4、用同樣的方法把杯子也進行分解,用鋼筆畫出來

Image title

5、把書也進行分解了,繪制好之后復制一個就可以了

Image title

6、把這些元素進行組合,添加上文案,添加上雜點,雜點的添加方式前面已經講過了哦,具體參數如下圖。

Image title

四、我畫的肌理插畫展示

這里選取了部分,主要是APP的引導頁和一些日程詳情頁面,部分是Sketch畫的,部分是AI,雜點都是Sketch加的,我加的雜點的強度都比較小,大家可以根據自己的情況進行調節。

Image title

以上內容都是自己總結的,可能還是會有許多不足,最后作為教程的這幅插畫的源文件放到附件里了。歡迎大家指正!

:)想要案例中源文件的同學可點擊下方下載附件~~

提取碼:z7fj

 

原文地址:UI中國

作者:MaryDesign

 

轉載請注明:學UI網 » 如何使用Sketch繪制肌理插畫?

登錄收藏
 
你可能喜歡的:
【系列插畫】扁平插畫小結(附筆刷)【系列插畫】扁平插畫小結(附筆刷)
佳作賞析:創意系列一組插畫佳作賞析:創意系列一組插畫
2020插畫趨勢大預測2020插畫趨勢大預測
畫一條/匹/頭/根大熊貓兒(三視圖)畫一條/匹/頭/根大熊貓兒(三視圖)
如何從0到1建立一套品牌插畫系統如何從0到1建立一套品牌插畫系統
如何建立一個強大的品牌插畫系統如何建立一個強大的品牌插畫系統
怎么畫一個萌萌噠的手繪頭像?(視頻+圖文教程)怎么畫一個萌萌噠的手繪頭像?(視頻+圖文教程)
干貨|如何設計并落地一個插畫系統?干貨|如何設計并落地一個插畫系統?
繪制多層次光影扁平風人物插畫(含詳細思路解析)繪制多層次光影扁平風人物插畫(含詳細思路解析)
插畫類Banner-設計實用分享插畫類Banner-設計實用分享
?
类似钱咖的高额赚钱