Asset Creation (designers only)
Due: Thursday, January 1st at 12:00 am
In this assignment, you will work on the basic Photoshop and Flash skills that you will need to produce
assets for your game. As the visual designer, this is one of your many responsibilities
on your team. The assignment is broken up into two components. First, you will
create a character for your game. Second, you will animate it.
This assignment will make heavy use of Adobe Photoshop and Adobe Flash. We have the Adobe CS software available in Phillips 318 (the lab intended for use outside of class). There is no requirement to buy software in this course. With that said, the campus store offers the software at a discount should you want it.
Create a Character
In this part of the assignment, 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.
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)
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
the alpha channel easier.
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
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
Use the Burn and Dodge tool (located slightly above the middle on the toolbar)
If you are a traditional artist, you may want to 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
Create an 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.
Image on Grey Background With and Without Alpha Channel
On the Layers window on the right of your screen, click the Channels tab.
Here you will see four channels (RGB, Red, Blue, and Green). If instead of RGB,
you see CMYK, Cyan, Magenta, Yellow, and Black (or even something else!) that
means you are not working with RGB colors. Fix this by going to
CMYK has its advantages (for print media), but for this project stick to RGB.
At the bottom of the Layers window, click the Create New Layer button.
You now have an Alpha Channel.
Click on the RGB channel to select it. You should see your drawing again. From
the tools palette, click the magic wand selection tool (stick with sparkled
end). Ensure that Use All Layers is checked (on the top under the
main menu). Now click on the space surrounding your drawing to select the blank
space. If the selection is too great or too little, adjust the Tolerance
percentage at the top of your screen and reselect the blank space. Once you
have selected all of your background, go to the Select drop menu and click
Inverse. Now your drawing should be selected, instead of the background.
Click once more to the Channels tab of your Layers window. Select the Alpha Channel,
and hit your delete key. Now the silhouette of your image should be seen. If
nothing happens, make sure that your background color is white at the bottom of
the tools palette and try deleting again. Ultimately in your Alpha Channel
layer, a white silhouette of your image should rest against a black background.
Take a look at the channels tab. Make sure that all channels are visible (they
have the little eye to the left of them) and that the alpha channel is
selected. Zoom in around the area where your character touches the
background. You should see the background in a shade of pink and the character
in its regular color. Using the pencil or paintbrush tool with a small size,
touch-up the alpha channel. The magic wand tool most likely did not do a perfect
job selecting the background, so you have to draw black onto areas where the
background is no pink and draw white on the areas where the character is pink.
Once you are satisfied with your alpha channel, you hide it by clicking the
little black eye next to it. Do not worry, even if the alpha channel is hidden,
saving a file with alpha information will use the alpha channel to determine
Save Your Results
First, save your file as a PSD. Make sure that parts of your character that you want to animate (for example, a leg) are held in a single layer.
Second, save your file as a TIFF and make sure that Layers is NOT checked and Alpha Channels IS checked.
Open Adobe Flash Professional. Create a new ActionScript 3.0 object. Go to File->Import->Import to Stage. Open the PSD file from the previous section. Select which layers you want to import. Now you can add keyframes to create a simple animation.
The timeline is at the bottom. Right now there is only one frame. Using your mouse, highlight the portions of the timeline you want to extend into (moving the mouse from right to left works best). With these frames highlighed, press F5 to extend the timeline.
Now, select a layer that you want to animate by clicking on its name in the timeline. First, go to Modify->Convert to Symbol. Symbols are objects that you can animate. Then, select the frames on the timeline for that symbol during which you want the animation to occur. Go to Insert->Motion Tween. Then, using the red timeline slider, go to a different frame. Using the mouse or the arrow keys keyboard, move the symbol (the layer) to where you want it to be in this frame. Flash should automatically create a keyframe for this new position. If you reset the timeline position to the beginning of the movie clip, and go to Control->Play you should see the symbol/layer move from where it started to its new position. You can add more keyframes in the same way to make more complicated motions.
Using these techniques, make a simple animation for your character.
When you are done, first make sure you have saved your file as a FLA file by going to File->Save or File->Save As. Once you have done this, go to File->Publish which should save your animation as a SWF file in the same location as your FLA file.
Turning it In
These tasks should be relatively straightforward. To turn in the assignment, create a ZIP file
containing the following:
This is the text file with the description of your character.
This is your character pose with coloring and alpha channel.
This is the animated version of your character.
Submit this zip file as "assignment2design.zip" to CMS. Students who are not enrolled in the class should email their submission to the instructor.