Draw Nagi Sanzenin With Me Part 2: Digital Lining And Coloring In Photoshop

Before we begin, I'd like to thank and acknowledge everyone who took part in the previous tutorial and showed me what they've done including mikey, kikered, denzil and quite surprisingly... my mother, who has never drawn anything more than a stick figure her whole life. Here are some of their works:

By Denzil

By my mother

Previous tutorials
1. Draw Nagi With Me (Harder Version)
2. Draw Nagi With Me (Easy Modo)

Looks like most of you did the easier part 1.5 tutorial... which is all well and good. For this tutorial however, I'll be using the more complicated Nagi sketch that we've done in the first "draw with me" tutorial. Naturally, you can apply these techniques if you drew the image for the 1.5 tutorial as well.

We're going to need the image either scanned in or just a digital photo taken with your cellphone camera or whatever you can use to get the sketch into your computer. Trust me, it doesn't matter if we're going digital. 

What You Will Need
Adobe Photoshop 7 or higher. I'll be using CS4 for this tutorial, but trust me when I say that Photoshop 7 will work for this as well. You can also apply the techniques you learn here using any tool of your choice. Also, you won't be needing a tablet for this tutorial.

Digital Lining
First of all, you'll need to open the image in photoshop... but even before that, you'll need to know how to manipulate the Pen tool. So in Photoshop, either press "P" on your keyboard or just click on the pen tool to activate it on your toolbox.

With the pen tool activated. Make two points on your canvas by left clicking on two separate areas of the canvas as shown here.

Now make a third point in between your two points. This is the node that you can use to bend and adjust the line.

In order to bend the line, you just hold down ctrl on your keyboard and then left-click and drag with your mouse and you'll notice that the line will bend in the direction that you drag... this is how you adjust lines with the pen tool in photoshop.

Notice those two small anchor points next to the larger node in the middle? You can use those to adjust the curvature of the line as well. Also, you can add another node to the line if you want to adjust it to have say an S curve. You can add as many nodes as you can fit in-between the line, but I would advise against this.

To make a new line elsewhere, just ctrl+left click on a blank part of the canvas.

Now, using this technique, we're going to do the lineart for our Nagi fanart.

With the image opened up in photoshop, make sure that you can see your layers/this window. You can see here that the drawing layer is automatically called your background layer. We're going to create another layer on top of that, which is where we'll be placing the digital lines.

Click on the icon to create new layer as shown here. The layer will be called "LAYER 1" by default but you can right click on the new layer and go to "layer properties" if you want to rename it to something else like "LINES."

Now we're going to apply the pen tool manipulation techniques that I taught you earlier to go over the lines of the image. When lining the hair, just make sure that you create separate lines for each line that you used for drawing her hair. You can use continuous lines for the rest of the drawing. Also, make sure that you do NOT line any shadings that you might have made. We're not going to trace the lines for her face just yet as well. You can press ctrl+ or ctrl- to zoom in/out while you're tracing the lines over. Do your best, and may the RSI be with you!

You can delete any wrong lines you might have made by ctrl+clicking on the line and then pressing delete on your keyboard. You can use the circle tool on your side toolbox. For tracing the button on her outfit. It looks like this.

Once you're done with tracing the lines, go to your layers window and make the "background layer" active by clicking on it and then create a new layer. Press G on your keyboard to activate the fill tool and fill the new layer that you've created with white by clicking on the canvas. Now you can see the lines that you've made so far and make any corrections that you see fit. Your work area should look something like this now.

Make sure that your lines layer or your "layer 1" if you didn't rename it is now the active layer by clicking on it. It should be highlighted in blue as shown here.

Change your foreground color to black. We're gonna use black to line the drawing although lighter colors such as red and brown are also good options.

Press B to make the brush your active tool. Make sure that it's set to 2px and 100% opacity like so:

Press P to make the pen tool your active tool. Now right click anywhere on your canvas area and click on "Stroke Path." A dialog box will appear. Make sure that it's set to "brush" and that "simulate pressure" is checked and click on OK. Now you've set the preliminary lines... but we're not done yet.

Press B to activate your brush tool again and this time, set the brush to 1px still at 100% opacity. Now press P to activate the pen tool and right click>stroke path again. This time, uncheck "simulate pressure" and click OK. Your lineart is done! Press delete once to get rid of the vector lines and your image should now look like this!

Next up, we're going to make her face on a separate layer just below the lines layer, so create a new layer underneath the lines layer like this. I've named the layer as "facelines"

Click on the "eye" icon next to the white background layer (which might be  called layer 1 or layer 2 depending on how you've named things) to make it invisible. Make sure that your "facelines" layer is still the active layer or the one highlighted in blue.

Now we're going to make the eyes and other facial features. Your foreground color should still be black. Use the pen tool (press P on your keyboard) and trace in the basic shapes of the lines you used for the eyes. Make sure that you are drawing complete shapes because we're not going to do "stroke path" this time. Make sure that you're making complete closed shapes with to trace the lines for the eyes like so.

You only need to trace the shapes of the lines in one eye for this because we're going to be using a "dirty shortcut" that a lot of digital anime/manga artists (myself included) like to use.

Ok now with your lines in place, CTRL+Click on an empty part of the canvas and right-click>fill path with following settings.

Click on OK and the eye should now be lined. Press "delete" on your keyboard to get rid of the paths. Your screen should look something like this.

Now for the "dirty trick." Press ctrl+J to make a copy of the "facelines" layer that you just finished lining. Now press ctrl+t and then right-click>flip horizontal on the image.

You'll notice that the "facelines copy" layer has now been inverted. Now all you have to do is press the right arrow key on your keyboard until you get the new inverted layer in the proper position based on your sketch.

Now line in her mouth and nose using the same method on the new facelines copy layer. Once you're done press ctrl+e once in order to merge the facelines and facelines copy layer. We're now done with the basic lineart. Click on the blank icon next to the white background layer to make it visible again so you can see what your new clean lineart looks like. We won't be needing the sketch anymore at this stage. Check that your work area now looks like this.

Laying Out The Flat Colors
Laying out the flat colors makes use of the same principles that I taught on lining the facial features. First, create a new layer for the haircolors, which I've named as "haircolors" right underneath the lines and facelines layers but above the white background layer.

Using the pen tool again, trace the entire shape of the hair (we're going to use "fill paths" again). And then choose a yellow foreground color and fill path when you're done. You should make one continuous shape with the pen tool like I've done here before you use "fill path"

After you've filled the path and deleted the paths that you've made. Nagi should now have her iconic blonde hair like so. Take note of the placement of the layers.

Create a new layer underneath the haircolors layer for her skin and repeat the process to color in her skin. The good news is that you can allow your paths to overlap the haircolors layer since your new skin layer is found underneath the haircolors layer. Like so...

Repeat the process of creating a new layer and coloring it in with the appropriate shade underneath each layer wherein a new color is required until you've finished coloring in all the flat colors on her. Once you've finished everything, your image should now look like this.

Adding Shadows
If you're not used to this, then you are probably getting mentally exhausted at this point. I'd suggest taking a little break and saving your work and coming back to this tutorial when you're mentally refreshed.

Ok, now for the shadows. It's quite simple. I'll use the hair as an example. Create a new layer on top of the hair layer and then right click on this new layer and click on "create clipping mask" so that the new layer is a clipping mask of the hair layer. This new layer will be your shadow layer. If you found that a bit hard to understand, then just refer to this image and make sure that this part of your layers area looks like this.

Now for the shadow color, choose a foreground color that is slightly darker than her current hair color. Use the pen tool again and create the shapes that you will be using for your shadows and then use "fill path" and her hair now has shading! When creating shadows, just be safe and make sure that you create shadows where you believe the light does not fall. Here's how I laid out the shadows on her hair.

At this point, you can also add in the highlights for her hair on the same shadow layer. I personally create another layer with a clipping mask just to be safe. Repeat the process for adding shadows to each individual color on the image and you should come out with something like this. Remember to be safe and just place shadows in areas where you're absolutely sure that light won't fall on. As a rule of thumb, don't place shadows if you're not sure.

Once you've finished adding in the shadows, you should have something that looks like this. Feel free to use my shadow placement and colors as reference.

Coloring In The Facial Features
For the final part of this tutorial, we're going to color in the facial features. First, you should make another new layer underneath your facelines layer as shown here. I've named the new layer "facecolors" for easy reference.

Now create paths to color in her eyes and choose the appropriate shade of green as your foreground color. Just use "fill path" when you're done. I'll be starting with the lightest color for her eyes. At this point, you can also color in her mouth with the appropriate shade of light-red. Again, take note of the active layers here.

Create a new layer and right-click "create clipping mask' on top of your facecolors layer and add in the darker green shadows still using the pen tool>fill path method. You may also want to add in some darker shadows for her mouth.

Create another new layer on top of your clipping mask layer and again, right click>create clipping mask and create some even darker shadows inside her eyes.

Now add in the lens flares by creating another layer on top of your current layer and right-click on the new layer>create clipping mask. Using the pen> right click>fill path method to create the appropriate shapes for the lens flares.  Her lens flares look something like this in season 2 of the anime.

Finally, we're in the home stretch. Create a new layer underneath the facecolors layer. I called mine eyewhites and use the pen>fill path method to fill in the whites of her eyes.Take note of the layer placement here once again.

Now we're going to add in the shadows. First, click on lock-transparent pixels, which is the little icon on top of the layers window as shown here.

With your eyewhites layer transparency-locked, simply choose the appropriate grey color and use the pen>fill path method to add in the shadows for the whites of her eyes.

You're done! Now you're image should look like this and we can add some optional finishing touches.

Finishing Touches (optional)
At this stage, this is completely optional. We're basically going to add dark outlines on the drawing real easily. First, make your white background layer invisible by clicking on that eye icon. Your work area should look like mine above with the image completely transparent and no white background. Save your PSD file and then go to file>save for web & devices and save the image as a PNG-24 file somewhere on your computer.

Once you're done, close the current PSD that you're working on and open the new PNG file that you've saved.

Go to layer>layer style>stroke... and a new dialog box should appear. The default settings should work, which should be 3px, outside, normal, opacity 100% with fill type>color and black as your color. Click on ok, and your image should now have some nifty black outlines like so.

We're done! I hope you found this tutorial both useful and enjoyable and if you were confused as to any steps I've put in here, feel free to ask me. I'm going to try to continue this "draw with me series" for as long as I can. Next time, we're going to go a little bit more basic with pencil drawings and sketching in shapes for total nubbycakes. 

She kinda looks like Etranger from Zettai Hero Project on the PSP, eh?

If you're interested in accessing the previous drawing tutorials, here they are:

Previous tutorials
1. Draw Nagi With Me (Harder Version)
2. Draw Nagi With Me (Easy Modo)