Creating Art Assets

In this lab, you will work on the basic Photoshop skills that you will need to produce assets for your game. As a visual designer, this is one of your many responsibilities on your team. Completing the lab requires access to the Adobe Creative Suite (or an equivalent software tool). By this point, you should have gotten an e-mail from CIT about accessing Adobe Software. If you have not, please let the instructors know.

The lab is more art-focused (and less design-focused) than the previous lab. However, we are not grading on artistic ability. Instead, your grade will be based on how well you achieve specific effects such as transparency or texture tiling. Do not worry; you will return to more design-focused labs later.

This lab is also substantially longer than the previous lab. You may find that you need to work on it outside of lab. Remember that you have up to a week after the lab to complete it.

Table of Contents

Character Design

                                         

In this part of the lab, you should create a game character. If your group is still working on ideas, that is okay; just come up with whatever type of character appeals to you. Your character does not need to be human(oid); we only require that it has enough features to distinguish a personality.

Write a Personality and History

Before you get started, you need to understand your subject. Create a text document named description.txt and write a character biography that answer some of these questions:

  • What is your character’s name?
  • How old/mature is your character?
  • What kind of world does your character inhabit?
  • Does your character have special abilities or adaptations to the environment
    (underwater breathing, flying, etc.)?
  • Is there anything interesting about your character’s past?
  • What are your character’s goals in life
    (avenge parent’s death, become rich, find a spouse)?
  • Describe a typical day in the life of your character.

Be specific. The better you know your characters, the easier it will be for you to visualize them. Be sure to include how you have considered the background/personality of the character in coming up with your design. For example, if the character comes from a cold climate, is he/she wearing something to keep warm.

Sketch Your Character

Take some time to develop your character’s appearance by sketching some designs based on your description. You may find that while sketching, more ideas about your character’s personality and background history may form. If so, feel free to update your description accordingly.

For this assignment, we want to see that you’ve actually gone through a thought process in designing your character. Submit a file called sketch.png containing your initial character design sketches. These can be photos of paper-and-pencil sketches, but you might find it better to take this opportunity to practice drawing with a pen tablet, especially since the rest of your art for this class will need to be digital.


From Pixar's Ratatouille

You may find it helpful to use some of the following tools:

Procreate
An inexpensive but powerful art program for creating digital art with an iPad
MyPaint
A free digital art program with realistic brushes, an infinite canvas, and pen pressure sensitivity
Fire Alpaca
A free digital art program with layer clipping, line guides, and pen pressure sensitivity
Just Sketch Me
An online tool for forming different 3D humanoid poses
AstroPad
A tool to turn an iPad into a wireless drawing tablet

Draw Your Character

When drawing your character, we want a “posed shot” that conveys the personality of your character. If you do not know what we mean by this, take a look at some of the work by Hoon from Mess Studios. Make sure that it is an interesting pose and make it look natural. In that regard, you should take a look at what the old Disney masters had to say about “wooden” vs. natural poses:


From The Illusion of Life (Thomas and Johnston)</span>

You do not need to draw your character in a setting, but you are certainly welcome to. We only care about the character. Plus, keeping the character by itself will make creating a transparent .png file easier. You may find that one of your early concept sketches works as a great base sketch for drawing your character’s signature pose.

If you are not comfortable with digital art directly, you can draw your character on paper and then scan it. In that case, your pose should should just be pencil or ink line drawings. A large part of this lab is coloring the pose in Photoshop. As with the previous lab, you should scan your image using an app like Scannable. In the interest of keeping the file size small, we ask that you scan at 300 dpi.

Photoshop files end with .psd suffix. If the scanner can produce a .psd file, that is ideal. However, Photoshop can open any major graphics file. We recommend .png over .jpg, since PNG files do not use lossy compression that can cause graphics artifacts.

Set Your Drawing as the Outline

Before you can color the image, you need to create some layers. Open your pose file. Ensure that it is saved as pose.psd. Double-click the Background layer in your Layers palette. This changes it to Layer 0. Click the tab reading Normal, and scroll down to Multiply. Now the white values of your image are transparent, and you can do an under-painting on a new layer beneath your dark lines.

Create a new layer by clicking the New Layer button at the bottom of the palette. Drag Layer 1 under Layer 0 and, using the paintbrush tool, color where needed. If your color is not beneath the dark lines, make sure you have Layer 1 selected, and that it is underneath Layer 0. You may want to name the layers by clicking on the actual text Layer X. Feel free to add more layers to isolate different parts (you could color the head on one layer, and the body on another for example).

Color and Shade Your Image

Choose a color scheme that reflects your character and start coloring. Pay attention to light and shadow. Play around with the different blending modes (assuming that you have already changed your line drawing’s layer from Normal blending mode to Multiply).

Here are some blending methods you might want to try:

  • Create a shadow layer set to multiply and a separate highlight layer set to screen
  • Use the Burn and Dodge tool (located slightly above the middle on the toolbar)
  • Blend with the smudge tool (hotkey “r”) in normal mode

If these tools are too harsh, you can decrease the exposure on the top options bar right under the main menu. Many artists find it helpful to place each color on its own separate layer so colors do not mix near borders when smudging. To add a new layer, hover over the buttons in the lower right corner of the Layers window in Photoshop and click the one that says New Layer. This should look like a square with a darkened corner.

While working, you may wish to play around with your brush properties. Adjust the hardness of the brush to suit your style. Those of you who want a smoothly blended look will want to turn on the airbrush tool and change the hardness to 0%. Blending works best with a tablet.

If you get stuck on a color scheme for your character, take a moment to browse some photographs on the web. If you find a photo with a color scheme that suits your character, use the eyedropper tool (hotkey “I”) to capture that scheme as a starting point for your character.

While we are not requiring extreme details, adding details can significantly improve the overall quality of your artwork. Rim highlights, folds in clothing, textures, etc. can dramatically improve the look and feel of your work.

Understanding the Alpha Channel

When you use an image in a game, you want the background to be transparent. Otherwise, the game is going to draw everything that you create as a opaque rectangle. This is where “alpha” comes into play. In a typical RGB image, each pixel stores a value from 0 to 255 (8 bits) for red, green, and blue, or 24 bits for each pixel. An RGBA image stores a value for red, green, blue, and alpha (opacity) using 32 bits for each pixel.

Alpha Channel Eagle
Image on Grey Background With and Without Alpha Channel

While we will lecture on alpha later in the course, you do not need to understand how it works just yet. In most modern software, an image with a transparent background can be created very simply. You can make pixels have opacity by changing the settings of the image when you save it as a .png, .tif or .gif file. Select the File tab and then click Save As... When saving your file, make sure to save it as .png or .tif for this lab. A pop-up window should appear asking you to choose between 24bpp RGB or 32bpp ARGB (Pixels with Opacity). Select 32bpp ARGB since you want to have that Alpha Channel information saved. When saving, please make sure that any background layer is deleted, or else the image will not be transparent!

Save Your Results

Not all file formats can save alpha information (JPEGs cannot, for example). You can tell if a file format supports alpha if the Alpha channels checkbox in the Save As dialog is not grayed out and your document contains an alpha channel. If you do not have an alpha channel, this option should remain grayed out. Select the TIFF format and make sure that Layers is NOT checked and Alpha Channels IS checked. PNGs with alpha channel support are also an acceptable file format.

Save your pose as pose.tif or pose.png. We do not want you submitting the PSD file.

Character Turnaround

In this part of the lab, you should create a character turnaround with actions. A character turnaround is 5-6 frames of a colored version of your character from different angles. These frames should show your character’s front, 3/4 front, side, 3/4 back, and back at a minimum. If your character has a unique side, please show that as well. Usually the character is shown in the same simple position, since this is not an animation, but a way for you to show any special marking or designs of your character. Understanding how your character looks from all angles will help with animations.


An example of character turnaround with actions</span>

Actions for a character turnaround can be uncolored sketches, but should be clean enough to present. Actions are usually around 4-6 frames of your character doing what they would naturally, whether that be running, jumping or shooting slimeballs. These actions will convey a sense of personality and can give you some idea of how this character will move when animated.

When you are done, you should name your turnaround turnaround.png or turnaround.tif.
This is the final file that you will submit for Character Design part of the lab. This does not have to have any alpha channels.

Tessellated Textures

Lab Files: design2-sec2.zip

Textures are a vital asset to nearly any modern game. They are the paint used on 3-D objects and 2-D objects of varying size. Textures are particularly important in 3-D games, as they are used for everything from the ground the player walks on, to the clothes the player wears. Those types of textures are UV-mapped; this is a process used by 3-D engines that decides exactly which pixel to take from a texture and where to place it on a 3-D polygon. We will cover this concept later in the course.

For this lab, you will be focusing on a simpler type of texture: the tessellated texture. This type of texture is more commonly used in 2-D games. Instead of stretching the texture to fit the shape, it is repeated as a paint across a 2-D surface instead of a solid color.

To get started on this section, you will need to download this zip file shown above. Extract this zip file and use Photoshop to open design2-sec2/TextureViewer/Stone.jpg shown below:

Explore The Clone Tool

Before we get into the section, we need to understand how the Clone Tool (also known as the Rubber Stamp Tool) works. Open the stone pattern in photoshop, then select the Clone Tool. Right under the menus are the Clone Tool’s options. It has a brush shape and size just like the airbrush or eraser, an Aligned checkbox, a Sample All Layers checkbox, and some other options that we do not care about right now. Set it to a hard-edged circular brush of size 30 and make sure that both Aligned and Use All Layers are checked. Now hold down "alt" for PCs or "option" for Macs and click on any area in the image. You just sampled that area; it is like you made a big 30-pixel stamp of the area you just clicked on. Left click without holding down any keys somewhere else on the image. Keep clicking around and see the result. If you do not see anything, make sure your Opacity and Flow are both at 100%, and your Mode is set to normal (in the options next to brush size).

Notice that as you paint and move the stamp around, the sample moves along with it. It also remembers where you last sampled from. In other words, you could alt-click the top of a vertical line, move the cursor to the right, and then left-click and drag the mouse downward to make a copy of the line. If you let up the left mouse button and then click it down again, the line will continue where it left off. You cannot make a new line unless you alt-click on the line to resample it. Try this out by picking a color and painting a spot on a new layer. Now use the clone tool and sample the spot. You can keep clicking around the rest of the image, but you cannot make another spot unless you go back and alt-click it again. Now uncheck the Aligned checkbox. This makes the sample area reset each time you let go of the left mouse button. Sample the dot and left-click around. Each time you push down on the mouse, you start with the dot.

The Sample All Layers button determines whether your sample the merged image, or just the selected layer. When this is checked, you sample exactly what you see (although you only paint it onto the currently selected layer). If you uncheck this box, then you only sample from the currently selected layer. Play around with the Rubber Stamp until you get comfortable with it; it’s about to become your best friend in the next step!

Tesslate the Texture

A tessellation is any pattern than can be seamlessly repeated (both horizontally and vertically). You are going to make the stone texture into a tessellation. To do this, open the image in Photoshop and choose Filter-> Other -> Offset…. Enter "256" for both horizontal and vertical and ensure that Wrap Around is selected. You should see a big cross through the middle. These used to be the borders (they are contoured because we used a contour effect when making the texture).

Now select the Clone Tool and sample areas from the nice-looking parts to paint over the ugly black cross. It helps to try to match color and lighting from your sample to the area near the cross. Feel free to experiment with brush size or hardness. This may seem difficult at first, but the more you practice the easier it will become!

Once you have covered all of the seams, you need to offset it again. This is because you just created new areas that do not necessarily overlap. These are the areas where the black cross used to touch the (new) border of the image (shown in red).

Now go ahead and offset it again. It should look much better than the first offset. Touch up the few areas that need it with the Clone Tool. If all went well, you should have a seamlessly-repeatable texture. You can try it out by opening up design2-sec2/TextureViewer/TextureViewer.html in your web browser. Zoom in and out in your browser to check for any inconsistencies.

When you are done, you should name your texture stone.png. Tesselation is sensitive to compression artifacts, so making it a JPEG is a bad idea. This is the first file that you will submit for this section.

Create Your Own Texture

After finishing making stone.png, you should make one more tessellated texture that you will use as part of a tile set. It can be anything you want, but should be sized to fit in Block 0 in the template provided in design2-sec2/TileViewer/example.psd.

Play around with the amazing assortment of filters that Photoshop has to offer. You will often use

Filter -> Render -> Clouds and Filter -> Noise -> Add Noise...

as a starting block (almost always with Monochromatic checked) . There are also a wealth of texture tutorials online. If you just type "Photoshop ___ texture tutorial" (where ___ is the type of texture you want to create, like "wood" or "rusty metal") into Google, you should be able to find dozens of suitable tutorials. Here are a few sites that have some particularly good tutorials:

It is also a good idea to find a picture of what you are really after. You want a nice wood grain? Just take a picture of a table or scan the surface. Even if you make your texture from scratch, it’s very helpful to have an example of what it "should" look like right next to you as you work.

Tessellate Tiles with Edges

The tesselated textures tiles can also have edges that add a much more aesthetically pleasing look to your game (ex: platformers). Using the tesselated texture tile you created earlier, you will now create a tile set that edges seamlessly that programmers can utilize in their level design.


Example Tile Set from Pyrokid

We have a tool to help you understand how this tile set would be used in a game.
Unfortunately, this tool is in Flash, and Flash has recently been discontinued by Adobe (and all web browser). We have also provided you with a Python alternative, but this tool assumes that you have Python installed and are comfortable with executing a Python program from the command line. You should use the tool you are most comfortable with.

To run the Flash version of the tile viewer, you will need to download the standalone Flash projector. After installing the program, open design2-sec2/TileViewer/TileViewer.swf with the Adobe projector. You will see an example of how the example tile set might be used in a level, as in this very large image.

To do the same thing with the Python viewer, you will first need to have the package Pillow (an image processing library) installed. If you are comfortable with PIP you can do it with the following commands

python -m pip install --upgrade pip
python -m pip install --upgrade Pillow

To view the tiles, simply type

python tileviewer.py Tiles.png

where Tiles.png is your set of tiles. You can substitute whatever file name you want here. Regardless, if the tiles are formatted properly, you will get the same result as for the Flash version.

If you look at the example image, you will notive that the outside edges of the platforms are bumpy, while the insides are seamless. This is achieved by using the same base texture (Block 0, the one you just made) and superimposing different types of edges over it.


Base


Edges


Combined


To see how the different blocks correspond to actual platform positions, compare the template below to this Image Mapping.


Template

Now it’s time to actually create your tile set, using the template above as a guide. First, tile your Block 9 texture to fill all the light blue sections on the template. If you created your Block 0 texture correctly, all the blocks should look seamless. Your resulting image should resemble the Base image shown above.

Second, create the edges on a separate layer, filling in the dark blue sections of the template this time. Your layer should resemble the Edges layer shown above.


Template with Edges

Finally, combine your base and edge layers and export them as a PNG file with alpha transparency. Save the file as Tiles.png and make sure it is in the same directory folder as your TileViewer.swf. Open up TileViewer.swf again (or refresh it with your [R] key) and check for any inconsistencies before submitting. This will be your second file to submit for Section 2. You will have the opportunity to gain extra credit if you make a tiled texture where every tile is unique.

Describe Your Tile Set

Now that you have created your tile set, tell us how a player might interact with it. This is important when you need to explain your design to your teammates. This is especially important if you want interesting tile changes as you’d find in Minecraft, where dirt tiles become grassy-topped when exposed to the sun.

In your description, answer questions such as:

  • Are these simply unobtrusive background tiles?
  • How do these tiles contribute to the theme of your game?
  • Does the player walk and wall jump off of these platforms?
  • Can the player break these tiles?
  • Will these tiles damage the player?
  • What material are the tiles made of?
  • When should certain tile numbers be used over others?
  • Should tiles ever change due to a gameplay mechanic? How?

Answer these questions, along with any other relevant information about your tile set in a file called tiledesign.txt. This is the final file you will submit for this section on Tessellated Textures

Submission

Due: Wed, Feb 09 at 11:59 PM

You should only submit one ZIP file. For the section on Character Design, your ZIP file should contain the following:

  • description.txt
    This is the text file with the description of your character.
  • sketch.png
    This is the image containing your character design concept sketches.
  • pose.tif or pose.png
    This is your character pose with coloring and alpha channel.
  • turnaround.tif or turnaround.png
    This is your character turnaround with actions.

For the section on Tesselated Textures, your ZIP file should contain the following:

  • stone.png
    This is the tessellated stone texture.
  • tileset.png
    This is the set of tiles with edges you made using your texture.png.
  • tiledesign.txt
    This is the text file describing how your tile set should be used.

Submit this zip file as lab2design.zip to CMS