Logoshi.com Blog

Thoughts on automating logo creation

[logoshi]

I’ve spent the last few months rewriting the guts of Logoshi.com to use the SVG format.  I did this so the logo you end up with is infinitely scalable.  A secondary goal was to make the logo generator faster.  Changing the logic to use SVGs made the site about a million times faster.  Well, maybe not a million times faster, but it sure feels like it.  Above are some of the logos generated at Logoshi.com.

[logoshi]

What Makes a Shape Beautiful? Generating Logo Marks & Appealing Shapes

What makes a shape appealing?  Is it symmetry?  Balance?  Roundness?  Some sort of mathematical proportion?  What makes a shape ugly?  Asymmetry?  Imbalance?  Sharpness?  Is it possible to make a shape that is beautiful in the eyes of all those who view it?  These questions have been asked for centuries.  Recent studies have published results that suggest there may be some universal truths to what people find beautiful (spoiler: roundness).  What does this have to do with logo design?  Maybe I can use this information to generate logo marks that are more appealing ("better") which would create more more satisfied users and more sales. I tried a couple very basic approaches to shape generation:

1. Random blobs generated from noise:  Dead end.  These just looked terrible.  No symmetry or balance.  No way to control how many blobs.  No "beauty".  Without any constraints, the shapes generated were "ugly".  My gut told me to immediately abandon this approach.

2. Shapes built from geometric shapes: Promising, but too random.  There was structure in the shapes (patterns really), but no symmetry or beauty.  They looked like 2D bar codes.

Questions to apply to basic shapes built from geometric shapes:

How do I decide what colors to use?  

How do I group the component shapes into a whole?

Solution: Seed the random shape generator with a sketch created by the user.  Of course!  A user generated sketch would determine the colors used and the basic shape of the final logo.

3. Random shape generation using a sketch as input.

I found an HTML5 canvas sketch library written in JavaScript and hooked it into the logic.  I could now make a quick sketch and pass the input to the shape generation logic.  This was suddenly fun.  Fun to see what kinds of output I could get with these simple rules.  It worked, but needed some tweaks.   With some trial and error I got the default settings of the sketch canvas (line width, default colors, sketch dimensions, etc) to something that would lend itself as a good template for generating pleasing shapes with my existing shape generation algorithm. The shape generation algorithm still needs a lot of work, but at this point I felt it was "good enough" that I could move on the to the next step.  The logic is modular enough that I can come back and improve it in the next iteration. Try out shape generation using a sketch at logoshi.com

[logoshi]

Woohoo!  Logoshi.com made it to the F*cking Homepage.

[logoshi]

Optimizing Logotype Generation

One of the bottlenecks Logoshi.com experienced after being featured on multiple blogs simultaneously was the generation of the text portion of the logos.  I wanted to generate type as large as possible within a fixed container size.  I had been approaching the problem with commands like this:

convert -size 1000x500 -background 'transparent' -font 'font.ttf' -kerning 0 -fill '#000000' -gravity center label:' Company ' text-image.png

It turns out that is incredibly inefficient as the output image dimensions increase.  Convert tries to fit the text within the given dimensions starting with a small point size increasing it over and over until it just barely fits within the desired dimension.  Performance is pretty good with small image sizes on my cheap-o server, but once you start getting to 1000x500 sizes, things noticeably slow down.  After reading the docs, I realized this was the wrong approach.  The solution is to specify a point size for the text and not specify the ultimate image dimension until a final resize command.  The command to generate the text portion of the logos is now something like this:

convert -background 'transparent' -pointsize 500 -density 72 -font 'font.ttf' -kerning 0 -fill '#000000' -gravity center label:' Company ' -resize 1000x500\> -size 1000x500 xc:transparent +swap -gravity center -composite text-image.png

This command doesn't specify the image dimensions and instead specifies the point size to draw the text.  The resulting image file is then resized down to the desired dimensions.  In informal testing, this is about 10x faster.

[logoshi]

Logoshi.com featured on Product Hunt

A while back I submitted Logoshi.com to Startup Tabs.  I did it on a whim as I got up to have lunch and didn't think much of it.  I got a quick note from @jleebiz on Friday night letting me know logoshi.com was going to be featured in the Startup Tabs Chrome extension.  Logoshi appeared on Startup Tabs and was immediately picked up by Product Hunt and sat in the #1 position for a full day.  Unfortunately, Logoshi is still just a little side project sharing a web server with 16 other side projects of mine and was overwhelmed by the traffic.  It was a rush to see that people like Michael Arrington and Scott Beale were trying out my site as I sat at my desk watching the server load skyrocket. 

Now, six days later, links to Logoshi have been passed around twitter, traffic has subsided and sales have increased.  Techie types love the idea, designer types hate it.  I've implemented a couple of optimizations to speed things up.  It's a little late, but that's how these things go.  You don't know where your bottlenecks are until they show up.  I had planned on improving Logoshi over time.  Now that the idea has been thoroughly validated there's an incentive to improve it sooner rather than later.

[logoshi]

Generating Logos Programmatically

A while back I needed a logo for a side project I was working on.  I opened up Photoshop and fooled around for a couple of days and made a bunch of really lame looking logos.  I got lazy and tried a few online logo generators.  I didn't think any of them were that great and thought they produced generic, dated looking results. 

I started a contest on 99 Designs.  I paid $295 and got a pile of really crappy looking results that might as well have been clip art search results for the keywords I used in my design brief.

I'm always looking to build side projects that make a little money and I thought "wouldn't it be cool to write a program that could generate a logo capable of winning a logo contest?"  Not only would I have bragging rights to some impressive code, I could make some cash at the same time. After looking at some of the surprisingly impressive winning entries, I'm not sure I can create a program that can create winning designs, but I know I can create a program that can create acceptable designs.

There appears to be a large market for cheap logo design.  Do a web search for the terms "cheap logo design" and you'll find search result pages loaded with ads.  A quick look in Google AdWords shows that the keywords "cheap logo design" command a CPC of more than $8 for first position placement.

My thoughts moved from creating a program to win design contests to creating a service that targets users of design contest services and let them make their own logos.  Instead of targeting one contest at a time, I can cut out the middle man and offer a good, quick service to create a logo at a fraction of the price for anyone who is interested.

Future posts will chronicle my approaches for generating logos.  I know there will be pitfalls along the way.  I'm hoping readers of this blog will offer advice and feedback so I can create the best logo generator service possible.