Previous article

APCUG Web Site

APCUG Reports
July-September 2006

 Next article

Index for this issue		 Default font size
Large font size
Very Large

Vector Logos
And other graphic considerations
by Don Singleton,
Editor, APCUG Director

A logo is a graphical symbol that, together with its logotype (type set in a unique typeface or arranged in a particular way), form a trademark or brand, designed to cause immediate recognition by the viewer. The logo is one aspect of the brand of a company or User Group, and the shapes, colors, fonts and images are usually different from others in a similar market. Most User Groups have a distinctive logo. The purpose of this article is to develop your logo in a vector graphic program (Adobe Illustrator or Corel Draw), and use it to make graphics for your group. Your webmaster, editor, and all officers should know where the vector graphic file is, in case someone needs it. Elsewhere in this issue of APCUG Reports you will see that we are inviting groups to write a UG Spotlight article on their group, and if you write one I would really appreciate receiving a vector graphic file of your logo.

Here is APCUG’s logo. If you check http://apcug.net/APCUG/Logos/member/ you will see the APCUG logo modified with the addition of “Member of”, and this version is intended for APCUG member groups to use on their website. We actually have three variations, and the difference is the thickness of the stroke used in drawing the logo. Originally we just had one version, but we found that when we attempted to use the logo in white, on a colored background, or if we wanted to do gold leaf embossing, the thinnest lines broke up, so we had to come up with variations with different thicknesses. For most applications we have standardized on apcug3, the one with the thickest strokes. We also created a version with the full name of the organization, in addition to “Member of”, for groups that preferred that detail.

You will see that we give you the option of 200, 150, 100, 75, and 50 pixel high images, Why don’t we just give you one image, and let you resize it up or down as you wish? Explaining that is the purpose of this article, but for now let me just say we rendered each of those files specifically for that size and resolution.

For use on a webpage a logo like APCUG’s - a graphic with just a line drawing, type, or solid colors (like the Sunday cartoons) should use GIF (or possibly PNG). A lot of people use a JPG file for their logo, but they should understand that JPGs are designed for photographs. It is a lossy format (no I did not misspell lousy, lossy means that it loses information when it compresses), but it does it in a way that you usually do not notice on continuous tone photographs. But it is not designed for line art like APCUG’s logo.

When you enlarge a bit-mapped image, like gif, jpg, and png, you lose some quality. To exaggerate that loss, I took a jpg file of the APCUG logo, and enlarged it by a factor of 10, and then did a screen capture of the area around the point of the arrow. In the graphic below, this capture is on the right, compared with the same size image rendered directly from the apcug3.ai file. Do you see why we render the exact size desired?

I will admit that one seldom enlarges a graphic by a factor of 10, but any enlargement will have a similar effect, just not as obvious. And I have been asked to render the APCUG logo pretty large, for example a five foot high banner for our Las Vegas conference.

In a vector graphic file the computer can mathematically calculate the position of every pixel. If you use Photoshop to open apcug3.ai (available on the website), you are presented with this screen:

You specify the width or height (with constrain proportions checked the other is automatically determined), and you can specify pixels, inches, or several other forms of measurement. You also specify the resolution (72 for the web, 300 for printer) and click OK and it will calculate exactly every pixel that needs to be in your file (this is called “rendering”).

It is my opinion that any logo should be developed in a vector graphic program: either Adobe Illustrator, producing an AI file, or Corel Draw, producing a CDR file. Then you can render exactly any size and resolution you need. If all you have is a bitmapped jpg file for the webpage, it will probably be 72 dpi (dots per inch), and if you then want to use it in your newsletter, you will probably want 300 dpi, so even if you want the same size image, the effect is the same as enlarging it by a factor of 4 (so my example of a factor of 10 is not that unrealistic.)

A similar effect is true for graphics on a web page, which are usually low res (72 dpi). I have had people send me a small thumbnail picture of them from a website, and expect me to be able to enlarge it and increase the resolution for print. Let us pretend that Mona Lisa from the DiVinci User Group sent me her photo. Would she be happy with this?

Everyone talks about her smile. Would this be a good example?

If you have to build a logo for your group, I strongly recommend you build it in Adobe Illustrator or Corel Draw. That does not mean that every time you use it, you will need that program. If your editor needs a logo for your printed newsletter ask him what size and make him a 300 dpi TIFF or BMP. If your webmaster needs one, ask him what size, and make him a 72 dpi GIF.

I have not tried this progam, but if you must work with an existing JPG, you might try Topaz Vivacity from http://www.topazlabs.com/. They have a free filter that might help.

Or use a free program under Illustrator from http://www.snap2objects.com/2007/07/20/45-best-freeware-design-programs/ such as Inkscape http://www.inkscape.org /download/?lang=en.