Create 2D game assets with only a mouse in Krita


Assalamu’alaikum. Hi guys. My name is Widhi Muttaqien from Expose Academy. In this tutorial video, I want to show you how to create a 2D game asset which is a rooster spy character using only a mouse in Krita 4.2.9. Personally, I prefer to use a drawing tablet to draw anything digitally. But there are situations where you cannot find any and are forced to use only a mouse. Well, this tutorial might help you in these situations. Regards, Widhi Muttaqien

Video transcript:

Assalamualaikum. My name is Widhi Muttaqien from expose academy. In this tutorial video, I’m going to show you how to draw a 2D game asset using only a mouse in Krita. For this tutorial, I’m using the latest Krita version available which is version 4.2.9. Personally, I prefer to use a drawing tablet to draw anything digitally. But you may encounter situations where you can not use a drawing tablet. This is where the tutorial can help you. To be able to draw using only a mouse, you need at least 2 things. First, you are good enough with the mouse that you can do sketching with it even if it is just rough sketching. If not, you can do sketching using a pencil and paper, and then scan the image into your computer. Second, you need to be very good at vector editing. This is important because we need vector graphics to compensate for the lack of tools for creating steady lines. In this tutorial, I will assume you already have some basic vector skills in Krita. Alright.

Through video editing, you may already see the final result. But when I started, I only had an image in my mind of what I’m going to create. The original idea was to create a spy bird like the pigeon spy in the movie “spy in disguise”. After I searched online I came across this nice looking game artworks from macflaigames.com. I kind of like the rooster here, so I decided to create a rooster spy. Basically, it is just a rooster with dark eyeglasses and a tie.

Sketching

Let’s start with the sketching process. For the file size, I’m using a full HD resolution. I use a default pencil brush called “pencil 4 soft”. For this tutorial, I’ll be using only default brushes that come with Krita. So you don’t have to worry about downloading any custom brushes. I need to make the brush size smaller. We can drag or click here to input the brush size directly. Or you can press the “bracket” keys. I think 5 pixels is good enough. Just a reminder here. If you are using a mouse. The best way to navigate the canvas is by using the scroll wheel to zoom in and out. And then use the middle mouse button to pan around. Okay. And just draw the sketch using the mouse. I’m speeding up the video now as there is nothing new or important to discuss. As you can see, because we don’t have any pressure sensitivity, the lines are all uniform both in opacity and in thickness. Okay. After about 2 minutes of sketching this is what we have so far.

Base vector lines

Next, we’re going to create the base lines using vectors. For this purpose, it is a good idea to make the lines from the sketching process to be less obvious. To do that, first, we can activate the “alpha lock” button here. This is so anything that we do on this layer will not affect the transparency of the existing pixels. Then choose a bright blue color. Then press Shift + Backspace to fill the layer with the blue color. We can even make it even more subtle by reducing the opacity. Let’s rename this layer to “sketch”.

Next, because we want to create vector lines, we need a vector layer. Click on this caret button and then choose “vector layer”. When creating vector graphics in Krita, we can define the stroke thickness based on the active brush size. So press B to activate the brush tool. Right-click and then choose any brush that you like. To reduce the brush size we can use the bracket keys as we discussed earlier. But for now, as we only need 1-pixel value. It will be faster just to click here and then type1, then enter. Then press D to use the default colors or you can also click this small icon here. Next, activate the “Bezier curve tool”. And before we draw anything. Make sure in the “tool options” panel, the “fill” option here is set to “not filled” and the outline option is set to “brush”. And then we can start creating the vector shape by following the sketch. At the end of a shape, to finish up, you can press Enter or you can also hold Shift and then click anywhere on the canvas. It is okay if you don’t get the exact shape that you after at the first try, because we can use this tool here to edit it again. That’s the advantage of vector graphics. We can always go back and change things around. Now. Notice that this point doesn’t have any handles. This is because I created it using a click-release method. To add handles we need to convert the point type to a curve point. One way to do this is by right-clicking and then choose “make curve point”. Now we can have more control over the curvature. For this point, this is a curve point so it has handles. But it is a “corner” type point, therefore the handles are independent of each other. The diamond symbol shows that it is a “corner” type point. To convert this point into a “smooth” point, we can right-click like before, or you can simply hold Ctrl and then click on it. The point symbol will change to a circle symbol. Now we can move one handle and the orientation of the other handle will follow automatically. Again, these are some of the basic techniques you need to master first before you can truly utilize vector graphics in Krita to create any drawing. I will speed up the video again for now.

At this stage, we can still see several overlapping lines here and there. There are several ways that we can fix this. One way to do it is just by dragging the point so it touches the other curve and closes the gap. Another way to do this is by inserting points and removing unwanted segments. For example on the line that crosses the eyeglasses. First, make sure the shape is currently active or selected. Then to add a point at this location, you can actually do this by just double-clicking on it. But because our mouse is actually on top of 2 adjacent curves, double-clicking may create points on the wrong curve. In this scenario, it is safer to use the right-click method and then choose “insert point” here. Again, right-click here and then choose “inset point”. Then we can select this segment. Now, to remove this segment, you do not want to use Delete. Because pressing Delete will remove the surrounding points but then the path will reconnect itself. What you should do instead, is to right-click and then choose “break at segment”. So now the line is cut off like this. Basically, these are the techniques that I’ll be using to clean up the rest of the vector lines.

The last tip I want to mention in vector editing is the Z ordering or depth sorting. For example, I cannot select this path here. This is because although these shapes don’t have any fill colors, Krita still considers them to have fill-color areas. So if you have a small-sized shape that exists beneath another larger shape, it is almost impossible to select it. At least that is the case with the current version of Krita that I’m using. I hope the future versions will handle this issue better. For now, to get around this, we can activate the “select shape tool”. And then select the large shape that is blocking the selection. Right-click and then choose “send to back”. Let’s try selecting the shape again. Notice it is still being blocked by this large shape. Just right-click again and choose “send to back”. Now we can select this shape without any problem. Alright. As there is nothing new to discuss so I’m speeding up the video for now.

Coloring

Before we begin coloring. I did some adjustments on the vector lines off the record. I rotated the tie shape a bit. And I added this shape here. Also rotated the tail slightly and some minor adjustments on the curvature here and there. Alright. To add the color we need a paint layer. So click on this big plus button here and rename the new paint layer to “BC” which stands for “base color”. Essentially on this layer, we’re going to add colors using the fill tool. You can access the fill tool by clicking on the tool’s icon here or by pressing F on the keyboard. Now, if you have the fill tool active. Make sure you set this “limit to current layer” option to off. This is so Krita will take into account the vector lines beneath the current layer when filling in the colors. Then I set the threshold to 10 and the rest of the settings are like you see here on the screen.

Next, let’s pick a color for the comb and the wattle. This is most likely to be red. Then click here, then here, and also here. Then for the face area let’s pick an orange color. Then click here. I’m speeding up the video now as there are no new techniques to discuss. Alright. So this is what we have so far.

Line artwork

The next thing we’re going to create is the line artwork. For this, we can duplicate the base line layer by pressing Ctrl + J. Or if you forget the shortcut you can right-click and then choose this option “duplicate layer or mask”. And let’s rename this to “O” which stands for “outline”. You can use different naming conventions as long as you understand them and be consistent with them. Next, we want to move this on top of the base color layer. To do this you can either drag it with your mouse or by clicking this up button here. Next, use the “select shape tool” and select all of the shapes inside this layer. For the overall stroke thickness, let’s input 4 pixels for a start. Then select only the outer shapes that form the silhouette. Such as this comb part. Then the tail part. Anyway, you can select multiple shapes by holding the Shift key. Okay. Now for these shapes let’s change the stroke thickness to 6 pixels. I think we need more, let’s try 8 pixels. Okay, I think this is enough. As you can see, by just using 2 different thickness values, we can already simulate a more natural hand-drawn feeling on the line strokes. But we can do more than this. We can reduce the uniformity of the lines by adding sharp corners here and there. There are actually many ways that we can do this. One way to do this is by creating a new vector layer on top of the outline layer. And let’s rename this one to “OF”, which stands for “outline fix”. The basic idea is like this. We’re going to put only white-colored vector shapes in this vector layer. To make all of the white colors to become transparent as the output, we can group these 2 layers by pressing Ctrl + G. Let’s just rename this group layer to “O” again for “outline”. In Krita, a group layer encapsulates everything inside it, making it as if a single layer from outside. Which is a great feature for a non-destructive workflow. So at this group layer, we can apply a filter mask. And set the filter mask to “colors”, “color to alpha”. This filter mask will convert all white colors inside the group layer to transparent.

To give you a better understanding of how this works. If we turn the filter mask off, for now. And then, for example, we want to fix the eyeglasses area here. Use the Bezier tool. But for the fill color, set this to the foreground color. And for the outline, set this to “no outline”. Because we set this to “foreground” and we need to use a white color. We can click this to get the default colors, and then click this to swap the colors. Now if we create a shape, it will have a white fill color. And we can use this to erase the black vector lines. Like so. Now watch as I turn on the “color to alpha” filter mask again. As you can see the white area becomes transparent. This is possible because we set the white color as the key color for creating transparency. Basically now we can add white colored shapes in this layer to fix the outline. So, for example, we can fix this area. Make sure we are at the “outline fix” layer. Another example we can make the outline here sharp by creating a white shape to fix it. And another example here. Alright. I’ll speed up the video for now as there is nothing new to discuss.

Okay. You can add more style to the line artwork as you like. But for now, I will consider this as finished. Now, because we cut out some of the black outlines, we get some small color holes in those areas. We can fix this easily by going back to the “base color” layer. Choose a solid brush. Hold Ctrl and click on the color you want to use. Shift and click-drag the mouse to resize the brush. And just brush the holes to patch them.

Line artwork coloring

Currently, we have black line artwork in our drawing. If this is the style you are after then that is totally fine. But for this drawing, I want to make the color of the line artwork to lean towards the color of the fill area that it covers. To do this, first, create a new paint layer on top of it. Rename it to “OC” for outline color. Select both layers and then press Ctrl + G to put them all inside a new group layer. And rename the new group layer to “O”. Alright. The most important thing that you need to do for this to work is to activate this “inherit alpha” mode. With this, anything you put in this layer can only be visible if there are pixels that exist on the layers below it. For example, if I use a solid brush. Make the brush size bigger. And let’s pick a blue color. If you paint like this, notice how the blue color can only appear on the existing outline areas. Alright, so that is the basics.

Let’s zoom in on this area. Extract the red fill color by holding Ctrl and then click on it. Press K twice to make the color darker. And just paint on the outline area like this. I think the color is too dark. Let’s try this again. Hold Ctrl and click here. And adjust the color to be slightly darker. Okay, I think the color is just about right. Let’s use the same color for the wattle area here. And then in this area. Next, we can pick this color. Then make it darker. And just paint the outline color around this orange fill color area. I will speed up the video for now as there is nothing new to discuss.

Shading and highlight

Now we’re going to add shading and highlight colors to the drawing. Let’s create a new paint layer. Rename the layer to “S” for shading. Then because shading should darken the layer below it. Change the blending mode to “multiply”. Then we need another layer on top of the shading layer for highlights. Rename the layer to “H” for highlight. And then because the highlight color is supposed to make the layers below it brighter, we can change the blending mode to “screen”. Alright.

Now, let’s start with the shading color. You can use any selection tools available to constraint the brush strokes. But in terms of control, the “bezier curve selection tool” offers the best feature, especially if you need to create long curved shapes. I set the C letter key as the custom shortcut for the bezier selection tool. By default, C is actually used for the crop tool. But since I rarely use the crop tool and need to use the “bezier curve selection tool” more often. That is why I prefer to change the C letter key for the “bezier curve selection tool” instead. Basically, with this tool, you can create selection regions like you would use the bezier tool when creating vector shapes. Now, if you make a mistake, you can go back to the previous point by pressing the “backspace” key. You can press “backspace” multiple times if you need to. After you have a selection like this. You can remove unwanted selection regions using any available selection tools. For example, we can use the contiguous selection tool. In my setup, I use the W letter key to activate this tool. I want to make the selection result intersect with the existing selection. To do that we can click this button. And then click on this area. Oh yes, almost forget. You also need to make sure that the “limit to current layer” option here is off. This is so the underlying layers will be taken into account when calculating the selection result. After we have something like this. Press B to use the brush tool and choose the airbrush preset. Adjust the brush size as needed. Pick the existing color by holding Ctrl and then click. Then press K to make the color darker. Now, notice if I draw a brush stroke like this. The resulting color is very opaque. Remember, we are only using a mouse now, so the brush strength is always at its maximum. To compensate this, we need to reduce the brush opacity to around 10 to 20 percent. We can do this by pressing “I” multiple times. After that, we can apply the brush strokes on the selection region multiple times. We need to do this due to the absence of a pen pressure feature. And continue creating the rest of shaded areas. Now, to add more selection to the existing one, we can press this icon here, or press A on the keyboard. Press W to activate the contiguous selection tool again. Use intersection mode. And click in this area. Use the brush tool again with the airbrush preset. And just like before, apply some brush strokes to create smooth shading inside the selection region. So we have something like this.

If you want to smooth out the shading colors even more. You can blend the colors using this brush preset called the “blender blur”. Sorry, the strength is just too much as we only use a mouse. Let me undo this. And reduce the opacity of the brush to only 20 %. Now we can smooth out the shading by basically blurring the pixels. So that is how you add shading colors and or highlight colors to the drawing. I’ll speed up the video now as the process is essentially the same. However, for the highlight colors. Remember to create them in the highlight layer. Not in the shading layer.

Cast shadow

The next step is to add cast shadows to our drawing. Imagine we have sunlight coming from the left top direction. The sun rays hit the head and casting shadows onto the body. Also from the body to the tail area. And also from the body to the legs. Before we begin. If you guys think that the existing shading colors are too weak. You can always double the effect by duplicating the layer. You can press Ctrl + J to duplicate the layer. You can play around with the layer’s opacity. But for now, I will leave this as is. For the cast shadows, let’s create a new paint layer and rename it to “G” which stands for global shadow. Because it is a shadow, we need to use the “multiply” blending mode. Then use the “bezier selection tool” to create the shadow region. For this, you just need to use your imagination. If the light rays coming from the top-left area and slightly at the backside. Where would the shadows be? The goal here is not to be scientifically accurate. Because that is just impossible to do. You only need to create nice looking shadows that are possible to exist in common sense. Just like before we can clean up the selection using the contiguous tool.

Use the brush tool and the airbrush preset just like before. But now we’re going to use the sky color for the shadow color. Adjust the brush size. Then add the shadow gradually by stroking multiple times. Try to make the right-bottom part darker than the left-top part. Next, we can smooth out part of the shadow border using the “blender blur” brush. For this part, I think I want to push the pixels to the left just a tiny bit. For this, we can use the “blender smear” brush. Oops, this is too strong. We’re only using a mouse so we need to bring the opacity down quite a bit. I think 30% will do. Just push these pixels slightly to the left. I think this area needs a bit more blurring. And that is basically how you do it. I will speed up the video for now.

Rim light

The last step in our workflow is to add rim lights or also known as backlights. I already talked about rim light or backlight in the other video. Basically, we use this type of lighting to strengthen the presence of an object against its surrounding. Especially if the object is in a dark environment. Backlights can help a lot to define the object’s silhouette. I know we only have a white background now. And we don’t have any visible light sources that logically emit the rim lights. But you should be able to add those later by yourself. Alright. So, create a new paint layer. Rename it to R for “rim light”. Because rim light is a form of highlight, we need to change the blending mode to screen. Then just like before. Use the “bezier selection tool” to create the initial selection region. Like so. Then use the contiguous tool to clean up the selection region. Use the brush tool and the airbrush preset. Adjust the brush size. Use a bright color such as this cyan color. Then add the highlight gradually by stroking the brush multiple times. Try to make the outer part brighter than the inner part. And as always, we can smooth out the highlight border using the “blender blur” brush. You can also push and pull pixels using the “blender smear” brush if you need to. For the rest of the rim light, we basically just use the same technique over and over again. So I’m speeding up the video now.

Alhamdulillah. Finally, the drawing is done. What is so great about this workflow is that it is modular and non-destructive. So you can tweak it as you like to fit your own drawing style. If you are interested I provide the project file for this tutorial, which is a native Krita file format at Gumroad. The link is in the description below. Any sales from this page can really support me to create more quality contents in the future.

Okay guys. If you want to learn more about computer graphics. Perhaps you want to jump into the video game industry. Or perhaps you want to create digital assets that can generate passive income. Or you want to have a career doing something you really love. Or become an entrepreneur in the creative industry and build your own design firm. Or maybe you just want to learn CG as a hobby. Then you should check out my courses at Udemy or at Skillshare. The links are in the description below. Currently, I have courses in Blender, 3ds max, Photoshop, Adobe Illustrator, and Krita. And more to come -in sha Allah-. All of these courses will guide you from the very basic, step by step, until you can master the skills that you need. As always, subscribe to my channel. Share the video. Give a thumbs up if you like the video, and give a thumbs down if you hate the video. Check out my other tutorials. Wassalamualaikum.