• English
  • Français (French)

II.Pixel-art basics


1.Introduction

This tutorial is made for pak128, for other paksets you have to adjust size !

Pixel-art literally means that art is made thanks to pixels … such a bit global word since 3D and other things are also made with pixels … Actually pixel-art is used for pictures made with drawing/picture editing softwares (as MSpaint, photofiltre, paint.net, photoshop, the gimp, and so on and so on …). Unlike some people's thoughts, we aren't going to paint pixel by pixel … (fortunately !), only when there are very small parts of the pictures to make. Hopefully mankind advanced its technology and thanks to homo-sapiens-computerus, many usefull tools as photofiltre - which we'll use - which can make lines, gradients, and many cool stuff.

If you missed a step so you don't know photofiltre, go there.

So pixel-art needs some patience and time to spend, of course, the result's quality depends on the time spent to work on. But as it's said : when you love it does not ! Plus : with pixel-art we can easily as good results as in 3D, when you know the way to do good things. Seeing many 3D creations which are really not nice, I can say that in pixel-art we can easily to better than 3D.

Stop saying craps, let's starting the tutorial. Each part of this tutorial has exercices which are important to do, links to the photofiltre introduction's page each time it's necessary.

A last thing to know : for Simutrans graphics are in isometric viewpoint, so we'll have three perpandicular axes : length, width, height which are in Simutrans North-South, East-West, height. Let's see that :

Simutrans'directions are important to know :

2.Lines

In pixel-art, pictures are almost made side by side, but to exist, a side needs edges limited by lines. Let's see this :

Look this source picture (it's a simple station extension).

Two axes are easily noticed : North-South axis with top left and bottom right edges and East-West axis on the other sides. These lines are completely visible, but you know that your screen is made of pixels, so to draw diagonal lines we have to cheat with pixels … see :

We can see by zooming in that edges are crenel shaped. We can also see that there's two pixels width for one pixel height, and it composes the line. Maths'addicts say that there are lines what their equation are y=0.5x and y=-0.5x.

On the screen the angle between the two lines is … hmmm doesn't matter, keep in mind that it represends a right angle virtually.

So this is what you have to see :

Two pixels width and one height, it's a base of Simutrans'graphics, you have to know it and it must be the first thing that comes to your mind when you draw. You draw in a rhombus with a great diagonal of 128 pixels (or other according to the paksets) and you have to see with this angle.

Let's begin with a simple exercise. In photofiltre, draw lines of 48*24 pixels in both directions (from top to bottom and from bottom to top) with width of 1 witheout antialiasing.

Lines in photofiltre

This is the result that you must have :

Lines'drawing is important, it's the structure of what you build. However you can see in the exercise above that there's a pixel in excess at the bottom right of the first line and the top right of the second line. It's a photofiltre's problem, this pixel shoudn't be here … you can remove it. Even you know how to draw lines with the line tool, this tool isn't practical to use on small parts, you have to know how to draw lines pixel by pixel to gain some time (one pixel above, two pixels on the right, one pixel above, two pixels on the right, …).

To learn the way to draw lines, draw these lines by the same way. Of course zoom in to gain precision …

  1. 64*32
  2. -16*8
  3. 30*10
  4. 50*10
  5. -3*9
  6. -9*3
  7. 44*11
  8. -58*29

To make this knowledge of lines perfect, let's see how it is on the corners of a tile.

A “tile” is a square in games based on squares. It's the case of Simutrans which the word “tile” is often used about.

Notice here the combination of the both lines. On the left, to make bottom and top corners, lines are put beside each other, so we have a four pixels corner composed of the extremities of each line. On the right these extremities are merged as you can see with twice colored pixels. Practice by reproducing the corners with the paintbrush tool and the max zooming in.

The paintbrush tool in Photofiltre

To end lines : a small exercise :

Reproduce the picture below with the line tool and/or the paintbrush tool. First draw the base tile, then the red lines. Finish with the other lines. Don't hesit to use colors.

Colors in Photofiltre

When you draw horizontal or vertical lines, the number of pixels displayed in coordinates is wrong, the final result will have one pixel more than displayed. So if you draw a vertical line with H=10, the real line will be 11 pixels height. The coordinates displayed inthe exercise are the real coordinates.

3.Sides

Of course we can't see lines of objects in Simutrans, they're virtual. However we can guess them watching sides of objects, indeed lines determine sides that compose the object. This is what I mean :

Here we can't see lines on the right graphic. In fact, even it's possible, lines of an object are never drawn before sides, sides are directly drawn. Maybe it looks a bit difficult for a beginner bu finally it's much simpler. Let's start with a simple cube … We are going to make a 64 pixels sided cube. We have three sides to draw, the top side will be exactrly like a simple tile : a 64 pixels sided square which appears like a rhombus on the screen. Draw it (in light grey or with a color, as you wish).

To draw fastly such symmetrical objects : draw a 64*32 px line, reproduce it (copy and paste) and invert it symmetrically, place it in front of the first one (they must touch each other). Copy-paste all, invert it symmetrically, paste it beside the first part. You have a rhombus that you just have to fill.

Then the South side is drawn, in a lighter grey or in another color by this way : draw two vertical lines of 32 pixels at each extremity and draw at their bottom a 64*32 px line. See :

Don't hesit to copy this picture and zoom in to si details if you need.

Finally we have to fill this shape, make the other side repeating this or copying, pasting, horizontal symmetry, place the selection to have the Eastern side and unselect. In this case you have to sides same colored, make the selection appear with show selection icon, fill the light grey side with dark grey.

Selections in Photofiltre

This is the result : a cube !

So cubes are nice and very simple but it's not all the pixel-art, how to create more complicated shapes ? For polyhedrons (with flat sides) we are going to see it, for cylinders, spheres, and other such rounded things we'll see it later because it's necessary to learn other things.

Think you have to make a section of the cube as defined by the red lines :

To make sections, if you have well defined it (copy the picture and zoom in to see the details), it's very simple. Draw along red lines, other lines which are colored with the color of the future side. Here a lighter grey is used. Draw lines along the section (if you drew red lines before you can use “replace color”).

Replace color in Photofiltre

This is the result, then as indicated on the picture, remove pieces in excess and fill the other ones :

Of course process described here aren't the only possible ones, you can draw sides one by one witheout making a section (it's even recommanded …)

I think you understood however let's see how to draw sides one by one.

For top faces it's already explained above. For a lateral vertical side, you just have to draw an horizontal line (horizontal according to space, not on the screen) and extend its extremities with vertical lines, close the shape and fill it. See some schemas :

Here I used a usual direction fot the base line but you can use any direction, as long as lateral side are vertical you'll have a vertical side. Of course we can maje non rectangular sides, see here :

Non rectangular sides can be intuitive when you are used to them but you can be helped by a structure, like here in grey, which you remove at the end of course. Thanks to this structure, you can create some strange shaped sides …

Reproduce this sides (remove the grey structures at the end to be perfect).

Don't worry, such shapes aren't usually directly made, they're mostly created by the intersection or the merging of simpler shapes …

It's the same way for inclined sides : you can make them intuitively like the pixel-art master with his eagle eye and his perfect spatialization or you can make a tridimensional grey structure which is removed at the end like a newbie reading a tutorial :

So, with this we can make everything except rounded sides, we can make the shape we want ! Then, you're going to make the shape I want !

Here is a bit different way, we build sides starting with the first one. It's the usual way. Let's make a small house (which we'll continue with the other parts of this tutorial). Follow the steps … (place the first side exactly at the same step as me). Be carefull to have the same thing as me along this exercise.

1) Draw the first side with the defined dimensions (use the same color, it's important).

2) Draw the red lines thanks to the red dots. Keep only their part between the base and their intersection. The rest is removed. It's the beginning of the roof.

3) Create a extension on the first side. Notice the exact shape of the corners !

4) Create a second extension on the first one. Be careful again with the corners'structure. Then draw a line between the two red dots.

5) Then, begine the roof. Define with a red line the limit of the roof. I zoomed in structures of the corners which get a bit complicated …

6) You see that the first line of the roof is 46*23 px, reproduce it on the two other corners.

7) Link with the other side …

8) The lines aren't really of the right color, recolor them with the color of the side they will be part of. Try and check with this picture …

9) End by filling ! this is ou future first building, keep it we are going to use it later …

4.Shading

In 3D, shading is calculating the light level, exactly or approximately, of each point of the object. In order to do this, one has to take into account the orientation of the surface which the point belongs to regarding each light source present (in Simutrans there's always at least the Sun).

Shading is necessary for human eyes to understand what they see, in reality as well as in games. Therefore it is an essential step in 3D rendering as well as in pixel-art drawing.

For a deeper understanding of shading and the techniques used (in pixel-art, 3D techniques are mimicked), you can read this page.

As you saw in some shapes above, sides are defined mostly by their shading. Indeed, as in reality, Simutrans has a Sun, which is stationary. It shines on the South and its rays come to the ground with a 60° angle as shown on this picture :

We can define the shading by maths but don't worry, I'm not going to do this for this time.

Before seeing complicated things, see how it just works. On these screenshots of the game, you can easily see that the most lighted sides are Southern ones :

Notice that, since the angle between the Sun's rays and the ground is 60°, the top sides of objects will be more lighted than lateral Southern sides.

Usually it's rare that top sides of an object are the same as the Southern side so this specifity has to be taken care of.

Here is a cube to explain this :

The top side is the most lighted, then the Southern side is well lighted and the Eastern one is the less lighted.

To be sure to understand shading, light this truncated cube with the greys below (two of the sides will have the same shade).

This is the solution, of course the pink and the yellow sides are same lighted since they're symmetricaly placed on each side of the North-South axis. Except some ambiguities, here is the result you must have :

Let's invent other shapes to light to practice.

Color in Photofiltre

currently, knowing that the Sun lights with an angle of 60° with the ground, we could do some trigonometry but we aren't going to do such an horror.

5.Textures

With buildings, when sides are too big, a simple color can give a void impression … So textures are used.

5.1.Angle of the texture

Of course we have to adjust the orientation of the texture we have. There are two ways to do it.

Firstly choose a texture to apply to the side. Copy this picture in photofiltre :

As you can see, the sides we have to texture aren't orientated in the same direction as the texture. We have to adjust it. Copy it in the same picture and go in free transformation. Incline vertical axis by -50%.

We should get this.

We are going to see the second way. Cut the original (keep it in the clipboard or somewhere else). This texture was 86*63 pixels. Draw a parallelogram 63 pixels height and which bases are 86*43 px. This is the result :

Paste the original texture, its right side must be on the right side of the parallelogram. Then right click\distort, place the left corners on the parallelogram's ones. This is the result :

This way is less precise but can be practical in difficult cases.

Here textures aren't placed normaly according to the sides we are coing to texture. It's a mistake, do a vertical symmetry on the textures.

5.2.Applying the texture.

5.2.1.Method with grey surfaces

This methode separates texture and shading but it slightly alters colors.

Now let's prepare the shape we are going to texture. Make an horizontal selection around and color the background of the selection with a showy color (red for example).

The following process consists in applying the lighting the the sides to the texture. If they're just pasted on with transparency, the texture is going to lose colors. So we are going to make its colors brighter. Select it, filter\color\colored layer and do a inverted layer with 127/127/127 grey with 50% transparency. So the color we are going to remove with our sides'grey is added.

This process can be done only with grey surfaces !

See the result :

Now copy and paste the sides on the texture with a 50% transprency, check that grey sides are well placed on the texture's sides. This is the result :

Now we have to remove the borders which are useless. Paste the same selection with no transparency and the grey transparent. Place it at the right place. Then clean the result by removing the red and the texture's pieces in excess : so these are bricks walls :

The tolerance is often not sufficiant to make all greys transprent or it makes transparend a color which is not supposed to be. To fiw this problem, change your different greys into a simple showy color before the second paste, then make this color transparend when pasting.

5.2.2.General method

This one requires more work on textures but respects more its colors. Its main asset is that it goes perfectly with anti-aliasing process described later in the tutorial.

Now, surfaces are colored with bright colors which can be easily recognized. See below:

All the surfaces having one color will get the same texture with the same angle (and therefore the same shading).

The process consists in working a texture for each surface having the same texture and angle. In this case there are only two surfaces with two orientations so it is simple.

Firstable, both textures has to be shaded according to the surface it will apply to. This can be done by defining a selection around each one and using increase/decrease light level tool.

In order to apply the texture, one can copy the object to texture and paste it on each texture changing the transparent color accordingly at each pasting (here, the object would be copied and pasted on the left texture with blue as transparent color, then the result would be copied and pasted on the right texture with red as transparent color), this process is efficient to texture big and complex objects in a short time, anti-aliasing included, working on several images (an example is given at the end of the tutorial).

In cas of simple objects like this one, one can select every surface with the magical wand tool (adjust tolerance to 0 and selection smoothing to none); place the resulting selection shape (no copy, no paste, just select) on the appropriate texture, copy the selected piece of texture and paste it on the object. Here is the result:

6.Anti-aliasing

We are going to see something very important to make your graphics much nicer. See the result : on the left is the picture before and on the right is the picture after, free to you to conclude …

borders are made softer and more real. How does it work : when you draw a diagonal line, as seen at the begining of this tutorial, there are crenels, the problem is that we can see these crenels on the final result … and it'd definitly ugly ! We have to make them disappear by making the lines softer. Anti-aliasing process can be seen on pak128 graphics, graphics which haven't such one are usually not included in the pakset.

You can see on the picture above that the borders between the object and the background aren't antialiased, indeed here it's not important but when drawing a source picture for Simutrans, the background is a transparency color, if a color is different it will be displayed in the game. If borders of an object are antialiased, a blue surrounding will appear in the game, and it's not very aesthetic…

Let's start serious things ! We are going to start by simple things to explain the several ways of antialiasing.

The most simple : antialiasing is made only on one side of the line :

This is the result we will have. Notice the pixels'structure … on the left is the base structure. On the right I highlighted pixels which are going to be antialiased.

You can see that antialiased pixels are ones which are in the crenels. But how to antialias them ? How to make the line “softer” ? Simple : there's a crenel effect because the color difference is big, the limit is brutal, and it can be seen easily since pixels are squares. We have to reduce the contrast between the two colors. The pixels inside the crenel are going to me mixed. In this case it will be 50% of each color, and this is the result :

How to do that ? Here is a color mix, the most practical way to do it is by zooming in to the max and use the line tool on only one pixel with one of the two colors and 50% transparency on the other color.

If there is a long line, you can do it faster by drawing a line with 50% transprency between the two color. The first color won't be changed since it's used as color to draw the line.

Notice that the line tool has a parameter “antialias”, it can be used in a few situations because the antialiasing of lines isn't very good for this use.

Now see a second way : a bit more complicated. Taking the same example, this is the result with the second way :

If you look at it well, you see that the border is softer than above. This time pixels are modified on each side of the line :

But this time we don't use 50% opacity using the line tool, because we would have a central line with every pixel of the same color whereas the purpose is doing something like a gradient between the highlighted pixels. So on the pixels of the color 1 we are going to mix 33% of the color 2 and on the color 2 33% of the color 1. See :

Each way has its caracteristics, the first one makes the first color a bit more important than the second since it overtakes the limit. It can be used on small graphics. Plus it lets the limit very precise being nice to see. The second way doesn't change the importance of the two colors and gives a softer aspect to the limit, sometimes a blur aspect.

Now you know everything, antialias yourself the left part of the picture. Then check your result with the right part.Lines in Photofiltre

Antialias this buidling too :

There's a problem : all lines aren't 1*2 or 1*1 pixels, how to antialias other lines ??

There are two possible ways to do. You can do the same as the other lines : play with the transparency :

Or use the line tool with antialiasing on on small parts of the line :

Here the red pixels'color is used : dark grey. Then reproduce all. You can draw all the line in one time but be careful with the Photofiltre's line tool …

Result :

Nicer, isn't it ? The antialiasing is really important for graphics, you MUST do it.

Some people try to use the smoothening tool of Photofiltre, or other softwares, this tool has nothing to do with antialiasing, it destroys your work, making it unusable for Simutrans (because of the border between the object and the background), all it does is mixing pixels without any good result.

7.Special colors

There are in Simutrans special colors to do a lot of useful things but they can be a pain too. Here they are :

Okay it's not very easy like this … let's explain it :

You can see that for each color you have an hex code, useful to use it in Photofiltre witheout loading a picture containing these colors.

  • The six first colors are the non darkening greys, these greys aren't darkened by night.
  • Then there are “lights”, available in light blue, yellow, red, green, purple and blue. These colors aren't darken by night, as the non darkening greys. They are used to make permanent lights like trains'lights or signal's lights.
  • With lights are also “windows”, as their name tell it, they are used to make windows. These colors are dark in the day (their light can be used according to the orientation of the window) and lighted by night. For the day lightest windows are used on Southern sides and darker ones are used on Eastern sides but by night they will be the same color. However be careful, one of them isn't lighted as the others. These colors are used to make train's windows and other vehicles but also for buildings or for the as station's lights, etc …
  • The player colors will change in the game according to the color of the player. There are two colors for each lighting, the first player color will have the first color you choose in the game and the second one will have the second color you choose. The shading range of these colors is useful but features too few shades.
  • Finaly : the background transparency color, it's the color of the background of all pictures for Simutrans, you have to fill your background with before drawing ! This color won't appear in the game so your picture is the only one which will appear (which is better … a train made out of white squares isn't very nice).

This is a more compact picture for special colors :

There is not exactly two packages of colors, the second one is explained below. The first one contains on the first line the player color 1, on the second line the player color 2. The other lines are divided into three rectangles. The first one is for lights, then the second one is for windows (the windows which isn't lighted with the same color as others is pointed with a red dot) and the third one is for non darkening greys and the background color (at the bottom left of the rectangle).

But sometimes drawing some special colors which aren't supposed to appear do so, to remove them you just have to change them by one RGB unit, the second package of colors are wrong special colors to replaced these bothering special colors. Use the replace color tool to replace them.

Let's end this part with some examples of special colors use on this piece of z22500 source picture (outdated version of it).

8.Cylinders and rounded shapes

To make a rounded aspect, gradient is used. A gradient between the lightest and darkest color is done, if the picture is going to be textured, the gradient is made of grey.

Vertical cylinder

Easy to do thanks to gradients, it's also an example … This is the cylinder that we want to light :

The blue part has to be lighted, knowing that the Sun shines on the South. Colors are going to be constraster so we can apply a texture then. We have to mark the extremities'colors and the lightest color :Then the distance between each line is measured with line counted and the gradient is made on another picture between these colors :For the end, the blue cylinder is pasted on these gradients with blue as transparency color :

Pour faire un dique parallèle au sol en perspective pour Simutrans, on trace une ellipse dont la largeur est deux fois plus grande que la hauteur. Toute forme qui sera représentée parallèle au sol sera la même forme mais dont la hauteur est divisée par deux

To draw a circle parallel to the ground in Simutrans, draw an ellipse which the width is two times bigger than the height. Avery shape drawn parallel to the ground is the same shape but half heighted.

Other cylinder-like rounded shapes

The other rounded shapes are based on the same way but we can't make a gradient directly to draw them. The easiest way to do them is to draw the different lightings with showy colors, then a gradient is made between the darkest and the lightest color and the showy colors are replaced by the gradient's colors.

In order to get more precision and quality, especially on small graphics, one can create as many shades as pixels having the same angle. Then the process is the same. To gain time, the gradient can be drawn on a small piece of rounded surface by placing colors manually with the brush tool. It's much quicker then using the color replacing tool. For instance, here is the basic piece of Z50000's side:

The pictures below can be used to facilitate this operation, all pixels having the same angle/shading have the same color:


Complex rounded shapes

With non-cylinder-like rounded surfaces, the gradient is difficult to draw in pixel-art, so it is necessary to do some approximations. The process is barely the same: separate the rounded surface in colored pixels and replace these with shades of the final color. However, it will depend on the approximations you decide and on the shape of the object. Here is, for instance, Z50000's front:

In this case, pixels to color were separated according to their height. Then, two different colors were applied at each height: one color, brighter, for South-oriented pixels and one other color, darker, for East-oriented pixels. The final step on this picture got a grey line between the reddish gradient and the white surface and everything got anti-aliasing.

9.Glass and mirror effect

The goal is to give a realistic mirror effect on sides as a skysraper's side (of course this can be done with other materials and other objects …).

This is the awful thing that we are going to make a bit nicer :The effect will be done on the blue part of course. This is the sky that we are going to use :As texturing different parts of an object, we are going to make a second building from the first one replacing the glass side by a red side. We can do it with selections in Photofiltre :

To apply this piece of sky to the building, we use transpareny, between 30 and 70% according the effect you want, here we will use 50% transparency to paste the first picture on the sky. Here is the result :Of course we want to keep only the glass side of the building, the second picture is pasted on this one with red transparent :

When there are antialiasing on sides, the best thing to do is to repeat this process one time for the glass side and a second time only with antialiasing's pixels between the glass side and the rest of the buidling with a 25% transparency. Fortunately on small surfaces this is not a big problem.

We could also apply this effect only on the blue part of the glass side, we had to make a red picture using the replace tool of Photofiltre, or pasting directly with blue transparent.

10.Realistic reflection

The goal here is to make objects more realistic by making extremely lighted the surfaces verticaly lighted by the Sun. Don't hesit to use white for these surfaces but it's mostly only some pixels. See some examples :

rvg_tigress : We can see the light line on the orange stripe in front of the Sun.

SNCF_z6300 :Here this effect turned extreme since the z6300, known as “petit gris” (little grey), is metallic. The realistic reflection can give visual information of the object's material. See other examples to end :

11.Complete exercise

To sum up the most important technics seen in this tutorial, we are going to make this building :It's not very nice but it allows us to sum up a lot of technics. Be careful I won't explain step by step since each one has been seen above !

Let's begin by building each part of the building, don't hesit in this exercise to copy a picture and zoom in it to see what I do.

This is the base construction. Then we have to antialias this. Make antialiasings on two pixels for grey-grey lines and grey-tile blue, and antialiasings on one pixel for the others (see this picture for more informations) :So here we have a preview of what is going to be the building. Make more realistic windows and a small path between the door and the street :The following process is a but complicated : when we will texture the building we will need to mix textures on the antialiasings. With a bit of technics, this is what we do : make three copies of the picture and thanks to the magic wang tool make easily three pictures with red pixels for antialiasing pixels 67%, 33% and 50%. See this picture to understand better :These are the picture we have removing everything but red (by playing on the selections and thanks to the magic wand tool) :

Then we are going to texture the windows and the ground : on three new copies of the picture, isolate the two windows and the blue tile, tha antialiasing of each one is in the picture recolored as it wasn't an antialiasing (see picture …..) :

Texture them with the following pictures :

As explained in 5.2.2, it is also possible to create an image for each angle of surface of the object. Then it is possible to apply anti-aliasing on the limits between the surfaces by making images merging the two images applied on the two surfaces to anti-alias.
For a better understanding, a quick example is given at the end of the tutorial.

Using the glass effect process for the windows, paste with 50% transparency and paste the background on, paste simply the blue transparent for the third picture, put all in the same picture, this is the result :

Texture the main picture with the texture below with 50% transparency (paste with transparence then paste the background selected with the magic wand tool), you have to recolor antialiasing in grey for this process (see picture to understand better).

Then the red dots'picture are used. Copy three times the pictures with the windows and the ground and paste on each one the red dots'pictures with red as transparent color. You'll have dots as on this example :Paste also the three red dots'pictures with the background transparent on the picture with windows and ground, and remove the red pixels. Then we're arriving to the very end : paste the dots on the main picture with transparencies (33%, 50% and 67%) with the background transparent and paste the picture with windows and ground with transparent background. This is the result :To finish, use these windows as you wish to ornate the building (to put them on sloped sides, use the distort tool or the incline tool). This is a possible result :

The best to do with this buildind is to incline the concrete texture according the the sides of the building, but it would be too much wokr with the antialiasing. Of course it's as long as here only when you use textures, for smaller objects textures are rarely used so the work is much easier.

12.Example of shading and orientation of textures

This example is not about making a nice object but about understanding the process described in 5.2.2. The point here is to texture a cube in this way: a concrete texture on the top and a bricks texture on the sides, with anti-aliasing. Here are the starting pictures:

Work these pictures so as to get: the cube with anti-aliasing lines in bright colors; the concrete texture oriented and shaded for the top surface (the most efficient here is to do this with the distortion tool); the bricks texture oriented and shaded for each lateral surface. Then each texture must be duplicated to fill a 128 px square image. Here are the results:

In order to process anti-aliasing, all you have to do is create images by merging two of the above. For instance, for anti-aliasing between top surface and South lateral surface, the textures to be applied to both of these surfaces must be merged together. Practically, copy the brick image for the south-oriented side in a new image, then copy the concrete image and paste it on the just-created image with 50% opacity. This image will be the “texture” of the anti-aliasing between top surface and south surface. Here are the two “anti-aliasing textures” that you whould get:

The alignment between the anti-aliasing textures and their parent textures is guaranteed since all the images has the same size which is the size of the object picture.

Now, all it is left to do is applying all the textures to the starting object, do it by copy and paste once per texture, choosing the appropriate transparent color at each pasting. Here is the result:

These methods look tedious at first but they can be achieved much quicker with experience. All that matters is practice.

next tutorial : Chapter III: source files.