网页设计 » 视觉设计 » Sketch肌理插画教程(附案例源文件)

Sketch肌理插画教程(附案例源文件)

发表于: 视觉设计. 评论
Sponsor

我们知道Sketch做UI是非常方便的,虽然插画绘制方面却没有AI强大,但是绘制一些404界面、空间状态界面、简单的banner用Sketch是完全可以用途的。今天将分享目前流行的肌理插画教程,使用Sketch绘制,来一起学这个技法吧!

文末有教程源文件,可下载下来学习。

本文主要内容:

1、UI设计中的肌理插画分析

2、Sketch中的杂点是如何运用的

3、肌理插画教程(附详细步骤图)

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

一、UI设计中的肌理插画分析

Sketch肌理插画教程(附案例源文件)

上面的6幅图是我从看到的那组图当中选取出来的,我们可以看到,这些界面中的插画在阴影部分和某些元素上都添加了杂点和渐变,使插画的立体感和层次感都更好的体现了出来。下图当中我把插画当中添加杂点的地方以及具体的参数都标注了出来。

Sketch肌理插画教程(附案例源文件)

二、Sketch中的杂点是如何运用的?

想要画出这样的插画,我们就要先了解一下Sketch中的杂点是如何使用的。

1、杂点在哪里添加?

答:在检查器里填充的第六个

Sketch肌理插画教程(附案例源文件)

 

2、杂点的参数如何设置 ?

答:杂点的文本主要有四种:原始、黑、白、颜色 叠加模式和PS当中的一样,通过分析上面的肌理插画,我发现常用的主要有三种:正常、叠加、变暗。 强度不用设置太大,在5%-30%以内就可以了。

Sketch肌理插画教程(附案例源文件)

 

3、杂点的四种文本有什么区别?

答:通过下面的图我们可以发现,杂点的密度:颜色>白>原始>黑,可以根据插画所需要的杂点强度选择不用的文本。

需要注意的是,杂点层要在颜色填充层的上方,不然杂点会被盖住。另外在深色背景上可以选用变暗叠加模式,在浅色背景上可以选用叠加模式。这个也需要具体问题具体分析。

Sketch肌理插画教程(附案例源文件)

4、关于杂点的渐变效果

答:以下面这幅插画当中的光束为例,讲解一下怎么做渐变效果,注意杂点是做不了渐变效果的,要在新的一个图层上作。

Sketch肌理插画教程(附案例源文件)

三、肌理插画教程

下面我们以这幅图为例,来讲解一下如何使用Sketch绘制一幅肌理插画

Sketch肌理插画教程(附案例源文件)

1、先来分解一下这些元素,是不是分解开就觉得很简单了呢

Sketch肌理插画教程(附案例源文件)

2、新建一个375*667的画板,设置画板的Background color为#EFF1F3,再新建一个375*227的矩形,填充渐变为#ffffff-#DFE2E6

Sketch肌理插画教程(附案例源文件)

3、把植物进行分解,用钢笔工具把这些形状绘制出来,不要忘记加渐变哦。

Sketch肌理插画教程(附案例源文件)

4、用同样的方法把杯子也进行分解,用钢笔画出来

Sketch肌理插画教程(附案例源文件)

5、把书也进行分解了,绘制好之后复制一个就可以了

Sketch肌理插画教程(附案例源文件)

6、把这些元素进行组合,添加上文案,添加上杂点,杂点的添加方式前面已经讲过了哦,具体参数如下图。

Sketch肌理插画教程(附案例源文件)

四、我画的肌理插画展示

这里选取了部分,主要是APP的引导页和一些日程详情页面,部分是Sketch画的,部分是AI,杂点都是Sketch加的,我加的杂点的强度都比较小,大家可以根据自己的情况进行调节。

Sketch肌理插画教程(附案例源文件)

下载sketch插画源文件

以上内容都是自己总结的,可能还是会有许多不足,最后作为教程的这幅插画的源文件放到附件里了。欢迎大家指正!

想要案例中源文件的同学可点击下方下载附件

下载地址:https://pan.baidu.com/s/1IJI3l6WIabyO4scPSGnDLQ
提取码: s75y

作者 | MaryDesign
个人主页 | i.ui.cn/ucenter/907702.html

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:结交更多有才华的设计师?请加入UI设计QQ群,与50000名设计师交流设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }