回転したタイル状のパターンを作成

Following on my tutorial on how to make tileable stripe patterns, this is a tutorial on how to make tileable rotated versions of any tileable pattern or texture (for example, a rotated checkerboard, a tilted grid or an angled weave pattern). This is a little more complicated than the stripes pattern and requires a bit more math. As with the previous tutorial, the problem is to take a tileable texture and rotate it and still keep the rotated texture tileable as part of a web page background or something like that. Shown below is a generic tileable pattern where I highlighted the repeating texture element (texel), along with a rotated version of the same texture. Tiling is easy for the unrotated image, all you need to do is make an image that contains exactly one of the repeating texture elements. The rotated texture is trickier to tile and you can see that the pattern at each edge of the image will be hard to match up with the opposite edge. This tutorial works out how to make it tileable.

タイル化可能なストライプパターンの作り方のチュートリアルに続いて、今回は、タイル化可能な任意のパターンやテクスチャ(例えば、回転したチェッカーボード、傾いたグリッド、角度のついたウィーブパターンなど)の回転バージョンをタイル化する方法のチュートリアルです。これは、縞模様のパターンよりも少し複雑で、もう少し計算が必要になります。先ほどのチュートリアルと同様に、問題は、タイル化可能なテクスチャーを回転させても、回転したテクスチャーをWebページの背景などの一部としてタイル化できるようにすることです。下の図は、一般的なタイル状のパターンで、繰り返しのテクスチャ要素(テクセル)を強調したものと、同じテクスチャを回転させたものを示しています。回転していない画像をタイリングするのは簡単で、繰り返しのテクスチャ要素をちょうど1つ含む画像を作るだけです。回転したテクスチャの場合は、タイル化が難しく、画像の各エッジのパターンを反対側のエッジと一致させるのが難しいことがわかります。このチュートリアルでは、それをタイル化できるようにする方法を説明します。

Unrotated generic pattern with repeating texel highlightedRotated generic pattern with repeating texel highlighted

Although this tutorial is written for the GIMP, there are actually very few GIMP-specific instructions. It is therefore applicable to Photoshop or any other paint program.

このチュートリアルはGIMPのために書かれたものですが、 実際にはGIMPに特化した説明はほとんどありません。そのため、 Photoshop やその他のペイントプログラムにも応用できます。

The strategy is identical to the tileable stripes tutorial:

攻略法は、タイル状のストライプのチュートリアルと同じです。

  1. Take an unrotated, tileable texture that repeats horizontally and vertically.
  2. 水平方向と垂直方向に繰り返される、回転していないタイル状のテクスチャを用意します。
  3. Tile it to a large image.
  4. タイル化すると大きな画像になります。
  5. Rotate the large image by the desired angle.
  6. 大きな...
开通本站会员,查看完整译文。

首页 - Wiki
Copyright © 2011-2025 iteam. Current version is 2.144.0. UTC+08:00, 2025-06-06 14:54
浙ICP备14020137号-1 $访客地图$