Introduction
Textures are an invaluable resource to both artists and developers alike. Being able to find quality textures can speed up development time as well as save on development costs. They can be drawn by hand, composed of real-world images or photographs, and even constructed procedurally using specialized software. Today, there are countless texture websites available from which you can download many different materials and substances, but sometimes you need something a little bit more customized. Or you might have an idea in your head for a cool texture design but have no idea where to even begin when it comes to recreating it on a computer. In this tutorial I want to cover several topics related to the creation of custom textures.
(1) Photographic, (2) Handmade, (3/4) Procedural
The methods used to produce textures may vary, but the principles behind designing them tend to remain the same no matter what type of tool you are using. While there are plenty of tutorials out there already discussing step by step methods for making very simple textures, there is not much floating around related to breaking down the actual texture design process into parts. I’ll happily cover individual types of textures in another tutorial, but for now we should take a look at some of the different ways textures are actually made.
This Texture Design series is intended to be a type of reference material while working on your own textures, and not necessarily a how-to or step-by-step instructional guide for any particular tool. Also keep in mind that I am by no means a professional texture artist, I merely wish to share the things I have learned while designing various textures for Screaming Brain Studios. There may be some details or terminology that I get wrong from time to time, but I will always update these tutorials to correct any errors.
A quick clarification of terminology is needed here: When I use the term Texture, I am referring to the final completed render at the end of the render pipeline, such as a red brick wall. Any time I use the term Material, I am referring to a component of the texture itself, such as the clay that makes up the bricks or the mortar in between them.
Texture Tools
There is no single tool for every texture job, since every project will have different requirements or visual styles. In addition, some professional texture authoring software can be very expensive, so it can be tough to get into in the first place, especially having no idea where to even begin.
For those of you who might be interested, there are a number of free utilities available that specialize in making textures, but for the sake of this tutorial, I will mostly be using GIMP if I need to show any example step-by-step techniques.
- NeoTextureEdit (Free)
- Material Maker (Free)
- Texture Lab (Free)
All of these tools can be used for most of the sections outlined below, but each tool has its own workflow to learn, so I won’t really be doing step-by-step instructions for any particular tool other than GIMP. A lot of texture creation software today uses a non-destructive workflow, which means that you can undo/redo any action in the chain without actually affecting the source image, as well as having the added benefit of being able to see any other part of the effect chain as you make changes. This is the most flexible type of texture creation and is used to create Procedural Textures. Each of the tools above uses a flowchart-style workflow, where you can see the changes that are being made at each point of the texture creation process, and often many different variations can be generated from just a few simple inputs.
Non-Destructive Texture Creation
Designing textures in GIMP or Photoshop works a little bit different, as you cannot see every step of the process along the way. Instead, a mixture of filters and layer blending are used to produce a final image. The downside of making textures in a photo editing program rather than using texture authoring software means certain things may be more difficult, convoluted, or even impossible to do. You will likely not have access to the same type of shading and lighting features as you would in a texture authoring tool. Regardless of the software you choose to use, many of the techniques and principles still remain the same.
Texture Synthesis
One of the simplest methods of creating new textures and materials is a process called Texture Synthesis. This might seem like a strange concept if you have never seen it in action, but Texture Synthesis is a way of sampling small areas of an image to produce a larger texture. There are also several different methods of Texture Synthesis to choose from, depending on which tool you use.
- Tile-Based Synthesis – Probably the simplest form of texture synthesis, this method typically involves duplicating the original image and placing the copies side by side. This tends to look unrealistic since the tiling is often very apparent. There must also be some sort of blending applied to the edges so the seam between the copies is less visible.
Tile-Based Synthesis
- Patch-Based Synthesis – This type of texture synthesis takes small samples, or ‘patches’, of a larger image and randomly stitches or blends the ‘patches’ together along the edges to produce a new image. Sometimes it is possible to control the rotation, placement, and dispersion of the patches themselves to create variations or fine tune the details of the resulting texture.
Patch-Based Synthesis
- Pixel-Based Synthesis / Resynthesis – This type of texture synthesis uses various algorithms to sample an image but uses the color values or the light/dark values in the source image to produce a new one. This can be useful for creating textures that have more structured elements or patterns in them, as the resulting image is drawn from scratch rather than assembled from duplicated patches of the original image, but it can look messy with certain organic source images.
Pixel-Based Synthesis
These are not necessarily the only methods, but they are some of the more frequently used ones. The first method, Tile-Based Synthesis can be done manually with most image editing software. However, this method also produces the least realism, as you can often see the repeating pattern or the seams between the duplicated tiles in the end result. There are several variations of this method that can include duplicating and offsetting copies of the source image, rather than tiling side by side, or utilizing distortion or blend modes to add more realism along the seams. One upside is that this type of texture can be made very quickly and comes in handy for testing different images and materials when prototyping since sometimes it can produce adequate results.
Original Tiled Image (Left) / Feathered Seams (Right)
The second method, Patch-Based Synthesis is very similar to using the selection tool or clone stamp to create a ‘patchwork quilt’ of small pieces, taken from a source image. In fact, this is sometimes also referred to as ‘quilting.’ It also tends to look much more realistic in most cases than Tile-Based Synthesis or Pixel-Based Synthesis due to using actual parts of the source image to break up repetition.
There are even some free tools available to make this process even simpler! Our absolute favorite filter suite G’MIC happens to come with a few filters that are capable of this type of texture synthesis. Typing the word ‘patch’ or ‘patch-based’ into the filter search bar will bring up several options, like Resynthetize Texture (Patch-Based) and Make Seamless (Patch-Based), which can be tweaked a number of different ways to produce new textures out of existing images.
Patch-Based Texture Synthesis in G’MIC
Specialized software for this does exist, including affordable options like TextureWorks, but you can achieve similar results using G’MIC filters. Most of the textures in Screaming Brain Studios’ very own Photorealistic Texture Pack use Patch-Based Synthesis to repurpose various images into seamless textures. Patch-Based Synthesis tends to produce the best looking results, at least in my opinion, since the user often has control of many aspects of how the patches are assembled to create the resulting texture.
The third method, Pixel-Based Synthesis is a bit more specialized, and you may not encounter software capable of this very often. Some modern texture authoring software may be capable of this, but I am uncertain of any free software that is capable of this particular type of synthesis.
Resynthesized Walnut Texture
In the example above, a large source image of walnuts has been sampled and resynthesized into a larger, less repetitive walnut texture. You can see some artifacts and improper blending throughout the texture due to the way this process works, but it can work very well with source images that do not have a lot of well-defined details, such as terrain or textiles.
Texture Extraction
This is another technique that uses photographs as source images, but instead of blending copies together or sampling areas of an image to produce a new one, Texture Extraction actually allows for a specific area of an image to be selected and ‘extracted’ to a new texture. The main difference being that Texture Extraction software is capable of perspective correction or color and lighting adjustments, which allows for things like angled walls, doors, or windows to be ‘extracted’ and straightened in the final texture.
Extracting a Window Texture
This is incredibly useful for making use of photographs that may have been taken at an angle, or even to correct small errors in positioning. Texture extraction software can sometimes compensate for stretching or distortion by adjusting the brightness or darkness of pixels based on their surrounding neighbor pixels. This technique is also very useful for extracting repeating patterns from images, such as brick walls, fences, tile floors, or architectural features.
Extracting a Wicker Pattern
A grid is typically employed to provide multiple reference points between which the software should try to maintain straight lines. This also means this method mostly only works with source images that contains straight lines already, depending on the software you are using. It is absolutely possible to extract round or curved features, such as round windows or archways, but these features can sometimes get warped or stretched in the process.
There are a few tools out there capable of Texture Extraction, though sticking with Screaming Brain Studios tradition means there must be a FREE solution out there. I present to you Sand Ripper, a browser-based texture extraction tool.
Procedural Textures
A Procedural Texture is a type of texture that is generated through mathematical means, which can include completely manual processes chosen by the user, as well as entirely computer-generated or ai-driven processes. All of the tools listed above in the Texture Tools section are capable of producing Procedural Textures by allowing the user to connect different nodes or functions together to produce a texture. This process is great for simulating all kinds of real-world materials, such as wood, stone, liquids, metals, or even animal fur. Most software that specializes in procedural texture creation is also capable of complex functions, such as lighting, bump mapping, and sometimes basic 3D operations.
Example Procedural Textures
This type of texture is usually made using a series of components, nodes, or functions that are applied in a specific order to produce the desired result. It is certainly possible to produce textures like this in GIMP or Photoshop, though these tools are not specifically designed for texture authoring. It might sound like I repeat myself sometimes when I reference G’MIC so many times, but it comes with a lot of useful techniques for creating textures for anyone who happens to need FREE solutions in their arsenal.
Often the very basic, bottom layer of a procedural texture is a component or layer storing either a Solid Color, Gradient, or some type of Noise. These can be blended or mixed together using various Masks. We will get into what each of those are in more detail in Part 2 of the tutorial, but for now let’s just continue explaining what else goes into making a Procedural Texture. By combining these basic components such as Color, Gradients, Masks, or Noise using various blending or mixing methods, a texture is produced.
Noise Mask / Colorized Mask / Reflective Shader
Looking at the example images above, you can see a simple three step process for producing a rippling blue water texture. The leftmost image is a type of Noise used to create ripples. The center image shows the same Noise with a blue solid color applied to it. The image to the right shows the final texture after a shader has been applied, in order to simulate lighting and shadow. This texture could be further processed to give it more detail, or it could even be cropped and composited with other textures to make an even more intricate texture, such as a river flowing between two dirt banks.
Procedural textures can be much more flexible than those based on photographs, since you can control almost every detail of the texture down to its components as well as create entirely custom materials. Sometimes this can be a more time-consuming process than working with photographs, while in other cases it may be desirable to combine photographs and procedural texture methods to create a composite texture.
Another upside of procedural textures is that they can be much more memory friendly and produced on the fly by most modern 3D rendering software. This means that rather than using hundreds of individual images to add texture to 3D objects, the only thing that is actually necessary in order to store procedural textures is the math used to generate them. In addition, a texture can be generated and applied to the surface of an object without having to be any specific size or resolution, as all of this is calculated on the fly by the renderer. The main downside to Procedural Textures is they can lack the same photorealism as their real-world counterparts. Achieving photorealism with procedural textures is essentially an entire field of study in itself.
Material 1 / Material 2 / Mask / Mixed Materials / Shaded Texture
Starting from the left of the example image above, there are two base materials: a brown gritty material for the mortar and a red material for the bricks. The black and white Mask in the center is used to combine, or mix, the two base materials into a composite material. And finally, the fifth image shows the bricks after the same black and white Mask has been used as a heightmap to produce a raised effect on the brick texture, complete with shadows.
There is another type of procedural texture that you don’t see very often called a Genetic Texture. These are completely randomly generated by software through the combination of various algorithms and colors to produce abstract results. A standard feature of software that generates Genetic Textures is the ability to select a particular pattern and ‘mutate’ it, a process that creates several new textures based on the appearance of the selected pattern.
Genetic Texture Generator
This combination of random generation and mutation is meant to mimic real-world processes in nature, such as natural selection or evolution, in the way that new textures are generated based on similar rules as the original. The textures themselves are not always usable, but many different varieties of patterns and bizarre abstract shapes can be produced this way. For those interested, there is a simple Genetic Texture Generator included with GIMP called Qbist. You can experiment with it by going to Filter -> Render -> Pattern -> Qbist to bring up the texture generation window, where you can select and save variations you like. You can also grab a whole bunch of pre-made abstract Genetic Textures in the Abstract Texture Pack or the Seamless Abstract Pack from Screaming Brain Studios.
PBR Textures
Another type of texture to mention, though not one that Screaming Brain Studios tends to focus on, is the PBR Texture or PBR Material. This is an abbreviation for Physically-Based Rendering, and as far as textures go, it is the closest approximation to the characteristics of real world materials available. What this means is that while these are also Procedural Textures, each texture is generated alongside a series of additional Maps, such as Albedo, Roughness, Specular, Normal or Height. Each of these Maps provides an additional set of information to the renderer telling it how the surface of the material or texture responds to lighting.
PBR Materials Example (From CGTricks.com)
As you can see in the example above, each texture has its own reflectivity, shine, roughness, or bumpiness, and all this information is determined by a series of grayscale or black and white Maps that are imported or generated alongside the base texture. The base texture itself is also referred to as the Albedo Map. Older pipelines would use something called a Diffuse Map, which would essentially be the same thing as using a photograph or an image with pre-baked shading information, whereas an Albedo Map contains only the color information needed for the texture and no shading. Just know that Albedo is currently the more commonly used of the two when it comes to making PBR Textures. This is the part of the texture that provides the color information or surface patterns of the object, such as the different shades of green used to make a patch of grass.
Diffuse / Height / Occlusion / Normal / Final
In the example image above, you can see several stages involved in the PBR Pipeline, or the process by which a physically-based rendering material is constructed. The list begins from the leftmost image.
- Albedo/Diffuse Map – Provides color information about the texture. This can be a base material made from a photograph or constructed through procedural methods.
- Height Map – Uses the light and dark values to determine how much the texture is displaced. This is what gives the texture physical depth and bumpiness.
- Occlusion/Ambient Occlusion Map – Often used as a way to provide soft shadows where the texture may have sharp corners. It helps to simulate areas of the texture where light does not fully reach the surface.
- Normal Map – Provides information related to the direction that light bounces off the surface of the texture. This also tells the renderer how to shade the texture as the object or lighting moves around in a scene.
- Final Render – All of these Maps are combined to produce a photorealistic result.
There are several other types of Maps that can also be used in a PBR workflow, such as Roughness or Specular maps that provide shine, gloss, or grit to the surface of the material.
Most modern game engines and 3D rendering software support PBR Textures, especially since they are currently the most photorealistic textures available today. Unfortunately for me, most old school games did not use PBR Textures, so Screaming Brain Studios does not really focus on them (A little bit too new school for SBS) Thankfully, for anyone interested, there are countless websites full of free PBR materials all over the internet to cover that market.
If you want to continue learning more about designing your own textures, you can read more in Part 2, Texture Design Components.