游戏邦在:
杂志专栏:
gamerboom.com订阅到鲜果订阅到抓虾google reader订阅到有道订阅到QQ邮箱订阅到帮看

使用Photoshop制作游戏的无缝纹理

发布时间:2011-08-02 14:54:01 Tags:,,

本教程将告诉大家如何无缝地平铺图像和如何使用Photoshop制作平铺纹理。这个平铺技术也适用于其他图像编辑器。

在本教程里,你将学会如何选择一种合适的纹理及如何对纹理进行无缝处理。

你还可以学会如何减少纹理中的高反差区。这种非常少讨论到的技术会使你的平铺材质看起来更自然。

选择合适的纹理

选择一种合适的纹理非常简单,你只需记住几点。

理想的材质应该尽可能大。这样可以减少将纹理平铺在表面上所需的次数。

理想的材质应该几乎没有硬线或边缘。虽然有硬线或边缘的材质也可以进行平铺,但要使它们看起来自然一些,是比较困难的。

这种纹理就不太合适(from gameinnovator)

这种纹理就不太合适(from gameinnovator)

在开始制作无缝纹理时,应确保材质的宽和高可一分为二。如有必要,就裁切纹理,把它调整到恰当的高度和宽度。为什么要这么做?原因稍后解释。

纹理无缝化处理

在本教中,我们将使用到的是一个漂亮的大岩石纹理,上面没骨硬线或边缘。它的大小是600*250。

让我们先来看看把它平铺到表面上是怎么样的:

它的重复纹理看起来很明显(from gameinnovator)

它的重复纹理看起来很明显(from gameinnovator)

在Adobe Photoshop或类似的制图工具中打开图像。从菜单中选择滤镜/其他/位移(Filter/Other/Offset)。

将水平位移设置为图像的一半宽,重直位移为图像的一半高。因为高度和宽度被一分为二了,所以图像应该很容易从原位置位移。

offset(from gameinnovator)

offset(from gameinnovator)

从工具栏中选择复制工具。用复制工具复制图像的其他部分,然后再用来平滑图像的边缘。

所有边缘平滑处理后,使用位移滤镜将图像移回原位。

重复的图案仍然很明显(from gameinnovator)

重复的图案仍然很明显(from gameinnovator)

以下图像显示了新纹理的样子。缝合处已经被清除了;但是,重复的图案仍然很明显。

应该尽可能减少纹理上的高对比区,否则会很容易被辨认出来,且平铺表面会失真。

利用复制工具替换或分散材质上的高对比区。在教程中使用的这张图中,我们已经用材质上的暗部替换了亮部。

处理后的纹理(from gameinnovator)

处理后的纹理(from gameinnovator)

纹理被平铺以后,图案不那么容易被识别出来了。

纹理被平铺以后(from gameinnovator)

纹理被平铺以后(from gameinnovator)

本文为游戏邦/gamerboom.com编译,如需转载请联系:游戏邦

How to make seamless textures for games

Find out how to tile images seamlessly in this tutorial. Discover how to create tiled textures using Photoshop.

These tiling techniques can also be applied to other graphics editors.

In this tile tutorial you’ll learn how to choose a suitable texture and how to make the texture seamless.

You’ll also learn how to reduce high contrast areas in the texture. This little-discussed technique will help make your tiled texture look even more natural.

Choose a suitable texture
Choosing a suitable texture is easy enough, as there are only a couple of things you need to keep in mind.

The texture ideally should be as big as possible. This is to help reduce the number of times it needs to be tiled on
a surface.

You should also look for textures with little to no hard lines or edges. While it is possible to tile these textures, it’s much harder to make them look natural.

The texture below is an example of what to avoid.

Before you begin on making the texture seamless, make sure that its width and height are divisible by two. Crop the texture to the correct height and width if needed. The reason for doing this will be explained later.

Make the texture seamless

The example texture we will be using for this tutorial is a nice, big rocky texture which contains no hard edges or lines.
Its size is 600 by 250.

Let’s see what happens when it is tiled on a surface:

The repeating texture along with its seams can be clearly seen.

Load the image into Adobe Photoshop or a similar graphics tool. From the menu, choose Filter/Other/Offset.

Set the horizontal offset to half of the image’s width, and set the vertical offset to half of the image’s height. As the height and width are divisible by two, the image should be easy to offset to and from its original position without any difficulty.

Select for the undefined areas to wrap around. Finish applying the offset to the image. You should now be able to see the edges of the image.

Select the clone tool from the toolbar. Use this tool to smooth over the edges using other parts of the image.

Once all the edges have been smoothed out, use the offset filter to move the image back to its previous position.

The image below shows the new example texture being applied. The seams have been removed; however the pattern repetition is still evident.

Reduce areas of high contrast in the texture

Areas of high contrast in textures should be reduced as much as possible, as they help create recognizable patterns and make the tiled surface look less realistic.

Use the clone tool to replace or disperse any areas of high contrast in the texture. In our example, we have replaced the lighter area with the darker parts of the texture.

When this texture is tiled on a surface the pattern is less recognizable.

I hope you enjoyed this tiling tutorial and can now tile images seamlessly for your games. As special thanks for reading the tutorial, you can use the finished texture from this tutorial in your own projects.(source:gameinnovator


上一篇:

下一篇: