Thursday, January 10, 2008

The Color Wheel: Neon

By Gary W. Priester

Since CorelDRAW® acquired the ability to blend objects way back when, I've been able to create a neon glow effect. But there was always something missing. Specifically, the appearance of the glass tubing in which the electronically changed neon gas is contained.

While preparing for Rick Altman's CorelWORLD™ Conference in Boston last September, I came upon a better way to create a neon effect including the appearance of glass tubing. In this article, I will share my technique for creating this effect.

By the way, the term "neon" is often given to any glowing gas used for "neon" signs. In fact, neon only makes up two colors. There are many other gasses used to create the other vibrant colors including krypton, argon and more. Those of you who took Chemistry probably can tell me which gasses produce which colors.

We will be using pixels as our units of measure, as pixels are the international unit of measure for the Web. In the Grid and Ruler Setup (double-click the screen rulers) set the units to Pixels.

If you are creating your image for the Web, or just to be viewed on your computer screen, set the Resolution (Layout, Page Setup) to 96 dpi, Windows screen resolution. If you plan to output your design to a color printer or commercial printer, set the resolution from 300 – 600 dpi.

I'm using the old (and brighter) RGB palette instead of the simulated CMYK display because I intend my neon image to be displayed on the Web. For printed output, you can use the simulated CMYK display option, or convert your image to CMYK when you are finished.



Open the Symbols docker and select a star symbol either from Zapf Dingbats (which for some unexplained reason, showed empty for me) or Wingdings (Symbols). You can also create your own star by creating a 5-sided polygon using the Polygon Tool, and then using the Shape Tool to drag the center nodes to the center. Whatever method or source you pick, make the overall star size 130 x 130 pixels.



Using the Freehand Tool, draw a horizontal line 80 pixels wide. Click twice with the Pick Tool to enter Rotate/Skew mode and, while holding down the CTRL key to constrain the movement, drag the left-center skew arrow upwards until the line has been skewed 30 degrees.

Select the line with the Shape Tool, then marquee select both nodes (drag a rectangle around the line with the Shape Tool).

On the Property Bar, click the Convert Line to Curve icon. Deselect the line, then using the Shape Tool, click the left node to enable the Bezier control handles. Drag the left handle to the center as shown. Repeat for the right node, dragging the Bezier control handle to the center. You should now have a gentle S-shaped line.



Make five duplicate lines. Select the lines and the star and open the Outline Pen Dialog (Outline Tool flyout on the main toolbar). Set the line width to 20 points and check the rounded corners and rounded joins radio buttons.

Arrange the lines and star as shown so that the thickness of the outlines do not touch one another, or just barely touch as shown in this illustration. If for some reason, the outline color is not black, change it.



Select all the lines and star. Press the plus key (+) on the numeric keypad to place a duplicate set of lines. Do not deselect the lines. Change the line width (in the Outline Tool flyout) to 10 points. Change the outline colors as follows: a. Ruby Red, b. Pastel Blue, and c. Blue. Make a duplicate set of all the 10-point lines and set this duplicate to one side for the moment.



Select all of the new lines and the star and make another duplicate set. Change the line width to 4-point and change the colors to: a. Red, b. Power Blue, c. Sky Blue.

Note: If you let your cursor hover over any color on the screen palette, the color name will appear in a tool tip. The names of selected colors in your image will appear on the bottom right side of the status bar.



Make yet another set of duplicate lines. Change the line width to 1 point and change the colors to: a. Faded Pink, b. White, c. White. Name and save your drawing and take a short eye break.



Zoom in very close to the lines. Select the Interactive Blend Tool from the Interactive Tools flyout menu. Create a four-step blend from the black outline to the next largest outline, to the next largest outline, to the 1-point outline. Repeat for the other six groups of outlines. If you are unfamiliar with blends creation, drag the Interactive Blend Tool cursor from one shape to the next, to the next, to the next, etc.



Find the set of duplicate 10-point outlines. Select all and Combine them (CTRL + L). Make two duplicates of the combined lines and place one set to the side for a moment.



Select the other duplicate 10 point outlines and change the outline width to 1-point. Make the outline color for the large outlined group white and the outline color for the 1 point group black.



Marquee select both groups of lines. Blend both sets of lines either using the Interactive Blend Tool, or in all versions except version 9, select Blend from the Effects menu. (Blend took a vacation from the Effects pull down menu for some reason in version 9 but, happily, has returned).

Select the Blend and from the Bitmaps menu, select Convert to Bitmap. Select Grayscale from the Color: drop down list. Set the resolution to 300 dpi. Place a check next to the Transparent Background option. Press OK to create the bitmap.

With the bitmap selected, select Blur, Gaussian Blur from the Bitmaps pull down menu. Apply a 1.5 pixel radius blur. These settings are for version 10 and may vary greatly in previous versions. Basically we just want to subtly soften the edges of the bitmap.



Center the grayscale bitmap over the blended shapes. Apply an Interactive Transparency, Uniform, amount 50% This creates the appearance of the glass tubing.



Fetch the other duplicate you made of the 10 point outlines. Change the line width to 8 points and combine (CTRL + L) all the lines. Now (version 10 only, I'm afraid) Convert Outlines to Shape. This creates fillable shapes from the outlines.

Press the TAB key once to select the invisible original outline and delete it. Normally this invisible outline is not a problem, but it can cause trouble because we tend to forget it is there. So, to be on the safe side: whenever you convert Outlines to Shape, delete the invisible lines. Save your file and take an eye break.



Duplicate the combined duplicate (+) and offset the duplicate right and down a few pixels in each direction, as shown here.



Select both shapes and press the Quick Trim icon on the Property Bar. Delete the top shape (the trimmer). Change the fill color to Powder Blue. We will use this shape to create highlights to the glass tubing.

Note: Corel uses the first selected object as the trimmer and the second selected shape as the object to trim. Hence you want to select the top object first and the bottom object second. If you reverse the order, the bottom shape will do the trimming, which is not what we want.



Convert the Powder Blue shape to Bitmap (Bitmaps menu). Change the Color to RGB, and leave the other settings as is: 300 dpi, Transparent Background. Press OK to create the bitmap. Apply a 5-pixel Gaussian Blur (Bitmaps menu). This will soften the edges of the highlight and give it a more natural appearance.



Position the highlights over the neon shapes so it appears over the top left portion.



Add a black filled rectangle behind the neon shapes. Apply a Radial interactive fill. Center the Radial fill over the center of the star and change the center color to Twilight Blue. This rectangle and Radial fill creates the impression of a soft glow behind the neon elements.



And here is the finished image.

So that's my technique for creating neon in a glass tube. You can use this for just about anything that has a single outline.

For my session at the CorelWORLD Conference, I made some single weight letters for the word "draw" and used these to create the same neon effect that was then used as an interface for a Web page. Just to be on the safe side (in case any of Corel's lawyers were in attendance), I placed the text, "I Love To …" over the neon "draw", so there could be no confusion with the name of the Corel product, CorelDRAW.

If you would like to see more articles like this one, let me know. Or if you have any comments, or questions, feel free to drop me a short note at garypriester@earthlink.net. I'll try to provide you with a colorful reply.

Gary W. Priester lives in Placitas, New Mexico with his wife, their five cats, and Harry the extraordinary canary. He worked for 25 years as an advertising print and television art director where he developed a knowledge and appreciation for typography

No comments: