Creating a logo graphic

A close friend confided to me that he needed an emergency logo graphic for a project he was asked to do at the last minute. He begged me to help and showed me a quick sketch—two pen lines and three words on the back of a church bulletin.

I asked what his deadline was. With a self-conscious shrug, he said, "As soon as possible. Today?" And flashed his famous I-can't-help-myself grin.

	Reflex blue web version of friend's quick-and-clean emergency logo, at 66% of actual size. Above, background set to light gray to indicate logo's transparency. Below, logo blends into white background.

His sketch nagged at me all afternoon but there was no inspiration. Finally, I took a nap. When I woke up, I knew exactly what I wanted.

I quickly did three versions of the logo, each with the word "Top" in a different direction (going up, straight out, and going down). CorelDraw's layers allowed me to selectively place them and hide each in turn. Total creation time, including the prolonged splash screen CorelDraw shows while it initializes its component modules, was less than half an hour (nap not included).

I emailed low-resolution samples to him for review. Half an hour later, he called, ecstatic. He loved version three (at right). We discussed what he would use the graphic for.

Would he have a web page requiring the logo?

"Yes," he said excitedly. He and I both believe web pages are in order for every need.

Would he use the logo on inkjet- or laser-quality flyers and letters?

Again, he agreed: "Yes."

And, I wondered, would he have literature with the logo printed on a press?

"I'd like to," he admitted. We both know that final usage makes a significant difference in quality of the images generated, so I needed to know in advance.

After cleaning up the artwork in CorelDraw (including deleting the extraneous layers), I generated three files for him. This added another 10 minutes to the time spent on the logo.

• I generated a one-color web-quality GIF (see right), in reflex blue, for use with HTML pages for the web.

  Because CorelDraw's implementation of the GIF 89a filter is flawed, I used Photoshop to make the image transparent. As demonstrated at right, my friend can use the logo against any background.

• I generated two one-color TIFFs, one in reflex blue and the other in black.

  To maintain acceptable quality on a printing press, the TIFFs are delibrately higher-resolution than needed for laser or inkjet printing. The black version prevents Windows from auto-assigning a lighter gray-scale (half-tone screened) valuation to black-and-white printed output, as it would using the reflex blue version.

  The print versions are not transparent. To make them transparent would require using the encapsulated PostScript (EPS) file format, which is not compatible with inkjet or LaserJet printing.

I used CorelDraw, because it is a strong vector editing program, and because I have it installed at home. I also use Freehand and Illustrator, but at work. Vectors are mathematical computations using fixed points—nodes—on outlines around fills calculated on node placement. Nodes are edited using control points which stick out and allow curves to be shaped in both X and Y directions. Even text has nodes and control points.

Graphics displayed here are bitmaps—made of rows of ordered dots—created using built-in filters which converted the CorelDraw vectors into dots for viewing on monitors and for printing.

Final note: It took less time to create the emergency logo than it did to create this web page. For the following step-by-step instructions, I created individual graphics in CorelDraw and added arrows and callouts in Photoshop 5.5.

Step-by-step

1. Create a simple square. Select the Rectangle tool and, holding the CTRL key to constrain equally, drag until you reach your desired size.	2. Convert the square to an editable graphic using the Convert to Curves function. With the Node tool, delete corner A, so diagonal line B connects the other corners.	3. Using the Node tool, manuver the corner at A inward to B to produce the desired triangle. Note: use snap-to non-printing guides and the CTRL key as necessary to position the corner into an equilateral triangle.
4. Fill the triangle with a solid color as desired and give the triangle an outline of the same color.	5. Duplicate or copy the filled triangle. Change the fill of the duplicate to White. Using the Pick tool and the CTRL key, shrink the new triangle uniformly.	6. Position the white duplicate over the filled triangle. Choose Bring to Front as necessary.
7a. Add a node at the arrow. Using the Node tool, tug the upper segment into a curve matching your desired vision.	7b. Note that the filled triangle shows through behind the newly-edited segment.	8. Create a new node at A. Using the Node tool, push the curve at B outward slightly. Then pull C and D in opposite directions until you are satisfied with the shape of the curves. As necessary, pull on the control points attached to each node to exert finer control over the curve's appearance.
9. Returning to the filled rear triangle, create new nodes at A and B. Drag the node at C (top) down until it forms a shallow peak at C (bottom).	10. Using the Pick tool, carefully align the filled shape so the corners at A (for both shapes) are exactly aligned. Notice that the curve at B looks better. Also note that C is not quite aligned correctly.	11. Selecting the lower shape, use Send to Back so it is arranged behind the upper shape. Note that A is now the curve of the upper shape. Choosing the border at B, turn the line segment into a curve and tug it slightly with the Node tool until it aligns with the edge of the upper shape.
12. Create new nodes at A and B and push them into shape as desired for the effect you seek. Then push the corner nodes C and E up to D and F respectively.	13. Change the line segments at A, B, C, and D to curves and position as desired. Note: You may need to move the control points attached to each node.	Your final shape will look similar to this. Variations may appear in specific curved segment form, depending on your use of control points in the editing process.
14. Type the first part of your text. Highlight the text and select your point size and type face. In the finished logo (see above), this is 32 pt Benguiat Frisky (Bfrisky.TTF).	15. Using the Pick tool and double-clicking to get rotation handles, turn the text until you achieve the alignment you desire. You may also have to move the text into prosimity with the graphic elements.	16. Duplicate text and change wording as necessary. Note: if you create separate text elements for each word or phrase, you will have finer control over final placement and appearance. Change point size (and even type face as desired). Move text positioning around and change rotation until you are satisfied. Repeat until your logo is complete.