Art lessons with an idiot

[LohTek]

Well hello friend,

I guess you're here cause you're interested in learning to draw, well I'm not going to teach you that. Mainly because anyone can draw; that's the easy part, what you really need to learn is how to use perspective and shading! To that end lets start with the light source:


Part I: Light


Most people project their light source in this way:

While this is technically correct this isn't very interesting and there is a better way.



Viewed from the front our light source is slightly to the left and above this cube, it casts more light on the left side, this is an important distinction to make as it adds more character to your work.


When viewed from the side, we see our light source is above the cube and quite high in the air, if you imagine its 10:00AM that would be about the correct time which this light source is projecting.

Lighting is the very first step to defining a shape, I've created a bunch of primitives so that you can see how lighting affects them:


None of these objects would have any shape if I had not shaded them, they would look like flat 2d objects. The trick to this '3d' appearance is shading, the darker that you shade something the further away it gets, the lighter it is shaded the closer it gets; Observe.


Notice how this looks like some kind of hole, the darker it gets the deeper the hole appears and vice versa:


The lighter this becomes the closer it appears, It looks kind of like a pipe doesn't it?
This is what's known as a gradient, a gradient technically is a smooth value transition from one color to another, proper use of them can give the illusion of depth like so:


I'd like to note that it isn't always necessary to use a gradient to achieve this effect. Proper use of simple light shading can produce a similar result:


However; when gradients are properly used they can have a dramatic effect:


By combining lighting, use of gradients, and proper shading you can produce very high quality art. In future lessons I'll be going more in depth into shading, let me know if you guys found this useful and stay tuned for the next installment.

[manezinho]

Pasting this link in my notes so I can always keep it in mind. Most likely doing the same for the next one. Thanks.

[LohTek]

Part II: Shading

In part one we discussed light casting and gradients, in this one I want to go over advanced shading. Shading consists of three basic things midtones, highlights, and shadows. Midtones can be thought of as your base color value; a highlight is any value that is higher in brightness than the base color; shadows are any value lower in brightness.





This is similar to the light casting examples on the primitives; the light being casted creates a highlight and a shadow. The concept is a pretty simple one that you already understand; anything that is raised on a surface will cast a shadow.

There are 2 ways of getting shadow and highlight values, one method uses the color mixer, the other is layer modes. I use the program GIMP for most of my artwork; it is free and contains some really powerful tools that rival and sometimes surpasses photoshop. You can get GIMP here (https://www.gimp.org/)

Color mix method:
The color mix method works like this; you open your color mixer in gimp by clicking on your color swatch in the tool tray it looks like this.



A window will open like this:




This is the color mixer; it contains 6 options for altering colors: Hue, Saturation, Brightness value, Red, Green, and Blue. What we are interested in for the moment is the Brightness value it is the slider marked on this panel by V. This slider works in percentage so 0% is pure black, 100% would be pure white; very simple.

The mixer works the same way with any color that you add, if you are working with a default red, green, or blue as a base you may need to saturate the color in order to get highlights. You can do this very easily by adjusting the slider marked S.

Layer mode method:
The layer mode method is a little more complex though it does have advantages over the color mixer method. This is the method that I used throughout classes and is still my preferred method of shading. To start off you will need 2 layers that you should rename to highlight and shadow.

Starting with your highlight layer look over to your layers panel, at the top of this panel you should see the layer mode which says “normal” we want to set this to the mode “screen”



for your shadows layer you will want to set the mode to “multiply”, these modes use grayscale values to apply brightness to the layer below it, regardless of color or brightness value present. Pure black on the highlight layer results in the image not changing what so ever, as you increase the white value the area becomes brighter, conversely white added to the shadow channel results in no change, the darker gray makes the area darker.

There are different ways to use this technique: one way is to use the color mixer to select your value by using the brightness value slider; alternatively you can use my preferred method, and that is to use the brushes opacity to set your value.



By setting your color to pure black or white, and setting the opacity to 10% you have essentially the same thing as using 10% brightness. If you mess up you can simply swap your color to shift from light and to dark and vice versa.

Let’s start applying some of the techniques we have learned so far, I’ll start by creating myself a new document with an alpha channel, I’ll add my highlight and shadow layers and set my modes. I want to create a simple rock object, I need to select a base color and I want my rock to look as if it was made from granite so I will start with a base color of 50% gray. I’ll just grab a random brush out of the brush palette and draw a blob on the screen without much concern for the shape of it.


So I’ve got this kind of shape, it’s not perfect but it doesn’t matter at all, at this point I want to determine where my light source is going to be and start drawing in my major shadows, I know that my light source is top and to the left so that means my right side will be quite dark, I bust open the color mixer and change my brightness value to 40% and literally scribble on a shadow to the right.


I did not spend any time counting pixels or concern myself at all with the shape of this, I took my pencil tool and just scribbled, afterward I went back to fix the lines and make them a little nicer. So, I have my right side shadow I need my front side to finish defining the shape of my rock. I’ll open up my color mixer again and set my brightness to 45% and scribble out the front shadow.


Neato, it’s starting to look like something; at this time I’m gonna switch to my shadows layer and start adding details using my preferred technique. So, I am swapping my colors for black and white, I set my opacity on my brush to 10% and start working on my shadows layer with black selected.


I’ve placed my shadows, I have a super-secret technique for doing this: I just scribble, I literally scribbled this entire rock so far.. This isn’t hard, Time to add the highlights.


Highlights are in, I took this time to play around with my values a little bit, I did all this by just using those two layers and my pencil tool opacity set from 5% to 10%. Now I admit this isn’t my best work ever but it isn’t my worst either.

Let’s do a human sprite shall we? I’ll strip out the base character from SS13.


Now, I have some anatomy issues with this character: the head shape is bad and he does not have shoulders; I’m going to correct the shoulders and not concern myself too much about the head shape at the moment.


That’s better, I need a base color for our character; I’m going to bang one out in the color mixer really quick. Tutorials on how to use the color mixer including palette selection will come in future lessons.


I’m happy with this color, I now I need to create my highlight and shadow layers, and just like for the rock I want to figure out the basic shapes by applying lighting first.


I’ve got my base shading down; I want to further this by creating muscle definition using the same techniques I did for the rock.


Here’s what I’ve come up with after about 10 minutes of work, not too shabby.

That’s about it for this installment; I encourage you to play around with highlights and shadows to see what kind of results you can get. In the next one we will start to explore the color mixer more in depth.

[KingKire]

well, i enjoyed reading it.

[LohTek]

Part III: Color

Hello again,

I’m sure you’re wondering what the hell happened to me and why I haven’t posted in a month, please forgive me I’ve been a bit busy doing freelance 3d texture work for a unity project and this series does not seem to be as popular as I would have hoped.

Anyway I want to discuss colors today and how to use the color mixer to its full potential; we already learned how to access the color mixer from a previous tutorial and learned some basic functionality of it. This tutorial will go more in depth into how to mix colors.



Returning to our color mixer from the previous tutorial we can see that there are 4 options for color changes they are hue, red, green and blue marked by H, R, G, B on this panel.

It’s easy enough to use the RGB sliders to pick out a red color with the mixer, I’m sure you figured that much out already. Using any solid color value is generally not a good idea however, you might ask why using a solid color is bad, well to put this simply the purest value of a color stands out most.

It’s kind of like writing in the way that you want to emphasize on the focus points of your topic, opposed to putting emphasis on the entire subject. When you do this nothing stands out.

That isn’t to say you should never use a pure color, indeed their purpose is to draw your focus to important aspects of your work. Style also plays a factor in this, if you’re working in an 8 bit style with a limited palette you will want to put them to use.

So we shouldn’t use solid colors as our base color; so what the hell should we use? Good question, what we want to do is either: saturate our color slightly, or scale back in the brightness value. This is the particular style that was used to sprite SS13 (CM sprites as well)

Let’s take a look at an example; I’ve created a magical sword typical of something you would see in a Zelda style game:



I know what you’re thinking, this seems off somehow; though technically nothing is wrong with it but something isn’t quite right and you can’t put your finger on it. The thing that might immediately stand out to you is the black outlines and I would agree. All the colors are clashing; this is exactly why we don’t use solid colors as a base.



With this example you can see I’ve desaturated my colors a little, however it does not scream at you that it is very special now does it? That’s because there is no emphasis on any particular part of the sword. Even though it’s shaded, nothing really stands out as unique about it.



With the addition of that solid colored gem in the middle of the hand guard, suddenly our magical sword comes together, this works because the image is balanced; it has contrast that is creating a focus point, just as I emphasized the text in this paragraph to concentrate your focus. It continues to fascinate me how the addition of solid colors can make such a huge impact.

You can also use highlights to put emphasis on certain areas as well for example:



Notice how the tip and the hand guard catch your eye.

As long as you are sensible about your color selections you shouldn’t run into very many problems, the only rules really are that you are happy with your work.

In the next tutorial I want to go more in depth with perspectives so that we can gain an understanding of 2d and 3d perspectives.

[Mister Jeether]

That is Neat.

[LohTek]

Part IV: Perspective

Hello again friend,

As I promised we will take a look at perspective today, I’d like to start by explaining dimension, it looks like this:



No, I’m not trolling you, as silly as this might seem, no matter how hard you try you cannot apply more than 1 dimension to a single point. In order to draw something we have to add dimension:



Here I’ve added width and height to create a square; this is now a 2 dimensional image, in order to create a 3 dimensional image I will need to add depth to this square:



With the addition of depth, it appears that this cube is now a solid object; I am tricking your eyes into believing that it has 3 dimensions but this is not a true 3d perspective, our eyes are telling us that something is wrong with our cube, that’s because a true 3d perspective begins at a single point; we refer to this point as a vanishing point. It works like this:





First we establish our vanishing point and the cube.



Now we draw our guide lines to the vanishing point, this establishes our depth.



We add the bounds; erase the guide lines and vanishing point. As you can see tracing to the vanishing point created a true 3d perspective, something interesting happens when we move this cube around:



The vanishing point establishes a horizon line, anything below it appears below us, and anything above it will appear above us. We can also move the vanishing point around.



This creates a different angle which we are viewing the object from. This technique is known as 1 point perspective, and we aren’t limited to just a single point.



This is 2 point perspective, there is also 3 point perspective but it isn’t used very often and is beyond the scope of this tutorial, you’re welcome to research it on your own however; there are plenty of tutorials about it.

If you observe objects in the real world, you will notice that the more ‘front on’ you look at an object the more squished the depth becomes, this is going to become very important when we come to understanding ¾ perspective, here is what I’m talking about:



As we turn the view to the side of the object, our depth becomes less squished. Though this isn’t a perfect representation, it’s enough to get my point across.

Lets take a look at some game perspectives starting with 2d overhead, this view generally does not contain any depth and it looks something like this:



As you can see, it’s just as the name implies, it is perfectly overhead and there are is no depth to the image besides some shading.

The perspective that Space Station 13 uses, as well as Colonial Marines is the infamous ¾ perspective; this perspective is seen in just about every RPG ever.



This perspective is kind of strange because the height and the depth both occur on the same axis, it works like this:



The depth is squished just like I explained prior, except the depth occurs on the same axis as the height.

The next perspective we’re going to look at is called isometric perspective and it’s likely that you have never seen this perspective before as it’s pretty rare in games. It works like this:



The depth occurs at a 30 degree angle, and is a fixed perspective. You may recognize this if you are an architect or engineer; it is the same perspective that is used for architectural and mechanical design.



This perspective is often mistaken for isometrics, but it’s actually known as planometric, it uses a fixed angle of 40 degrees in depth. This has been used for many ‘isometric’ style games as it is easier to produce than real isometrics.

With that, we have come to the end of this installment; you now have 90% of the tools that you need in order to create very high quality game art. In the next one we will take a look at texture work and how to make a repeating tile.

[manezinho]

Always a good read. Keep up the tutorials.

[LohTek]

Part V: Tiles

We’ve all seen tiles in games that are repeated throughout a particular area, the creation of them can be extremely complex if you don’t know the technique used to create them. For this example ill make a simple grass tile to showcase this process to you.

I threw together a quick tile in gimp it looks like this:


Not bad eh? Let’s tile it!



EWWWW, can you see those edges? That’s what we call a seam, it’s where the tiles meet each other, and it makes a really ugly line. How do we fix this? Well, we have to start over from the beginning and use a special technique to make the tiles wrap into each other.

The process begins by making the tile the same way we did before except simpler in nature:


You might notice that I avoided the edges as if they had the plague, this was intentional because our next step is to offset this image, we are going to take our edges and move them to the center of our tile. We do that by going into the Layer menu > transform > offset a dialog will popup:



You can manually enter your settings in the offset boxes if you choose, but gimp comes with a handy feature of a button that divides x and y by 2 for you, this is what we want to do, under the edge behavior we want the edges to wrap around so there is no need to mess with that. Simply click the button to Offset by x/2 y/2 and press the offset button to finalize it.

The result we get is this:


Notice how our edges are now in the center, we simply fill those blanks in with more grass sort of lines to continue the process.



Now that I’ve got this kind of thing going I’m going to add my shading.



Now that I’ve got some color back into it, I want to reverse the offset to check for any artifacts that came about; I use the same process as before.



I had a few mistakes that were easily corrected, with that done this tile is now seamless, but the proof is in the pudding as they say, lets tile it!



You can still see some of the seams; that is not a result of the technique, this came about because I am lazy. You will find that in complex tiles like this you will need to repeat this technique several times before you are happy with the results, it takes patience and practice to create a great repeating tile.

Welp that concludes this one, I’m running out of ideas what to teach you guys; so at this time I’m going to open up discussion for any questions you might have regarding your work.