Vectoring A Display Icon

Vector IconSo far, my posts have only been about Science or, whatever, but I’ve thus far not included art, which is one of the main things I’d like to bring to this blog. So, since I’m sure one of the first things people will see when they come to this site is my logo, I thought I’d address how to make that icon, which could also be used for social media, or branding. Say you wanted a fun, personalized Twitter Icon? Well, there it is, and I’m going to show you how to (hopefully) make one for yourself.

The first thing I have to address is what program to use. Many people like using Photoshop, Gimp, or whatever. While these programs are nice, honestly, you shouldn’t use these programs to create any kind of branding, or icons to be used on the internet. Why? Well, they function off coloring pixels, and once you’re done arranging those pixels into an image, changing the size to fit what you need is mostly impossible without making the image look like crap. So, what’s the alternative? Adobe Illustrator.

The difference between Photoshop and Illustrator is how they make images. Have you ever used the Pen Tool in Photoshop? Illustrator is essentially an entire program based around that tool. And, the difference between an image made in Photoshop and one made in Illustrator is that Illustrator doesn’t create pixels – Illustrator creates Math, which is called a Vector. Every file you create in Illustrator really only stores what points you make, where those points are in relation to the Art Board (canvas), at what angles do those point connect to other points, and what degree is each connection arching into. Since an Illustrator image is really only stored as Math, you can change the size of that image to anything you want, and really, the Math will always remain the same. It’s not until Illustrator outputs that information into a .png, .jpg, or whatever you need, that it creates pixels. This is why you should always make images for the internet in Illustrator, because you never know what size or shape you will need it in.

Let’s Get Started

Vector IconNow that we got the program explanation out of the way, let’s start with the icon preparation. The first thing you will need is some kind of reference. Granted: you could always just start plotting points and make something that way, but personally, I always prefer starting with a plan – a sketch, photo, or other art that I can used as a base for my image. In this situation, I used both a sketch I did of myself, and a quick photo for my eyebrows.

Vector IconAfter that, I plotted all my points around the outside of the head first. The reason I do this is because of the Pathfinder tools – these is honestly your absolute best friend when making these images. See, when you plot out two shapes, you can then place one over the other, select both, then use the Pathfinder tools to subtract one of the shapes from the other. In this situation, I made the outside of my face, then I made the inside – plotting around the inside of my hairline and beardline – then subtracted that shape from the outside shape. Vector Icon

Honestly, the Pathfinder tools are so versatile when making any shape in Illustrator. Not only can it be used to cut one shape out of another, but let’s say you quickly just want to chop off one side of a shape you made, but don’t want to go through the effort of deleting all the points – just quickly make another shape, then subtract the unwanted section from the first image. It’s as simple as that.

In this situation, after subtracting the inside of my face from the outside of my face, I then made an additional shape for my mustache and two more for my eyebrows and simply positioned them where I wanted. When I had my face set up the way I wanted, I then made a large circle and subtracted all those shapes from the circle, and made one large, full shape. Vector Icon

Finalizing The Graphic

From here, I went through a few different background designs. Some of them included little flag shapes, some were round, or square, but I ended up settling on the circle as my primary option, and a square with rounded corners for websites that don’t like transparencies. I also added some diagonal lines in the background just to give it more of a texture. Sure, I could’ve left it with a solid color, but, to me, that just looked a little boring when zoomed in.

The final result ended up being what you see as my icon. I’ve had to go in several times after “finishing”, to tweak the colors, or eyebrow position, because my opinion on it changed afterward. But, overall, it’s stayed roughly the same. Let me know if you have any more specific questions in the comments section. I would be more than happy to help anyone figure out how to handle something like this for themselves. Thanks for reading.