Webmaster Forum

bsmith · Last edited by bsmith on Thu Jan 31, 2008 10:49 am; edited 2 times in total

Added before and after here at the top for those of you who don't want to scroll down to see the final results.

This tutorial is going to show you how you can take advantage of any sketching/drawing skills you might have.

If you are like me, you can sketch out some cool stuff from time to time. You might even have a wacom or other digital tablet you use to "draw" in Photoshop.

However, even if you don't have a tablet, you can still get those sketches into photoshop and play around with them. Personally I think there is a style here, that just doesn't come across in any other fashion. So, it can actually be a plus to go this route.

Now, in this tutorial... I'm going to do a "sort-of" website mascot thing. You could use this for plain digital art purposes, for web layouts, mascots/logos, nav bars, etc. The uses are endless, but it's up to you to be creative.

I'm going to show you how to take a sketch, get it into Photoshop, and then touch on some basic things that will keep you from messing up the line drawing as well as allowing you to "color" it in a new way.

First we need to grab some paper and sketch out a drawing.

I already did this... recorded it... and uploaded it to youtube. Just in case anyone wanted to see that part. Here's the link:

http://www.youtube.com/watch?v=gVTMgDJbjy4

You'll see that I got some unlined printer paper. Sketched in pencil. Then went over it in pen. After the ink was dry I erased the stray pencil marks and tossed it in my scanner.

From there I opened Photoshop and imported it by going to:
File > Import > (then picked my scanner)

_________________
If you have an an urgent question, please call me.
Spam will be removed.

TigerBot · Tiger Member Joined: 19 Jun 2007

_________________
TigerBot

bsmith · Posted: Tue Dec 11, 2007 3:23 pm Post subject:

The scanned in result was this.

This looks clean, but we have one slight problem we need to fix right up front. Well... two actually.

1. We need to get the lines off the white background.
2. We need to make all the lines the same color, not various shades of grey and black.

So let's really get started now.

Step 1.

We need to select all white (even inside of the line strokes) so let's use the color range selector.

Select > Color Range

In this tool, select the white background with the eyedropper. The preview pain should like something like this:

Now you should see marching ants around all white areas.

_________________
If you have an an urgent question, please call me.
Spam will be removed.

bsmith · Posted: Tue Dec 11, 2007 3:28 pm Post subject:

But... we don't want to do anything with the white, we want the black and greys they are currently not selected. So let's invert our selection.

Select > Inverse (Shift_Ctrl+I)

It should now look something like this:

Now copy and paste the selection.
(Ctrl+C > Ctrl+V)

This will put the line art on it's own layer.

Step 2.

Delete the original background layer. (we don't need it any more)

Step 3.

Apply a layer style on the new layer 1 (the line drawings)
We are applying a color overlay as seen here. 100% Black. (no more greys)

Your image should look something like this:

_________________
If you have an an urgent question, please call me.
Spam will be removed.

bsmith · Posted: Tue Dec 11, 2007 3:30 pm Post subject:

Step 4.

Replace the background layer (a new layer under your line art) with a solid white fill.

_________________
If you have an an urgent question, please call me.
Spam will be removed.

bsmith · Posted: Tue Dec 11, 2007 3:36 pm Post subject:

Step 5.

Color that mother.

Ok. here is the cool part and the best trick in this tutorial.
You are going to do all coloring UNDER there line art.

You have a nice solid black line drawing. You have a nice clean white background layer. ALL of your color layers need to be BETWEEN these two layers.

So I made a new layer, named it "cream" and started coloring in the layer with the brush. As seen here.

Now because the lines are ABOVE your color, you don't have to worry about messing them up or coloring over them... or even getting right next to them. You just paint with a round brush and fill in up UNDER each line.

Do each color on it's own layer... based in where it falls (behind or in front of the other colors) you can add the layers on top of or below the other color layers as long as you stay on top of the background layer and below the line art.

Here you see a slightly darker cream on the next bone:

_________________
If you have an an urgent question, please call me.
Spam will be removed.

bsmith · Posted: Tue Dec 11, 2007 3:37 pm Post subject:

Again... slightly darker I colored the next bone on it's own layer.

Here it is with all the solid colors.

_________________
If you have an an urgent question, please call me.
Spam will be removed.

bsmith · Posted: Tue Dec 11, 2007 3:41 pm Post subject:

Now it's colored, but not great... so we need to add some depth.

I'll take a darker version of the cream and draw some crude shadow lines with the round brush.

Looks bad right now. But if we add some gaussian blur to it we can fix that a bit.

The settings for this... I'm NOT showing. Because it will need to be tweeked to whatever looks good. For example we do this process on both the shadow and the highlights. The shadow, being darker, requires stronger settings then the highlights.

Here is is with the first set of shadows added and blurred:

_________________
If you have an an urgent question, please call me.
Spam will be removed.

bsmith · Posted: Tue Dec 11, 2007 3:45 pm Post subject:

Here it is with highlights:

Same process, just with white for highlights.

Note: shadows go on bottom, highlights go on top... pretty simple really.

Here it is with all the highlights and shadows added:

EDIT: Wanted to mention that you need to be sure and delete or mask out all the "overspray" from the blur effect. Anything that gets outside of the lines needs to be removed so that later on you can add dropshadows or colored backgrounds etc without any adverse issues.
_________________
If you have an an urgent question, please call me.
Spam will be removed.

bsmith · Posted: Tue Dec 11, 2007 3:48 pm Post subject:

Now you can do anything you want as far as coloring... that's not really what this tutorial is about. It's more about getting the line drawings into photoshop and then working the drawing up where you can color under the lines.

From there the choice is yours.

Here is the same skull with a one pixel inside stroke (all non-background layers merged together at this point), a drop shadow, and resized a little smaller... (another trick for making the line art pop more)

And then we can add some background(s) and other layer effects:

_________________
If you have an an urgent question, please call me.
Spam will be removed.

bsmith · Posted: Tue Dec 11, 2007 3:50 pm Post subject:

Here is the final image I ended up with:

Not bad coming from the crappy sketch I did.
Have fun... feel free to ask questions if you have any.
_________________
If you have an an urgent question, please call me.
Spam will be removed.

cimmeron · Posted: Tue Dec 11, 2007 6:31 pm Post subject:

cool! ARG!
_________________
a website design forum

bsmith · Posted: Wed Dec 12, 2007 8:13 am Post subject:

thanks.

_________________
If you have an an urgent question, please call me.
Spam will be removed.

cimmeron · Posted: Fri Dec 14, 2007 2:57 pm Post subject:

I want to know how you did those random lines around the green on the background, please. Smile

_________________
a website design forum

bsmith · Posted: Fri Dec 14, 2007 4:24 pm Post subject:

I knew that would come up... looks nice huh.

I did a one pixel stroke around the green rays... then instead of a color I picked a pattern.

I believe I may have used this pattern:
http://websitedesign.bestwebsitedevelopment.com/web-20-style-line-pattern-t138.html

Actually I think it might have been one of the stock texture style patterns that comes with photoshop... either way you get the idea.

Smile

_________________
If you have an an urgent question, please call me.
Spam will be removed.

cimmeron · Posted: Sat Dec 15, 2007 9:58 am Post subject:

I wondered about that because it doesn't seem to be patterned...meaning, you can't see a pattern in the lines. Very cool, I'll have to definately try it out.
_________________
a website design forum