恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
如何使用Sketch绘制肌理插画?
0.0°
2017-11-07 原创文章 经验/观点 举报 20527 863 696 59

Image title


写在前面:前几天的时候在网上看到了一组很漂亮的空状态界面,全部都是由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


以上内容都是自己总结的,可能还是会有许多不足,最后作为教程的这幅插画的源文件放到附件里了。欢迎大家加我微信和我交流:wangmeirui630,也可以关注我的公众号:MaryDesign,以后UI中国上的文章都会在公众上进行同步,刚开始运营公众号,希望大家支持一下哦。







更新:2017-11-07

下载
收藏

863人已收藏

MaryDesign

求职、视觉、坐标北京

  • 20

    作品

  • 3883

    粉丝

  • 137

    关注

  • ofo《我们看过的世界杯》H5
  • 2017插画作品集
  • 怎么画一个萌萌哒的手绘头像?(视频+图文教程)
  • 近期作品总结
相关标签
设计教程

    猜你喜欢

      2017-11-07 原创文章 经验/观点 举报 20527 863 696 59

      如何使用Sketch绘制肌理插画?

      0.0°

      你确定要举报如何使用Sketch绘制肌理插画?

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年11月03日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      696
      863
      59

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录