Sponsored By

Book Excerpt: 3D Game Textures: Create Professional Game Art Using Photoshop

In today's other main Gamasutra feature, we provide an excerpt from the first chapter of Luke Ahearn's new book, '3D Game Textures: Create Professional Game Art Using Photoshop,' which touts itself as teaching its readers "how to think like a games artist."

Luke Ahearn, Blogger

June 22, 2006

1h 4m Read

[This feature is an excerpt from 3D Game Textures: Create Professional Game Art Using Photoshop (ISBN 0-240807-68-5) published by Focal Press February 2006. An official description from the book's press release follows:

"Learn how to create stunning, professional-quality game textures from an award-winning industry expert. This book is your one-stop-shop to learn everything you'll need to know about texturing game worlds, from the research that goes into creating a world to tips, tricks and tools of the trade. Learn how to create everything from bullet holes and flames to windows and walls in tutorials that walk you through the process of developing textures (game art) for the most common game settings--from modern urban to fantasy--based on professional concept art.

Most importantly, you'll learn how to think like a game artist. Each tutorial begins with the instructions you'll most likely be given on the job, then walks you through the research and planning phase to the process of building textures for the scene at hand. You'll learn not only what goes into building a game world, but you'll also come away with a complete, professional portfolio to help land your dream job."]

A Basic (Game) Art Education

Art is born of the observation and investigation of nature.
Cicero
Roman author, orator, and politician (106 BC–43 BC)

Introduction

The basis of computer art is art itself, so before we dive into any technical issues we must first discuss the most basic but important aspects of visual art. While teaching you traditional fine art skills is beyond the scope of this book, it is critical to have an understanding of some basic aspects of visual art in order to create game textures. Fortunately, these basic aspects of art are fairly easy to present in book form. By studying these basics of art, you will learn to see the world as an artist does, understand what you see, and then be more able to create a texture set for a game world.

The basic aspects of visual art we will focus on are

  • Shape and form

  • Light and shadow

  • Texture

  • Color

  • Perspective

Learning to observe the basic visual aspects of the world around you is a strong beginning in the process of seeing the world like an artist, communicating with other artists, and creating great game textures. Technology is, of course, critical to the larger picture of game textures, but the actual basics of art is where great textures begin. Too often would-be game artists are thrown into a discussion on tiling, or even game engine technology, when what are most important for the creation of game textures are the ability to understand what you are seeing in the real world and the ability to recreate it in the computer. Often a texture artist is required to break a scene down to its core materials and build a texture set based on those materials, so learning this ability is essential. While you don’t need to have an advanced degree in art to create great textures, let’s face it: almost anyone can learn what buttons to push in Photoshop, but the person who understands and skillfully applies the basics of art can make a texture that stands out above the rest.

There are many types of art and aspects of visual art that you should further explore in order to develop as a game artist. Some of the things you can study and/or practice are

  • Figure drawing

  • Still-life drawing

  • Photography

  • Painting (oil, water color, etc.)

  • Lighting (for film, still photography, the stage, or CG)

  • Color theory and application

  • Sculpture

  • Drafting and architectural rendering

  • Anatomy

  • Set design

It is even worth the time to study other areas of interest beyond art such as the sciences, particularly the behavior of the physical world. Light, for example, is becoming processed more and more in real time and not painted into the texture to the extent it was just a few years ago. The more you understand and are able to reproduce effects such as reflection, refraction, blowing smoke, etc., the more success you will find as a game artist. We presently have emerging technologies that reproduce the real world to a much greater extent than ever before, but it still takes an artist to create the input and adjust the output for these effects to look their best. The areas of study that will help you when dealing with real-world behaviors are endless. You can start by simply observing the world. How water drips or flows, the variations of light and shadow on different surfaces at different times of the day, how does a tree grow from the ground; straight like a young pine or flared at the base like an old oak—you will soon be staring at the cracks in the pavement and photographing the side of a dumpster while the world stares at you. An excellent book for this type activity is Digital Texturing & Painting by Owen Demers. You can also take tours of museums, architectural tours, nature walks; join a photography club; join a figure drawing class… there is no end to the classes, clubs, disciplines, and other situations you can expose yourself to that will open up your mind to new inspirations and teach you new tools and techniques for texture creation. And, of course, playing games, watching movies, and reading graphic novels are the food of the game artist.

Chapter Overview

  • Shape (2D) and Form (3D)

  • Light and Shadow

  • Texture: tactile vs. visual

  • Color

  • Perspective

While there are many elements of traditional art, we will narrow our focus to those elements that are most pertinent to texture creation. We will start with shape and form.

Shape and Form

A shape (height and width) is simply a two-dimensional (flat) outline of a form. A circle, square, rectangle, and triangle are all examples of shape. Shape is what we first use to draw a picture with before we understand such concepts as light, shadow, and depth. As children we draw what we see in a crude way. Look at the drawings of very young children and you will see that they are almost always composed of pure basic shapes: triangle roof, square door, circle sun. Even as adults, when we understand shadows and perspective, we have trouble drawing what we see before us and instead rely on a whole series of mental notes and assumptions as to what we think we are seeing. There are exercises to help develop the ability to draw what we actually see. Most notably the book Drawing on the Right Side of the Brain offers many such exercises. And one of the most famous of these involves the drawing of a human face from a photo. After you have done this, you then turn the photo upside down and draw it again. The upside-down results are often far better than the right-side up, first try. This is due to the fact that once you turn the image upside down your brain is no longer able to make any mental assumptions about what you think you are seeing; you can only see what’s really there. Your brain hasn’t yet developed a set of rules and assumptions about the uncommon sight of an upside-down human face. One of the first skills you can practice as an artist is trying to see the shapes that make up the objects that surround you. Figure 1-1 has some examples of this ranging from the simple to the complex. This is a very important skill to acquire. As a texture artist you will often need to see an object’s fundamental shape amidst all the clutter and confusion in a scene so you can create the 2D art that goes over the 3D objects of the world.

 


1_001.jpg

Figure 1-1: Here are some examples of shapes that compose everyday objects. These shapes range from simple to complex.

 

Form is three-dimensional (height, width, and depth) and includes simple objects like spheres, cubes, and pyramids. See Figure 1-2 for examples and visual comparisons. You will see later that as a texture artist you are creating art on flat shapes (essentially squares and rectangles) that are later placed on the surfaces of forms. An example can be seen in Figure 1-3 as a cube is turned into a crate (a common prop in many computer games). When a shape is cut into a base material in Photoshop and some highlights and shadows are added, the illusion of form is created. A texture can be created rather quickly using this method. See Figure 1-4 for a very simple example of a space door created using an image of rust, some basic shapes, and some standard Photoshop Layer Effects.

 


1_002.jpg

Figure 1-2: Here are examples of shapes and forms. Notice how it is shadow that turns a circle into a sphere.

 


1_003.jpg

Figure 1-3: A game texture is basically a 2D image applied, or mapped, to a 3D shape to add visual detail. In this example a cube is turned into a crate using texture. And a more complex 3D shape makes a more interesting crate while using the same 2D image.

 


1_004.jpg

Figure 1-4: Here is an example of how shapes can be cut into an image and using some simple layer effects can then be turned into a texture in Photoshop.

 

Of course, mapping those textures to more complex shapes like weapons, vehicles, and characters gets more difficult, and the textures themselves reflect this complexity. Although paradoxically, as the speed, quality, and the complexity of game technology increase, artists are actually producing more simplified textures in some cases. The complexity comes in the understanding and implementation of the technology. Don’t worry; you will gradually be introduced to this complexity until it culminates with the sections on Shader Technology.

As in the above section, you can also practice looking for the forms that make up the objects around you. In Figure 1-5 you can see some examples of this.

 


1_005.jpg

Figure 1-5: Here are some examples of the forms that make up the objects around you.

Light and Shadow

Of all the topics in traditional art, this is arguably the most important due to its difficulty to master and importance to the final work. Light and shadow give depth to and, as a result, define what we see. At its simplest, light and shadow are easy to see and understand. Most of us are familiar with shadow; our own shadow cast by the sun, making animal silhouettes with our hands on the wall, or a single light source shining on a sphere and the round shadow that it casts. That’s where this book will start. Light and shadow quickly get more complicated, and the examples in this book will get more complex as well. The book will start with the ability to see and analyze light and shadow in this chapter, move up to creating and tweaking light and shadow in Photoshop using Layer Styles for the most part, and finally look at some basic hand tweaking of light and shadow. If you desire to master the ability to hand paint light and shadow on complex and organic surfaces, then you are advised to take traditional art classes in illustration, sketching, and painting.

We all know that the absence of light is darkness, and in total darkness we can obviously see nothing at all, but the presence of too much light will also make it difficult to see. Too much light blows away shadow and removes depth and desaturates color. In the previous section we looked at how shape and form differ. We see that difference primarily as light and shadow as in the example of the circle and a sphere. But even if the sphere were lit evenly with no shadows and looked just like the circle, the difference would become apparent when rotated. The sphere would always look round if rotated, whereas once you began to rotate the circle it would begin to look like an oval until it eventually disappeared when completely sideways. In the previous example, where a shape was cut into an image of rusted metal and made to look like a metal space door using Photoshop Layer Effects, the highlights and shadows were faked using the various tools and their settings. In Figure 1-6 you can see the same door texture rotated from front to side. Notice the complete lack of depth in the image on the far right. The illusion is shattered.

 


1_006.jpg

Figure 1-6: Here is the same door texture from the previous section. Notice the complete lack of depth as we look at it from angles other than straight on. The illusion of depth is shattered.

 

Understanding light and shadow are very important in the process of creating quality textures. We will go into more depth on this topic as we work through this book. One of the main reasons for dwelling on the topic is not only due to the importance of light and shadow visually, but you will see that many of the decisions that need to be made are based on whether light and shadow should be represented using texture, geometry, or technology. To make this decision intelligently in a serious game production involves the input and expertise of many people. While what looks best is ideally the first priority, what runs best on the target computer is usually what the decision boils down to. So keep in mind that in game development you don’t want to make any assumptions about light and shadows--ask questions. I cover different scenarios of how light and shadow may be handled in a game in this book. It can be challenging to make shadows look good in any one of the situations. Too little and you lack depth, too much and the texture starts to look flat. Making shadows too long or intense is an easy mistake. And unless the game level specifically calls for that, on rare occasion, don’t do it. Technology sometimes handles the highlights and shadows. This is challenging because it is a new way of thinking that baffles many people who are not familiar with computer graphics. This method can also be a bit overwhelming because you go from creating one texture for a surface to creating three or more textures that all work together on one surface. Naming and storing those textures can get confusing if you let it get away from you.

Overall you want your textures to be as versatile as possible and that includes, to a great degree, the ability to use those textures under various lighting conditions. See Figure 1-7 for an example of a texture where the shadows and highlights have been improperly implemented and one that has been correctly created. For this reason we will purposely use highlight and shadow to a minimalist amount. You will find that if you need more depth in your texture than a modest amount of highlight and/or shadow, then you most likely need to create geometry or use a shader—or consider removing the source of shadow! If there is no need for a large electrical box on a wall, then don’t paint it in if it draws attention to itself and looks flat. If there is a need and you are creating deep and harsh shadows because of it, you may need to create the geometry for the protruding element. You may find that as game development technology accelerates, things like pipes, door knobs, and ledges are no longer painted into the texture but modeled in geometry. Many texture surface properties are no longer painted on. Reflections, specular highlights, bump mapping, and other aspects of highlight and shadow are now processed in real time.

 


1_007.jpg

Figure 1-7: The crate on the left has conflicting light sources. The shadow from edge of the crate is coming up from the bottom, is too dark, is too long, and even has a gap in it. The highlights on the edges are in conflict with the shadow cast on the inner panel of the crate, and they are too hot, or bright. The crate on the right has a more subtle, low-contrast, and diffuse highlight and shadow scheme and will work better in more diverse situations.

 

In the rest of this book we will take various approaches to light and shadow using both Photoshop’s Layer Effects to automate this process and other tools to hand paint highlights and shadows. One of the main benefits to creating your own highlights and shadows in your textures is that you can control them and make them more interesting as well as consistent. Nothing is worse than a texture with shadows from conflicting light sources: harsh, short shadows on some elements of the texture and longer, more diffuse shadows on others. See Figure 1-8 for an example of this. The human eye can detect these types of errors even if the human seeing it can’t quite understand why the image looks wrong. One of the artist’s greatest abilities is not only being able to create art, but also being able to consciously know and verbalize what he is seeing. In Figure 1-9 you can see the various types of shadows created as the light source changes. This is a simple demonstration. If you ever have the opportunity to light a 3D scene or movie set, you will discover that the range of variables for light and shadow can be quite large.

 


1_008.jpg

Figure 1-8: Here is a REALLY BAD texture created from two sources. Notice the difference in the shadows and highlights. The human eye can detect these errors even if the human seeing it can’t understand why the image looks wrong.

 


1_009.jpg

Figure 1-9: With one light source and a simple object you can see the range of shadows we can create. Each shadow tells us information about the object and the light source, such as location, intensity, etc.

 

Highlights also tell us a good bit about the light source as well as the object itself. In Figure 1-10 you can see another simple illustration of how different materials will have different highlight patterns and intensities. These materials lack any texture or color and simply show the highlights and shadows created on the surface by one consistent light source.

For a more advanced and in-depth discussion on the subject of light and shadow for 3D scenes, I recommend Essential CG Lighting Techniques by Darren Brooker.

 


1_010.jpg

Figure 1-10: With one light source and a simple object with various highlights on it, you can see that the object appears to be created of various materials. Keep in mind that what you are seeing is only highlight and shadow. How much does only this aspect of an image tell you about the material?


Texture

In the bulk of this book, as in the game industry, we will be using the term “texture” to mean a 2D static image. What we refer to as textures in this book are also sometimes called materials, or even tile sets (from older games), but we will stick to the term texture. The one exception in this book is that in this section we will talk about the word texture as it is used in traditional art: painting, sculpture, etc. A side note on vocabulary; keep in mind that vocabulary is very important and can be a confusing aspect of working in the game industry. There is much room for miscommunication. Different words can often mean the same thing, and the same words can often mean many different things. Acronyms can be especially confusing; RAM, POV, MMO, RPG all mean different things in different industries. POV means point-of-view in the game industry and personally owned-vehicle in the government and also stands for Persistence of Vision. So to clarify, the term “texture,” while usually meaning a 2D image applied to a polygon (the face of a 3D object), in this section of this chapter it will refer to an aspect of an image and not the image itself. We draw this distinction for the following conversation on traditional art.

In traditional art there are two types of texture: tactile and visual.

Tactile texture is when you are able to actually touch the physical texture of the art or object. Smooth and cold (marble, polished metal, glass) is as much a texture as coarse and rough. In art this applies to sculptures and the like, but many paintings have thick and very pronounced brush or palette knife strokes. Vincent Van Gogh was famous for doing this. Some painters even add materials to their paint like sand to add more physical or tactile texture to their work.

Visual texture is the illusion of what the surface’s texture might feel like if we could touch it. Visual texture is composed of fine highlights and shadows. As computer game texture artists, we deal solely with this aspect of texture. So, for example, an image on your monitor may look like rough stone, smooth metal, or even a beautiful woman and if you try and kiss that beautiful woman she is still just a monitor—not that I ever tried that, mind you.

There are many ways to convey texture in a two-dimensional piece of art. In computer games we are combining 2D and 3D elements and must often decide which to use. With 2D we are almost always forced to use strictly 2D imagery for fine visual texture. And while the faster processors, larger quantities of RAM, and the latest crop of 3D graphic cards allow us to use larger and more detailed textures and more geometry, a great deal of visual texture is still static and noticeably so to a trained artist. This limitation is starting to melt away as complex Shader Systems are coming into the mainstream of real-time games. The real-time processing of bump maps, specular highlights, and a long list of other more complex effects are adding a depth of realism to our game worlds not even dreamed of in the recent past. This book will teach you both the current method of building texture sets and the ever-increasing method of building material sets that use textures and shader effects together. We will discuss this more at length later in the book, but for now you can see some visual examples of these effects. In Figure 1-11 you can see how in the 2D strip the object rotates but the effects stay static on the surface, while on the 3D strip the object rotates and the effect moves realistically across the surface.

 


1_011.jpg

Figure 1-11: Visual texture is composed of fine highlights and shadows. A shader allows for the real-time processing of visual texture, among other effects, and adds much more realism to a scene as the surface reacts with the world around it. In this example I used a specular map. These effects are best seen in 3D, but you can see here that the windows in the building on the top row have a reflection of the sky in them and that reflection moves as the players does. The windows in the building on the lower row are painted textures and stay the same no matter where the player walks. The bottom two rows are close-ups to help you see the effect. If you pick one window in the close-up images and look closely, you will see that the cloud reflections are in different places in each frame.

 

The game artist’s job is often considering what tools and techniques we have at our disposal and choosing which best accomplishes the job. We are often trading off between what looks good and what runs well. As you begin to paint textures, you will find that some of the techniques of traditional art don’t work in the context of game texturing. As a traditional artist we usually do a painting that represents one static viewpoint, and we can paint into it strong light sources and a great deal of depth, but that amount of depth representation goes beyond tactile texture and becomes faked geometry and looks flat in a dynamic, real-time 3D world. As mentioned earlier in this chapter, this will not work in a 3D game where a player can move about and examine the texture. Once again we must choose what to represent using a static 2D image, what can be processed in real time using a shader, and what must be represented using actual geometry. There are many solutions for this problem; among them are restricting the players’ ability to move around the texture, removing the element of overt depth representation, or adding actual geometry for the parts of the texture represented by the overt depth representation (see Figure 1-12).

 


1_012.jpg

Figure 1-12: There are several possibilities when dealing with overt depth representation. Upper left: the pipes are painted into the texture and totally lack any depth; notice how they dead end into the floor. Upper right: restricting the players’ ability to move around the texture can alleviate some of the problem. Lower left: adding actual geometry for the parts of the texture that cause the overt depth is the best solution if possible (this method uses less texture memory but more polygons). Finally, lower right: adding the actual geometry into the recess is an option that looks pretty interesting and actually allows for a reduction of geometry. The removal of polygons from the backsides of the pipes more than offsets the added faces of the recess.

 

Color

We all know what color is in an everyday fashion, “Get me those pliers. No the ones with black handles. I said paint the house green. I didn’t mean neon green!” That’s all fine for the civilian discussion of color, but when you begin to speak with artists about color, you need to learn to speak of color intelligently and that takes a little more education and some practice. You will also learn to choose and combine color, too. In games, as in movies, interior design, and other visual disciplines, color is very important. Color tells us much about the world and situation we are in. While I was at CMP, we developed a massively multiplayer game that started in the town—saturated green grass, blue water, butterflies—you get the picture, this was a nice and safe place. As you moved away from town, the colors darkened and lost saturation. The grass went from a brighter green to a less saturated brownish-green. There were other visual clues as well. Most people can look at grass and tell if is healthy, dying, kept up, or growing wild. Away from town the grass was also long and clumpy, dying, and growing over the path. But even before we changed any other aspect of the game—still using the same grass texture from town that was well trimmed—we simply lowered the saturation of the colors on the fly and you could feel the life drain from the world as you walked away from town. As you create textures you will most assuredly have some form of direction on color choice, but maybe not. You might need to know what colors to choose to convey what is presented in the design document and what colors will work well together.

This section lays out a simple introduction to the vocabulary of color, color mixing (on the computer), and color choices and their commonly accepted meanings. I decided to skip the complex science of color and stick to the practical and immediately useful aspects of color. Color can get very complex and esoteric, but you would benefit from taking your education further and learning how color works on a scientific basis. While this chapter will be a strong starting point, you will eventually move on from working with only the colors contained in the texture you are creating to how those colors interact with other elements in the world, such as lighting. To start with, however, a game texture artist needs the ability to communicate, create, and choose colors.

First, we will discuss the way in which we discuss color. There are many color models, or ways of looking at and communicating color verbally. There are models that concern printing, physics, pigment, and light. They each have their own vocabulary, concepts, and tools for breaking out color. As digital artists, we use the models concerning light since we are working with colored pixels that emit light. A little later we will take a closer look at those color systems from the standpoint of color mixing, but for now we will look at the vocabulary of color. In game development you will almost always use the RGB color model to mix color and the HSV color model to discuss color. You will see that Photoshop allows for the numeric input and visual selection of color in various ways. When you discuss color choices and changes and then go to enact them, you are often translating between two or more models. Don’t worry; this is not difficult and most people don’t know they are doing it.

First, we will look at the HSV model, which stands for Hue, Saturation, and Value since this is the most common way for digital artists to communicate concerning color. These three properties of color are the main aspects of color that we need to be concerned with when discussing color. In Figure 1-13 you can see examples of these aspects of color.

  • Hue is the name of the color (red, yellow, green).

  • Saturation (or Chroma) is the strength or purity of the color.

  • Brightness is the light or darkness of the color.

 


1_013.jpg

Figure 1-13: In this image you can see a representation of HSB—Hue, Saturation, and Brightness.

 

Hue

Most people use the word “color” when referring to hue. While there are many, many colors, there are far fewer hues. Variations of saturation and brightness create the almost unlimited colors we see in the world. Scarlet, maroon, pink, and crimson are all colors, but the base hue is red.

Understanding color and its various properties is best done with visual examples. The most often used method is the Color Wheel developed by Johannes Itten. We will look at the Color Wheel a little later. In Photoshop you will recognize the Color Picker, which allows for various methods for choosing and controlling color, both numerically and visually. The Color Picker has various ways to choose color, but the most commonly used is RGB (Red, Green, Blue)—Figure 1-14.

 


1_014.jpg

Figure 1-14: Here are Color Pickers from various applications.

 

Saturation

Saturation quite simply is the amount of white in the color. In Figure 1-15 you can see the saturation of a color being decreased as white is added. If you have access to a software package like Photoshop and open the color picker, you can slide the picker from the pure hue to a less saturated hue and watch the saturation numbers in the HSB slots go down as the color gets less saturated. Notice how the brightness doesn’t change unless you start dragging down and adding black to the color. Also, you may want to look down at the RGB numbers and notice how the red in RGB doesn’t change, but the green and blue do.

 


1_015.jpg

Figure 1-15: The saturation of the color red at 100% and decreasing to 0% by adding white.

 

Brightness

Brightness is the amount of black in the color. In Figure 1-16 you can see the brightness of a color being decreased. As in the previous example discussing saturation, you can open the color picker in Photoshop and this time, instead of decreasing the saturation, you can decrease the brightness by dragging down. You can look at the HSB and the RGB slots and see the brightness numbers decreasing. Also notice that this time in the RGB slots the red numbers decrease, but the blue and green are already at zero and stay there.

 


1_016.jpg

Figure 1-16: The brightness of the color red at 100% and decreasing to 0% by adding black.

 

Like most other aspects of color, brightness is affected by other factors. What colors are next to each other? What are the properties of the lights in the world? Another job the texture artist needs to do is to make sure the textures in the world are consistent. That involves balancing the hues, saturation, and brightness of the color in most cases. Figure 1-17 depicts an example of a texture that may have looked okay in Photoshop, but needed to be corrected to fit the scene. You can see that a great deal of contrast and intensity of color makes tiling the image a greater challenge.

 


1_017.jpg

Figure 1-17: Here is an example of a texture that may have looked okay in Photoshop, but needed to be corrected to fit in the scene correctly. This is a subtle example. Notice the patch of exposed stone in the concrete on the building that repeats?


Color Systems – Additive and Subtractive

There are two types of color systems, additive and subtractive. Subtractive color is the physical mixing of paints, or pigments, to create a color. It is called “subtractive” due to the fact that light waves are absorbed (or subtracted from the spectrum) by the paint and only the reflected waves are seen. A red pigment, therefore, is only reflecting red light and absorbing all the others. In the subtractive system you get black by mixing all the colors together—theoretically. It is a challenge to mix pigments that result in a true black or a vibrant color. That is one of the reasons art supply stores have so many choices when it comes to paint. One of our advantages of working in the additive system is that we can get consistent and vibrant results with light. We won’t dwell on the subtractive system since we won’t be using it.

The additive system is when light is added together (like on a computer screen) to create a color, so naturally we deal with the additive system as computer artists as we are working with light. In Figure 1-18 you can see how the additive system works. I simply went into Max and created three spotlights that were pure red, green, and blue and created my own Additive Color Wheel, or a visual representation of how the colors interact. Black is the absence of light (the area outside of the spotlights), White is all light (the center area where all three lights overlap each other)—the combination of red, green, and blue is the additive system. If you look at the Color Picker in Photoshop (Figure 1-19) you will see a vertical rectangle of color graduating from red through the colors and back to red. This allows you to select a Hue and use the Color Picker Palette to change the value and intensity.

 


1_018.jpg

Figure 1-18: The additive system works by adding lights. Black is the absence of light (the area outside of the spotlights), White is all light (the center area where all three lights overlap each other): the combination of red, green, and blue is the additive system.

 


1_019.jpg

Figure 1-19: The Color Picker in Photoshop has a vertical rectangle of color graduating from red through the colors and back to red. This allows you to select a hue and use the Color Picker Palette to change the value and intensity.

 

Primary Colors

The three primary colors in the additive color system are red, green, and blue (RGB). They are referred to as primary colors because you can mix them and make all the other colors, but you can’t create the primary colors by mixing any other color. Many projection televisions use a system where you can see the red, green, and blue lens that project the three colors (RGB) to create the image you see using the additive method.

Secondary Colors

The secondary colors are yellow, magenta, and cyan. When you mix equal amounts of two primary colors together, you get a secondary color. You can see that these colors are located between the primary colors on the color wheel and on the Photoshop Color Picker vertical strip.

Color Emphasis

Color is often used for emphasis. Look at Figure 1-20. All things being equal, the larger shapes dominate, but the small shapes demand your attention once color is added. Of course, there are many other forms of emphasis you can use in creating art, but color can be the most powerful—and overused. Ever come across a web page that has a busy background and every font, color, and emphasis devised by man splashed across it? There is almost no emphasis as all the elements cancel each other out. Often, less is more.

 


1_020.jpg

Figure 1-20 All things being equal, the larger shapes dominate, but the small shapes demand your attention once color is added.

 

In another example using a photograph, in Figure 1-21, you can see that in the first black and white photo, your eye would most likely be drawn to the dark opening of the doghouse and you would most likely assume that the subject of this picture is the doghouse. In the second version the colorful flower draws the primary interest, it still competes with the doghouse door for attention, but you would probably make the assumption that the focus of this picture was the flower.

 


1_021.jpg

Figure 1-21: Your eye is most likely drawn to the opening of the doghouse in the black and white photo, but add color, and the flower draws the primary interest.

 

In a game scene you can see the use of color drawing the attention of a player to an important item. Look at Figure 1-22. In the first version of the scene you are drawn to the fire and then look around at all the items in the shadows. In the second version the red crate draws your attention and clearly means something. Depending on the world logic of the game you are playing, that could simply mean that you can interact with the object, or it could mean the item is dangerous. That decision brings to our next topic, color expression.

 


1_022.jpg

Figure 1-22: In a room full of normal objects, the players’ eyes will be drawn to the fire and then equally to the objects. In a room full of normal objects, a red crate draws attention, especially given the fact that there are other normal crates around it.

 

Color Expression or Warm and Cool Colors

When you start painting textures and choosing colors, you will want to know how they react together in terms of contrast, harmony, and even message. There is a lot of information on this topic and once again, Johannes Itten enters the picture (the guy who did the color wheel). Johannes Itten has provided artists with a great deal of information on how color works and how they work together. Itten was among the first people to look at color, not just from a scientific point of view, but from an artistic and emotional point of view. He was very interested in how colors made people feel. From his research we get the vocabulary of warm and cool colors.

We all are familiar with this convention as it is mostly based on the natural world. When asked to draw a flame, we reach for the red or orange crayon, ice is blue, the sun yellow. Each warm and cool color has commonly associated feelings for them, both positive and negative. The brighter or more pure the color, the more positive the association. Darker and duller colors tend to have the negative connotations associated with them.

The warm colors are red and yellow, while the cool colors are blue and green. Children will color the sun yellow and ice blue and use the black crayon to scratch out things they don’t like. Traffic lights are hot when you should stop or be cautious (red and yellow) but cool when it is okay to go (green). Red and orange are hot and usually associated with fire, lava, coals. How many red and black shirts do you see at the mall? Red and black generally symbolizes demonic obsession. Red by itself can mean royalty and strength as well as demonic. Deep red can be erotic. Yellow is a hot color like the sun, a light giver. Yellow is rich like gold as a pure color. A deep yellow (amber) window in the dark of a cold night can mean fire and warmth. But washed out or pale yellow can mean envy or betrayal. Calling a person yellow is an insult, meaning he is a coward. Judas is portrayed as wearing yellow garments in many paintings. During the Inquisition, people who were considered guilty of heresy were made to wear yellow. Moving into green, we think of lush jungles teaming with life. As green washes out, we get a sense of dread and decay (zombie and orc skin). Vibrant green in a certain context can be toxic waste and radioactive slime. Blue in its saturated state is cold like ice, fresh like water and the sky. Darker blues are misery. Purple is mysterious and royal.

Keep in mind that color is context-sensitive. Water is generally blue; would you drink dark green water? But not just any blue will do. In the real world, if we come across water that is a saturated blue that we can’t see through, we get suspicious. Was this water dyed? Are there weird chemicals in there? If anything lives in that, then what could it be?! Blood is generally red, but what if an enemy bled green? What if the game you are playing is about an alien race taking over earth and one of your companions bleeds green from an injury during combat? In a fantasy game you might come across coins. Which coin do you take, the bright yellowish metal or gray-green metal? With no previous information on the color of coins in this world, most people would pick the brighter yellow. Look at Figure 1-23. What are some of the assumptions you might make about these three scenes?

 


1_023.jpg

Figure 1-23: These three scenes are the same, except for the ax. What questions and/or assumptions run through your mind looking at each version?

 

Looking at color in this way may make it seem a bit mechanical, but it still takes a talented artist to make the right color choices. You can memorize all the information in the world, but it usually comes down to having a good eye and being able to convey that vision in your work and to your coworkers.

Perspective

We discussed earlier in this chapter that dramatic perspective (Figure 1-24) is usually not used in the creation of a game texture, although sometimes perspective is present and needs to be understood. In addition, understanding perspective is not only a valuable artistic tool to have available, but understanding perspective will help you when you are taking digital reference images and when you are cleaning and straightening those images. We will look at the artistic aspects of perspective now and later on in the chapter on cleaning and storing your assets we will talk about fixing those images.

Quite simply, perspective is the illusion that something far away from us is smaller. This effect can be naturally occurring as in a photo, or a mechanically created illusion in a painting. You can see samples of this in Figure 1-25. In 2D artwork perspective is a technique used to recreate that illusion and give the artwork a three-dimensional depth. Perspective uses overlapping objects, horizon lines, and vanishing points to create a feeling of depth. You can see in Figure 1-26 an image and the same image with the major lines of perspective as they converge on one point called the vanishing point. There are several types of perspective used to achieve different effects.


1_024.jpg

Figure 1-24: While dramatic perspective is used in traditional art, it is not used in a game texture, but there is some notion of perspective so it is best to understand the concept.



1_025.jpg

Figure 1-25: Perspective is the illusion that something far away from us is smaller. Are the street lights actually getting smaller in this image? Are the train tracks really getting closer together?

 


1_026.jpg

Figure 1-26: In 2D artwork perspective is a technique used to recreate that illusion and give the artwork a three-dimensional depth.

 

One-Point Perspective

One-point perspective is when all the major lines of an image converge on one point. You can see this effect best illustrated when looking down a set of straight railroad tracks or a long road. The lines of the road and track, although we know they are the same distance apart, seem to meet and join together at some point in the far distance—the vanishing point. In one-point perspective all the lines move away from you (the z-axis) and converge at the vanishing point. Vertical and horizontal or up and down and right and left lines (X and Y) remain straight, as seen in the Figure 1-27.

 


1_027.jpg

Figure 1-27: In one-point perspective all the lines that move away from the viewer seem to meet at a far point on the horizon. This point is called the vanishing point.

 

Two-Point Perspective

One-point perspective works fine if you happen to be looking directly at the front of something or standing in the middle of some railroad tracks, but what if the scene is viewed from the side? Then you shift into two-point perspective. Two-point perspective has two vanishing points on the horizon line. All lines, except the vertical, will converge onto one of the two vanishing points. See Figure 1-28.

 


1_028.jpg

Figure 1-28: Two-point perspective has two vanishing points on the horizon line. All lines, except the vertical, will converge onto one of the two vanishing points.

 

Three-Point Perspective

Three-point perspective is probably the most challenging of all. In three-point perspective every line will eventually converge on one of three points. Three-point perspective is the most dramatic of all and can often be seen in comic books when the hero is flying over buildings or whooping butt in the alley below as the buildings tower above. Figure 1-29 shows some three-point perspective.

 


1_029.jpg

Figure 1-29: In three-point perspective every line will eventually converge on one of three vanishing points.

 

Perspective, from the texture artist’s point of view while photographing surfaces for game art, can be the enemy. We will look at that in a coming chapter when we talk about collecting and cleaning your images. From the art education point of view, knowing what perspective is and what it looks like is enough.

Quick Studies of the World Around You

The following pages are some quick studies I did of random objects. I tried to work through each of them as a game artist might to give you some quick and general examples of how a game artist might break them down. We will do this type of exercise in more depth throughout the book, but in the tutorial portions of the book those breakouts will be more specific and focused to the goal at hand.

This is a general look and introduction to the thought process of recreating surfaces and materials in a digital environment. I covered all that was introduced in this chapter: shape and form, light and shadow, texture, color, as well as considering other aspects of the object or material. I didn’t touch on perspective in these exercises because in the coming chapters we discuss perspective as it pertains to collecting and processing textures. In the following pages, Figures 1-30 to 1-35 will each have a caption that discuss the particulars of each study.

 


1_030.jpg

Figure 1-30: The upper left-hand image is a digital photo of some simple concrete stairs. You may have an art lead email you an image like this and tell you she wants a texture based on these stairs. Fortunately, this is a rather simple form; not a lot of color or detail to distract us. Look at the simple recreation of the stairs to the right showing the basic light and shadow patterns on the stairs. The lower left image shows the 2D texture created in Photoshop to be applied to a 3D model of the stairs. If you look at the yellow stripe on the stairs and compare it to the stripe on the texture, you can see the highlights painted in the texture where the edge of the step is and the shadow under the lip of the edge. If you were able to examine the original digital image of the stairs closely, you would see an almost infinite amount of detail. Part of the texture artist’s job is to know when to draw the line. Here I didn’t include every scuff and mark from the original stair image because it wouldn’t work. You will learn in coming chapters that such details usually stand out and draw attention to the repeating pattern of a texture, or in the case of fabrics and fine meshes can create noise or static in the texture. I created this texture pretty quickly; given more time, I would experiment with the chips and wear on the edge of the steps to add more character.

 


1_031.jpg

Figure 1-31: This is a straight-on photo of an interior plaster wall. I included this obviously unexciting image to demonstrate that even in such a simple surface there can be complex highlight and shadow going on. Look at the color swatches of the highlight, shadow, and mid-tone. Notice that the colors are not simple black, white, and gray. The highlight is not pure white or light gray, but a very pale green. Look at the close-up of the image. You can clearly see the consistent behavior of light as it highlights the upper ridges of the plaster and shadow falls from the lower edges. Once you start studying such seemingly commonplace things, like a wall you may walk by a hundred times a day, you will start to notice, understand, and remember how various lights, materials, and other factors affect a surface. Do you convey that simple raised pattern in the texture, using geometry, or a shader? Of course, that depends on many factors, and hopefully by the end of this book you will know what questions to ask to determine the answers.

 


1_032.jpg

Figure 1-32: This image simply shows the world that I need to wash my car.Seriously, look at the various parts of complex objects and you will see a variety of surface behaviors. Notice how the paint is highly reflective and mirrors the world around the car. The metal is not flat like a mirror, so notice the distortion of the reflected image. The windows, while reflecting the surrounding world as well, are translucent so you can see what’s behind the window and on the other side of the car. The window also has a patina of dirt and spots on it. If you needed to recreate this as realistically as possible, you would have to take all those aspects into consideration and determine the best way to achieve the effect. Look at the close-up of the rim. You can see that the highlights are not mirror-like in their accuracy, but rather they are a diffuse notion of highlight. Looks simple to paint, but wheels rotate and will instantly look bad if not painted properly. Using a real-time process for highlights eliminates this problem. While the tires are flat black and reveal only a faint notion of highlight, depending on the detail level, you may be dealing with complex mapping and shader effects here, too. While all of this seems obvious, taking the time to examine the object you are recreating and understanding what you are seeing and how to verbalize it helps when turning the object into game art. If you were to make materials or textures for this vehicle, you would need to know many things about the technology and how the car will be used in the game. Can we have real-time environmental reflections? Can we fake them using a Shader? Do we have to carefully paint in a vague notion of metallic highlights that work in all situations the car may be in? And the windows. Can we do a translucent/reflective surface with an alpha channel for dirt? If the car is used in a driving game where the vehicle is the focus of the game and the player gets to interact up close and personal with the car, then I am sure a lot of attention will be given to these questions. But, if this car is a static prop sitting on a street that the player blazes past, then over-the-top effects may only be a waste of development time and computer resources.

 


1_033.jpg

Figure 1-33: This sewer intrigued me: a simple shape of a common item that many may overlook as not worthy of serious attention. Some may have the attitude that it is only a sewer grate, so make it and move on. But a shiny new sewer grate with clean edges would stand out in a grungy urban setting. Look at this sewer grate. It is made of iron and looks solid and heavy. It was probably laid down decades ago and has had thousands of cars drive over it, people walk over it, millions of gallons of rain water pour through it. On the image at the upper left you can look at the iron and see how it is rusted, but so well worn that the rust is polished off in most places. Dirt has built up in the cracks between the grate, the rim, and the concrete. Even little plants have managed to grow. Look at the close-up at the upper right and you can see just how beat up this iron is and how discolored it has become. At the lower left I desaturated and cleaned up a portion of the image to see just how the light and shadow are hitting it and to get a feel for the quality of the surface. In this image you can more clearly see the roughness of the cement and the metal, and while the circular grate looks round from a distance, up close there are no straight edges and smooth curves. All this detail can’t be depicted 100% in a game texture, but knowing it’s there and understanding what you are seeing will allow you to convey a richer version of the grate as you will learn to focus on those details that add realism and character. On the lower right is a texture I did, and you can see that I was able to quickly achieve a mottled and grungy look for the metal and the edges. There are a few places at the top where I started the process of eating away at the concrete and the metal a bit.

 


1_034.jpg

Figure 1-34: This image is similar to the sewer in approach. Here I wanted to point out how a simple shape can be turned into an ornate hinge with little effort. The top image is the original digital photo of the hinge. I drew the shape of the hinge in Photoshop. You may notice that I drew the screws separately. This is because you need the shapes separately to work with them in Photoshop, you will see why later in the book. In Photoshop I applied and adjusted the Layer Effects and then colored the hinge close to the overall color of the original. After that it was a matter of applying the right filters and doing some hand work to get the edges looking right. We will be doing this type of work throughout the book. And I will remind you from time to time that while the best approach may be to use photo source, or any one of the other methods available, the focus of this book is to help you develop a set of Photoshop skills that will allow you to not depend on any one method. These skills will improve your abilities when working in any of the other methods.

 


1_035.jpg

Figure 1-35: This light switch is a common object you may need to create. Instead of taking the time to clean up and manipulate a photo, you can just make one quicker from scratch. The switch is composed of simple shapes with the layer effects applied. The wall behind the switch was a quick series of filters run to add a base for this exercise.

 

Conclusion

This chapter was an overview of the most basic, but critical, aspects of traditional art. Understanding the concepts in this chapter, and further exploring them on your own, will make you a much better texture artist. We are now ready to get more technical and look at the mechanical issues of creating game textures.

 

 

Read more about:

Features

About the Author(s)

Luke Ahearn

Blogger

Luke Ahearn has over fourteen years of professional game development experience and has served in lead positions such as designer, producer, and art director on seven published game titles including Dead Reckoning and Americas' Army and worked as a background artist at EA. He has authored six books on game development and ran his own computer game company for ten years. Currently, he is the Art Director and partner of ICPU.

Daily news, dev blogs, and stories from Game Developer straight to your inbox

You May Also Like