自制复古几何无缝纹案背景_html/css_WEB-ITnose

几何纹理应该算作是颇具现代感的装饰风格，但将几何形状经过创造性的叠加，就会组合成新的具有复古风味的纹理图案。

本教程为我的原创文章，请转载本文时告知作者并载明原文出处。原文出处请 点击这里 。

前言

几何纹理应该算作是颇具现代感的装饰风格，但将几何形状经过创造性的叠加，就会组合成新的纹理图案。这种图案略带复古风味，我们可以运用这些复古的纹样打造无缝图案，很多时候在传统风格的设计时，作为素材使用。

寻找灵感

中国的传统纹样有很多值得借鉴的地方，于是我们从传统纹样的图片中寻找创作灵感。如果有兴趣，大家可以 点击这里 下载更多。

立即学习“前端免费学习笔记（深入）”；

这些纹样相对比较繁复，我们在创作时可以稍微将其简化。你也可以在白纸上画草图，或者直接用手绘板画出自己的构想。

纹理的组合

在开始动手绘制图案前，我们要大致对成品进行一个总体规划，即逆向推理。这听起来是侦探小说的环节，其实在设计中也必不可少。你可以首先在大脑中构想出一个理想效果，然后对这个效果进行反推。

通常我把整个设计过程简化为“构图”“细节处理”和“最终效果”这三个大环节，其中“构图”部分包括了对整体版式风格的表现方式的选择，细节处理就包括了配色、字体设计、排版等，而最终效果包括最终的细部调整等。这三个环节是一环紧扣一环前后相继的，然而你也可以采用先通过想象最终效果，再来进行构图和细节处理的顺序。

立即学习“前端免费学习笔记（深入）”；

比如在本例中，我的最终效果纹理是这样一个简单构想。纹理由分别由大中小三个图案组成。它们在单个纹理的构图是这样的。

立即学习“前端免费学习笔记（深入）”；

有个大概的构图，我们就可以动手开始绘制图案了。

小型图案的绘制

先让我们绘制最小的图案。打开PS，新建一个250*250px的文档。打开文档的标尺，并运用辅助线，将其定位到中心的位置。然后将前景色设置为紫色，填充紫色背景。如下图所示。

立即学习“前端免费学习笔记（深入）”；

以中心点的位置为圆心，用椭圆工具画一个圆。这个圆保持填充为无，线条为1px，线条颜色为白色。

立即学习“前端免费学习笔记（深入）”；

在这个圆的中心画上许多小圆，这些小圆由一个作为花心，四周包围，组合成一个简单的花型。这也是最简单的花型，取自莲花花心的创意。

立即学习“前端免费学习笔记（深入）”；

再画上两个长形的椭圆，让它们摆成十字。放在刚刚的图形上方，使之有交叠，这样让图案更丰满。

立即学习“前端免费学习笔记（深入）”；

运用多边形工具，设置边数为3，放在正上方，然后复制这个三角形，垂直对称放置于正下方。将这两个三角形复制后，再旋转30度，根据这样复制旋转的过程操作几次就能得到一个由三角形围绕而成的图案了。

立即学习“前端免费学习笔记（深入）”；

这时运用直接选择工具，选择其中一个三角形的锚点，将每个锚点对齐像素网格。这样做的目的是为了让图形保持精细，利用像素网格是一个不错的选择。像素网格是在当你放大图形能看到像素的时候出现的，如果还没有出现，请在【视图>显示>像素网格】中勾选打开。按照这一方式将所有的三角形的锚点都与像素网格对齐。

立即学习“前端免费学习笔记（深入）”；

这是缩放到100%大小的外观

立即学习“前端免费学习笔记（深入）”；

我们的小图案绘制完成后可以将上面的图层编为一组，将其隐藏。

中型图案的绘制

中型的图案比小型图案稍微复杂，因此我们用了PS自带的一个矢量图形作为中心。图形依然是保持空白填充，白色描边1px。

立即学习“前端免费学习笔记（深入）”；

仍然是从自带的矢量图形中找到心形，然后将心形摆放在四角。同时用两个矩形加以重叠，其中一个矩形旋转45度。矩形为空心填充，描边是白色描边2px。

Blackink AI纹身生成

创建类似纹身的设计，生成独特纹身

17

查看详情

立即学习“前端免费学习笔记（深入）”；

这时的图形会显得中间的位置有些空，因为是复古风格，那么花纹尽量保持丰满，因此我再添加上一圈椭圆，模拟花朵的形状。然后再添加两个重叠的小圆圈在每个矩形直角的顶部作为装饰。外面的小圆圈的描边线条为2px，内部的为1px。

立即学习“前端免费学习笔记（深入）”；

请记得检查矩形的锚点是否和像素网格对齐。还是缩放到正常大小，将我们的中型的图案编为一组，将其隐藏。

立即学习“前端免费学习笔记（深入）”；

大型图案的绘制

大型的图案当然是最为复杂的，但其实在演示了上面两个图案的绘制过程后，大家会发现其实这些图案都是由非常简单的图形所构成的。运用简单的几何图形就能创造出某种复杂美。

还是来绘制中心。这个中心的位置采用两个圆组成，再在圆心中用椭圆组合一朵花型，大家可以仔细观察发现花瓣是梭型的，这需要你先画好长条的椭圆，然后利用转换点工具点击两端对齐的锚点，这时椭圆就变为了梭型。

立即学习“前端免费学习笔记（深入）”；

在圆的外部再用小圆组合围绕，你可以先画一个圆，再对称放一个圆，然后把这个两个圆旋转30度，这样重复这一步骤就能形成围绕的图形。然后用同样的方式画三角形。三角形的锚点对齐像素网格。

立即学习“前端免费学习笔记（深入）”；

再画上两个大圆，描边为2px，这时大圆外再在四角位置放置小圆，小圆内用上自带的矢量图形，放置其中。

立即学习“前端免费学习笔记（深入）”；

这时再增加外围的更大的圆圈，这个圆圈的描边为4px，由于这里我们不希望这个大圆遮挡四角的装饰圆，因此我们可以用蒙版，将与装饰重叠的部分抹去。这样有一个层次感，让画面更为丰满。

立即学习“前端免费学习笔记（深入）”；

这里的几何图形的组合是非常随机的，只要定好了总的基调，就能非常自由地组合各种图案。让我们看看原大小的成品。

立即学习“前端免费学习笔记（深入）”；

定义无缝纹理

这时我们把小型的图案打开，放置于四边中点的位置。它的中心要刚好在画布四边的中点上。

立即学习“前端免费学习笔记（深入）”；

中型图案放置于画布的四角，它的中心刚好和四角顶点对齐。

立即学习“前端免费学习笔记（深入）”；

大型图案放置于画布中央。这时这个无缝图案就组合好了。

立即学习“前端免费学习笔记（深入）”；

关掉背景图层，然后来到【编辑>定义图案】，保存为“复古纹理”。

立即学习“前端免费学习笔记（深入）”；

这时我们的复古无缝纹理就制作完成，大家可以在新建文档中使用查看纹理效果。比如在任意的图层上方填充图案，选中这一图案就会出现我们的作品。

立即学习“前端免费学习笔记（深入）”；

后记

复古纹理运用在与传统文化相关的设计中非常适宜，这时需要注意其他出现的元素也需符合这一风格，比如字体也尽量保持中式风格，但同时也需要简洁美观。纹理的繁复和简单全凭自己创造，这一过程本身也是一种享受。