Pixel Sig Drawing and Coloring Guide

[Hess]

Stop asking me to make you pixel sigs. I did not write this guide, Pequ did. She's in Eternal Honour (EH) .. go bug her there. Thanks!

Before I begin, I would like to link you to some helpful forums that Misterxman and myself run. Misterxman's Forums

If you make a sig and want some good critiques, post your sigs in Media Discussion and allow some people to critique you there. You can also find tons of other people's work there as well to help you get some ideas.

Well, Sneaky and several others have asked me to make a tutorial on making pixel sigs, so eh.. here's how *I* do it. :[

Please do not copy this tutorial without my permission onto other forums. If allies wish to have this, please let me know, and I'll gladly post this myself on your forums.

NOTE: Steps 1 & 2 are OPTIONAL. If you don't have these programs, you can simply start from scratch in MS Paint.

There are only 4 major steps to this!..

Step One: Sketching

Program(s) used: Painter classic, or you can just sketch it rl and scan. :s

First, I sketch everything using my drawing pad, a 4x5 Wacom Graphire drawing tablet. This costed about $100 or so. If you really want to get serious, Intuos is a more professional type of drawing pad, and it goes for $200+. Just a simple 4x5 Graphire works for me lol. Anyway. This is -optional-. I know of some pixel artists (Like Misterxman for example--You can see his work on RSC forums) who make wonderful pixel sigs with 100% MS Paint. I even used to make them with just MS Paint. It's just that sketching them this way makes it much easier for me. Anyway. The drawing tablet came with a program that works with the tablet, and it's called "Painter Classic". I use that program to sketch. This was NOT drawn irl and scanned. However, if you want to sketch it first like I do, then feel free to sketch it on pencil/paper irl and then scan it onto the computer. After some resizing, follow on to the next step.

~Estimated time: Just a few minutes, depends on what I'm sketching.

Other Sketches I've Done

Step Two: "Pixelize" it - Taking out the fuzzy stuff

Program(s) used: Photoshop Elements

Of course, you don't want your sig to have all of that fuzzy stuff going on around it, so the best thing to do is to delete all of the fuzzyness. How do you go about doing this? Well, what I do.. is in Photoshop Elements (I guess any Photoshop would work.. Or any programs that support layers).. make a new file which has the dimensions of the sig. This one is 150x300. So, I make the height 150, width 300. Next, I copy my sketch into the new image which will create a layer. Layer 1. Then, I go to "Layers" and create a new Layer. Layer 2. Next.. this is important: DO NOT DRAW ON LAYER 1. You must do this next part on Layer 2. What you do is you trace over the sketch with the pencil tool. It's going to end up looking crappier than your sketch, but that's okay. That's expected. After you have traced over this, click on Layer 1, and change the opacity to 0. This will make only layer 2 show up, and you will have something like what I have above this paragraph. Save this file as a png file, or else the fuzzyness will come back.

~Estimated time: Just a few minutes, again.

IF YOU ARE STARTING FROM SCRATCH USING MS PAINT.. I would suggest starting out with basic shapes, then working them into their actual shapes. Like I would've made a circle for the head, rectangle for the chimney, square for the window, triangle for the tree. A few circles for the cat. Sofa.. I would've just gone ahead and drawn that in. Oval for the table top. Drawn in the legs of the table. Oval for the rug. Probably would've just drawn everything else, but yea.

Step Three: Editing - Clean up the thick black lines.

Program(s) Used: Microsoft Paint; comes with Windows. Go to Start-->Programs-->Accessories-->Paint

I don't know about you, but those thick black lines aren't that pretty. So what you're going to be doing in this part is editing out the black lines.. pixel by pixel.. so that they don't look thick and chunky. To do this, you must zoom into the sig. In the above frame, you can see that I've cleaned up the window a bit + Santa hat + Chair. How do you go about cleaning these up? Well. It's really hard to explain, all I can really do is show you a before and after for this part. For this, I'll zoom in on my fat kitty.

<--Before.

<--After.

I guess the only way I can try to explain this is to just say to right click where there are unneeded corners.

-Tips on cleaning up:

--Curves: Personally, curves are hard for me to edit without making them looking all jagged and screwed up, so what I do is I just wipe out the original curve altogether..

And then replace it with a curve made by the Curve tool:

Did the same thing to the other side of the rug:

Notice that it looks like a football. We don't want that. We want it to be a nice, curved rug. So what you do to that is eliminate the edges.. and replace with more curves!

--Circles

Whenever I'm having to work with a circular figure that's almost a perfect circle.. let's say the ancient staff for example.. just like the curves, I go ahead and just delete the whole thing. Then I use the circle tool in paint to recreate that.

--Squares

Same thing with circles, except you'd use the square tool. These are usually pretty easy to edit manually with the pencil tool thoug.

--Tedious areas

Whenever I'm dealing with an area that has loads of different things to edit, I use the handy tool which is called the "Polygon" tool. Have it so that the background color is white, and the foreground is black. Also have it so that when you use this over an area, the area is filled with the inside color. I used this for editing the tree.

Here's what the sig will look like once all of the lines are cleaned up:

~Estimated time: 30 minutes - 1 hour

Step Four: Coloring & More Editing

Program(s) used: Paint, Some Photoshop

<--Basic Colors without shading. Not everything's colored, but yea. I dunno why. I just like to go ahead and throw some color in there to begin with because I can't stand looking at a plain black/white sig for so long lol.

-Shading

For shading, I'll use the Santa hat as an example. First, apply the basic color to whatever you're about to shade. In this case, red.

Now for the shading part.. you want to gradually make that red go darker and darker. Also, when you are shading anything, you should keep in mind where the light source(s) is/are to determine what sides should be dark, and what sides should be light.

To make the red a little darker.. double click on the red color box that's at the bottom of the window. Another little window will pop up:

Next, click "Define Custom Colors >>".. that window will expand..

On the right side, you'll see the color gradient for that certain color. You'll also see a little black triangle pointing to one shade of the color. It's currently pointing to the main shade of red. You want to make it darker, so click on the triangle and drag it down a little bit to a slightly darker shade of red. It may be hard to tell that it's darker on this, but yea. It is.

Click "Add to Custom Colors" then click "Ok" to return to the main window.

Since there is a fire burning to the left of this, the light side will be on the left. Sooo, I'll make the right side of this dark by drawing a section for it & filling it in with the new shade of red.

Repeat this process by making the red a little darker each time and adding onto the existing shades; keep in mind that the darker shades are to go towards the right.

Apply this shading process to everything, using the appropriate colors (of course)..

Now for the tree..

-Using Photoshop in Pixel Sigs..

Yea, yea. It's not a true pixel sig if you bring in Photoshop, I guess. But sometimes, to be honest, Photoshop really helps make some things look better. I only use Photoshop if I absolutely need it. In this case, I used a brush on the tree. I also decided to use a different color for the wall, wee. Also spiced up the presents a bit + clock.

-Background

I usually make my backgrounds on a separate frame from the main sig before merging them together. For this sig, I'll show you how to get a feeling of dimension by using what is called the "vanishing point"

The vanishing point is the point where all lines meet on a 3-dimensional plane. Pretty much, it's the center of the horizon. For this background, I'm going to simply be using wooden floors. In the above image, you see I have the boards drawn towards the vanishing point.

Next, I'll add the main color to the floor.

That looks too plain, so I'll add in some brown lines to help give it a better wooden look.

Other Backgrounds I've done:

Next, you may be thinking "Well, that's all fine and dandy, but how do you merge the two frames together?" Easy.

On the area that you wish to fill in with this 'pattern', I guess you could say, recolor it so that it's some color that isn't being used in the rest of the sig. I'll choose.. yellow! So, I'll make the floor yellow. And oh, as you can see, I've also added tinsel to the tree through the use of Photoshop again.

On the background frame, right click the color yellow; this will make the background color yellow. Next, click the dotted box tool which is called "Select" and click the bottom selection. (Look under where you see the circles to see what I'm talking about). It'll show up as blue when you select it.

On the main sig, click Ctrl+A to highlight the entire sig. Now, copy/paste that sig onto the background. The yellow part becomes clear, and the floor shows through.

Let's see.. what else is missing? Hm.. fireplace! I'll also make this with Photoshop.. pretty fire.. I also added a border in this, altered the color of the sky in the background..

And uh.. that tree looks like it needs some lights.. also gonna add in text, again, using Photoshop.

~Estimated time: Hours and hours. Can't really say how long this process takes.

Eh, they look like they're not even on.. I think I'll add a twinkle to this.. I'll cheat with Photoshop again for this and make 4 frames:

Stack those frames on top of each other in layers in some program like Photoshop or whatever and animate it. I would go into detail on how to animate, but it would take a while, eh. Plus I'm sure someone else can make an animation guide.. *COUGH*GANJA*COUGH* seeing as they already have one on the old boards, lol..

Finished Product:

Progress in motion:

Another progress in motion:

Happy Pixelling!

FAQ:

Q: How long have you been making pixel sigs?

A: I started making pixel sigs in Nov/Dec 2004.

Q: How long does it take to make a pixel sig?

A: Depends on the content of the sig. Could be as quick as 3-4 hours to as long as 2 days. It's definitely a long, tedious process.

Q: Do you enjoy making these sigs?

A: Yes, I love making these sigs. I've been a so-called "artist" my entire life. I've been drawing since I was little kid, and I just simply enjoy drawing things. Through traditional (irl stuff; pencil, paper, paint, etc) AND nontraditional (computer progs) methods.

Q: How do you keep the quality of the pixel sigs in tact?

A: Save as a .png file No fuzzyness, if you do that.

^Just a few questions I've been asked a few times. If you have any questions about making pixel sigs, feel free to ask in this thread, and they'll be answered promptly + probably added to this section.

http://www.collegehumor.com/video:1728017

^Example of a pro doing the same steps I've outlined here on a much larger scale.