创建一个倾斜的徽标的无缝，花木图像

Question

这不是一个直接的编程问题，但它确实使用了一些数学和css，现在它一直在困扰着我。

我的目标是创建一个倾斜的徽标图像（带有旋转的标志，例如35度），并使其可以平铺。我已经提到this well thought out question但我目前有点停留在阶段1

所以说，这是我的标志：

它不是在它的顶部有一个小图标，以便定期左侧，它没有设置在一个设置大小的矩形内，所以它的边界不明显。

我猜，第一步就是使它在目前的形式下变得更加可爱。只是应用CSS瓷砖规则，因为它代表会导致这样的事情，这是没有好处：

理想的情况下，才将其旋转，我们要交替行应偏移，因此它不太网像。

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

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

完成此操作后，我有一个图像网格，现在我可以将其作为一个在Photoshop中旋转到所需的角度。困难将会使作物区域正确。然后我会参考上面的链接。

增加的困难是确保我们有一个适合水平标志的大小适当的作物区域。如果边缘的比例意味着我们有非常高的比例，那么我的旋转裁剪区域将是巨大而毫无意义的。

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

Answer 1

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

• 因此，第一步是制作一个水平格子的徽标，就像问题中的最后一个例子。 通过将徽标放置在画布的左上角，然后裁剪画布以使徽标恰好嵌入其中。

• 接下来，如有必要，将画布调整为大约所需图像的大小。在这个阶段，长宽比并不重要，我们只是想拥有一个可管理的图像大小来工作。宽度为250像素是很好的。这样做的结果很可能是，你会对另一个边缘有一个奇怪的维度。例如。 250px宽×78px高。

• 现在我们用空白空间填充徽标。这将有2个目的。首先要在徽标之间留出足够的空间，其次要获得良好的宽高比。这非常重要。如果可能的话，尝试制作您的画布，使一个边缘为另一个边缘长度的1/2或1/3。这将有助于我们尽可能降低最小公倍数。调整画布大小时，请确保将实际徽标保留在画布的左上角，填充物位于图像的右侧和底部。

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

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

• 将刚刚制作的图层文件夹复制到新文档中，方法是在选中图层并重复时选择新文档作为目标。

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

• 保持复制和捕捉到位，直到您已经用瓷砖覆盖大型画布。

• 现在做一个会产生图像的作物。获取选择工具并选择fixed size选项。输入一个像素大小，使得选择的边长与原始图像的长度相同。即如果您的原始图像是150px x 50px，那么您应该使裁剪尺寸为150px x 150px。

• 单击画布上的任意位置进行选择，复制并合到一个新的文档中，并且您应该会发现您可以使用可以使用的图形图像，尽管使用了水平标志。

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

• 现在计算您的作物的大小。如下所示：

  1. 找到最小公倍数。所以如果你的尺寸是150x50 LCM = 150。

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

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

这种方法工作在对待我的company's Twitter page

正如我所说的，任何计算裁切尺寸方法等角度会很有帮助。