This is an introduction to Pixel Tools v2.0. We'll download the tools, install them, then use them to draw a cheeky snowman!
We found this awesome author thanks to FlashGameLicense.com, the place to buy and sell Flash games!
Final Result Preview
Let's take a look at the final result we will be working towards, it's a nice snowman.
Step 1: Downloading
Before you can even use Pixel Tools, you must first download and install them into Flash. You can find the file hosted on the thebackalley.com’s Anipedia. Click the link under "contents" that says Pixel Tools v2.0 and it will locate the download links on the page. From there simply right-click the download link and save it wherever you like.
Note: Pixel Tools v2.0 does not work very well with Flash 5 or Flash MX (Works for MX04 though); CS4 works but generates some error messages in the output window. CS5 works with no errors at all.
Step 2: Installing
Flash generally installs the "Adobe Extension Manager", but if it’s not already on your computer you can get it from http://www.adobe.com/exchange/em_download/
Open it up and click "Install New Extension". From here select the file you just downloaded, it will install it for you.
Step 3: Opening Customize Tools Panel
Open Flash (if it's already open, close it and reopen it). Go to the Edit menu, then click "Customize Tools Panel" which is near the bottom.
Step 4: Customize Tools Panel
In this panel you can trade tools from your tool bar with your new pixel tools; select four tools that you don’t often use, remove them then add your four new pixel tools (pixel ellipse, pixel erase, pixel pencil, pixel line).
If you don’t want to replace tools you can simply add the new ones as sub-items of an existing tool. You can do this buy simply choosing an item, and adding to it, but not replacing the original tool.
Step 5: Check Installation
Find your tools; if you followed all previous steps correctly you should now see the tools in your toolbar wherever you chose to add them.
Step 6: Dimensions
Let's set up some dimensions for the flash file. Size doesn’t matter honestly; just keep it at default if you want. Then make the background #C5D8E2, which is a nice blue color.
Step 7: The Grid Tool
The grid is a very powerful tool and with pixel tools it may be the most powerful in your arsenal. We will start by clicking the View menu at the top of the window and selecting "Grid > Edit Grid".
Select "Show Grid", then "Snap to Grid" and change the grid height and width to 1 px each.
Step 8: Snapping
Once the grid is set up, head back to the View menu, click Snapping, and in the drop down menu select "snap to pixels".
This will make every single pencil mark you make snap to the grid!
Step 9: The Pixel Ellipse Tool
As you can see in the image below (and the preview), we will be making a simple (cheeky) snowman. And what do you always make first in a snowman? The 3 round body segments.
We will be using the pixel ellipse tool. As you would use the normal circle tool, just select it and drag the three circles as shown. Make sure that the color of the circle is white and select "no color" for the outline.
As you can see, these tools create a regular Flash vector fill, but snap the fill to blocky, pixel shapes, rather than the smooth curves we're used to from vector art.
Step 10: The Pixel Eraser Tool
A snowman’s body is not made from perfect circles, and it will look a little too strict and simple if we do the same, right? No snowman is perfect, play around with it.
In this screenshot, I'm using the pixel eraser tool to remove parts of the snow.
Step 11: Pack Some Snow
We'll go back to the ellipse tool to create circles around the bottom of the snowman. This will give the effect of the snowman being squished into the ground, and part of the snow being squished around the base.
These little details give your snowman character.
Step 12: Line Tool
Next, select the line tool and, based on the size of your circles, change the line size. Then change the color to brown. If you haven’t already guessed, we are now making the stick arms.
I personally create mine with 4 fingers at the end, but just play around with it! The point of this tutorial is to get a basic understanding and to become comfortable with the tools.
Even this Line tool creates vector fills rather than vector lines.
Step 13: The Carrot Nose
Change your line color to orange and try to create a carrot nose. I myself use the circle tool for the large base of his nose. Get experimental; try creating details that you find give your snowman character.
Step 14: The Mouth
Now select the pencil tool and draw a mouth. This can be simple, or it can be extremely complicated. It depends what you want to get out of this tutorial. If you want practice, then just play around with it for a bit. If you are just trying to get a simple understanding of the tools just power through this step.
Step 15: The Hat
Now for the hat! Simply use the line tool to make 4 lines. Fill it in with black to make a simple top hat.
Step 16: The Buttons
Now for the eyes and buttons. Create a black circle using the ellipse tool to make these circles. Now select it, copy, right-click and select "paste in place". Use the arrow keys to move it. It will move along perfectly in the grid as long as you use the arrows instead of the mouse.
Step 17: The Pipe
Let’s create a pipe out of the line tool next! 5 lines, then fill it.
Step 18: The Smoke
It's science fact that pipes always have smoke coming out of them! Though most snowmen don’t have a lit pipe, ours is just that cool! Select the pixel ellipse and make a bunch of gray circles as seen in the picture.
Step 19: Eyebrows
It seems we haven’t used the freehand tool as much as the others, so we will be using it to create some eyebrows.
Step 20: Finishing and Practice
Clean up whatever you don’t like, then sit back and look at what you have created. It’s a cheeky little pixel snowman!
Now that you have used smaller pixels on a larger character, go back and look at older games. See how they create characters with as little detail as possible. And if you want to, recreating characters from your favorite games is great practice for the pixel tools!
Here's a great website where you can find sprites to practice with: http://www.spriters-resource.com/. Keep practicing and have fun!
