The basic approach is to start out with garment covering only small parts of an avatar's body. From there we will derive other garment by shifting hemlines and elongating contour lines, possibly straigthening out "too round" contours to make a particular garment appear thicker.

The selection of the garment mentioned in the title may seem completely arbitrary, but it's not: they have in common, that they do not overlap each other. For this reason we can design them simultaneously. However, remember to save them as individual components, in the end.

Note The avatar's arms would hide some parts of the clothes, which is why we initially omit them in our frames.

Because the http://en.wikipedia.org/wiki/Tube_top tubetop is sleeveless, it affects only parts of the trunk and such it does not change in appearance between the frames. This makes the design of the tubetop quite trivial: the same design can be used in all frames. However, the trunk moves vertically between the frames, which means, that we need to pay attention to get the vertical offset right.

The http://en.wikipedia.org/wiki/Miniskirt miniskirt covers parts of the legs and thus we are not as lucky here as well: it must be designed individually for all frames. Note, that Pixie makes rather large strides, i.e. 67.2 cm. For this reason it is best to start out with the frames in which the legs are separated from each other the most (frames 6 and 14): the skirt must be able to extend to the given distances. Assuming that our skirt is not kept in place by elasticity, the same circumference must be maintained throughout all frames. From this follows, that it would be wrong to design the miniskirt all too tight when the legs are close together. Hence the skirt will fall straight down and not directly follow the legs' contours. Of course, the shorter the miniskirt is made, the less circumference is needed and the tighter it can be designed.

Shoes must be designed on a frame by frame basis as well. However, once we have decided about their height, it's just a matter of maintaining that height throughout all frames. Other than that they should follow the outline of the feet (recall that a deviation of 1 pixel along an edge and all its parallels translates to 2.8 cm, which would be too large a gap to be justified for shoes).

The most important property of a shirt is its length, because it does define the drawing order: if it's longer than the upper waist line of skirts and trousers, shirts must be designed with priority, and furthermore they need to follow the body's contour lines from the waist line downwards. If it is to be worn below other short leg-covering garment, like miniskirt or shorts, it in no case should be designed to be longer than the hemline of such other garment. If it is to be worn above leg-covering garment (skirts, shorts, trousers), then it may have a longer length, and also a wider width. In that case it must be designed later than that other garment. Note however, that when playing with the width, you need to supply at least that width as well for jackets and coats. If we want both options, we either need to follow the body's contour lines, or we need to design two different kind of garment.

Another important property is, if the shirt has to have sleeves. If not, only the trunk is affected (depending on its length possibly also the legs): in most cases (if not too long) we can get away with one image for all frames. But if it has sleeves, then the arms are affected as well, requiring the design of 2 × 16 additional frames.

In our case, we keep it simple: a shirt is sleeveless (i.e. it has holes for the arms), and its lower borderline is identical with the upper borderline of leg-covering garment.

http://en.wikipedia.org/wiki/Shorts Shorts are easier to design than a miniskirt: they follow the contour lines of the legs. We just need to pay attention, that the height is maintained throughout all frames.

Prior to designing boots we need to answer a similar question as with the shirt: are trousers worn above boots, or boots above trousers? If the answer to this is clear in your context, then there is the freedom to make the appropriate garment wider. If both shall be possible with the same design, you must follow the avatar's contour lines. Other than that, we again just need to pay attention to keep the upper line of the boots the same within all the frames.

Since we already have the upper waist line (it is the same as with a miniskirt), the only thing left to do is to define the desired hemline for the longer skirts. Remember, that the circumference must allow for the large stride, with the consequence that there is some falling cloth when the feet are close together, causing a more elliptical bottom shape rather than the otherwise more straight hemlines.

Shown here is a http://www.reference.com/browse/all/maxiskirt maxiskirt . To design a http://www.reference.com/browse/all/midiskirt midiskirt with a length between a miniskirt and a maxiskirt, just define the hemline somewhat higher, e.g. approx. at the middle of the calves.

Now that we have all necessary border lines, we can play around and combine different garment to form new pieces. For example is it just a matter of omitting the waist line to obtain gowns etc. in any already defined length.

For the upper part we even have the choice between using the shirt to obtain a classical dress covering the shoulders, and using a tubetop (connecting the two garments appropriately) to obtain a shoulder-free garment.

Note, however, that such a combined garment does include two body parts (the trunk and the legs). If it is the case, that these two parts most of the time act as a single unit (as in walking, standing), it is advisable to draw the garment as a single graphic only (as done here). Of course, you may choose to design an individual component for the upper and lower part each, if that is more convenient for you.

Since the terms gown, dress and robe are somewhat ambiguous, at least with respect to their length, we define for our purposes: a gown shall have the same hemline as a miniskirt, a dress' hemline then corresponds to a midiskirt and a robe's to the one of a maxiskirt.

As before, also for trousers we need to answer the question, if they are to be worn above or below boots and (which) upper garment. Maybe you decide to allow both, depending on circumstances: in this case you either need to follow the avatar's contour lines (as shown in the following animations), or you need to design two different frame sets.

So far the avatar's clothes did not involve the arms. There is a reason why we spared the design for this type of garment until now: it is an absolute requirement, that the parts covering the arms are drawn as separate components, because they are in different layers.

This fact is important. For example, if you plan to have your avatar carry any type of gear, the chance is high that parts of either arm (or both) will be partially or completely obscured by a such. If you do not want to take that into consideration for each frame when designing such gear, the order of layers must be painstakingly observed.

The actual design of a sweater, jacket or coat is not too difficult: the hemline must me defined, e.g. for a sweater below the waistline, i.e. a few below the shirt's hemline, even a bit lower for the jacket (but above the hemline for short gowns so that the latter still can be seen partially), and for a coat the hemline of the long dress may be used (unless you want the robe to be partially visible as well).

Furthermore keep in mind, that both jackets and coats usually are made from heavier materials, and thus they won't follow body outlines too well, i.e. we can straighten too round curves (which leads to the desired consequence, that the garment appears to be thicker). To a certain extent, this applies to sweaters as well (woven fabric has little elasticity).

It is convenient to design all frames for the parts covering the trunk and legs first, then work on a copy of these frames and add the two arms (which need to be saved separately!). It should be avoided to design the whole garment in one frames set with the goal of a later separation in mind: such would cause the torso part to be incomplete and would require later correction (at latest when the avatar is actually doing something with its arm closer to the observer).

The design of the body part of the actual sweater shown here is based on the shirt, its hem line being lowered by 1 to 2 pixels and some "added thickness" by straightening out some curves. The new hem line is not low enough to interfere with the different outlines of the legs: the same design can be re-used in all frames without any modification. Note, that we do the design with future arms in mind: no need to leave a hole for the arms in the garment's main part.

Similarly, the jacket is based on the sweater, because it shall be possible to wear a jacket over a sweater. The hem line was lowered once again, but not enough to cause different frames. Parts of the arms were made thicker.

Shown in the following animated GIFs are the actual compositions with all three parts.

To design a coat you basically extend the jacket down to the desired length. Note, that the materials used for coats usually dictate a quite stiff design: a coat's hemline won't be distorted much when walking.

Hair must be designed as one of the last components, because it can affect many previously designed components, including clothes. For example does not too short hair fall over the avatar's shoulders, covering whatever garment exists there.

Long hair may interact with the front arm in an undesirable way: because the front arm will cover some of the long hair, it must be designed later. However, then there is the problem, that the arm's shoulder will cover hair which was designed to be over the shoulder. Should your design include very long hair, it would be best to use 2 components for the hair: one part not covering the shoulder at all, and an "extension part" in the desired length. Then the proper overlay order (i.e. extension part first, which may be covered by the arm, then the arm including the shoulder, the shoulder possibly being covered by the hair, and ultimately the main hair) will do the job.

It is best to design hair without an outline, just with the intended color. An outline would would make the boundaries too hard and easily give the impression, that the avatar wears a helmet.

If the hair is not very short, it may be worth to vary the individual frames just a bit, in order to give the hair a somewhat dynamic look when the avatar is walking. However, if you do, be very moderate: just a pixel here and there will do ‒ walking at a speed of 5 km/h does not imply a strong wind yet.

Above images are free to use without any restriction, provided that appropriate credits are given.