为带角度的徽标创建无缝，可平铺的图像

Question

这不是一个直接的编程问题，但它确实使用了一些数学和CSS，而且它已经困扰了我一段时间。

我的目标是创建一个有角度的徽标图像（标志旋转，比方说35度）并使其可以平铺。我已经提到了this well thought out question但我现在有点陷入第1阶段。

所以说这是我的标志：

它不是那么规律，左上角有一个小图标，它不会设置在一个设置尺寸的矩形内，所以它的边界不明显。

我想，第一步是以当前形式制作它。只是将css tile规则应用于它就会产生类似这样的东西，这是不好的：

理想情况下，在我们旋转它之前，我们希望交替的行被偏移，因此它不像类似网格。

偏移量显然应该是2个相邻徽标上相同点之间空间的50％。实现这一步的最佳方法是什么？我只是复制/粘贴并拖动它直到看起来正确吗？这不会那么准确。 （使用photoshop）。

然后我需要确定裁剪区域，以便无缝重复。

一旦完成，我有一个图像网格，我现在可以在photoshop中旋转到我想要的角度。困难在于使作物区域正确。然后我会参考上面的链接。

增加的难度在于确保我们为水平徽标设置了适当大小的作物区域。如果边缘的比例意味着我们有一个非常高的least common multiple那么我的旋转裁剪区域将是巨大的，毫无意义。

总之，可靠地设置水平网格的最佳方法是什么，以便我们得到具有合理尺寸的裁剪区域（例如150 x 100像素）？

Answer 1

好吧，经过一些艰苦的尝试，我已经破解了它，但只有45度旋转。如果有人能就如何计算其他角度的作物面积提出建议，我会感兴趣。

• 所以第一步是制作一个水平的徽标网格，就像问题中的最后一个例子一样。 通过将徽标放在画布的左上角然后裁剪画布使徽标恰好适合内部来完成此操作。

• 接下来，如果需要，请将画布调整到大约我们想要的图像大小。在这个阶段，宽高比并不重要，我们只想拥有一个可管理的图像尺寸来工作。像250px宽的东西是好的。这样做的结果很可能是你对另一条边有一个奇怪的维度。例如。 250px宽x 78px高。

• 现在我们用空格填充徽标。这有两个目的。首先要在徽标之间留出足够的空间，然后再获得良好的宽高比。这非常重要。如果可能的话，尝试制作画布，使其中一条边是另一条边长度的1/2或1/3。这将有助于我们尽可能地减少最不常见的倍数。调整画布大小时，请确保将实际徽标保留在画布的左上角，并且填充位于图像的右侧和底部。

• 我们现在想要手动平铺图像，但也包括填充区域。如果我们只是复制它，因为它可以忽略填充区域并仅复制徽标本身。创建一个新图层并将其放在带有徽标图层的图层文件夹中。用颜色填充此图层。

• 现在制作一个新的photoshop文档。使画布尺寸相当大;像1000px x 1000px。

• 将刚刚制作的图层文件夹复制到此新文档，方法是选中新图层作为目标，然后选择新文档作为目标。

• 现在通过复制图层并拖动它来平铺此文件夹。首先向下拖动第一个副本然后向右拖动。 Photoshop通过将关键点的图层捕捉到原始图层来帮助解决这个问题。您会发现，当复制图层的上边缘接触原始图层的下边缘时，您可以将复制图层捕捉到，并沿着长度移动一半，使其水平偏移。

• 保持复制和对齐，直到你大部分覆盖了带有瓷砖的大画布。

• 现在制作一个可以生成可平铺图像的裁剪。获取选择工具并选择fixed size选项。输入像素大小，使选区成为正方形，其边长与原始图像的长度相同。即如果您的原始图像是150px x 50px，那么您应该将裁剪尺寸设为150px x 150px。

• 点击画布上的任意位置进行选择，复制合并到新文档，然后您会发现可以使用的图块化图像虽然带有水平徽标。

• 现在旋转它。转到大平铺文档。 Ctrl-D取消选择。编辑 - ＆GT;旋转画布45deg。

• 现在计算作物的大小。具体如下：

  1. 找到最不常见的倍数。因此，如果您的尺寸为150x50 LCM = 150。

  2. 裁剪框的大小是直角三角形的斜边，其他边长=对于LCM。即如果LCM = 150，L = sqrt（150 ² * 150 ² ）= 212.12。

• 现在制作旋转画布大小为212（在这种情况下）的方形裁剪（任何地方都可以）。这应该是一个可以保存，调整大小，编辑等的可平铺图像。

此方法适用于我的company's Twitter page

正如我所说，任何计算其他角度裁剪尺寸的方法都会有所帮助。