我经常在 Photoshop 中创建用于网络的背景纹理。不幸的是，我通常不得不猜测，或者只是使用其他网站的免费赠品。
我想在 Photoshop 中构建自己的纹理，并在导出图像之前检查它们是否正确平铺。有没有办法快速做到这一点？我记得一个使用偏移的方法，但我不熟悉这些工具。
下面是几个示例背景图块，因此您可以看到我在说什么：
测试 BG 是否会在 Photoshop 中正确重复平铺？
平面设计
adobe-photoshop
网站设计
背景
瓷砖
2022-01-07 17:47:24
4个回答
- 创造你的形象。例如，假设它是 200px 正方形
- 转到过滤器>其他>偏移并输入图像大小一半的x和y数字（在本例中为100px）
- 这会将您的图像移动到那么多像素上，并将从画布上移出的像素放在另一侧。你现在会看到一个接缝在你的图像中间延伸，那里的图案没有完全重复。
- 使用您喜欢的任何工具（克隆工具是一种常见的选择）来修饰此接缝以使其平滑混合。
- 保存您的新图像。
对于更复杂的图像，您可能需要进行 1/4 像素尺寸的最终偏移，以修饰您第一次可能错过的落在画布边缘附近的边缘。
DA01 回答了如何制作，但您的问题是如何测试它。这个问题的答案是：
- 选择你的图案层
- 编辑 > 定义图案
- 创建新图层
- 全选
- 编辑>填充>图案>选择你的图案
- 点击确定，看看它是否看起来不错
我传统上将图像保存为 jpg 或 png，然后使用基本的 html 来测试平铺。
<html>
<head></head>
<body style="background: url(image.jpg) repeat 0 0;">
</body>
</html>
在浏览器中打开它，您可以看到平铺，只需重新保存“image.jpg”并刷新网页以检查修订。
还有另一种方法可以做到这一点，但限制是所有其他模式必须具有相同的大小，你会明白为什么。
脚步：
- 制作一个 200 像素 x 200 像素的框。
- 将其转换为智能对象。
- 复制并对齐它，使水平方向有 3 个框。确保两者之间没有重叠或空格。
- 将选定的三个框复制到 3 个垂直列中。
- 如果尚未启用，请在首选项中启用浮动窗口。
- 双击并打开智能对象。
- 对齐两个窗口，以便您可以看到这两个文件。
- 用您想要的任何模式填充智能对象，并同时在其他窗口中查看它的运行情况。