So I am in creation of my 2nd game, and decided to do a cool score board that will display an avatar, health, score, high score, primary weapons, secondary weapons, and coins.

This is not a very in depth tutorial. But I wanted to show how I personally create all of my sprites and graphics in 2D games. This is to show both experienced and inexperienced graphic artists some new tricks (maybe). I am using PSPX3.

0. Scale It Up & Plan
Don't just dive into drawing something. Use scales and rectangles to judge how large you would like your sprite or shape to be. My game will be 1280x720 full screen. I decided to have a pretty small scoreboard display. I also planned ahead and knew exactly what I wanted to display and how it should be displayed.

1. Match The Theme!
Match the theme of the board based off of your game. The main character of my game is a beaver. So I decided to sketch up a log with the end chewed off.

2. Trace Over Outlines with Vector Lines
Using a vector layer, use Vector Lines to draw the outlines you desire. I chose 2px wide black lines.


3. Start Base Colors
Create a new Raster Layer under the vector layer. This allows you to color in without overlapping the vector lines. Use any brush desired.


4. Add Texture
Since I am trying to recreate a log, I played around until I found this cool trick! Create another new layer and select the Fill tool. In the Materials Property menu, select the current color to be a darker brown. Select texture and select "Tin Foil" with properties: Angle: 90, Scale: 60. Fill over top the log.


5. Fine Tune The Texture
It's beginning to look like a log! But not good enough. Lets enhance the bark to make it more 3D! On the same layer as the texture fill, select Effects > 3D Effects > Drop Shadow. Follow the window.


And BAM!


6. Add Bevel!
Lets round off the log. I use Effects > 3D Effects > Inner Bevel ALOT! Why? Although it's called Inner Bevel, you can make any shape appear to have an Outer Bevel using it. So what I am going to do is create the illusion of an outer bevel the radius of the log so that the whole log looks 3D. Using the same layer that we used to fill the bark texture, use the Inner Bevel effect as shown. Note: Depending on the width & height of your shape, you may need to tweek this. I am using large width & smoothness as I want the entire log to appear round & 3D.

Take notice that I used a rectangle Selection on the edges of the log but past the end of it. I did this on purpose to prevent the end of the log to have a bevel.

7. Place Components
I am using PSPX3's guides to map out the outlines of where I want everything to display.


Using these guides I can then visually see where all my components will be:


7-1. Outline Components
Now that we know where the components will be, lets draw them ontop of our background. This will be a good time to SAVE as well as merging previous layers. I decided for most of my components (score, highscore, etc), I wanted the look that the wood was cut into. So, using my guides, I used Vector lines again to outline my design.



7-2. Color Components
Create a Raster layer behind our outline Vector layer. Does this sound familiar? Yes! Color behind the lines as you choose.


Now, again, you can follow step 4 to add texture on top using a new Raster Layer, the Fill tool, and whatever Texture you desire. I repeated step 4 but used "Wood Grain" as my texture.

8. Bevel Your Components
Once again I used my Texture Layer to create the 3D look from step 6.


The following images I do not explain, but you should know what I am doing.
Starting Avatar & Health frame/background using guides:




Actual scale, used texture, shadowing, inner bevel (sound familiar?)


Showing how everything comes together greatly using guides:


Result so far with custom font scores:


Hope you enjoyed and learned (a little) something! n_n
-isometrixk

Thank you, owl! I'm hoping a lot of new artists can learn from this!

Really cool stuff!
There's only one thing I can't get my head around yet:
You use a white background and the outlines of the log are anti-aliased with the white background. If you change the background color then you have a really bad outline, if you know what I mean.
How do you get around that? Is there a way to make it anti-aliased with whatever background there is?

Thanks josh1billion!

Quote:Original post by samson77
How do you get around that? Is there a way to make it anti-aliased with whatever background there is?

Thank you, samson77! Good question, I have a background layer that is all white. This background layer I never draw on, I just use it so I can see better. When it comes down to exporting the image unto my game, I will remove the white background so that everything becomes transparent. I save images as .PNG (Portable Network Graphics). These files contain alpha values for pixels.

When I use my .png images in games, Java also retains there alpha values, thus displaying images untop of other images blend well n_n.

Here we see my image and my layers. The bottom-most layer is circled, notice that it is just white.


This is the result of deleting my background layer. All white becomes transparent.


And here is a little demonstration to show the alpha still works. I placed a complicated pattern to replace the background. The alpha blends perfectly, still, just as it would in the game.



Here is a real example. The top-left image is my actual Quit button. It is quit1.png. Notice the soft shadow pixels below and everything around is transparent. The bottom right image is a closeup of a screen capture I did while playing my game (drawn by Java). The alpha still blends with its background.


Cheers! n_n
-isometrixk

[Edited by - isometrixk on December 12, 2010 9:14:07 PM]