GeekStack is recruiting playtesters for our online trading card game with a science and technology theme. If you're interested, sign up here. Thanks!
How I Made the GeekStack Logo With No Design Skills Whatsoever
Posted on | November 4, 2008 | 1 Comment
I hope you like the GeekStack logo I made. I like the idea but at this point, I didn’t want to pay a designer to give a full fledged design. Even though I’d like to have a vector graphic Photoshop file, I’d rather keep money to pay for things like lawyers and printing. So here’s what I did instead.
#1: Pick Your Text
First, I had the idea for the symbols in place of letters. I had originally wanted to have some “geeky” font, but I don’t have enough familiarity with typography to even know what that would mean. I thought of some “computerey” fonts, but I want GeekStack to cover all fields of science and technical achievement. I don’t know good places to go for fonts or what is a good price. I also don’t know someone who I could consult for such advice. I stewed on this for a while and the idea hit me that science is full of symbols and I could use scientific symbols as my font!
#2: Pick Your Letters
Second, I hunted for symbols that could be used in place of letters. This is up to you whether you want a letter substitution or not. If not, skip steps #2 and #4. I started by looking in Wikipedia, and some useful pages were the Table of Mathematical Symbols, Physical Constants, List of Symbols, and Greek Alphabet. Once I had those in mind, I opened the Windows Character Map and tried to find those characters. (TIP: Arial seemed to have more symbols in the Character Map than other fonts.)
When I found each one, I selected it and then copied and pasted it into Word. I ended up with several candidates for some letters and none for others (darn you G!).
#3: Pick Your Font
I got all the ones I liked and then saw how the whole set looked in different fonts. Word 2007 makes this easy because you can change fonts from the ribbon and the selected text changes font as you move through the list. Pick a few that you like.
I chose the bottom one because I liked the serifs, the weight, and curves of the symbols.
#4: Finalize Your Letters
Once I had some font candidates, I looked at how the different letters look and picked one I liked best. (You can combine different symbols from different fonts, but this makes things more complicated.) Now that I had a font (Sylfaen, if you’re wondering), I experimented with different letter combinations to see which ones worked well together. Depending on how many letters have multiple candidates, this might be a really easy or really hard exercise.
I ended up choosing the second one because the words had a good shape. I didn’t like the hanging lower case ‘g’, the really big sigma, or the bottom-weighted partial-differential symbol. The ‘<’ wasn’t a very good ‘c’ and since the S was going the be the center of the image I didn’t want to emphasize money.
#5: Tweak to Perfection
When you start including crazy unicode characters in unfamiliar fonts, things don’t always line up. In my case, the tau and the alpha were too small and the sigmas were too big. I wanted the GEEK and the TACK to be the same size with the integral symbol to be much taller. This gives the logo both vertical and horizontal balance. I had to make the tau and alpha about 40% bigger and raise them up a few pixels. The integral is almost twice as big and lowered a few pixels.
#6: Create Preferred Formats
I saved this in Word so I could use Word’s font renderer and zoom as my ghetto vector graphics version, then took a screenshot and pasted it into Paint.Net. I then cropped it tightened the words up, bringing the GEEK and the TACK closer to the big S (note the difference between the logo at the top of the page and the screen capture in step #5). I saved it in a variety of formats (jpg, png, pdn). I also made a square version of it with just the GSK (useful as a gravatar or signature).
So I spent $0, less than an hour, and I have decent looking logos in a variety of useful formats. Even if you don’t go character-crazy, this is a good way to experiment with typography on the cheap.
Comments
One Response to “How I Made the GeekStack Logo With No Design Skills Whatsoever”
Leave a Reply
November 6th, 2008 @ 6:47 am
[...] that I have my logo, I wanted to get business cards. Tech entrepreneurs often sneer at business cards as a crutch for [...]