欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

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

发布时间:2017:11:06 22:44:33 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有962个文字,预计阅读时间3分钟
导语
前几天的时候在网上看到了一组很漂亮的空状态界面,全部都是由Sketch完成,并且添加了肌理,颜色清爽、界面干净。正好我前一段做的产品当中也用到Sketch做了一些肌理插画,所以在

  前几天的时候在网上看到了一组很漂亮的空状态界面,全部都是由Sketch完成,并且添加了肌理,颜色清爽、界面干净。正好我前一段做的产品当中也用到Sketch做了一些肌理插画,所以在这里给大家讲解一下如何用sketch当中的杂点绘制肌理插画,分享一些小经验给大家。(ps:好吧,我觉得我对肌理插画有执念,哈哈)

  本文主要内容:1、UI设计中的肌理插画分析2、Sketch中的杂点是如何运用的3、肌理插画教程(附详细步骤图)4、我画的肌理插画展示,啦啦啦

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

  

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

 

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

  

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

 

  二、Sketch中的杂点是如何运用的?想要画出这样的插画,我们就要先了解一下Sketch中的杂点是如何使用的。1、杂点在哪里添加? 答:在检查器里填充的第六个

  

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

 

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

  

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

 

  3、杂点的四种文本有什么区别?答:通过下面的图我们可以发现,杂点的密度:颜色>白>原始>黑,可以根据插画所需要的杂点强度选择不用的文本。需要注意的是,杂点层要在颜色填充层的上方,不然杂点会被盖住。另外在深色背景上可以选用变暗叠加模式,在浅色背景上可以选用叠加模式。这个也需要具体问题具体分析。

  

如何使用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绘制肌理插画?

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:关于OPPO社区中“我的”页面设计的几点心得

下一篇:设计总结:滑块控件

  • 18900 文章总数
  • 2375535访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信