How Frugal Are You?
 
Recreating a logo using Inkscape and VectorMagic
Written by The Frugal Web Designer   
Friday, 11 January 2008

The Problem: Editing Bitmaps 

Recently I worked with a client who only had a jpeg of their logo.  I was redesigning their site and needed the logo to fit the new design.  Enlarging the bitmap wasn't acceptable, the artifacts from the anti-aliasing of the image were to noticeable.  I needed to recreate the logo. 

The Original Logo

The enlarged logo.  Notice the artifacts

mhm_logo.jpg

mhm_logo.jpg

I wasn't worried about reproducing the company name on the logo, that is simple enough to redo.  The real issue was the green concentric semicircles.  Those were more problematic.

Using VectorMagic 

VectorMagic, is an excellent free online utility from Stanford university that vectorizes bitmap images. 

After I uploaded the image I had to play with the settings to get result I wanted. Here is the result:

logo_vectorized.png

The above obviously doesn't look that good.  The reason is the more aliasing and gradients in the image, the more difficult it is  to vectorize. (Note: If you have bitmaps with very defined colors and edges, the results can be quite stunning.)  But for my purposes this actually worked out fine because I only wanted the conentric half-circles.  I exported the image from the site in SVG format and opened it using Inkscape.

Edit the Image Using Inkscape

Inkscape is an opensource vector image editor that works quite well.

The first thing I did was Ungroup the image so as to separate the different elements of the image. I then deleted everything until all I had was the following:

raw_logo.png

If you remember the shapes of vector images are mathmatically defined using keypoints called nodes.  In Inkscape I was able to edit the path nodes of the shapes to smooth them out.

refined_logo.png

Since my goal was to reproduce the original logo.  I needed to add a blue shadow behind the image. To do this I made a copy of the half-circles.  See the following images

Copy of original shape recolored and enlarged
Used Inkscapes "Fill and Stroke" edit box to blur and adjust the opacity of the image.
Placed original image on top to create the blue shadow effect.
 bluel_logo.png  blur_logo.png  

final_logo.png

 Once I had this image completed I simply added the text.  You can view the result @ mhmeducation.com.





Reddit!Del.icio.us!Technorati!StumbleUpon!Free social bookmarking plugins and extensions for Joomla! websites!
 
< Prev

Login Form






Lost Password?