Vector Method


Recommended Software: Inkscape (Download the latest version here.)

Aussie Ben's method is the tried-and-true way to make these, but you can also make your neon heads by initially working in a scalable graphics format (.SVG). In this method, paths and line weights can be easily adjusted, making for easy fixes and tweaking at any time in the process. This method also exclusively uses free, Open-Source software, so it's recommended to non-Photoshop users who may have trouble following along with the other guide.


1. Set Up Your Document

For a pre-made document setup, download the Inkscape .svg here.

The basic setup is essentially the same as Ben's: 4 layers consisting of, in order, Rods, Glow, Black, and Source Image. In the provided file an additional layer is provided, the Sour Crowla from Ben's guide, which provides a handy reference to follow when creating our own. This layer will be locked, as should, usually, every layer that you aren't currently editing directly.

Also note that as we're working with a scalable graphics format, with as much workspace as you may need, and the final result will be exported in-software as a tiny PNG file. The actual size of the document as specified in document properties does not actually matter, nor do the black lines on-screen that outline the given dimensions. The included page size is already set to the standard avatar size of 71x62, as is the object on the layer “Black” (this object can be manipulated later for easy scaling of the final avatar: do NOT distort the aspect ratio of this object).

The most boring image on the entire site.


Your document layout should be something like this, for ease of use. Open the dialogs for Fill & Stroke (Object->Fill & Stroke...) and Layers (Layer-> Layers...) Note the tool highlighted on the left: the Pen Tool (also known as the Bezier Tool). You'll be using it almost exclusively to make avatars.


2. Find a Source Image

The Source Image can be any size, but the head should be no smaller than a little under 200x200 pixels, or at least clear enough that you can make out all the details to trace them.

In this example, we'll look at an avatar for everyone's favorite well-known Donkey Kong Country character, and a prolific friend of Donkey Kong himself, Mega Man.

That wasn't a joke. This is what being best friends with Donkey Kong is ACTUALLY LIKE.


Many avatars use as reference the stock promotional render of the first DKU game they made their in. Some of these images, however, may have parts of arms, shoulders, or other objects obscuring them, or may just be from an uninteresting angle. I like to mix it up a bit, so we'll be using this screen shot from Super Smash Bros For Wii U.

Uh, I'm SURE there's a Donkey Kong in here somewhere...


3. Place the Source Image in the Document.

Paste (Edit->Paste) it in on the “Source Image” layer, with the image scaled (note: NEVER distort the aspect ratio of the source image. Hold the control key or toggle the padlock icon on the Tools Control Bar to closed to preserve it when scaling.) and positioned so that head appears within the center of the object on the “Black” layer.

Uh, I'm SURE there's a Donkey Kong in here somewhere...


If your Source Image isn't cropped and much larger than just the head, you can draw a box over it using the Rectangle Tool, select both objects using the shift key, and use Object->Clip->Set to crop the image to the dimensions of the box.

Mega Man 2.


As an aside, I also recommend making a smaller-scaled duplicate of your Source Image on the same layer and placing it off to the side. This will make it easier to choose your colors later.


4. Trace the Source Image.

Go back to Russia, Pinko.


Now to start the process of actually making the outline that will constitute the Neon Head. To make things easier in the long run, duplicate your cropped, fitted source image, and place a copy of it off to the side somewhere, scaled as needed to fit your screen. This will serve as a quick way to pick out your colors later.

Lock the Source Image Layer and both unlock and activate the Rods layer. Using the Pen Tool, trace around individual, distinct parts of the character's head. Try to mimic the look of actual neon tubes: reconcile sharp angles into gentle curves, and keep individual lines from touching, especially those that will ultimately be different colors, as much as possible. Even omit certain details if they will ultimately clutter the final design, as I have many on the “Ears” of Mega Man's helmet.

The stroke setting of these marks made with the pen should be set in Fill and Stroke under the Stroke Style heading with a width of 2.0 px, curved joins (this will help avoid sharp angles) and round caps. Stroke paint should be set to the color of the part of the character you are currently outlining.

The benefit to doing this in vector is that the stroke settings can be modified this way at any time. You could trace the shape with a line width of 1 and (as I do) entirely in a very visible pink color as long as you're prepared to go back in and clean it up for the final result (if you've drawn your outlines in anything less than 2, you may have to adjust points on the path later to avoid them colliding with each other.

The important part is up there.


To set stroke color proper, select all rods of one color and, using the Dropper Tool, Shift+Click to pick from the brightest AND most-saturated spot in your reference image to make it the stroke color. Attempt until you feel you've got it right, and don't hesitate to manually adjust the color under the Stroke Paint settings if you feel it looks too pale.


5. Create the Glow.

WHAT DOES ANY OF THIS HAVE TO DO WITH DONKEY KONG?


Once you've got everything fine-tuned the way you like, Select all the objects on the Rods Layer (you can do this with by clicking and dragging with the Selector Tool and encompassing all the lines). Copy them, lock the layer, and then activate the Glow Layer. Use Edit-> Paste In Place. The Glow Layer should be set to 50% opacity. If you've done it right, the image shouldn't appear any different unless you hide the Rods Layer, at which point a transparent duplicate of it should be visible on the Glow Layer in the exact same spot.

Select all lines on the Glow Layer. Set the cumulative stroke style to have a Width of 4 px and a Blur of 6.

Blue Blur, but not THE Blue Blur.


IMPORTANT NOTE: use of blur in Inkscape is very resource intensive and prone to causing severe program lag. Hide the layer from view when not exporting or modifying it directly to decrease performance issues.

If the blur appears too bright, lower the opacity of the layer. Generally the sweet spot is somewhere around 50% or slightly lower.


6. Export the File to a PNG.

Hide the Source Image layer, then unlock and activate the Black layer. Click on the transparent black box to select it, and, if need be, adjust the size (but NOT the aspect ratio) so that it encompasses both the rod lines and the blur around them.

Your computer should now have the framerate of Banjo-Tooie.


With the box object on the black layer still selected, Hide all layers except for Rods and Glow.

Nevermind, THIS is the most boring image on the site.


In the menu, select File->Export Bitmap. Set Export area to Selection, and Under Bitmap size, set the Width to 71 if it isn't already. If you can't Export the file at a size of 71x62 without changing additional settings, the aspect ratio is incorrect. Name it (the naming convention is generally the full name of the character with proper capitalization and spaces swapped out for underscores).

Now YOU can have a drawing of your favorite video game character forever associated with some crazy, narrow-minded, foul-tempered, weirdo on a Forum.


If all was done correctly, then you should now have a finished Neon Head!


This definitely not self-indulgent guide has been brought to you by Cameron.

←Back