How Can Photoshop Be Used in Game Design

In this lesson, you can expect to:

Learn about the role of Photoshop in creating game art.
Learn the basics of how texture maps work in games.
Learn fundamental principles of image creation: composition, rule of thirds, lines, character setting, perspective, color harmony, and color temperature.

Concept art is developed to help the team visualize the style of the game and provide reference and inspiration for the art team.

Textures, or texture maps, are images that "wrap" around 3D models. These images provide visual details that cannot be created effectively in 3D software.

Always think about ways to repeat textures and imagery in your game art work without looking conspicuous. Repeated features help conserve game processing time.

Texture artists work primarily in Photoshop, but should have an understanding of 3D software and how 2D artwork maps to it.

Even with today's powerful consoles and computers, there are limits to file sizes and image sizes for textures.

Composition is the organization of elements within the image, and good composition allows the viewer to understand the hierarchy of elements within.

Use the rule of thirds in concept art and textures the same way a photographer uses it in photographs. It always draws the eye to the focal point.

Use iconic composition to make a lead character look larger than life. Alternatively, use a downward view if you want to diminish a character or object.

Look for the vanishing point in game screenshots on the Web as well as in historical artwork. Learn to identify the horizon and perspective type.

Images can be converted to grayscale by going to Image > Mode > Grayscale in Photoshop. This is a great way to visualize the value of colors in a scene.

	Photoshop and Game Artists

Let's kick off this course by exploring some of the tasks Photoshop is used for in game art development. A game artist may be asked to create a wide range of different types of art.

Concept Art

In the early stages of a game's development, concept art is used to work out the look of the game and determine its art style. Concept art generally begins life as line art—drawings or sketches produced on paper by an illustrator. Some concept artists are part of the game development team, but more often than not, they're "hired guns" brought in for a project. They work with the lead artist to provide everyone in the project with a graphic inspiration and visual reference for the game's development.

Often associated with character design, concept art can in fact be used to explore a visual concept for almost any important element in a game: characters, environments, scenes, weapons, interface elements—you name it. If it's going to be on-screen, and it's important, someone needs to make some concept art.

Here's some concept art used in the making of Valve's Half-Life 2, a game lauded for its imaginative graphics:

Concept artists for Half-Life 2 created art for vehicles, environments, and weapons. The concept art helped define the artistic objectives for the 3D artists in the development team.

Why is concept art a Photoshop artist's concern, you might wonder? Well, concept art is often provided as line art to the development team: black and white drawings, which may or may not be digital. Concept art is often scanned and imported into Photoshop to add color to it and prepare it for digital distribution. Moreover, the earliest concept drawings are rarely used as they are originally submitted; instead, they may be modified many times in the development process. Concept art is just the (important) first step in a process of refining the look of a game.

I mentioned digital distribution. Once the look of the worlds, characters, weapons, and so on has been worked out, various color renders of the most important scenes will be included in the game's Design Document for reference. Pieces of concept art are often modified in Photoshop for various promotional purposes, from creating imagery for ads, to online trailers, to creating box art (inside and out).

We'll explore some techniques for working with concept art later in this course.

Textures

For many game artists, the most common Photoshop task is creating texture maps, or 2D images that "dress up" 3D models.

The reason for creating texture maps is simple. Computer-generated models don't usually look so good without some sort of special surface treatment. The types of surfaces that they generate tend to look artificial or even plastic.

A simple way for game artists to give a surface the right look is to apply digital images as textures to the surface. In its simplest form, a texture is applied to a 3D model much like a decal is applied to a model plane or car.

An untextured model

A model with a texture map applied. The Minegun from Political Arena, a mod for Quake III Arena Copyright © 2001 Todd Gantzler.

How Textures Work

We won't explain every last detail on textures here (I'd recommend taking my Tiling Textures course if you want to get into the nitty gritty of this topic). But you'll need to know some of the basics in order to tackle the projects in this course.

A texture map can be created from a texture sample pulled from a range of sources: stock texture sites, personal photography, scanned print materials, the Internet, you name it. (Take care to respect the copyright laws, of course.)

Texture reference samples for an environment, courtesy of Mike Casalino. You'll learn how they're used later in the course.

The purpose of a texture map is to improve the look of the model by adding texture and detail. However, the technical constraints that affect detail are very important for texture artists. In spite of the advertising hype, the various platforms that run games (your PC, or your PlayStation, Xbox, or Wii console) are all limited in their performance.

When a 3D model appears in your game, the engine must mathematically "draw" each polygon or triangular facet of the model. Game engines can only draw so many polygons per second, and they can store in memory only so many textures. Texture details that would make a model "draw" too slowly if built using polygons, such as rivets, grilles, bolts, dents, and scratches, can be added into the texture map, often with quite good results. And in order to use limited texture memory efficiently, it is common practice to use textures that "tile."

A texture that tiles is a texture that can be placed side-by-side with a copy of itself and show no seams where the two tiles touch. The advantage of tiling textures is that a relatively small texture can be applied to a large surface by repeating (or "tiling") that texture over the surface.

To create a desert surface, this rock tile can be modified so that it can be repeated and applied to a 3D model.

Original tile

If I repeat this texture four times side by side, it creates the illusion of a seamless surface:

If you look very closely at the texture above, you may notice repeating elements in this texture. But when you're running across the desert in the game, pursued by a dragon or some other foe, it's likely to be convincing enough!

Applied to the landscape below, one small texture tile does a mighty and efficient job of creating an environment:

Click to enlarge.

Mapping Textures

One of the challenges in textures is developing a facility with mapping the textures. Texture mapping is a two-part process. One part is painting (digitally painting) the texture image. The other is "mapping" it to the surface of the model—indicating which parts of the texture should be drawn on what parts of the model.

Consider again the minegun model shown below. See if you can identify the corresponding parts in the texture map and on the model itself. How do you think a texture like this is painted? And how do you think the game artist places a certain part of the texture on a certain part of the model? We'll learn more about this process later in the course.

Naked minegun

Minegun with textures

The texture map

To become a good texture artist, you need to have a good grasp of how 3D modeling programs work, and be able to visualize how a two-dimensional texture map will translate to a three-dimensional model. For objects that need to be more detailed, like game characters, a great many textures may be created and applied to the individual polygons of the model. Edited individually, they can be viewed on an "unwrapped" texture map before they are applied to the character:

The untextured model (left) and textured model (right). Click each to enlarge. A player model from Unreal Tournament 2004 © 2004 by Epic Games, Inc., used with permission. Unreal is a registered trademark of Epic Games, Inc. All rights reserved.

The texture maps. Click each to enlarge.

In addition to having file size constraints, it's worth noting that many textures have constraints in image size or dimensions. Game engines and many 3D cards require that textures are sized to be "powers of two" in pixels (game artists typically refer to this as the "resolution" of the image). For example, an image might be a square of 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, or 2048 pixels.

Typically textures are square, but they don't need to be. 3D cards can resize a rectangular texture to a given resolution, if necessary, before storing it in memory. Still, a texture resized by a 3D card or game engine will typically not look as good as one resized in Photoshop, so it is well worth your time to be sure all of your textures have pixel dimensions in each axis that are powers of two.

The Big Picture

OK, that's a brief overview of the kind of tasks a Photoshop artist might perform in a game development team: working with 2D images and concept art, and working with texture maps for different kinds of models in the 3D environment. You're going to get the chance to do all these tasks later in the course.

Next, I'd like to talk about the big picture of being a game artist. Having a good foundation in traditional art concepts will serve you well in creating game art. When you are creating any individual piece of game art (be it a blade of grass or the trigger on a cannon) you are creating part of an image that will be experienced on screen both as a 2D image and interactively as a 3D image.

The scenes in games owe a lot to the great images created by painters throughout history. They also owe a lot to great scenes created by movie directors in Hollywood and beyond. So let's talk about the fundamentals of creating images.

We'll analyze some scenes from the Epic title Gears of War (the 2006 original) and I'll ask you to demonstrate your understanding of the concepts in the following exercise.

Composition is the organization of the various elements that make up an image. The general goal of composition is to choose and place appropriate elements within the work in order to communicate to the viewer certain ideas or emotions, or simply to make the work more pleasing to the eye. Composition is very important in drawing, painting, photography—and of course, game art!

Composition plays a huge role in how the viewer "reads" the image. It dictates what the viewer looks at first or pays attention to. If the artist is successful, the eyes of the viewer will be drawn through the work, with a tendency to linger over important points of focus. A secondary goal of composition is to create an arrangement in which all the elements work in harmony.

Consider this screenshot used to promote the Epic game Gears of War. Before the game was released, this image of the game's hero Marcus Fenix confronting the Locust Horde was the number 1 image used in publicity materials for the game. Take a good look at the scene—how does the composition of the image help communicate what the game's all about? (Note: You don't need to have played the game to figure this out.)

Click to enlarge.

Questions to consider include:

	What is the arrangement of elements or objects within the image? What is the path followed by the viewer's eye when looking at the image? How are the characters/subjects portrayed in the scene? What type of perspective is used? What is the range of values used? What is the color palette? How do color interactions contribute to the message?

Rule of Thirds

Let's start by discussing how elements or objects are arranged within an image. Over the centuries, many rules of composition have evolved. One of the simplest and perhaps the easiest to grasp is the rule of thirds, a concept that's popular among photographers and widely used in the fine arts.

To use the rule of thirds, draw imaginary lines across your image to divide it into thirds both horizontally and vertically. Important elements of the composition can be placed on these lines and also the points where the lines intersect (sometimes called "power points"). For reasons known only to psychologists, placing elements in this way seems to give an image both structure and energy. It helps the viewer read the image.

Here's a photographic example:

The author of this work, Moondigger, has published it under the following license: This file is licensed under the Creative Commons Attribution ShareAlike 2.5 License

In the image above, the lines are superimposed to help show the composition of the photograph. The horizon lies on the bottom horizontal line, dividing the image into a bottom third and a top two-thirds. The tree is located at the intersection of a horizontal and vertical line.

You'll note that some elements of the composition do not have to lie precisely on one of these lines or points. For example, the bright clouds lit by the setting sun on the left side of the image do not lie on the line or on a power point. Overall, however, using the rule of thirds makes the photograph more effective.

Now look at the Gears of War image again, with rule of thirds lines superimposed. Notice how the hero's face comfortably rests on the top line and the gunshot is right near an intersection.

The hero follows the rule of thirds, as well as the rules of engagement.

I should point out that the rule of thirds isn't the solution for every image. There are many other approaches to composition.

To give just one example, the rule of thirds is an application of the golden ratio, from which the golden rectangle is derived. Since the Renaissance, or even before, artists and architects have believed the proportions of the golden ratio to be aesthetically pleasing to the eye, and have been using those proportions in their work. A large body of literature has been developed on the subject. You can read more about the golden ratio on Wikipedia.

Of course it is true that many impressive images break this and many other "rules" of composition. But whether an artist follows, or breaks, such rules, it is important that he or she is familiar with them.

Compositional Lines

Compositional lines are one of the most important factors in guiding a viewer's eyes through a composition.

When we look at an image, our eye tends to be attracted to any lines we see and follow them to see where they lead. Perspective lines help us perceive depth (more on those later). Contour lines help define the boundaries between a subject and a background.

Particularly important are the implied lines created by actions or by the sight lines of characters. If a character is looking somewhere, or shooting somewhere, our eyes instinctively follow the implied line to see where it leads.

In this shot, the hero's sight line and his shooting action creates a line that goes into the crowd of aliens and circles back, drawing our attention to their outstretched hands.

Character Setting

When we play games, we generally play them through our characters—we run, jump, shoot, drive (you name it) while controlling a character's movements and actions. And so it goes without saying that the placement of characters within a scene matters too. Characters are among the first things we look at; they are of central importance.

In any representation of a character, posing, placement, and perspective all matter. In the first GOW image we looked at, the hero Marcus Fenix is portrayed at middle distance, partly obscured by hordes of alien hands. He's wearing a desperate expression on his face and his body is contorted to dramatize the urgency of his situation. All of these factors create a dramatic scene.

Since game characters are usually heroes, they are often represented in posters or concept art using iconic composition. Whenever we see heroes portrayed in ancient statues or religious paintings, they often appear larger than life, and the viewer is often forced to look up at them. In a painting, the figure is depicted at the absolute center of the image.

The composition in the photograph below might be said to be iconic.

The same compositional approach might is used in this concept art piece for the Gears of War heroine Anya (below). Posing, placement, and perspective in the image combine to make her heroic. Not only does she exude a confident, defiant body language—she's also placed at the absolute center of the image and the camera perspective forces us to look up at her.

If you think about the height of the camera view, iconic composition turns the viewer into a five year old kid!

Perspective

We've mentioned perspective several times in this lesson. Let's now define it more formally.

Linear perspective is a mathematically based system for creating the illusion of three-dimensional space on a two-dimensional surface. The artist and architect Brunelleschi pioneered the geometrical method of perspective as in his paintings of the early 1400s in Florence, Italy. Architect and writer Leon Battista Alberti wrote Della Pittura, a treatise in which he defined the rules for showing perspective in painting, several decades later.

The Flagellation (c. 1460) - It's not a Brunelleschi painting, but this work by Piero Della Francesca is typical of the Renaissance artist's fascination with exploring perspective.

To use linear perspective in an image, an artist draws a straight line to represent the horizon. (The horizon may or may not be visible in the image; often it is a tool used in creating realistic perspective.) The artist will usually draw the horizon line, and all of the other lines used, very lightly so that they can be easily erased later.

The horizon line runs across the canvas at the eye level of the viewer, usually horizontally (an artist may choose to tilt the "camera" slightly for a more dynamic effect). The horizon line is where the sky appears to meet the ground.

Consider the overgrown city in the Gears of War screenshot below. Can you tell where the horizon line is?

The Vanishing Point

A key concept for understanding perspective is determining where the vanishing point is.

If you stand in the middle of a set of railroad tracks and look along the tracks in either direction you should see the parallel lines of the tracks converge until they appear to meet at the horizon. The point where they meet is called the vanishing point.

The horizon line

When artists use one-point perspective, the vanishing point should be near the center of the horizon line. Orthogonal lines are drawn to help the artist connect points around the canvas to the vanishing point. An artist uses them to align the edges of walls and other linear elements in the image.

The image below shows three boxes drawn in one-point perspective. The image animates to show the construction lines used for one box at a time, and then the lines used to draw all three boxes. You should be able to locate the vanishing point in the image by studying the construction lines. Once you find the vanishing point, you have also located the horizon (not shown in this image).

One-point perspective

Two-point perspective is often needed to construct a realistic perspective for a scene. Imagine that you are standing at the intersection of two sets of train tracks that run perpendicular to one another. Now you have two vanishing points instead of one!

The image below shows two boxes drawn in two-point perspective. Again, they are shown with and without the various construction lines. Study the drawing to understand how the lines are used, and try to locate the two vanishing points.

Two-point perspective

Three-point perspective is usually used when the viewer is looking down on a scene from above, or up at a scene from below. The third point does not lie on the horizon. If the viewer is looking up, parallel lines converge toward some point well above the horizon. The image below shows three boxes drawn in three-point perspective.

Three-point perspective

The scene above is seen from a fairly extreme angle, which causes distortion somewhat similar to using a wide-angle lens. This is because the third vanishing point is very close to the horizon. This vanishing point does not have to actually be on the canvas. In fact, none of them do. Often they will need to lie well beyond the edges of the canvas.

There will be times when even more vanishing points are needed. In the image above, imagine a box whose edges do not lie parallel to any of the other lines in the scene—you would need another vanishing point to help draw it. A scene could theoretically have an infinite number of vanishing points.

In his sketch for Adoration of the Magi you can see the construction lines drawn by Leonardo da Vinci in the early stages:

One way to practice your understanding of perspective it to try to apply the concept to images, a task that can be done in Photoshop. (We'll practice this later in the exercise.)

Let's now shift gears and discuss color and contrast in image-making. You might be surprised to discover which element is more important...

Value is also called tone or intensity or brightness. It is essentially the range of light and dark tones in your image. An image with good contrast should usually include pure black, pure white, and the range of grays in between.

Value is the most important part of making images. If you have the range of values correct for your image, you can introduce nearly any color scheme and the image will still work visually. Conversely, if your values are wrong, then no amount of work with color can make the image visually successful.

Consider this grayscale image of Mr. Fenix's uh-oh moment:

Even in grayscale, he's still in deep doo-doo.

Notice that you can make out all the important details even though all the color information is removed.

We depend on contrast between darks and lights to recognize the world around us. We could much more easily do without color than without value. Black and white photography is a medium that is still used despite the ready availability of color film. The lack of color does not stop us from recognizing what we see—value alone is quite sufficient. Many animals do not see color, but only a range of values.

Value is used in the same way in digital art as in more traditional art. Value is used in three ways in images: It defines the form of objects in your images, it can be used expressively, and it can be used decoratively.

Color

Anyone with a background in traditional art will be familiar with the idea that red, yellow, and blue are primary colors, and that all colors can be mixed by combining the right amounts of these three colors.

Just in case you did not misspend your youth at art school, here's a quick refresher: It was Sir Isaac Newton who first used a circle to describe the relationships between colors, thereby creating the concept of the color wheel. Mixing equal parts of two primary colors to produce the secondary colors, orange, green, and purple. Mixing a primary color with equal amounts of a neighboring secondary color produces the tertiary colors.

These pure colors are also called hues. Arrange them around a circle and you get a color wheel:

RYB Color Wheel showing primary, secondary and tertiary colors

In the late 19th century, scientists decided that a better color model would use a different set of primary colors: red, green, and blue. This is closer to the three types of color receptors in the retina of the human eye.

This is the RGB color model used in TVs and computer display devices, and it's the default color model used in Photoshop.

RGB Color Wheel showing primary, secondary, and tertiary colors.

Note: Three other colors (cyan, yellow, and magenta) are more effective used as inks or dyes, so a color model based on these different primaries plus black gives you the CMYK color model used for printing and photography.

Complementary and Analogous Colors

The color wheel really starts to earn its keep (and become interesting) when it's used to develop a color scheme for an image or scene. When you're developing an image of a character or scene, you can choose to use three or four colors that are either create drama by clashing or soothe the eyes by working well together.

Complementary colors are colors opposite each other on the color wheel. Mixing a color with its complement is said to result in gray or white. If you combine red with cyan, for example (cyan is the complement of red in the RGB model), you should get equal parts of red, green, and blue, which is indeed gray or white.

Complementary colors used in close proximity to each other are considered to be quite intense and dramatic. Such combinations are actually tiring to the eye, and so they should be used carefully and sparingly.

Analogous colors are colors that are close to one another on the color wheel. These contribute to more harmonious, less intense color schemes.

Value and Saturation

In addition to thinking about the colors you use, you should consider the value or "brightness" of the color. Value as mentioned earlier relates to how light or dark the color is. As a color's value is decreased, the color moves closer to black.

Value is decreased by proportionally reducing the red, green, and blue values of a color.

The spectrum of visible light

Reducing the value of a blue color by removing red, green, and blue values from it

Saturation (also called chroma) describes the degree of purity of color. A fully saturated blue has the RGB values of 255, 0, 0. Saturation is decreased by adding white to a color. In the case of blue, this is accomplished by adding equal amounts of red and green. Complete desaturation results in a neutral gray.

Adding white desaturates a color.

As an artist, you'll want to develop the ability to analyze color schemes in the art you see and begin creating your own. Using the Photoshop color picker, we can create a swatch to determine the color scheme used in this concept art for the Gears of War character:

Anya's uniform is dominated by two neutral grays: one at a middle value and one that is very dark to make parts of the uniform stand out. The values also stand out from her hair and flesh tones that are the lightest colors in her palette. The uniform features a touch of blue that is a complement to the warm yellow and orange of her hair and flesh. The blue, orange, and yellow are relatively saturated, offering some additional contrast from the neutral grays.

This last section relates to some concepts in color psychology. Using color effectively can affect the viewer's perception of depth, their mood, and more.

Artists have been thinking in terms of color temperature since the 18th century or longer. Some colors are warm, and some are cool.

The root for this perception is not the physics of light. It probably stems from observation of the colors of the landscape on a bright, sunny day versus the same landscape on a gray, overcast day. Reds, yellows, and oranges, and also browns, are considered to be warm colors, while blues, greens, and grays are considered to be cool colors.

Psychological effects can be attributed to color temperature—warmer colors are considered to be more aggressive and stimulating, while cooler colors are thought to be calm and relaxing. Warm colors advance in an image, while cool colors recede. The context of the color makes a big difference. The same color may appear warm in one image, but surrounded by a different set of colors, may appear rather cool.

Interestingly enough, in real life, when things are really hot, we see the opposite color scheme—the coolest stars are red and orange, white stars are hotter, and the hottest stars are blue in color.

Context

A final important thing to remember is that colors can appear very different depending on the context of the colors around them. Consider the image below. The strip in the middle is a solid gray, but it appears more blue in relation to the yellow background, and more yellow in relation to the blue background.

Now observe the characteristics of cyan in relation to the analogous colors blue and green.

Compare the look of cyan below against the background of the complementary colors red and yellow.

And finally, consider the effect of black and white backgrounds.

Cyan appears subdued and less bright against the green background than against the other colors. It appears more intense against the red background, and the square on red appears larger. It appears more vibrant, and larger, against black than against white.

At least, that's what I see. What are some other differences that you observe, and why do you think this is?

Summing it Up

As you begin to create images for game art, these are some of the art concepts you'll want to have at your fingertips: composition, use of lines, character setting, perspective, value, complementary and analogous colors, and color temperature.

In the first exercise, we'll explore some game art and practice getting these concepts under your control.

Exercise
Analyze game art using Photoshop and fundamental art concepts.

Discussion
Share your thoughts and opinions with other students at the Discussions Board.

How Can Photoshop Be Used in Game Design

Source: https://documents.sessions.edu/eforms/courseware/coursedocuments/photoshopforgameart/lesson1.html

Share this post