Fandom Forums

Fandom Forums (
-   Graphics Design (
-   -   Tsuna's Manga Coloring Tutorial (

Tsuna 08-29-2007 04:49 PM

Tsuna's Manga Coloring Tutorial
First things first:

For this tut, you will need to have Photoshop. The version I am using is CS2, but it should work with other versions as well. You will not need to install any brushes or extras or anything like that.


Brush: When I say, "brush", I don't mean to select a brush. "Brush" in the context that I will use it means to take the "dodge" or "burn" tools to add shadows or lighting.
Burn: "Burn" is the tool to add shadows to a color. You'll be using this tool a lot, just like the "Dodge" and "Smudge" tools.
Channels: A "channel" is something you can also think about in terms of layers, except each layer has a certain duty to perform, a certain color to retain. In most cases, there will be four channels. The RGB channel, the Red channel, the Green channel, and the Blue channel.
Dodge: "Dodge" is the tool to add highlights to a color. You'll be using this tool a lot, just like the "Burn" and "Smudge" tools.
Eyedropper: The "Eyedropper" tool is very important in its own way. It allows you to pick up colors from other places so that you can match them, just in case you had used another color and had to go back and use the same one again. (For example, say you were colouring Naruto's hair and went to his eyes, but then forgot to color his eyebrows. You'd want the color to match, so you would select the eyedropper and click his hair to get the same color again.)
History: Your "History" is the record of your actions in Photoshop. With this window open, you can go back to previous steps if you made a mistake, but be aware that going back to fix a mistake means that you lose any progress you may have completed beforehand.
Layer: A "layer" is a very important tool in Colouring. Unfortunately, they're hard to explain, but also, exactly what they sound like. Think of being in the winter, and wearing many different layers of clothing, one on top of the other. That's exactly what this kind of layer is like. You put one layer on top of another, and if one layer is below another, you may not be able to see it. Hopefully, by the time you finish this tutorial, you will have a general concept of the purpose of a Layer.
Navigator: This tool, located on the top right hand side of your Photoshop display, allows you to see a minaturized version of the file you have open, and also, a notch on a sort of "scale", that allows you to zoom in and out of your image. This is very helpful, and we may use this a lot.
Paintbucket: The "Paintbucket" is how you will distribute base colors to the image.
Polygonal Lasso: This tool is how you select the area that you are going to color, such as an eye, or perhaps the mouth or hair. The Polygonal Lasso is one of the most important tools you will use.
Selection: "Selection" is the area you have selected to work in for the time being.
Smudge: The "Smudge" tool is what you will use to blend the colors together after you have added shadows and highlights to "refine" the colouring. This is an important part of the colouring process, and most likely will be the tool you use the most in this tutorial.

That's all for TOOL Vocabulary. If any other words come up in the tutorial, I will explain them on the spot. These are just the important ones.

Now, the real tutorial will begin.

Tsuna 08-29-2007 04:51 PM

Re: Sugoi's Manga Coloring Tutorial

Scroll up and save the image of Naruto if you have not already. You can name it whatever you want, as long as you know where to find it. Then, if it isn't open already, open Photoshop. Click Open, and select the image you just saved.

Now that the file is opened, look to the bottom right hand corner in the box where it "Layers". Click on the tab labeled "Channels". You will see four channels--RGB, Red, Green, and Blue. Select the Blue channel, and either right-click and select Duplicate Channel, OR, click and drag the Blue channel to the Create New Channel icon. Both methods will produce the same result.

Your Channels window should now look like this:

Return to the Layers tab.

Create a New Layer. You can do this by either going to Layer > New, or simply entering the shortcut Ctrl + Shift + New on your keyboard. Name this new layer "Lines". With Lines still selected, go to the menu and click the Select drop-down menu. On the drop-down menu, select Load Selection. Select the following settings:

Click OK.

Switch to the Background layer. Either using Paintbucket or the Brush tool, color it white. All of it. Make sure the BACKGROUND LAYER is selected. Go back to the Lines layer, and, using the Paintbucket tool and the color Black, click once. Your Layers window should look like this:

The black lines and colored parts of the image have all been transferred to the Lines transparency, leaving YOU to color in the white areas without having to worry about coloring over the lines.


Tsuna 08-29-2007 04:52 PM

Re: Sugoi's Manga Coloring Tutorial

Go back to the Background layer.

For this part of the colouring, we're going to be coloring in the main parts of the image (eyes, skin, hair, etc) with base colors. Base Colors are just the start of a coloring. It means that you're only just getting the colors straight, and will add shading later. Base colors are solid colors--no shading, no lighting, nothing. They're very simple.

It's easiest to succeed when coloring if you have a seperate layer for each color. Such as a layer for "Skin", "Eyes", "Mouth", and etcetra. I usually start with the Eyes, so that's what we're going to do now.

Create a New Layer, and name it Eyes.

Remember, it's important to label your layers. Otherwise you won't know what layer you're working on.

The Layer named "Eyes" should be beneath Lines and above Background. If it's not, click and drag it so that it is. A simple trick: Before creating a New Layer, select the Layer that you want to appear BELOW the layer you're creating. That way, it will always end up where you want it to, and you won't have to re-position anything.

Keep the Eyes layer selected. Choose the Polygonal Lasso and click anywhere outside of the image to deselect it.

Go to the color picker. You can do this by double-clicking on the Black or White square in the Toolbar. Choose a nice blue, or you can use the same selection I did by inputting the numbers you see in the boxes:

Using the Polygonal Lasso, select one of Naruto's eyes by outlining them. (With the polygonal lasso, you will need to click, release, move to a new point on the line, click, release...and so forth. Those with smoother mouses may use the regular Lasso, with which you only need to click, hold, and outline. It can be a lot harder to control though, and I don't recommend it for beginners.)

You may need to zoom in using the navigator. Paintbucket the selection once it has closed. It will look like this:

Do the same with the other eye. Move the boxes or zoom out if need be.

When you're done with that, create a new layer labeled "Skin" and deselect the eye if you have not already. Make sure that the Layer for Skin is BENEATH the layer for the Eyes. Select Naruto's face with the polygonal lasso. Don't worry about the mouth or the eyebrows for now, we'll be making other layers on TOP of the Skin layer to color those.

When selecting a color for skin, go down to the ORANGE in the Color Picker and click near the top left. Play around with it until you get a suitable skin tone. Skin tones will vary depending on the character. For instance, Sasuke is paler than Naruto. You can also use the same settings I chose by going to the Color box and entering the following:

R: 252
G: 224
B: 165

Use the Paintbucket to color the selection.

Create a New Layer above the Skin layer and label it Mouth AND White. This will be used to color in the mouth and the whites of Naruto's eyes. Because the Blue of Naruto's eyes is colored in a layer above the Mouth and White layer, you can just select the entire eye and color it white without worrying about excluding the eye from the selection. The end result should like this:

Now for the tricky part--and this may take a while. Select his hair. Don't be worried if you have to do it in more than one go, such as the majority of his hair in one selection, his sideburns, the hair along his neck, and each of his eyebrows. Pick a nice yellow for his hair, but not too bright, and not too dark. We don't want it burning the eyes, and we definitely don't want it looking dirty. A nice setting for his hair is:

R: 254
G: 226
B: 36

Now, create a new Layer and name it "Gray". We'll do the metal plate of his headband and his zipper in this layer. It's the same story as before--select the area, select a nice color for gray, and paintbucket. It's very simple. Here's a nice setting for gray:

R: 237
G: 237
B: 237

It should look like this when you're finished:

We won't worry about the trees, it's not important. Congrats, you've finished the base colors!

Tsuna 08-29-2007 04:53 PM

Re: Sugoi's Manga Coloring Tutorial

This is where things get difficult, and this is also where you'll be thankful you made different layers for each color. They'll be very useful with the smudging process. Focus on one thing at a time and don't get too carried away. Other than a few pointers, there's not much I can do to help you here. You have to imagine a light source, and that's something you have to do for yourself. I can, however, tell you the basics.

Burning makes the color darker. Like so:

Dodging makes the color lighter. Like so:

Note how the color of the eyes change.

Use the smudge tool to blend the light and dark areas together, but be careful.

Sometimes, smudging won't make much of a difference--like in the case of Naruto's eyes. But other times, like in the case of making the skin appear more lively and toned, smudging is key. Try to make the colors blend together as well as possible, and remember that not one size tip diameter (the size of the "brush") will do every job. Sometimes the diameter will need to be bigger, and sometimes it will need to be smaller.

The way you shade, highlight, and smudge affects the ending result of your coloring. Be as detailed as you want to. More details are always good, but don't get in over your head. But also, don't expect yourself to be amazing the first time around. No one is. You have to practice in order to get better, and practice hard. I've been coloring for nearly a year now, so my coloring will probably look a lot better than yours will if you're just starting out. Don't expect yours to be identical to mine, or to anyone else's. Everyone has a different style, and this tut isn't designed to make you color like me.

This tut was designed to give you a general concept of how to get started on a coloring, how to shade, how to lighten, and most importantly, how to get acquainted with the technique of coloring. Step 1 may have seemed long and tedious, but trust me, if you continue coloring, and continue to practice, Step 1 will become second nature, and only take a few seconds to do.

The polygonal lasso may be difficult to master at first, and it may take you hours just to complete a small coloring like this one. But with practice comes skill, and the lasso is no exception to that. With practice, you will become faster, and your colorings will not only take less time, but they will get better.

The most important thing to do is to not give up. No matter how bad you might be at the beginning, practice will always make you better. Just like in other areas of art, like drawing, for instance--if you start with stick figures, practice can help you make beautiful sketches and portraits.

It's the same with coloring, with sig-making, and any other area of art. You can get nowhere without practice, and especially not without determination. No colorist ever made it to where they were by giving up, or just suddenly was "born" with that talent. They may have started off a little better than you did, but they still had to practice to get to where they are today.

No matter what, keep practicing. There's always room for improvement.

Note: You don't have to make the background trasnparent on your colourings. I did that for practice.

Also; you should try finding better quality images for most of the colourings you do. This was just something quick and simple for the tutorial, but it's better to get high quality scans than to just go with what's there. On a side note, the black is left unshaded because I think it looks better that way. If you want to shade the black, all you have to do is create a new layer above the Lines layer and select the areas you want to color.


OffTheChain 08-29-2007 05:45 PM

Re: Sugoi's Manga Coloring Tutorial
woah girl. someone indeed has been practicing.

gibigbig 08-29-2007 05:48 PM

Re: Sugoi's Manga Coloring Tutorial
superior tut, wish a bigger manga extract was used though

Tsuna 08-29-2007 05:50 PM

Re: Sugoi's Manga Coloring Tutorial
I may add a bigger one sometime, but I wanted to use a smaller one for this tut because I was helping out someone (Mystik) who seemed to be confused as to how to color. I wanted to get the tut to them as soon as possible, and I knew that with a big full-on manga page, I probably would just get bored with it and end up never getting to it at all. xP

Tsukuyomi 08-29-2007 05:51 PM

Re: Sugoi's Manga Coloring Tutorial
thx for this tutorial i suck at coloring so this might help.

Jaxon 08-29-2007 06:06 PM

Re: Sugoi's Manga Coloring Tutorial
Good. I can already colour, and I got something from this.

Sharingan Lord 08-29-2007 08:24 PM

Re: Sugoi's Manga Coloring Tutorial
EDIT: Unfortunately, I can't. I have to spread more rep around. *groans*

ITzANIllUZion 08-29-2007 10:54 PM

Re: Sugoi's Manga Coloring Tutorial
nice tut... (i dont like tuts..i like to learn by trial and error)..
also wouldnt it be clean the scan before coloring...

Tsuna 08-30-2007 02:33 PM

Re: Sugoi's Manga Coloring Tutorial

Originally Posted by ITzANIllUZion
nice tut... (i dont like tuts..i like to learn by trial and error)..
also wouldnt it be clean the scan before coloring...

Yes, it would, but for one; I don't know enough about cleaning to have the right to make a tut about it. And for two, the scan was actually a lot worse in terms of quality beforehand. I did however adjust the Curves setting a bit to make it a little better. As for actually cleaning it (like that crap in the top left corner), I would barely know how to do it myself, let alone teach someone else too.

Hence the "you should find high quality scans for your colorings" part.

Mystik 08-30-2007 02:38 PM

Re: Sugoi's Manga Coloring Tutorial
great tut i can't wait to try it

Maverick 08-31-2007 07:02 PM

Re: Sugoi's Manga Coloring Tutorial
Lol i might try this out to if i ever have the time xD

gaaraofthesand.1234 10-08-2007 12:16 AM

Re: Sugoi's Manga Coloring Tutorial
I have a question, how much is that version photo shop, and where can i get it?

All times are GMT -4. The time now is 12:48 PM.

Powered by vBulletin® Version 3.8.3
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.