Coloring black and white manga icon

Posted on September 10, 2005 at 01:55 am under Tutorials and Tips

Software Used: Adobe Photoshop CS

Someone requested a coloring tutorial after I posted a few colored manga icons, and since I haven’t written tutorials in a while I figured I’d give this one a go. There are many different methods when it comes to coloring an image. The way that is covered in this tutorial is quite easy for giving quick colors, though it probably works best when working on a smaller scale- mainly because a lot of detailed coloring work is omitted. On a larger scale project, the same methods can still be applied but you’d probably have to be much more meticulous in the process.

Here’s a fairly simple one we’re going to do, using a NANA manga scan:

=

Step 01: Getting Started with the Areas to Color

First, find a black and white drawing or manga scan. I’m going to assume you know how to do all the resizing and standard editing to obtain your base so I’m going to skip all that redundant info. For the sake of this tutorial, I chose a clean NANA manga scan, and this will be the base I’m starting out on:

A little on methods and tips of selection

To begin coloring, we’ll first need to select the areas we want to color. To do this, you can use either the Lasso Tool (L) or the Magic Wand Tool (W) to aid you in selecting those areas.

For the Lasso Tool, I personally like to work with the Polygonal Lasso best- mostly because I find it gives me the best control.

The Magic Wand Tool is also quite spiffy.

So which one should you use? It’s up to you and which tool you’re more accustomed to, really. Usually, if the image I’m coloring has a lot of gray shading, I use the Polygonal Lasso but if it has a clean solid area, then I use the Magic Wand. The following are some tips to keep in mind:

• TIP #1 When using the Magic Wand Tool, setting the Tolerance level for your options is sometimes key in helping you select the areas you want. It basically specifies the color range- so lower values would select colors more similar to the pixel that you click, while higher values will select a broader range of similar values.
• TIP #2 To easily add on to your selection if you can’t get it all in one go, just hold down the Shift key as you go. You should see a + sign appear next to your tool when you hit the Shift key. That means it will add on to your selection as you click without needing to start over. Likewise, you can also hold down the Alt/Opt key to take away parts of your selection. Instead of the + sign, you’ll see a – sign appear.

Let’s do the actual selection now

Because I want get the foundation of the image done first, we’re going to begin with coloring the face, neck, and ears since those are the main skin base areas. For the face and neck, I decided to go with the Magic Wand Tool.

Select the areas you want by clicking on it, and remember you can add on as you go. For the tolerance level, I chose around 5-10 to work with. Here’s an example of how the image looks like after the selection is made (I forgot to screencap the image with the ears selected, but you get the idea):

Now that we have something selected, we can move on to the next step.

Step 02: Coloring Your Selections

Before we begin coloring, create a new layer on top of the original base image while your selection is still in place. We’re going to add the color on this new layer, because it’ll be easier to edit or make changes later.

• TIP: It may seem like a hassle to keep creating layers, but creating a new layer for each area that you color is a smart practice to adopt that will make your coloring process easier later on. Since the colors are on separate layers, it leaves room for mistakes and changes, easy layer blending adjustments, or for checking on variations. All in all, you should leave your original image base completely untouched so that you’ll always have the original to revert back to.

Let’s pick a color you want to use for your skin and fill your selection on the new layer. I filled it with #F1E0BD and now I have this:

Making adjustments to the color

I thought it was too dark so I lowered the Fill Opacity of the colored layer to 80%. The color is also a bit muted and the black lines of the drawing is kind of drowned out, so we’ll fix that now. I changed the blending options of the colored layer to Multiply so that the black lines will show through sharper. No graphic illustration here, but you’ll get to see the results in the next part!

You can try testing out other blending options to see if there’s another one you like better too. Some give a rather interesting result.

And let’s continue coloring

Now that we’ve got the face, neck, and ears colored- we want to change the color of her lips as well. So select the areas as we did back in Step 01, except you’ll be selecting the lips this time. For this task, I chose to go with the Polygonal Lasso Tool because I wanted it to be more precise.

With her lips all selected, we will create a new layer on top again so that we can fill that new layer with the color you want for her lips. I chose #993B43. Don’t forget to cut out the mouth opening part or she’ll have some fat lips indeed. Below, I’ve listed two ways that you can achieve this:

• METHOD #1 Trace the entire mouth first and fill it with color, then go back to select the mouth opening area only. Delete that part, and fill it with another color of your choice while your selection is still in place.
• METHOD #2 Trace the entire mouth and after you have it selected, press and hold down the Alt/Opt key. You should now see a – sign appear, which means you can now go back to trace the mouth opening area in order to deselect it. With that done, you can fill the lips without filling the mouth opening as well.

With the lip coloring done, you might think it looks rather flat. Again, the layer blending options comes to the rescue. There are several choices you can go with, but I eventually chose Hard Light since it gave her lips a nice shine. Then I lowered the Fill Opacity of her lip color layer to 87% so that it’s not so dark. And so far, we have this:

And we’re pretty much done with the main part of the subject for now. The rest is all a breeze. By the way, you can color her eyes using the same selection method if you want. But for now, I’ve decided to leave it alone.

Step 03: Utilizing Gradients for Backgrounds

We’re going to move on to the icon’s background now. For that, I’m going to take the easy way out and use a gradient on a new layer. I picked a color I wanted to use- in this case, it’s some orange shade I randomly eyedropped:

After getting the gradient on a new layer, play around with the blending modes to find the one you like. I eventually settled on Linear Burn.

Since I only wanted that coloring on the background area of the image, I used the Eraser tool to erase away all the areas I didn’t want the color applied. In this case it’s her face, body, and anywhere else that isn’t the background. After that’s all done, here’s what I got:

At this point, your image should be relatively colored compared to what you started out with. Some may like to stop here, or perhaps you can finish up by touching up any detailed areas- especially if you’re working on larger images. For the purpose of this tutorial, we’re moving on to trying other ways to spice up the coloring.

Step 04: Utilizing Textures for Additional Effects

If you want, you could always add textures to give it more depth or effect. I decided to use one of my light textures from the Monochrome Spotlights Set. Paste the texture as a layer on top of all your other layers:

Set the layer blend mode of texture to Lighten.

The lights are kind of obstructing her face so I erased away those parts. Then I felt like adding another light texture from the same aforementioned set:

Set the layer blend mode to Lighten and lower the Fill Opacity to 84%.

Note: I had actually flipped the direction of the texture when using it for this image. To do this, go to Edit > Transform > Flip Horizontal.

And again, I erased the parts of the light texture that I didn’t want- leaving us this result:

Step 05: Utilizing Brushes for Additional Effects

Yes, we’re going to crowd the icon even more. Just to give you ideas. We’re going to use a flower brush by my_wonderful:

I used this brush on a new layer, applying it to the bottom left corner and a little bit on the top right corner with the color #5C1016, set to Hard Light blend mode. I didn’t think it was bright enough so I duplicated the layer to give it more color. And now we have this:

At this point, I’m mostly done with the coloring via brushes and whatever else. The rest of the steps are just extra tips and finishing up touches.

Step 06: Adding Borders, Text, and Finishing Touches

Some quick steps explanation

To finish up, I threw in my text and then just for fun, I also added a black border on the top portion of the icon. You can do this with the Rectangle Tool. Then I created a new layer, added a 1px border via Stroke. I played around with the Opacity and erased off areas of the border where I thought was too prominent.

Are we done? Something missing? It’s really rather subtle, but I realized that I didn’t want the lines of the drawing to be so black. To fix this a little, I adjusted the Hue of my original base at the very bottom layer via Images > Adjustments > Hue/Saturation. I played around with it a little until I got the shade I wanted. I can’t remember the exact specifics...but I basically turned it dark blue rather than black.

After all this, I still felt it looked a bit off. I wanted the contrast of the drawing to be darker because parts of it still seemed like a pencil drawing, so I did a quick fix by adjusting it via Images > Adjustments > Brightness/Contrast. Mostly, I just increased the contrast.

At this point, I wondered if I should color the eyes but then I thought it was okay dark like that with a super slight hint of blue so I left it alone. As I’ve mentioned earlier, many detailed work isn’t as important here because we’re working on such a small scale. If it was a larger image, we’d have much more fixing to do. In our case, this is the final product:

And so we’re finally done. I hope you found this helpful!

Conclusion & Quick Tips

Remember, this tutorial was made to give you an example of the different ways you can quickly add some color to a black and white drawing the easy way. You don’t have to pile everything on, and in some cases, you’d probably have to do more detail fixing. Once you get the basics down, it’ll become much easier to add on details like shadows, etc.

To give you an idea of more basic applications, here are two more icons that were made using the same kind of coloring techniques covered in the tutorial:

This tutorial was originally written on my graphics journal at LJ. If you’re from LJ and you have any questions, you’re always free to ask or comment at the post over there as well.

Update!

October 23, 2006: I am now also accepting comments here, so I recommend asking here instead of over at LJ if you have any questions. The version of the tutorial over there is actually older so it might not contain certain information that the one posted here would.