Designing An Icon

When I need a break from staring at code on my screen, I always like to take some time doing something artistic, like designing an icon.

Background

Designing t-shirts has long been a hobby of mine, but I have also had the pleasure of creating various graphic design projects, such as logos and printed marketing material. I started out working in Paint, using Mario Paint strategy books to create pixel art found in retro video games. Eventually, I moved up to Jasc Paint Shop Pro sometime in the mid-90’s around version 4 or 5. For a long time I was intimidated by Adobe Photoshop, having gained familiarity over time with PSP, but I eventually caved in and found out why it is the de facto product in image editing (although times are a-changin’).

Once I was able to play around in Adobe’s Illustrator, after spending a great deal of time with Paint and Photoshop’s bezier curves, I was instantly hooked. Mathematical vector illustrations capable of scaling to any size and retaining the same precision are fascinating to me. It’s perfect for designing shirts and logos and other drawings that need to be replicated or enlarged for printing.

Mockup

Icon MockupSince I’m rebranding my online identity, I decided to create a logo that can be used for icons and other applicable areas in a way that reflects my personality. Since the name “Quantastical” is rather lengthy, I thought I would use the letter Q, much like how Facebook has an f on their icon. I quickly mocked up something in Photoshop that could be suitable for a app icon.

 

It’s very simple, just a Q.. on a black gradient with a gilloche pattern overlaid. Don’t ask me why I know about gilloche, but it’s the term used to describe the seemingly random security patterns found on paper currency. I chose green as my primary color, both because it has sentimental meaning (miss ya, Josh Green) and because green is the color of money, playing on the background pattern I found on Google’s image search.

Creation

Once the idea was there, I started reviewing how gilloche patterns are created (spoiler: very expensive software) and stumbled across an Adobe Illustrator tutorial that pretty much shows exactly how to make various gilloche patterns. What better way to learn the finer details of Illustrator than a step-by-step tutorial?

I followed the tutorial, making changes wherever I felt comfortable and were fitting for the project file I was creating. What I ended up with was beautiful. I’m amazed that something so intricate can be made in no more than 2 hours. I ended up switching the font to something that better reflected the guilloche. I kept the ellipses, but realize that there are only 2 instead of 3. I decided to do that both to reduce width of the overall figure, thereby allowing maximum scaling within the outer ring, and because I thought the Q character in the chosen font looked similar to a 2, thus 2-2. I find the double-digit 2-2 to be more interesting Jordan’s 2-3.

Logo Tutorial

That, by itself, would make for a great icon, but for some reason I had this feeling that it seemed like it was missing something. The background flower pattern fading to black in the center of the Q just needed more detail, since I didn’t have some of the other embellishments that the tutorial offered. And what better way to embellish an image than with blatant symbolism?

Symbolism

I have this hat with gold threading, so I decided to play around with the colors and when I saw it, I thought it had a lot more “pop” to it, while infusing even more meaning: gold being one of the most sought-after elements on the planet and having major significance since the ancient Egyptians built their pyramids and beyond.

Since this is merely a personal logo and not something that I intend to trademark, I went back to Google images to find some suitable graphics. Usually, I try to locate something similar to my vision, so I can mock it up and see how it looks, before redrawing everything myself. This time, however, I just looked for some money/gold symbols. I also added the keywords “vector and line art” to try and find something that would be at home on a dollar bill.

I found an eye that works perfectly as an all-seeing eye symbol. When I was looking up Knight’s Templar symbols on this page, I found this image of a spiraling staircase that reminded me of a double-helix. So, while I was looking up DNA line art, I found a suitable computer board double helix design.

I put it all together and came out with something that just looks fabulous. I tried scaling it all the way down to 16- and 32-pixel square favicons and it was still a legible Q with some ornate background design. What do you think?

Icon Illustrator

Leave a Reply

Your email address will not be published. Required fields are marked *