Did-It-Myself SVG Monogram Tutorial | Part Two: Tracing in Inkscape

August 11, 2013

**UPDATE 4.11.14 You can now purchase the complete circle monogram alphabet SVG file in my Etsy shop!

Check out how I used Picasa to get my letter templates in Part One of this tutorial.

If I haven't scared you away with all of the cropping and chopping I did in Picasa in Part One, let me see if I can run you off with Inkscape in Part Two... just kidding! Hopefully I have broken down my process enough so you can follow right along with me. But first, let me tell you about my newest best friend, Inkscape.

Inkscape is a vector graphics editor with capabilities similar to Adobe Illustrator; however, it is open source so it is available to download for FREE on both Windows and Mac. (Here's the link) DISCLAIMER: I have never used Photoshop or Illustrator, so I can not speak to the differences between the Adobe products and programs like Picasa and Inkscape. I simply use the latter because they are FREE (I love that word!) and available for Mac OS. I also have no formal training in any of the above mentioned products; I taught myself how to use both Picasa and Inkscape from tutorials online, YouTube videos, and a lot of trial and error. So trust me, I know all those little buttons and tools can be a bit intimidating for a first time user, but I'm hoping that this post might help you get over some of those "first date jitters."

So let's get right on down to the good part...

I started with a blank document in Inkscape. To get my letter templates that I created in Picasa, I simply clicked the Import button on the toolbar and selected the file that contained my first letter.
I did this for all three of the letters I needed for my monogram. Now I needed a circle to place behind my letters and act as a guide. To draw a circle, I simply selected the circle tool on the left hand toolbar, then held the "control" key on my keyboard while I clicked and dragged. Holding the control key locks the aspect ratio so I end up with a circle instead of an oval.
To change the size of my circle, I selected the arrow on the left hand toolbar (this is the selector tool which allows you to select any object on the page). After I selected the circle, some new options appeared on the top toolbar, including a field marked with a "W" for width, one with an "H" for height and a lock in the middle of the two fields for locking the aspect ratio. Since I used the control button when I drew my circle, the two values in the W and H fields are the same. After I lock the aspect ratio, I can change the value in the W field and the value in the H field will adjust automatically and vice versa.
I adjusted the size of my circle to accommodate my letters--the size that ended up working for me was 151.522 pixels. So now that I had my circle template, I needed to get my letters into a format that I could manipulate/scale/change the colors, etc. To do this I used a function called "trace bitmap" (it only sounds fancy, it really is fairly straight forward).

I used the selector tool to select the image I wanted to trace. Then under the "Path" menu, I selected "Trace Bitmap" to open the trace options screen.
I used the "Brightness cutoff" setting and adjusted the threshold to 0.540. I clicked update which gave me a preview of the trace. If it didn't look right, I could change the settings before hitting OK (which executes the trace) and closing out of the window.
After the trace is executed and the trace window is closed, my page looks exactly the same as before the trace. But alas--after simply clicking on the letter with the selector tool and dragging the object a little to the side, a traced copy of the letter is revealed!
TA-DA! Pretty cool, huh? At this point I changed the traced letter to a different color to make it easier to distinguish from my template, and I changed the color of the circle I drew earlier. I chose a light turquoise/aqua-ish blue for the circle and fuchsia for the letters. I liked these colors because there was a good amount of contrast between the two and I was still able to see the outside edge of the circle.

NOTE: The "W" looks a little funny because of the watermark in the original image. That's OK, I show you how I got it all fixed up in Part Three.
After I traced all three of my letters, I removed some of the clutter on my page by deleting the letter templates (since I traced them, I didn't need them anymore). Next, I arranged my letters on top of my circle, in order of course. I tried to get the letters aligned as close to the edge of my circle as possible while maintaining even spacing between the letters. The letters did not align with the edge of the circle perfectly and there's also that "W" to deal with, but it was starting to look like a monogram!
Now that I showed you how easy it is to trace in Inkscape, do you want to know how I got my edges to align neatly with the circle? Or how I fixed the funkiness with the "W"? Check out Part Three of my SVG Monogram Tutorial: Editing Nodes and Paths in Inkscape! And in case you missed it, here's the link for Part One.