How can I create TRON-like glowing effects in Illustrator?

Question

I am trying to use Illustrator (CS3) to recreate the Tron neon-glow visual style in graphics I plan to use on a website. This page is an excellent example of what I'm trying to do: http://www.disney.co.uk/tron/html/legacy/synopsis.html

I'm having major problems. I have lines/paths that I'm trying to recreate the glow with, but nothing I do seems to work exactly as I want it. I tried "Outer Glow" and "Gausian Blur," but I cannot recreate the same rich, brilliant blue glow you see in Tron and their website above...everything winds up looking very dull, no matter how I try to adjust/lighten the color. What am I missing? Any help would be appreciated...thanks!

Answer 1

A visual effect, whether in Ai or Ps, isn't always attainable by applying effects to a single layer, far less a single object. The richness of the feature sets we have available in these programs can lead you down a blind alley, trying to achieve everything you want by piling on effects to a single object when, just as in painting, what you need to do is use multiple layers that build to the final effect. This neon appearance is a good example.

It's also worth noting that most transparency effects work better (or work at all, in many cases) in RGB mode. Some, like the glare of a bright background light, even require 32-bit. So the color mode you're working in is important.

The TRON effect uses a bright copy sitting on top of one with a blurred glow effect, but rather than try to explain this, let me refer you to the master, Bert Monroy. He has a tutorial on creating realistic neon lighting that contains all the techniques you need.

Answer 2

I'm no expert in Illustrator, but in my initial self-teaching with it, I was doing this exact project, but with sports logos (to create that deep neon sign effect).

I was able to easily do this with Gaussian Blur and Outer Glow effect in Illustrator CC 2015 by performing an image trace>expand, applying a clear fill and thin stroke to all remaining traced lines, then saving the image as a vector.

Once done, I created a new document and added a rectangle, swapping default stroke and fill colors so it would be black. I added the svg and selected each path separately, making the fill clear and the stroke about 10 pt. Changed the color to something lighter than black, then duplicated the stroke about 8 times. From the bottom up, I reduced each stroke by one and in the color panel, brought up the HSB options...reducing the saturation by 10% each going up the list of strokes.

Eventually, I had that almost white middle and bright colored exterior. I added the outer glow effect at 80% opacity and 3-5 pt (remember, the stroke here will flair out that many pts in both directions of the glow). Once done, I saved that as a graphic style.

After that, I applied that style to every other path in the logo...changing only the colors of the strokes and the glow effect along the way.

Play around with the glow opacity and stroke saturation to get the effect you want. One thing you might also try is to brighten up the inner strokes to achieve the brightness level you want. I played around with that after reading this and I could almost hang my neon logo in Casters office and it would blend in perfectly!

Good Luck!