View Full Version : Making Living Avatar Items with Fireworks!

04 Jun 2009, 04:32
1. Introduction

The Purpose

The purpose of this tutorial is to teach new people on how to use graphic editing programs to make mini-people clothing and other objects. This tutorial was made because I have gotten many request to teach people on how to make such things. So lets begin.

The Requirements

First off you will need a graphic editor program such as Adobe Fireworks or some of the other programs list in the Useful Links section. Some of these programs may not work depending on your Operating System (e.g. Windows XP, Mac OS) so please make sure you check the manufactures website before downloading and installing to avoid issues in the future. Also what I am about to teach you is by using Adobe Fireworks but it should be remotely close no matter what program you use.

2. Dimensions Information

Dimensions for Backgrounds

If you plan on making a Mini-People Background, then you should use these Dimensions:
250 by 250 Pixels
Transparent BackgroundDimensions for Shirts/Pants/Shoes/ETC.

If you plan on making anything else you can use any dimension but it must be under 250 by 250 pixels. If it is over these dimensions it will not work. Like above, this also requires you to have a transparent background. For a plain White shirt and other stuff that would be useful, go to the HawaiiTalks.com link in the Useful Links Section. There you will be able to find blank t-shirts that will help you get started.

QUICK TIP: Any object you make for the mini-people will ALWAYS have a transparent background.

3. Setting up the canvas

How to setup canvas

Ok once you run the editing program you should see a option that says “New”. If not you may have to go to File->New. Then you should get a box that says Canvas Dimensions. Set the dimensions accordingly with what you will be making. Right underneath that you should see another option that says Canvas Background. Make sure you have Transparent checked. Click OK. You are all set to go! :)

4. Importing Images

How to import images

Ok this is where it starts to get a little bumpy. First thing you need to do is to find or scan a image you have drawn (I suggest Google :)). Then save the picture you want to import somewhere you can find it on the computer.

QUICK TIP: To save images from websites/search engines, right click the picture and click Save Picture As…

DO NOT EVER COPY AND PASTE AN IMAGE! This cause it to get pixelated and look very bad. Anyway, once you have it saved somewhere on the computer go to your editing program and click import and find your image (or if your really good change the program type that the computer will open it with to the editor so you can just double click). Once imported you may noticed the whole image may not fit onto the canvas don't worry this is normal and at this point you would need to go to the Crop Tool Section. This concludes this section.

How to modify images

I threw this section in to talk about copyright notices. You just cant simple copy and paste a copyrighted image because if the original owner finds out you could be going to jail. :( So to avoid this, simply edit the image (resizing it does not count). And by editing I mean changing the color of the image maybe using the blur tool (not covered in this tutorial contact me if you want to learn) or the cool textures. All you need is something to make it look no where near the original.

How to remove anything unnecessary

Let's say you want to remove the background of a image you imported. Well you may have some luck with the magic wand tool or the eraser (if I have to write a tutorial about a eraser then please click the X in the top-right corner). Both of these tools would be useful for deleting unnecessary stuff.

QUICK TIP: The lasso tool can also be useful but is time consuming and too hard to explain in this tutorial. Contact me if you wish to learn more.

Also make sure you have the image you want to modify selected in the layers section to avoid modifying images you did not want to.

Change the brightness/contrast

In this section I will be teaching you how to make an image brighter or darker (very easy). First thing select the layer you would wish to make brighter or darker. Then in the bottom panel you will see a + button above a white box and beside “Filters:”. Then once you click it, you will see a big list of stuff appear. Click Adjust Color. Then adjust it until you like your image. Also you can mess around with the other stuff in that section but the best way to learn it is to mess around with them.

QUICK TIP: Also if you mess up you can undo your last action by pressing Ctrl + Z or go to Edit->Undo.

Adding a bevel and other cool tricks

This is my favorite part of the program. The bevel. You can choose the inner bevel or the outer bevel. A bevel makes a image look more 3D or flat. To do this select your image and look in the Change the Brightness/Contrast section. You do it the sae way except you click Bevel and Emboss instead. You can adjust how much bevel you want by adjusting the height or other options of it.

5. Using Important Tools

Crop Tool

To use the crop tool to rotate or resize images, select the image to crop then in the left console click the crop tool.

QUICK TIP: To tell which tool is which simply hold you mouse over one of the icons.

Then after you click that you should see a black box come up around your image. Click and hold one the corners (which corner depends on if you are resizing it making it bigger). Then drag to make it smaller or bigger. Once done go to Select->Deselect.

Magic Wand Tool

To use the magic Wand tool select an image you are wanting to modify. Then select what you want to remove. The magic want tool will select whatever is close to the same color. If it chooses too much of an image then go down to the bottom console and adjust Tolerance until you get what you want.

QUICK TIP: The magic Wand tool can also be used to adjust color in one certain spot or to make changes to one area.


Layers are different parts of a canvas. You should see several different images if you have imported more than one. If you want one layer to be underneath another layer simply drag it below the layer you want it to be under. If you have many images/layers you can rename the layers by double clicking the layer then renaming it. When you are done just click Enter. If you want to prevent a layer from being modified then click the blank block beside the layer and you should see a lock come up. If you want to hide a layer, click the eyeball. And lastly if you want to remove a layer click Delete.

Color Swatches

Color Swatched are used to select a certain color or to select an exact color. To do this on the left console click either the paint bucket or the paint brush and you should see a box beside it click it and choose a color or if you want to copy a color already on the canvas then just click on the color that's on the canvas and the watch will automatically change to that color.

Select/Deselect Options

The reason why this is here is because sometimes once you use a tool it will not deselect automatically once you click somewhere else. So to get it to deselect go to Select->Deselect.

6. Saving your Canvas

Saving as .GIF

It is required for you to save your canvas as a .GIF and a .PNG (Fireworks Format File) for mini-people objects so to do this simply click "Save As…" and where it says "Save As Type", click the arrow and find .GIF.

Saving as .PNG

See Saving as .GIF but choose .PNG instead.

7. Usefull Links

HawaiiTalks.com (http://www.hawaiitalks.net/showthread.php?t=30472)
Photoscape 3.2 (http://www.photoscape.org/ps/main/download.php)
Picasa (http://picasa.google.com/)
GIMP for Windows (http://www.gimp.org/windows/)
Paint.net (http://www.getpaint.net/index.html)
Pixia (http://www.ne.jp/asahi/mighty/knight/download.htm)
Macromedia Fireworks (http://www.adobe.com/products/fireworks/)

Tutorial Written for Christfirstforums.com (http://www.christfirstforums.com/)

11 Jun 2009, 13:32
nice tutorial :)

11 Jun 2009, 17:06
nice tutorial :)

lol thanks redeemedwarrior