Viva La Neon! - A Comprehensive Guide (With Pictures) To Making Your Own Neon Avatar

[RHIZOMES]

NOTE: I THOUGHT YOU GUYS BE ABLE TO GET THE MESSAGE, BUT APPARENTLY NO. I WILL REPEAT - I AM NOT DOING ANY MORE REQUESTS. READ THIS MANUAL AND IF YOU DON'T HAVE PHOTOSHOP PM ME FOR A LINK.


-----



“Give a man a fish; you have fed him for today. Teach a man to fish; and you have fed him for a lifetime”


Hi everyone, I'm getting a bit sick of being some sort of neon avatar making slave machine for this board. When I started doing requests I never thought it'd explode in popularity to the level it did. I didn't account for the fact that the more avatars I did = more people would have them = more people would want them. I think it's virtually impossible for me to ever complete the massive backlog of requests and frankly, I'm tired of having the fact I have x ridiculous amount of avatars to make for a group of people on the internet (for free), constantly looming over my head, especially since I usually have much more urgent and important left-activist and school work to attend to. I'm not making this as some sort of "fuck you I'm out" measure, I genuinely want everyone to be provided with the neon avatars they want/requested, it's just looking increasingly unlikely if I'm the one solely responsible for it. If I didn't care I wouldn't have even bothered to make this tutorial.

Furthermore, the instructions given already in the Kanye Glasses Pictures (http://www.revleft.com/vb/kanye-glasses-pictures-t108360/index.html) thread are inadequate for anyone who doesn't know how to use Photoshop already, so I've decided to really clamp down and commit to making this tutorial. It'll end the uneven class relationship (:p) between those who have avatar-making skills and those who don't, hopefully. And the few who still don't quite understand have a wider range of people to help them out with it. Also if anyone feels i've missed something out or there are parts that need further clarifying (and I'm sure there will be), please tell me since I want to make this guide as easy to understand as humanly possible for everyone.

Choosing the Image

I chose Bill Hicks, particularly this image:
http://www.joelspitzer.com/whyquit/whyquit/notables/BillHicks.jpg
Because I'm (also) tired of having Trotsky as my avatar. When I made the original avatar, it was taking the piss. But since most people have made neon avatars of people they seriously admire, the meaning has become a bit more unclear, and I'm frequently mistaken for a Trotskyist (which I'm not). Bill Hicks is both A) Awesome B) directly relevant to my username so eh.

Opening the Program

The program I am using is Adobe Photoshop CS3. It will probably be a largely similar process on other versions of the software. If you don't have Photoshop, PM me and I can point you in the right direction (can't post warez links on this site).

http://img43.imageshack.us/img43/2568/30332910.png

First, go to "File":
http://img36.imageshack.us/img36/8829/48853850.png
(P.S. I can't screenshot dropdown and right-click menus and some other things, so I'm just going to be showing where to click and then describe what to do a little bit, but not often)

And select "New". This window should appear:
http://img51.imageshack.us/img51/5796/54514727.png
Type in 80 in both Width and Height (as those are the proportions for avatars on Revleft), and make sure the Color Mode is RGB.

Getting the Colours

Click on the colour boxes at the bottom of the sidebar:
http://img39.imageshack.us/img39/4578/s11t.png
(Doesn't matter which is the foreground and which is the background, you can click on the arrows next to the boxes to flip them around if needed)

Copy the stream of letters into the "#" box that are show here:
http://img36.imageshack.us/img36/9505/purplect.png
http://img43.imageshack.us/img43/5381/greenw.png

Pasting and Resizing the Image

When you've created it, copy/paste in the image you want to neonify:
http://img36.imageshack.us/img36/9526/29354075.png

And then select this option in the tool bar menu, "Rectangular Marquee Tool":
http://img121.imageshack.us/img121/2373/73409831.png

Now, make sure you have the layer of the image selected:
http://img44.imageshack.us/img44/6218/layers.png

And right-click on the image (in the image box not the layer box) and there should be an option called "Free Transform".

This is another stage I can't screenshot (thanks Windows), but it's pretty straight forward. Resize the image to the avatar size and make sure the proportions are correct, which you can do by either holding down the "Shift" key as you're resizing, or by making sure the both the Width and Height are the same percentage. The Width and Height will show up in this area:
http://img197.imageshack.us/img197/7429/freetransformarea.png
After you've started the Free Transform.

Adding in the Glasses

And now we add in the glasses. Basically if you've mastered "Free Transform" the first time, this should be a piece of cake. Here's the template:
http://img32.imageshack.us/img32/7929/templateu.png

Just resize it down to the image (again making sure the proportions are still in place) and fit it on your subject's face.

http://img43.imageshack.us/img43/8933/44013602.png

This can also be tilted if necessary (by click/dragging outside of the transform box), although I strongly recommend if you're gonna tilt and you also need to do the step below, to do the step below first (otherwise the glasses tend to look wonky).

If Your Subject Is On An Angle
If your subject has it's head tilted to the side, it's best to go to the ""Rectangular Marquee Tool" again and then make a selection on the side of the glasses which is gonna further away from the 'camera'.

http://img689.imageshack.us/img689/2200/glassesselection.png

Then, again right click to "Free Transform" and minus the width. It's your call how much but usually only 1-5% is needed to make it look vaguely natural.

If your subject is on an angle, he probably also needs something to perch the glasses on his ears. The best way I've found to do this is by going to this button:
http://img689.imageshack.us/img689/6730/selection.png

And selecting the "Polygonal Lasso Tool". Once you've made a selection that looks adequate:

http://img46.imageshack.us/img46/8052/polygonalglasses.png

You can fill it in, best way is by creating a new layer by clicking here:

http://img9.imageshack.us/img9/8959/newlayer.png

and filling it in with the "Paint Bucket" tool:
http://img11.imageshack.us/img11/8073/30879059.png

This should be the result:
http://img9.imageshack.us/img9/7746/earspucket.png

Oh whoops, can only include 20 images in one post. To Be Continued...

[RHIZOMES]

(I got the best order to do these tasks a bit muddled after this point, so some of the images may appear inconsistent)

Cutting Out the Background

Select the "Polygonal Lasso Tool" again.
http://img689.imageshack.us/img689/6730/selection.png

Carefully draw/drag the lines around the person:
http://img39.imageshack.us/img39/9462/56076612.png

Then go to "Edit":
http://img44.imageshack.us/img44/5227/69391725.png
And if your selection surrounds the person, click "Select Inverse" then click "Clear". If not and it surrounds the background, just select "Clear". The background should be gone now.

Creating the Purple Background

Select the "Paint Bucket" Tool again:
http://img11.imageshack.us/img11/8073/30879059.png

Then select the Background layer:
http://img24.imageshack.us/img24/8073/86881203.png

And fill it in with the Purple colour.

After that, click the dropdown menu at the top of the layer box and select "Multiply":
http://img51.imageshack.us/img51/7742/76655959.png
Multiply makes the white sections of the layer transparent. The less white in the shading, the more visible it will be.

End result:
http://img32.imageshack.us/img32/2897/50229560.png

Contrast and Making the Photo B/W

If the image is in colour (Like this one, something I didn't notice til this point), go to "Edit" again:
http://img44.imageshack.us/img44/5227/69391725.png
And then go to "Adjustments" > "Black & White" and then click "Okay" without messing with any of the bars. Again, make sure the right layer is selected.

Also a lot of the time the image's contrast just doesn't suit being neonified. If so, go to "Adjustments" > "Brightness & Contrast". This window should show up:
http://img6.imageshack.us/img6/7829/11062220.png

I usually push "Brightness" about 1/4th of the way left, and "Contrast" most (and a lot of the time all) of the way to the right. But this is subjective and feel free to fiddle but generally Brightness = slightly left and Contrast = far right usually looks best.

Creating the Green Border

Right click the photo layer:
http://img39.imageshack.us/img39/3581/48018926.png
And go to "Blending Options".

http://img6.imageshack.us/img6/4577/strokebox.png
This window should pop up, tick (and click) the "Stroke" option/tab.

This is what should show up when you click the "Stroke" tab:
http://img709.imageshack.us/img709/7178/strokebox2.png

Click the colour box and this should show up:
http://img43.imageshack.us/img43/4196/28685995.png

If you put your mouse over the Purple/Green colour boxes in the sidebar, you should be able to click on the Green box and make the "Stroke" colour change to Green.

http://img25.imageshack.us/img25/4551/strokebox3.png

Change the size to "2" as well.

End result:
http://img32.imageshack.us/img32/452/s12p.png

Shading The Photo In Green

And now the moment we've all been waiting for... *drumroll*

Select the "Magic Wand Tool" here:
http://img11.imageshack.us/img11/5110/51295649.png
This tool mass selects certain shades/colours.

http://img44.imageshack.us/img44/1516/68696763.png
It really is your choice what the "Tolerance" level is (how much is selected) but I usually have it on 70. Make sure "Contiguous" is unchecked (It's unneccessarily more annoying to do otherwise).

Click on the lightest area in the photo. In Bill Hicks case it's the cigarette. Create a new layer under the person and then fill in the selection with the "Paint Bucket" tool (I've shown that screenshot enough times). Should look like this:
http://img43.imageshack.us/img43/5027/82319379.png

In Bill Hicks case, 70 wasn't enough. So I made another layer and selected a slightly darker area of the photo:
http://img32.imageshack.us/img32/883/29283969.png

And voila, it's done! All you need to do is save your image, it's best to save it as a PNG because it doesn't turn up blurry when you upload it to the boards.

Final product:
http://img36.imageshack.us/img36/2961/hicks.png

If anyone has any further questions, post them here and I'll be happy to explain.

[Mälli]

Kick ass thread! :thumbup:

[Dr Mindbender]

charge people for the avatars instead of crying about it.

[RHIZOMES]

charge people for the avatars instead of crying about it.

That's capitalist, i'm giving it open-source to the Revleft masses.

And I'm too lazy either way.

Although when I have a bit more money available to expend I might seriously try making these into t-shirts or pop art paintings.

[Dr Mindbender]

That's capitalist, i'm giving it open-source to the Revleft masses.


No it isnt. It would be capitalist if you got someone else to do the artwork and you extrapolated the profits from them.

Hey if you dont need the money give it to malte to fund the server costs if it soothes your conscience.

Anyway if you charged a fee i guarantee it would disuade 99.9% of the people here from asking you again.


Although when I have a bit more money available to expend I might seriously try making these into t-shirts or pop art paintings.

Well that'll only work if you charge people to cover the t shirts and printing costs, you capitalist dog you.

Assuming your time is valuable to you then i guess thats something else to consider.

PS: was the neg rep really necessary, you just cost me a green blob damn you. Now i have to earn another 4 points. Grrr!

[RHIZOMES]

No it isnt. It would be capitalist if you got someone else to do the artwork and you extrapolated the profits from them.

Hey if you dont need the money give it to malte to fund the server costs if it soothes your conscience.

I was being tongue-in-cheek :p


Anyway if you charged a fee i guarantee it would disuade 99.9% of the people here from asking you again.

Yeah, but then how would neon avatars establish it's hegemony over the board (and then the world) if I did that? :p I am the #1 neon avatar evangelical, merely trying to find more efficient and less annoying ways of spreading the neon gospel. And up until recently I was quite glad to make them for people, but I've just suffered burnout from the sheer quantity.


PS: was the neg rep really necessary, you just cost me a green blob damn you. Now i have to earn another 4 points. Grrr!

Soz, it just pissed me off at the time since I spent like 3+ hours making this tutorial due to the high demand, woke up in the morning to see if I got any positive feedback for my hard/helpful work and then one of the first comments I get is to "stop crying about it!". I can do rash things sometimes soz. I'll thank both your posts to make up for it.

PS: We're having an argument over neon avatars, i'll let that sink in

[Sasha]

now you got your blob back ;)

[Knight of Cydonia]

nice job..nice tutorial:thumbup1:

[Il Medico]

What about people who don't have photoshop?

[RHIZOMES]

What about people who don't have photoshop?

I said in the post I'm willing to PM people a link to the download.

[ComradeOm]

charge people for the avatars instead of crying about it.Sell a man a fish, he eats for a day, teach a man how to fish, you ruin a wonderful business opportunity

[Ol' Dirty]

Thx for this. Sorry about the multiple requests. :cool:

[Die Rote Fahne]

Can I get a Slavoj Zizek

[RHIZOMES]

I already made one, check the Kanye Glasses thread

And I've officially retired from making those avatars

[anticap]

Thanks for the tutorial, I had fun with it. Here's my attempt, which came out well I think:

http://img189.imageshack.us/img189/4782/neoncooney.png

That is, of course, the legendary Comrade Cooney (http://kapitalism101.wordpress.com/)!

I added a slight drop-shadow to the shades, just enough to make them pop without seeming to float unrealistically far from the face. (The shading above one lens is where he had one eyebrow raised.) Settings are under "blending options": "opacity" 50% (not too sharp); "angle" pointing at light source; "distance" & "size" 1px; the rest default.


Sell a man a fish, he eats for a day, teach a man how to fish, you ruin a wonderful business opportunity

Build a man a fire and you'll keep him warm for a day. Set a man on fire and you'll keep him warm for the rest of his life.

[Dean]

I already made one, check the Kanye Glasses thread

And I've officially retired from making those avatars

You're not a very good communist if you don't like to work.

[Aloysius]

Is there a way to do this in GIMP or am I just gonna hafta figure it out myself?
I'm running Ubuntu and I'm not quite comfortable trying to run PS CS3 on Wine.

[Aloysius]

I don't think I can. I can't find any equivalent to Layer Styles.
I guess I'm out of luck.

[Widerstand]

edit: nvm. Nice tut.

[Agent Ducky]

Nice tutorial ^_^. I would do this but I couldn't think of what person to do that to.
=P
The whole thing reminds me of this thing I did, maybe inspired by those types of glasses:
Commie glasses. They're basically 3D glasses with the lenses punched out covered in red duct tape with hammer/sickle drawn on the 'lenses'. I should get a picture of those...