Traductions possibles :

Différences

Cette page vous donne les différences entre la révision choisie et la version actuelle de la page.

--- en:tutomakeobj2 [2010/07/03 10:25]
gauthier
+++ en:tutomakeobj2 [2015/02/18 07:40] (version actuelle)
@@ Ligne 1: / Ligne 1: @@
 ====== II.Pixel-art basics ======
+//\\  //
-<WRAP warning>Page under construction</WRAP>
 ===== 1.Introduction =====
 <WRAP warning>This tutorial is made for pak128, for other paksets you have to adjust size !</WRAP>
 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.\\
+<WRAP important>If you missed a step so you don't know photofiltre, [[en:tutophotofiltre|go there]].</WRAP>
-<WRAP important>If you missed a step so you don't know photofiltre, [[http://www.simutrans-france.fr.nf/doku.php?id=en:tutophotofiltre|go there]].</WRAP>
 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 :
 <WRAP info>Simutrans'directions are important to know :
+{{  fr:directionsen.png  }}</WRAP>
-{{  :fr:directionsen.png  }}</WRAP>
 ===== 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).
+{{  fr:tuto:pixelart:pixelart01.png  }}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 :
-{{  :fr:pixelart01.png  }}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 :
+{{  fr:tuto:pixelart:pixelart02.png  }}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.
-{{  :fr:pixelart02.png  }}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.
 <WRAP important>On the screen the angle between the two lines is ... hmmm doesn't matter, keep in mind that it represends a right angle virtually.</WRAP>
 So this is what you have to see :
+{{  fr:tuto:pixelart:pixelart03.png  }}
-{{  :fr:pixelart03.png  }}
 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.
 <WRAP todo>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.
+<wrap help>[[en:tutophotofiltre#the_line_tool|Lines in photofiltre]] </wrap>
-<wrap help>[[http://www.simutrans-france.fr.nf/doku.php?id=en:tutophotofiltre#the_line_tool|Lines in photofiltre]] </wrap>
+This is the result that you must have :{{  fr:tuto:pixelart:pixelart04.png  }}</WRAP>
-This is the result that you must have :{{  :fr:pixelart04.png  }}</WRAP>
 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, ...).
 <WRAP todo>To learn the way to draw lines, draw these lines by the same way. Of course zoom in to gain precision ...
     - 64%%*%%32
@@ Ligne 80: / Ligne 57: @@
     - 44%%*%%11
     - -58%%*%%29
 </WRAP>
 To make this knowledge of lines perfect, let's see how it is on the corners of a tile.
 <WRAP info>A "tile" is a square in games based on squares. It's the case of Simutrans which the word "tile" is often used about.</WRAP>
+{{  fr:tuto:pixelart:pixelart05.png  }}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.
-{{  :fr:pixelart05.png  }}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.
+<wrap help>[[en:tutophotofiltre#the_paintbrush_tool|The paintbrush tool in Photofiltre]] </wrap>
-<wrap help>[[http://www.simutrans-france.fr.nf/doku.php?id=en:tutophotofiltre#the_paintbrush_tool|The paintbrush tool in Photofiltre]] </wrap>
 To end lines : a small exercise :
 <WRAP todo>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.
+<wrap help>[[en:tutophotofiltre#colors|Colors in Photofiltre]] </wrap>
-<wrap help>[[http://www.simutrans-france.fr.nf/doku.php?id=en:tutophotofiltre#colors|Colors in Photofiltre]] </wrap>
+{{  fr:tuto:pixelart:pixelart06.png  }}
-{{  :fr:pixelart06.png  }}
 <WRAP important>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.</WRAP></WRAP>
 ===== 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 :\\
+{{  fr:tuto:pixelart:pixelart07.png  }}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).{{  fr:tuto:pixelart:pixelart08.png  }}<WRAP tip>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.
-{{  :fr:pixelart07.png  }}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).{{  :fr:pixelart08.png  }}<WRAP tip>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.
+<WRAP round help>[[en:tutophotofiltre#the_line_tool|Lines in Photofiltre]]
+[[en:tutophotofiltre#selections|Selections in Photofiltre]]
-<WRAP round help>[[http://www.simutrans-france.fr.nf/doku.php?id=en:tutophotofiltre#the_line_tool|Lines in Photofiltre]]
+[[en:tutophotofiltre#the_fill_tool|Filling in photofiltre]] </WRAP></WRAP>
-[[http://www.simutrans-france.fr.nf/doku.php?id=en:tutophotofiltre#selections|Selections in Photofiltre]]
-[[http://www.simutrans-france.fr.nf/doku.php?id=en:tutophotofiltre#the_fill_tool|Filling in photofiltre]] </WRAP></WRAP>
 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 :\\
+{{  fr:tuto:pixelart:pixelart10.png  }}<WRAP tip>Don't hesit to  copy this picture and zoom in to si details if you need.</WRAP>
-{{  :fr:pixelart10.png  }}<WRAP tip>Don't hesit to  copy this picture and zoom in to si details if you need.</WRAP>
 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.\\
+<wrap help>[[en:tutophotofiltre#selections|Selections in Photofiltre]] </wrap>
-<wrap help>[[http://www.simutrans-france.fr.nf/doku.php?id=en:tutophotofiltre#selections|Selections in Photofiltre]] </wrap>
 This is the result : a cube !
+{{  fr:tuto:pixelart:pixelart11.png  }}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.
-{{  :fr:pixelart11.png  }}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  :
+{{  fr:tuto:pixelart:pixelart12.png  }}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").
-{{  :fr:pixelart12.png  }}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").
+<wrap help>[[en:tutophotofiltre#replace_color|Replace color in Photofiltre]] </wrap>
-<wrap help>[[http://www.simutrans-france.fr.nf/doku.php?id=en:tutophotofiltre#replace_color|Replace color in Photofiltre]] </wrap>
 This is the result, then as indicated on the picture, remove pieces in excess and fill the other ones :
+{{  fr:tuto:pixelart:pixelart13.png  }}<WRAP important>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 ...)</WRAP>
-{{  :fr:pixelart13.png  }}<WRAP important>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 ...)</WRAP>
 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 :\\
+{{  fr:tuto:pixelart:pixelart14.png  }}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 :
-{{  :fr:pixelart14.png  }}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 :
+{{  fr:tuto:pixelart:pixelart16.png  }}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 ...
-{{  :fr:pixelart16.png  }}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 ...
 <WRAP todo>Reproduce this sides (remove the grey structures at the end to be perfect).
+{{  fr:tuto:pixelart:pixelart17.png  }}</WRAP>
-{{  :fr:pixelart17.png  }}</WRAP>
 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 :
+{{  fr:tuto:pixelart:pixelart18.png  }}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 !
-{{  :fr:pixelart18.png  }}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 !
 <WRAP todo>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.
+{{  fr:tuto:pixelart:pixelart19.png  }}1) Draw the first side with the defined dimensions (use the same color, it's important).
-{{  :fr:pixelart19.png  }}1) Draw the first side with the defined dimensions (use the same color, it's important).
+{{  fr:tuto:pixelart:pixelart20.png  }}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.
+{{  fr:tuto:pixelart:pixelart21.png  }}3) Create a extension on the first side. Notice the exact shape of the corners !
-{{  :fr:pixelart20.png  }}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.
+{{  fr:tuto:pixelart:pixelart22.png  }}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.
+{{  fr:tuto:pixelart:pixelart23.png  }}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 ...
-{{  :fr:pixelart21.png  }}3) Create a extension on the first side. Notice the exact shape of the corners !
+{{  fr:tuto:pixelart:pixelart24.png  }}6) You see that the first line of the roof is 46%%*%%23 px, reproduce it on the two other corners.
+{{  fr:tuto:pixelart:pixelart25.png  }}7) Link with the other side ...
-{{  :fr:pixelart22.png  }}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.
+{{  fr:tuto:pixelart:pixelart26.png  }}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 ...
+{{  fr:tuto:pixelart:pixelart27.png  }}9) End by filling ! this is ou future first building, keep it we are going to use it later …</WRAP>
-{{  :fr:pixelart23.png  }}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 ...
+===== 4.Shading =====
+<WRAP info>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 [[en.wikipedia.org/wiki/Shading|this page]].</WRAP>
-{{  :fr:pixelart24.png  }}6) You see that the first line of the roof is 46%%*%%23 px, reproduce it on the two other corners.
+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 :
-{{  :fr:pixelart25.png  }}7) Link with the other side ...
-{{  :fr:pixelart26.png  }}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 ...
-{{  :fr:pixelart27.png  }}9) End by filling ! this is ou future first building, keep it we are going to use it later …</WRAP>
-===== 4.Lighting =====
-As you saw in some shapes above, sides are defined mostly with their lighting. Indeed as in real, 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 :
-{{  http://graphics.simutrans.com/albums/userpics/10003/geometry.png  }}We can define the lighting by maths but don't worry I'm not going to do this for this time.
+{{  http://graphics.simutrans.com/albums/userpics/10003/geometry.png  }}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 :
+{{  fr:tuto:pixelart:pixelart28.png  }}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.
-{{  :fr:pixelart28.png  }}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.
 <WRAP info>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.</WRAP>
 Here is a cube to explain this :
+{{  fr:tuto:pixelart:pixelart29.png  }}The top side is the most lighted, then the Southern side is well lighted and the Eastern one is the less lighted.
-{{  :fr:pixelart29.png  }}The top side is the most lighted, then the Southern side is well lighted and the Eastern one is the less lighted.
+<WRAP todo>To be sure to understand shading, light this truncated cube with the greys below (two of the sides will have the same shade).
+{{  fr:tuto:pixelart:pixelart30.png  }}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 :
-<WRAP todo>To be sure to understand the lighting, light this truncated cube with the greys below (two of the sides will have the same lighting).
+{{  fr:tuto:pixelart:pixelart31.png  }}Let's invent other shapes to light to practice.
-{{  :fr:pixelart30.png  }}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 :
-{{  :fr:pixelart31.png  }}Let's invent other shapes to light to practice.
-<wrap help>[[http://www.simutrans-france.fr.nf/doku.php?id=en:tutophotofiltre#colors|Color in Photofiltre]] </wrap></WRAP>
+<wrap help>[[en:tutophotofiltre#colors|Color in Photofiltre]] </wrap></WRAP>
 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.
-==== 1.Incline of the texture ====
+==== 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 :
+{{  fr:tuto:pixelart:pixelart33.png  }}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%.
-{{  :fr:pixelart33.png  }}As you can see the sides we have to texture aren't as orientated as the texture. We have to adjust it. Copy it in the same picture and go in free transformation. Incline vertical axis by -50%.
+<WRAP help>[[en:tutophotofiltre#copy_paste_cut_delete_etc|Modify a selection in Photofiltre]] </WRAP>
+We should get this.
-<WRAP help>[[http://www.simutrans-france.fr.nf/doku.php?id=en:tutophotofiltre#copy_paste_cut_delete_etc|Modify a selection in Photofiltre]] </WRAP>
+{{  fr:tuto:pixelart:pixelart34.png  }}
+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 :
-We must have this. Let it here.
+{{  fr:tuto:pixelart:pixelart35.png  }}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 :
+{{  fr:tuto:pixelart:pixelart36.png  }}<WRAP tip>This way is less precise but can be practical in difficult cases.</WRAP>
-{{  :fr:pixelart34.png  }}
+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. ====
-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 :
+=== 5.2.1.Method with grey surfaces ===
+This methode separates texture and shading but it slightly alters colors.
-{{  :fr:pixelart35.png  }}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 :
+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.
-{{  :fr:pixelart36.png  }}<WRAP tip>This way is less precise but can be practical in difficult cases.</WRAP>
+<WRAP important>This process can be done only with grey surfaces !</WRAP>
+See the result :
-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.
+{{  fr:tuto:pixelart:pixelart37.png  }}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 :
-==== 2.Applying the texture. ====
+{{  fr:tuto:pixelart:pixelart38.png  }}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 :
+{{  fr:tuto:pixelart:pixelart39.png  }}<WRAP help>[[en:tutophotofiltre#selections|Selections in Photofiltre]] </WRAP>
-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).
+<WRAP info>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.</WRAP>
+=== 5.2.2.General method ===
-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 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:
-<WRAP important>This process can be done only the grey sides !</WRAP>
+{{  fr:tuto:pixelart:pixelart93.png  }}
+All the surfaces having one color will get the same texture with the same angle (and therefore the same shading).
-See the result :
+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.
-{{  :fr:pixelart37.png  }}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 :
+{{  fr:tuto:pixelart:pixelart94.png  }}
+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).
-{{  :fr:pixelart38.png  }}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 :
+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:
+{{  fr:tuto:pixelart:pixelart95.png  }}
-{{  :fr:pixelart39.png  }}<WRAP help>[[http://www.simutrans-france.fr.nf/doku.php?id=en:tutophotofiltre#selections|Selections in Photofiltre]] </WRAP>
-<WRAP info>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.</WRAP>
 ===== 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 ...
+{{  fr:tuto:pixelart:pixelart40.png  }}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.
-{{  :fr:pixelart40.png  }}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.
 <WRAP info>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…</WRAP>
 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 :
+{{  fr:tuto:pixelart:pixelart41.png  }}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.
-{{  :fr:pixelart41.png  }}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.
+{{  fr:tuto:pixelart:pixelart42.png  }}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 :
-{{  :fr:pixelart42.png  }}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 :
-{{  :fr:pixelart43.png  }}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.
+{{  fr:tuto:pixelart:pixelart43.png  }}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.
 <WRAP tip>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.</WRAP>
 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 :
+{{  fr:tuto:pixelart:pixelart44.png  }}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 :
-{{  :fr:pixelart44.png  }}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 :
+{{  fr:tuto:pixelart:pixelart45.png  }}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 :
+{{  fr:tuto:pixelart:pixelart46.png  }}<WRAP tip>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.</WRAP>
-{{  :fr:pixelart45.png  }}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 :
+<WRAP todo>Now you know everything, antialias yourself the left part of the picture. Then check your result with the right part.{{  fr:tuto:pixelart:pixelart40.png  }}<wrap help>[[en:tutophotofiltre#the_line_tool|Lines in Photofiltre]] </wrap></WRAP>
-{{  :fr:pixelart46.png  }}<WRAP tip>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.</WRAP>
-<WRAP todo>Now you know everything, antialias yourself the left part of the picture. Then check your result with the right part.{{  :fr:pixelart40.png  }}<wrap help>[[http://www.simutrans-france.fr.nf/doku.php?id=en:tutophotofiltre#the_line_tool|Lines in Photofiltre]] </wrap></WRAP>
 Antialias this buidling too :
+{{  fr:tuto:pixelart:pixelart47.png  }}
-{{  :fr:pixelart47.png  }}
 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 :
+{{  fr:tuto:pixelart:pixelart48.png  }}Or use the line tool with antialiasing on on small parts of the line :
-{{  :fr:pixelart48.png  }}Or use the line tool with antialiasing on on small parts of the line :
+{{  fr:tuto:pixelart:pixelart49.png  }}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 ...
-{{  :fr:pixelart49.png  }}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 :
+{{  fr:tuto:pixelart:pixelart50.png  }}Nicer, isn't it ? The antialiasing is really important for graphics, you MUST do it.
-{{  :fr:pixelart50.png  }}Nicer, isn't it ? The antialiasing is really important for graphics, you MUST do it.
+<WRAP important>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.</WRAP>
-<WRAP important>Somebody try to use the soft tool of Photofiltre, this tool is really not like an antialiasing, it destroys your work, making it unusable for Simutrans, all it does is mixing pixels witheout any good result.</WRAP>
 ===== 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 :
 {{  http://graphics.simutrans.com/albums/userpics/10003/simucolors.png  }}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", avaible 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.
+    * 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 ones 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 lighting range of these colors is useful but too small. For example the two ones are use in the picture can see at the bottom left of this page : the z22500 (the train passing under the bridge) has got blue and yellow stripes (in reality they are blue and red), the blue stripes are player color 1 and the yellow one are player color 2.
+    * 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 (that it's better ... a train of white squares isn't very nice).
+    * 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 :
-This is a more compact form for special colors :
+{{  fr:specialcolor.png  }}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).
-{{  :fr:specialcolor.png  }}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.
+<WRAP help>[[en:tutophotofiltre#replace_color|Replace a color in Photofiltre]] </WRAP>
-<WRAP help>[[http://www.simutrans-france.fr.nf/doku.php?id=en:tutophotofiltre#replace_color|Replace a color in Photofiltre]] </WRAP>
+Let's end this part with some examples of special colors use on this piece of z22500 source picture (outdated version of it).{{  fr:tuto:pixelart:pixelart51.png  }}
-Let's end this part with some examples of special colors use on this piece of z22500 source picture.{{  :fr:pixelart51.png  }}
-===== 8.Cylindres et arrondis =====
-Pour donner des effets d'arrondis on se sert des dégradés de couleur. On  fait un dégradé de la couleur la plus claires à la plus foncée, si on  texture ensuite on le fait en niveau de gris grâce au dégradé.
-==== Cylindre vertical ====
-Facile à faire grâce au dégradé, il servira également d'exemple … Voici  le cylindre qu'on veut éclairer :
-{{  :fr:pixelart52.png  }}La partie bleue doit donc être éclairée,  sachant que le Soleil éclaire par le Sud. On va beaucoup constraster nos  couleurs de façon à pouvoir le texturer ensuite si besoin. Il faut  repérer les couleurs suivantes : les couleurs des extrémités et la  couleur la plus claire :{{  :fr:pixelart53.png  }}Ensuite on mesure les longueurs entre  chaque trait avec les traits compris et on fait les dégradés sur une  autre image entre ces couleurs :{{  :fr:pixelart54.png  }}Pour finir on colle le cylindre bleu sur  ces dégradés avec le bleu en couleur de transparence :{{  :fr:pixelart55.png  }}<WRAP help>[[http://www.simutrans-france.fr.nf/doku.php?id=fr:tutophotofiltre#l_outil_ligne|Les lignes dans Photofiltre]]
-[[http://www.simutrans-france.fr.nf/doku.php?id=fr:tutophotofiltre#degrades|Les dégradés dans Photofiltre]]
-[[http://www.simutrans-france.fr.nf/doku.php?id=fr:tutophotofiltre#copier_coller_couper_supprimer_etc|Copier une sélection dans Photofiltre]] </WRAP>
+===== 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.
-<WRAP info>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.</WRAP>
+==== Vertical cylinder ====
+Easy to do thanks to gradients, it's also an example ... This is the cylinder that we want to light :
-==== Autres arrondis ====
+{{  fr:tuto:pixelart:pixelart52.png  }}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 :{{  fr:tuto:pixelart:pixelart53.png  }}Then the distance between each line is measured with line counted and the gradient is made on another picture between these colors :{{  fr:tuto:pixelart:pixelart54.png  }}For the end, the blue cylinder is pasted on these gradients with blue as transparency color :{{  fr:tuto:pixelart:pixelart55.png  }}<WRAP help>[[en:tutophotofiltre#the_line_tool|Lines in Photofiltre]]
+[[en:tutophotofiltre#gradients|Gradients in Photofiltre]]
-Les autres arrondis fonctionnent sur le même système mais on ne peut pas  faire directement un dégradé pour les représenter. La méthode la plus  simple est de représenter les différentes luminosités par des couleurs  vives et facilement repérables, ensuite on fait un dégradé entre la  couleur la plus foncée et la plus claire et on remplace les couleurs  vives par les couleurs du dégradé :{{  :fr:pixelart56.png  }}<WRAP help>[[http://www.simutrans-france.fr.nf/doku.php?id=fr:tutophotofiltre#remplacer_une_couleur|Remplacer une couleur dans Photofiltre]] </WRAP>
+[[en:tutophotofiltre#copy_paste_cut_delete_etc|Copy and paste a selection in Photofiltre]] </WRAP>
+<WRAP info>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
-===== 9.Effet vitre et effet mirroir =====
+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.</WRAP>
+==== Other cylinder-like rounded shapes ====
-Le but est de donner un effet réaliste de mirroir comme les surfaces  vitrée d'un gratte-ciel (bien sûr on peut le faire avec d'autres  matières et sur d'autres objets …).
+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.{{  fr:tuto:pixelart:pixelart56.png  }}<WRAP help>[[en:tutophotofiltre#replace_color|Replace a color in Photofiltre]] </WRAP>
+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:
-Voici l'horreur que nous allons légèrement embellir :{{  :fr:pixelart57.png  }}L'effet sera bien entendu sur la partie  bleue. Voici le ciel que nous allons mettre :{{  :fr:pixelart58.png  }}Comme pour texturer différentes parties  d'un objet, on va faire un second bâtiment à partir du premier mais en  remplaçant la surface vitrée par une surface rouge et nette, on peut le  faire en se servant des sélections de photofiltre :{{  :fr:pixelart59.png  }}<WRAP help>[[http://www.simutrans-france.fr.nf/doku.php?id=fr:tutophotofiltre#selections|Les sélections dans photofiltre]].</WRAP>
+{{  fr:tuto:pixelart:pixelart96.png  }}
+The pictures below can be used to facilitate this operation, all pixels having the same angle/shading have the same color:
-Pour appliquer ce morceau de ciel au bâtiment, on le fait avec  transparence, entre 30 et 70% selon l'effet voulu, ici on utilisera une  transparence de 50% pour coller la première image sur le ciel. voila le  résultat :{{  :fr:pixelart60.png  }}Bien sûr on ne veut garder que la partie  vitrée du bâtiment, on va coller par-dessus cette image la seconde image  en mettant le rouge en couleur transparente :{{  :fr:pixelart61.png  }}<WRAP info>Lorsqu'on a des  anti-crénelages sur ces surfaces, l'idéal est de faire plusieurs fois  cette manipulation : par exemple ici on aurait pu faire une première  fois cette manipulation pour l'intérieur de la surface vitrée et une  seconde fois uniquement avec les pixels constituant l'anti-crénelage  entre la surface vitrée et le reste mais avec une transparence de 25%.  Heureusement sur des petites surfaces on ne voit pas trop ce problème.
+{{  fr:tuto:pixelart:gradient1.png  }} \\ {{  fr:tuto:pixelart:gradient2.png  }}
+==== Complex rounded shapes ====
-On aurait également pu appliquer l'effet uniquement sur le bleu de la  surface vitrée, il aurait fallu faire une image rouge en se servant de  l'outil remplacer une couleur de photofiltre, ou même en collant  directement avec le bleu en transparence.</WRAP>
+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:
+{{  fr:tuto:pixelart:pixelart97.png  }}
-===== 10.Reflets réalistes =====
+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 =====
-Pas vraiment de démonstrations pour cette technique … il s'agit  d'ajouter une touche de réalisme aux objets en rendant extremement  lumineuses les surfaces éclairer verticalement par le Soleil ou presque.  On n'hésite pas à utiliser du blanc pour ces surfaces mais en fait il  s'agit généralement de quelques pixels. Voyons des exemples :
+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 :{{  fr:tuto:pixelart:pixelart57.png  }}The effect will be done on the blue part of course. This is the sky that we are going to use :{{  fr:tuto:pixelart:pixelart58.png  }}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 :{{  fr:tuto:pixelart:pixelart59.png  }}<WRAP help>[[en:tutophotofiltre#selections|Selections in Photofiltre]].</WRAP>
-rvg_tigress : {{  :fr:pixelart62.png  }}On distingue le trait très clair sur la  bande orange tournée vers le Soleil.
+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 :{{  fr:tuto:pixelart:pixelart60.png  }}Of course we want to keep only the glass side of the building, the second picture is pasted on this one with red transparent :{{  fr:tuto:pixelart:pixelart61.png  }}<WRAP info>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.</WRAP>
-SNCF_z5300 :{{  :fr:pixelart63.png  }}Ici l'effet a été poussé à l'extrême car  le z5300, familièrement nommé “petit gris”, est métalisé. L'effet de  reflet réaliste peut donc donner une information visuelle sur la nature  de l'objet. Voyons d'autres exemples pour terminer :{{  :fr:pixelart64.png  }}
+===== 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 :
-===== 11.Exercice complet =====
+rvg_tigress : {{  fr:tuto:pixelart:pixelart62.png  }}We can see the light line on the orange stripe in front of the Sun.
+SNCF_z6300 :{{  fr:tuto:pixelart:pixelart63.png  }}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 :{{  fr:tuto:pixelart:pixelart64.png  }}
-Afin de reprendre presque toutes les techniques vues sur ce tuto, nous  allons faire ce bâtiment :{{  :fr:pixelart92.png  }}Il n'est pas spécialement beau mais il  permet de reprendre pas mal de techniques. Attention je ne détaillerais  pas plus que ça les étapes vu que chaque technique a déjà été vue plus  tôt !
+===== 11.Complete exercise =====
+To sum up the most important technics seen in this tutorial, we are going to make this building :{{  fr:tuto:pixelart:pixelart92.png  }}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 !
-On va commencer par construire chaque partie du bâtiment, n'hésitez tout  le long de l'exercice à copier une image pour zoomer et bien voir ce  qu'on fait.{{:fr:pixelart66.png}}{{:fr:pixelart67.png}}{{:fr:pixelart68.png}}{{:fr:pixelart69.png}}{{:fr:pixelart70.png}}{{:fr:pixelart71.png}}
+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.
+{{fr:tuto:pixelart:pixelart66.png}}{{fr:tuto:pixelart:pixelart67.png}}{{fr:tuto:pixelart:pixelart68.png}}{{fr:tuto:pixelart:pixelart69.png}}{{fr:tuto:pixelart:pixelart70.png}}{{fr:tuto:pixelart:pixelart71.png}}
-Voila pour la construction de base. Ensuite il s'agit d'anti-créneler le  tout. Faites des anti-crénelage sur deux cases pour les lignes  gris-gris et gris-bleu foncé, et des anti-crénelage sur une case pour  les autres (zoom sur cette image pour plus d'infos) :{{  :fr:pixelart72.png  }}On a donc ici une vision de ce que  deviendra le bâtiment. Mettons des fenêtres plus réalistes et une petite  allée entre la porte et le trottoir :{{  :fr:pixelart73.png  }}La manipulation qui suit est un peu  complexes : en texturant le bâtiment on aura besoin de mélanger les  textures au niveau des anti-crénelage. Avec un peu d'organisation voici  ce qu'on fait : faites trois copies de l'image et grâce à l'outil  baguette magique faites très facilement trois images avec des pixels  rouges pour les pixels d'anti-crénelage 67%, 33% et 50%. Voir image poir  plus de compréhension :{{  :fr:pixelart76.png  }}Voila les images qu'on obtient en  supprimant sur chaque copie tout ce qui n'est pas rouge (en jouant sur  les sélection et grâce à l'outil baguette magique) :
+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) :{{  fr:tuto:pixelart:pixelart72.png  }}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 :{{  fr:tuto:pixelart:pixelart73.png  }}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 :{{  fr:tuto:pixelart:pixelart76.png  }}These are the picture we have removing everything but red (by playing on the selections and thanks to the magic wand tool) :
+{{fr:tuto:pixelart:pixelart78.png}}{{fr:tuto:pixelart:pixelart79.png}}{{fr:tuto:pixelart:pixelart80.png}}
-{{:fr:pixelart78.png}}{{:fr:pixelart79.png}}{{:fr:pixelart80.png}}
+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 …..) :
+{{fr:tuto:pixelart:pixelart81.png}}{{fr:tuto:pixelart:pixelart82.png}}{{fr:tuto:pixelart:pixelart84.png}}
-On va ensuite commencer par texturer les fenêtres puis le sol : sur deux  nouvelles copies de l'image isolez chaque fenêtre et le bleu du sol,  l'anti-crénelage lié à chacun sera compris dans l'image en étant  recolorié comme si c'était pas un anti-crénelage (voir image …..) :
+Texture them with the following pictures :
+{{fr:tuto:pixelart:pixelart75.png}}{{fr:tuto:pixelart:pixelart74.png}}{{fr:tuto:pixelart:pixelart85.png}}
-{{:fr:pixelart81.png}}{{:fr:pixelart82.png}}{{:fr:pixelart84.png}}
+<WRAP tip>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.</WRAP>
+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 :{{  fr:tuto:pixelart:pixelart83.png  }}
-Texturez les respectivement avec les images suivantes :
+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).
+{{fr:tuto:pixelart:pixelart87.png}}{{fr:tuto:pixelart:pixelart77.png}}{{fr:tuto:pixelart:pixelart86.png}}{{fr:tuto:pixelart:pixelart88.png}}
-{{:fr:pixelart75.png}}{{:fr:pixelart74.png}}{{:fr:pixelart85.png}}
+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 :{{  fr:tuto:pixelart:pixelart89.png  }}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 :{{  fr:tuto:pixelart:pixelart90.png  }}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 :
+{{fr:tuto:pixelart:pixelart91.png}}{{fr:tuto:pixelart:pixelart92.png}}
-en suivant la méthode d'effet vitre pour les fenêtre : coller avec 50%  de transparence et coller le contour par-dessus; et tout simplement avec  le bleu transparent pour la troisième image, mettez le tout dans une  même image, voici le résultat :{{  :fr:pixelart83.png  }}
+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 =====
-Texturez l'image principale sur la texture suivante avec 50% de  transparence (collez avec la transparence puir coller les contours que  vous aurez sélectionné avec l'outil baguette magique), il faut mettre  tous les anti-crénelage en gris pour cette opération (voir image pour  plus d'info).
+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:
+{{fr:tuto:pixelart:pixelart98.png}}{{fr:tuto:pixelart:pixelart77.png}}{{fr:tuto:pixelart:pixelart32.png}}
-{{:fr:pixelart87.png}}{{:fr:pixelart77.png}}{{:fr:pixelart86.png}}{{:fr:pixelart88.png}}
+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:
+{{fr:tuto:pixelart:pixelart99.png}}{{fr:tuto:pixelart:pixelart100.png}}{{fr:tuto:pixelart:pixelart101.png}}{{fr:tuto:pixelart:pixelart102.png}}
-C'est ensuite qu'interviennent les images en points rouges faites tout à  l'heure. Il nous reste les images en point rouge, les deux images  ci-dessus. Faites trois copies de l'image avec les vitres et le sol  texturés et collez sur chacun d'elle les images en pointillés avec le  rouge en transparence. Vous obtenez des pointillés comme sur cet exemple  :{{  :fr:pixelart89.png  }}Collez également les trois images de  pointillés rouges successivement avec le fond en transparence sur  l'image avec vitres et sol texturés, et supprimez les pixels en rouge.  Ensuite c'est la fin : collez les pointillés sur l'image avec le  bâtiment texturé avec les transparences adéquates (33%, 50% et 67%) avec  fond totalement transparent et collez l'image avec vitre et sol  texturés avec fond transparent. Voici le résultat :{{  :fr:pixelart90.png  }}Pour terminer, utilisez ces fenêtres  comme vous voulez pour agrémenter le bâtiment (pour les mettres sur les  surfaces en pente, utilisez la distorsion ou l'inclinaison). Voici un  résultat possible :
+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:
+{{fr:tuto:pixelart:pixelart103.png}}{{fr:tuto:pixelart:pixelart104.png}}
-{{:fr:pixelart91.png}}{{:fr:pixelart92.png}}
+<WRAP tip>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.</WRAP>
+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:
-L'idéal pour ce bâtiment aurait été d'incliner la texture de béton selon  les faces du bâtiment, mais en comprenant les anti-crénelages cela  aurait été beaucoup trop fastidieux. Bien entendu c'est le cas  uniquement lorsqu'on utilise des textures, pour des objets plus petit on  n'utilise très rarement des textures ce qui raccourcit énormément le  travail.
+{{fr:tuto:pixelart:pixelart105.png}}
+<WRAP important>These methods look tedious at first but they can be achieved much quicker with experience. All that matters is practice.</WRAP>
-<WRAP box>tuto suivant : [[http://www.simutrans-france.fr.nf/doku.php?id=fr:tutomakeobj3|Chapitre III : fichiers sources]].</WRAP>
+<WRAP box>next tutorial : [[en:tutomakeobj3|Chapter III: source files]].</WRAP>