图像平铺_制作无缝平铺图像的五个步骤

图像平铺

Images brought onto a web page via CSS as backgrounds have the advantage of automatic tessellation: they tile both horizontally and vertically by default. This makes them very suited for fluid designs

通过CSS作为背景带到网页上的图像具有自动细分的优势：默认情况下，它们在水平和垂直方向上都平铺。这使得它们非常适合流体设计

Before we get to the sequence of making a tiled image, there are five unspoken rules:

在开始制作平铺图像的序列之前，有五个潜规则：

Determine that you have rights to the image; both of the images I use here are licensed under Creative Commons.

确定您有权使用该图像；我在此处使用的两个图像均已获得知识共享许可。
Always use the highest resolution version of the image available.

始终使用可用图像的最高分辨率版本。
save a copy of the original image in the originals folder of your site.

将原始图像的副本保存在网站的originals文件夹中。
Set up PhotoShop correctly.

正确设置PhotoShop。
Crop the image so that it only shows the part of the image you wish to use: anything that is a pure color (such as black or white) can be replaced by using background-color

裁剪图像，使其仅显示要使用的图像部分：任何纯色(例如黑色或白色) background-color都可以使用background-color替换

Now the steps to make it a tessellated image:

现在，使它成为细分图像的步骤：

确定该图像适合平铺。 (Determine that the image is suitable for tiling.)

An image with a significant singular feature – a visible sun or moon in the sky, for example – is likely to be inappropriate as a tiled background image without considerable editing. In addition, the horizon of the image must be horizontal, as the right and left edges of the image (or top and bottom, if you are tiling vertically) must match. The best way to check this is to turn on rules (

CMD-R) in PhotoShop and drag out a guide across the horizon line.

CMD-R )，然后在视线范围内拖出参考线。

预览图像的平铺 (Preview the tiling of the image)

Adobe has the Pattern Maker plugin for PhotoShop (now an optional download for CS5), but I’ve never found it terribly useful. Instead, I use this tried-and-true technique:

Adobe为PhotoShop提供了Pattern Maker插件 (现在是CS5的可选下载)，但我从未发现它非常有用。相反，我使用了这种久经考验的技术：

From the menu bar, choose

Filter / Other / Offset…

过滤器” /“其他” /“偏移...”。

Offset the image in the direction you wish to tile it by approximately half the image’s width. You will see PhotoShop move the image across the canvas, wrapping the excess around the other side.

沿您希望平铺图像的方向将图像偏移大约图像宽度的一半。您将看到PhotoShop在画布上移动图像，将多余的部分包裹在另一侧。

If the wrapped image looks seamless, it is good; either cancel the filter, or move the invisible "join" via the Offset filter to an aesthetically pleasing position, click OK, resize the image, and use Save for Web and Devices. You may find that you will need to use a slightly higher quality level than normal if saving the image as a JPEG (50 – 60), due to the fact that the JPEG algorithm tends to introduce artifacts in the edges of the image. These artifacts will not be seen until you tile the image in the web page itself, so you may need several go-rounds of compressing and saving, experimenting with different levels of compression.

如果包装后的图像看起来无缝，那很好。或者取消过滤器，或通过“ 偏移”过滤器将不可见的“连接”移动到美观的位置，单击“ 确定” ，调整图像大小，然后使用“ 为Web和设备保存” 。您可能会发现，如果将图像另存为JPEG(50 – 60)，则需要使用比正常水平稍高的质量级别，这是因为JPEG算法会在图像边缘引入伪影。在将图像平铺在网页本身之前，将看不到这些伪像，因此您可能需要进行多次压缩和保存，并尝试不同的压缩级别。

If the wrapped image is

not seamless, move the offset to a round number that is easily remembered and press OK, then use the appropriate tools to smooth the transition between the left and right edges. I would suggest the Clone Stamp tool, but the Healing Brush and Patch tool, among others, could be equally appropriate.

不是无缝的，请将偏移量移至易于记忆的整数，然后按OK ，然后使用适当的工具平滑左右边缘之间的过渡。我建议使用“ 克隆图章”工具，但是“ 修复画笔和修补程序”工具可能同样适用。

As before, either reset the Offset of the image, or move the now-invisible join to another location, resize the image, and export the image in a web-ready format.

与以前一样，可以重置图像的偏移，或将现在不可见的联接移动到另一个位置，调整图像的大小，然后以可用于Web的格式导出图像。

The image should now be ready to use as a tiled background in a web page via CSS.

现在应该可以通过CSS将图像用作网页中的平铺背景。

翻译自: https://thenewcode.com/264/Five-Steps-To-Making-A-Seamless-Tiled-Image

图像平铺