幾何

前幾天的時候在網上看到了一組很漂亮的空狀態界面,全部都是由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繪制肌理插畫?

登錄收藏
 
你可能喜歡的:
插畫類Banner-設計實用分享插畫類Banner-設計實用分享
Sketch 63 Beta版本探秘,看看都有什么新功能Sketch 63 Beta版本探秘,看看都有什么新功能
“不誤正業”的sketch-2 動畫GIF“不誤正業”的sketch-2 動畫GIF
星夜插畫教程(附筆刷)星夜插畫教程(附筆刷)
插畫新手來盤!看過很多大作,卻仍舊畫不好插畫?(附筆刷)插畫新手來盤!看過很多大作,卻仍舊畫不好插畫?(附筆刷)
“不務正業”的sketch——插畫繪制(附插件)“不務正業”的sketch——插畫繪制(附插件)
漫畫內容設計之專題三板斧漫畫內容設計之專題三板斧
AI+PS繪制扁平滑輪少女風格插畫AI+PS繪制扁平滑輪少女風格插畫
夢幻插畫-日出創作過程夢幻插畫-日出創作過程
繪制酸唧唧的泡菜黃瓜繪制酸唧唧的泡菜黃瓜
?
5星腾龙时时彩做号软件 生肖时时彩 总进球 黑龙江时时彩 今日上证指数多少新浪 胜平负 江西快3 安徽时时彩 股票融资比例是多少 河北快3 什么叫配资 天臣配资 江苏快三 股票配资平台有哪些是正规的 配资炒股找久联优配 澳洲幸运10 极速时时彩