Creating a Brand Parody in Four Steps

Screenshot 2014-01-30 14.04.06.pngI’ve begun building a registry/wedding info site for my wedding in the Spring. We try to not accumulate a lot of stuff, and thanks to hand-me-downs we have pretty much everything we need, so the idea registering at a store just didn’t make much sense to us. Instead, we decided to just ask people to give us money, but that’s pretty crass. The solution! To let people pick what we spend it on, specifically, elements of our honeymoon in Japan!

Going one step further, we wanted to give unique gifts in return, a la Kickstarter. So I decided to build out a mini Kickstarter parody site that let people pick items that they want to gift us, but to do that, I needed a nice logo.

So here is the crazy-fast process for creating a parody logo.

Find the font

A quick Google search of “Kickstarter font” brings us to daFonts.com
Easy, peasy. Just download that sucker.

Make it Web Ready

FontSquirrel has a pretty sweet web font generator. Just head over there, upload the font you just pulled down. Bingo, bango - you got yourself you web font.

Add it to your CSS

Now just add some @fontface action to your CSS. You can just open up the CSS file that FontSquirrel spit out and copy it out of there. In my case, it looked like this:

@font-face {
    font-family: 'barutablack';
    src: url('fonts/rns-b-webfont.eot');
    src: url('fonts/rns-b-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/rns-b-webfont.woff') format('woff'),
         url('fonts/rns-b-webfont.ttf') format('truetype'),
         url('fonts/rns-b-webfont.svg#barutablack') format('svg');
    font-weight: normal;
    font-style: normal;
}

Now just create a class for the logo:

.logo { 
    font-family: barutablack;
    /* other style stuff you want */
}

Grab the Colors

So to finish we just want to grab the iconic Kickstarter colors. I head over to Kickstarter.com. Pop open the ol’ web-inspector kit in Chrome. Inspect the logo and grab out the colors from the CSS. Now in my case I make a ksGreen class and a ksGrey class.

Fin

Now I am already to make whatever name I want in a great looking kickstarter parody font. Crazy easy. Of course you will have more trouble with logos that are not just a font, but I’m sure you’ll figure it out.

 
0
Kudos
 
0
Kudos

Now read this

I’m a developer, and you can too!

How Meteor.js Made Me a God I’m a huge fan of Meteor.js. I’m a start-up guy who’s pretty good at almost everything, which means I’m not the best at anything. I’ve been building websites for years (mostly Wordpress), but custom web apps... Continue →