发布时间:2022-11-25 分类: 行业资讯
几天前,我在互联网上看到了一套非常漂亮的空状态界面,所有这些都是由Sketch完成的,并增加了纹理,清新的色彩和干净的界面。我在前一段中制作的产品也使用了Sketch来做一些纹理插图,所以在这里我将解释如何使用草图中的草图绘制纹理插图并为每个人分享一些小经验。 (ps:好的,我想我对纹理图有一种痴迷,哈哈)
本文的主要内容如下:1。UI设计中的纹理图解析2.如何使用Sketch 3中的噪声,纹理图教程(详细步骤图)4。我的画的纹理图,La la la
I. UI设计中纹理图示的分析
以上六个数字是从我看到的一组图片中选出的。我们可以看到这些界面中的插图为阴影和某些元素添加了噪点和渐变,使插图具有三维外观。并且更好地反映了分层。在下面的图片中,我标记了插图添加噪声和特定参数的位置。
二,如何在Sketch中使用噪音?要绘制这样的插图,我们必须首先了解如何使用Sketch中的噪声。 1.噪音在哪里?答:第六个填写了检查员
2.如何设置噪声参数?答:有四种主要类型的噪音:原始,黑色,白色和彩色叠加模式与PS中的相同。通过分析上面的纹理图,我发现有三种主要类型:正常,叠加,暗化。强度不需要设置得太大,可以在5%-30%之间。
3.四种噪音有什么区别?答:通过下图,我们可以发现噪声的密度:颜色>白色>原创>黑色,可根据插图文字所需的噪声强度进行选择。应该注意的是,噪声层应该在颜色填充层之上,否则噪声将被覆盖。此外,可以在暗背景上选择变暗叠加模式,并且可以在浅色背景上选择叠加模式。这还需要对具体问题进行具体分析。
三,纹理图教程下面我们以此图片为例说明如何使用Sketch绘制纹理图
1.首先分解这些元素,是否容易将其分解?
2.创建一个新的375 * 667绘图板,将绘图板的背景颜色设置为EFF1F3,并创建一个新的375 * 227矩形。将渐变填充到ffffff-DFE2E6
3.分解植物并使用钢笔工具绘制这些形状。不要忘记添加渐变。
4.以相同方式分解杯子并用笔绘制
5.分解书籍,并在绘制后复制。
6,这些元素的组合,加上上面的情况,添加噪声,添加噪声的方式已经提到过,具体参数如下。
四,我的绘画纹理插图在这里显示所选部分,主要是APP的引导页面和一些时间表细节页面,一些是Sketch绘制的,一些是AI,噪声是由Sketch添加的,增加了噪声的强度由我。它们相对较小,每个人都可以根据自己的情况进行调整。