如何使用sketch绘制写实质感的图标？sketch质感图标制作教程-Mac教程-Mac完美下载

首页 > Mac下载 > 软件教程 > 如何使用sketch绘制写实质感的图标？sketch质感图标制作教程

发布日期：2020-10-16 17:09:05

相信大家经常见到如下图这种带有写实质感的图标，今天和大家分享一下如何使用sketch绘制这样的图标。只需要简单几步，你也可以用sketch绘制出这样的写实质感的图标。

我以下图绘制的这个图标为例，拆分成了3个步骤为大家介绍具体的使用sketch绘制过程。

第一步：找图片参考

使用sketch绘制写实质感图标，第一步需要找到一个适合的图片参考。我找了以下几个扳手和螺丝刀的实物图，用于基础形状的绘制。

找图的重点是：图片中物体的光影关系明确，有一定的透视，便于后期绘制光影关系。

第二步：使用sketch绘制基本形状

根据以上找到的图片参考，我提取出了下面的基础形状。

接着确定一个光源方向，参照参考图拉出图形基础的渐变，这里可以多加几个节点丰富层次，使渐变更加柔和。根据参考图形，在后期光影细节上我还要在基础形状上加入图形叠加，固这里的渐变我只加了3~4个节点。一般加3~5个左右的节点皆可，节点之间注意颜色深浅的变化。

第三步：加强光影关系

以上就基本完成了这个图标的绘制，但现在还是很扁平的感觉，质感不够强烈。接下来我们要通过分析参考图的光影关系进一步对图标优化。

由于添加细节较多，我就重点说明一下不同的细节对应的绘制方法。

1.柔和过渡，虚化高光，投影

善用高斯模糊工具，先绘制基础图形，然后对齐进行高斯模糊，调整到合适的数值。

这里强调一下投影需要进行两层或多层模糊，外层模糊数值更高，内层模糊数值较低，形成过渡。

2.平缓凹陷转折

图形剪切叠加，同时拉出渐变，交汇处图形间渐变颜色明暗关系明显，形成凹陷感。

3.深凹处光影

可直接采用内阴影叠加，也可绘制图形剪切并进行高斯模糊。

加上了对应的细节，最后呈现出来如下图。

划重点

用sketch绘制写实质感图标，重点是拉出多节点渐变，一般3~5个，以及后期对光影细节的刻画。在光影细节刻画中，要灵活使用高斯模糊工具绘制需要过渡的地方。用sketch绘制渐变剪切图形进行叠加，形成平缓的凹陷感。

原文地址：海盐社（公众号）
作者：人类君

Sketch Mac版

Sketch Mac版 SketchMac版是Mac上一个创新和新的眼光看待矢量绘图软件。SketchMac版以简约的设计是基于无限的规模和层次的绘图空间，免费调色板，面板，菜单，窗口和控件。虽然使用简单，它提供了功能强大的矢量绘图和文字工具;您可以免费下载。简体 · 53.00 MBM · 2020-10-09

热点资讯 更多: 英特尔正与台积电接洽，虑将部分芯片生产外包给台积电外媒报道称，英特尔正在与全球最大的芯片制造商台积电（TSMC）接洽，准备将自己的芯片制造业务外包出去。; 苹果iPhone 12国行上季度热卖：拿下20%份额销量达1800万根据外媒报道，上季度中国大陆地区iPhone 12销量达到1800万，苹果拿下20%智能手机市场份额。; 高通斥资约90亿收购芯片公司NUVIA 前苹果芯片架构大神加盟据外媒报道，高通公司1月13日以14亿美元收购芯片初创公司Nuvia。; 大公司晨读：B站计划3月港股上市；苹果斥资1亿美元力促种族平等 B站确定已在港提交上市申请；英特尔CEO 斯旺将于2月15日辞职。

相关教程 更多: Sketch一键导入AE工具–AEUX 发现了一款非常好用的插件，它的前身是Sketch2AE，花了一点时间研究了它的使用方法，好东西当然要大家一起分享！目前没找到汉化版，不过功能也不是特别复杂，分享出来是希望能提高大家平时在设计中的效率，如果有说的不对的地方还请帮我指正一下，谢谢~~ 先简单看一下基本功能一、基本功能（一）一键复制所有图层到AE 1.装好插件后，打开sketch，选择插件>AEUX，打开插件面板，再启; 超全面的sketch基础知识汇总，带你入门刚接触sketch这款软件的时候，针对最基础的知识点做了非常全面的笔记，方便日后查看，今天拿出来分享给大家，希望能够给刚接触这款软件的设计师朋友些许的帮助！这是我在刚接触sketch的时候做的超全面的笔记，今天分享大家。（公众号“UI充能站”出品，搜索i-lifeway进站）目录 · Sketch中画布的概念 · sketch中的快捷键 · view基础操作 · 形状之间的布尔运算 · 设置页面元素放大缩小; 【神器推荐】教你Sketch一键转成PSD! 现在大部分的UI设计师们都是在用sketch设计页面，它的轻量、插件、组件是能够极大提升我们的设计效率。但是，有一个致命问题就是，sketch和adobe爸爸家的软件不兼容，因此，不同软件的文件如何转换就是问题了…… 神器网址这里推荐一个神奇的网站：https://www.photopea.com/ 这个网站可以帮助我们把sketch转PSD。之前用过的朋友会发现：当我们直接使用它转换时，中文字体会直接变成口口口（; sketch秘技：如何利用symbol一秒更换配色首先看个见者伤心闻者落泪的例子：假设这个是你们公司的产品，从0到1，历经千辛万苦！你终于把所有页面都做完了！你很高兴：终于做完了~算一算调休假年假，休息一波走起！就在这时……，产品/老板跟你说：我们产品不用这个红色了，太俗气！换成蓝色！你数了数自己的83张界面……，你痛苦的摸摸自己那不再浓密的头发……，你开始一张张的改啊改啊改啊改啊...... 而隔壁公司的小明说：老板，给我1秒种，你看是不是

相关软件

Birdfont Mac版
英文. 29.00 MBM · 2020-09-29 BirdfontMac版是Macos平台上的一款可以制作自己专有字体的软件，这款软件可以制作出自己独有风格的字体，这是一款免费的软件，你可以在这款软件上发挥出自 ...
Plant Mac版
英文. 22.00 MBM · 2020-08-07 PlantMac版是Mac电脑上的一款适用于Sketch的简单而强大的版本控制插件。PlantMac版可以帮助用户更简单、更智能地管理Sketch文件，它支持保 ...
Crash Course Mac版
英文. 3.00 MBM · 2020-09-22 CrashCourseMac版是Mac电脑上的一款AdobePhotoshop视频教学软件。CrashCourseMac版内含超过440个AdobePhotos ...
Screenshot Designer Mac版
英文. 17.00 MBM · 2020-08-07 ScreenshotDesignerMac版是Mac电脑上的一款设计软件。ScreenshotDesignerMac版可以为应用开发者们创建引人入胜的AppSt ...