News:

Simutrans Chat Room
Where cool people of Simutrans can meet up.

Pak192.Comic Graphic Guide

Started by Leartin, February 20, 2014, 03:19:12 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Leartin

[This post will be changed to add new information over time. Feel free to ask questions, they might be useful to expand this guide]

Creating Graphics for Pak192.Comic

Perspective and Light
As you may be aware, Simutrans uses an isometric perspective. This means lines which are parallel in reality are parallel in the game. The view of the ground is distorted in a way so it is twice as broad as it is high.


The light source for the objects is in the south (lower left corner), and stands lower then 45°. Therefore, the top face of a cube is darker than the south face.
Drop shadows are a bit difficult to do, sometimes you might need to use tricks. For example, shadows of several pillars in a row might not look good if they just fall on the next pillow, so the sun might be moved a bit to the east for that purpose, or you might want to 'forget' shadows that look strange.


Outline
Probably the most defining point of pak192.comic are the black outlines. They are not used at every edge but where you need to separate two elements.
For better understanding, look at this picture of 3 cubes.


Only the outer lines are black, the frontmost edge lacks an outline - instead, it is defined by the different shadings on the east and south face.
One of the two smaller cubes is surrounded by an outline, while the other lacks it on two sides. As you might see, one seems to be attached, while the other appears to be floating in the air - even though they are at the same position. (There is no drop shadow in this image so you can focus on that effect)
However, you might want to show an edge is more or less defined. Look at these cubes:


The left image uses in-line outlines, which are not black but a bit darker color, except for the south-up-edge which is lighter. As a result, it is really well defined and looks sharp.
The right image smooths by using colors which are between the colors of the faces, so the cube appears to be rounded. The same trick is used at the outline, similar to anti-aliasing.

Outline is also used to separate two elements made of different materials. For example, a stone walkway on the ground has the same level as the grass surrounding it, but to make it easier to separate stone and grass, you'd use an outline. This might not always be possible, especially in tiny details. In doubt, choose what looks better or ask others for opinion.

Scale
Not all objects have the same scale, which is especially visible with ships. There is no set size of a tile, and calculations are the wrong way to go.
Instead, it is best to compare to the size of existing graphics. For example, it might be a good idea to compare the size of benches with the size of people.
There are, however, still some guidelines which help with continuity:

  • Each floor of a building is 20 pixels high. While buildings with floors 18 or 22 pixels high will be accepted as well, there should be a reason to pixel them that way.
  • Because of that floor height, it's assumed that a normal window is about 10 to 12 pixels high.
  • Buildings should not use the whole tile. If it does, there won't be any space to the building next to it, they would touch each other. Unless that is something you want to achieve (eg. for rowhouses), avoid it.

    This Image shows how I changed an early graphic of mine to follow that rule.
  • Don't be afraid to make details bigger then they would actually be. For example, most flowers would not even bloom big enough to fill a single pixel, but they tend to look better if they are like 4 pixels big, maybe even with an outline. It is more important to convey what something is rather then to depict it in perfect scale.

Tips & Tricks

  • These guidelines don't make the perfect pixler. There are loads of pixel tutorials on the net where nifty techniques like anti-aliasing can be learned, but they also teach you basics like how to avoid pillow shading.
  • Always think about depth. For example, windows and doors are not painted on the walls, most often they are a bit indented.
  • While the comic style invites you to use more vivid colors than you might use in other paks, don't overdo it by picking the highest saturation. Extremes are seldom a good choice.
  • Many small items, like bushes or street lamps, are already done. While it is nice to have even more details, if these are not the point of the graphic you might want to reuse some which are already in the set. For example, you might use items from this sheet:


Leartin

#1
Home Sweet Home

In this part of the graphic guide, I'd like to show you step by step how to pixel a building.

Step 1: What does a house look like?

That sounds silly, but really, what does a house look like? Thinking of a house yet? Maybe like that?



Yes, obviously you can see that this is a "house", even though it has a high degree of abstraction. Everything you wish for in a house is there: A wall to protect you from the outside, a roof to protect you from rain and snow, there is a door so you are not locked in, there are windows so there is light inside, and the chimney says it's even warm inside. So yeah, people who think of a "house" often have an image similar to that in mind, they don't even realize the degree of abstraction. However, if you start just with that image in mind, you'll get a result somewhat like that:



...and that does not quite reach the quality we want ;)

So first of all: You can not create "any" house. "Any" house is a generic prototype with no details and does not look like a real house. Google is your friend: There are more then enough real estate agencies which put pictures of their rentals on the internet, just search for "house" on google images. For this tutorial, I chose a prefabricated house that was on the first page when googleing "haus".




Step 2: Scale & Proportion

One floor is 20 pixels high. Nobody will remeasure it once you are done (an obvious lie, I will), and the bigger the building, the lower floors can be. Still, too much deviation will be noticed.
Use the 20px floor high to measure your original. It does not have to be exact since your house is allowed to be bigger or smaller then the original, and later it's all about the impression it makes. It's usually enough to measure with your sense of proportion.



By the way, "Pak192" means that one of the isometric tiles has 192 px on it's broadest poing - from the southwest corner (left) to the northeast corner (right). One of the tile boarders is thus 96 px broad and 48 px high. But you have to think with the perspective: A horizontal line of 100 px lenght would be 72 px broad and 36px high once you put it in perspective.
The following image shows two things: On the bottom, it's a common sidewalk tile, a nice base for city buildings (please don't copy that, it's an old version). On top you see an arc that should explain how lines of the same 'real lenght' behave in perspective. To get such an arc, use an ellipse tool and make the shape twice as broad as high.



Thinking about scale and proportion before you start pixeling also precents another common beginners mistake: Cubic buildings which are as big as the tile, so that the buildings walls are at the boarder of the tile. Why would you bother to put a window in if 5cm beyond the glass you only see the neighbours wall? You need a little distance between buildings, gardens and greenery.

Step 3: First Pixels

Before we start putting pixels together just a really short digression about software, since you might not even know what you can use. It's quite simple, though: Use what you can use. There is no need to use GIMP of Photoshop if you are not already using these programs, they are hard to learn and have not that much benefit for beginning pixelers. For first steps MS Paint is enough, but I'd like to recommend aseprite, because it is just as simple, but with layers.

First thing to do with any building ist starting with it's basic shape. That's usually one or several cuboids, sometimes also cylinders.



Note that the line in the foreground is two pixels broad. Later there won't be a black outline at this spot, so you want the ledge to be inbetween two pixels, not on a pixel.
The cuboid is best placed somewhere in the northwest of the tile. That way you can see the garden in front of it. Also, remember that the sun is in the south, you wouldn't build your house in a way that all your garden is in constant shadow, would you? Anyway, if you are smart enough to put the cuboid on a different layer, you can move it around later.

Next you extend the basic cuboid to look more and more like your original house.



I like to use several different colors, just so I know what's what. Once the gridwork is done, you can fill in the surface. You don't use the color you want it to have in the end and don't care for any texture, but you want to use different shades according to the light already. It comes from the south or southsoutheast, so the southern facade is brighter then the eastern facade. On the roof, the 'backside' (west and north) parts are darker then those in front.



This might be a good time to add the garden, in a similar provisional way. A place to park a car should use the sidewalk pattern or a soft transition to/from it.



Obviously, a wall like this is rather useless, since you can just go around it. However, you usually don't want high walls on the south or east side of your building since they obscure a lot. Because of that, we'll use a fence instead. Since a fence would be partly transparent, we don't want to do it just yet - first everything behind it should be finished.

Step 4: Color & Texture

Quite often a rather simple pattern is enough to show some structure and therefore plasticity. A good example is a brick-structure for walls. The contrast between the colors used for it should not be too high, you don't want people to see the pattern, they should rather see a more vivid but unified surface.
As for the choice of colors, I like to pick a handful of shades beforehand and stick to them.



As you can see, the garden wall and facade of the house got a brick texture (that texture can be seen in the upper left corner, but scaled and with high contrast) - this is a cheap method, it allready looks better then one solid color. But it's still too sterile, so now you can tweak the colors in parts of the walls, as can be seen in the next image (take a close look).



It's the same for pretty much any structure, next we do roof and wooden terrace. Note that while this method yields good results, often it's a good idea to add irregularities as well. The more you pixel by hand instead of trusting textures, the more vivid your result will look. However, literally placing each single pixel by hand is a lot of work. You need to know for yourself whether it's enough to look good or strife to look great ;)



Windows are more then empty holes. There is a window frame, often wooden, and quite often the window sits a bit inside the wall.
In this case, the window frame is on the same level as the wall, but the glass is a bit deeper inside. This is but one method of doing it, just look at (newer) buildings in the pak to see different methods.
I magnified the windows with higher contrast to make it a bit easier to understand. The window frame is one pixel broad, and the window sits one pixel deeper inside. The cube is just to understand which shade is which direction.



To display ground you have two possibilities. The first is to just leave that part transparent, #E7FFFF, so you can see the though to the ground. However, you could also argue that a well-groomed lawn looks the same everywhere. If the whole garden is fenced in, you can green it yourself. It's probably easiest to just take a screenshot of the ground in the game and put it in, but you can also draw your own. (make sure it fits, though)



Step 5: Finishing Touches

After everything got some color you may think you are done. Nope, not at all. Building a house is just a bit of construction work, now the really creative part starts: Details. Those are not bound to any raster and quite often even perspective gives up on them. You are astonishingly free in doing them, which also means you need to experiment what looks good and what does not.
It makes sense to borrow small parts from other pixelers, especially trees. Once you put some stuff in, it should get easier to add something on your own or modify others work to fit your needs. Just don't get lazy, if everyone would just borrow from others and never create parts on their own, we would be stuck with what we have now.



Now to add the fence. I just made two vertical lines and joined them with some pixels inbetween, then copied it. There were no special thoughts put in it, though - I did it once, and it did not look good, so I did it a second time and it worked. That's how many details come to life ;)
What's special about this fence is that it does not use a black outline. This is okay for really filigree objects in a dark color, but don't use that too often.




Step 6: Winter Wonderland

I often had the problem that I thought I was done already, only to remember that I need a snow image as well.
The first thing you do when you convert to a winter graphic is to remove everything that's not there in winter. This includes trees which look completely different. It's really easy to do if you thought of doing several layers.
After that, the rule of thumb is: "upside is snowy", although some parts might be cleared from snow. Flat roofs are completely covered by snow, steep roofs may have less on them.
(Note: I don't like how it looks, nowadays I'd do it in a different way. However it's 'good enough' for the pak :) )



Step 7: There shall be light!

If you want your windows to glow in the night, you need to use special colors. I usually use #57656F and #4D4D4D for windows. As a start, just make all your windows these colors.
What we need next is the "Glowworm Hunter" - the Tool Shades. With that, you can load a png file and see how it would look at night.



We did a good job there, no glowworms. (= stray pixels which accidently got a special color. Especially common with snow images)
But it's still not good. Electricity isn't cheap, who'd have all the lights on all the time? With the "special color ereaser" you can shut off the lights and help the owner save some money. But think about how the rooms are distributed. Quite often, neighbouring windows belong to the same room, so they are either both on or off.



Obviously, you do the same with the summer graphic. The next step is presenting your work on the forum and starting your next building/learning how to use makeobj :)