Chordin + Creative Market - A Case Study

March 16th, 2015

Chordin started out as a personal side project a year ago. The original designs that I came up with were more like a wireframe, meaning, flat, white and lacking personality. Over the course of the year I started thinking about how I might bring some kind of personality to the site.

I knew I stunk at creating my own visuals and the genre of the site didn’t exactly lend itself to many inspiring ideas, that is until Creative Market came into the picture. I was surfing the Recent Products section on Creative Market and ran across Danil Cetvericov’s illustrations. I really loved his abstract, funk, 80s style of illustration and knew immediately that this was exactly what I was looking for.

To complement the illustrations and design, I used a font called Electro by Alex Haigh and icons by Gasper Vidovic. Through Creative Market resources alone I was able to bring a skeleton of an idea to life. The total costs were $114, pocket-change for such a great set of design tools. You can see all the products I used below, and you can visit Chordin to see them in action.

  Posted in Design

Illustrations As Design Elements

March 4th, 2015

I like to design things. The only problem is that while I’m good at layout, color and typography I’m just not that good at the artistic design-y part of designing. Maybe that’s what people call a UX or UI designer? I’ll let you decide what I am. What I do know is that if there’s a crutch to be used I’ll use it. Since I’ve been posting a ton of free illustrations, I thought I’d show you how I use them and how you can too. So raid the infirmary, stick those crutches under your pits and let’s get started.

Have an idea

The first order of business is to come up with something you want to design. If you notice in my site footer, I have a really cool old map of New York. I also have a really old pamphlet thingy with a nice drawing on it. Both of those design elements were pulled from illustrations that I found on the internet. The water color in the header is pulled from a page in Scuffy the Tugboat. I had ideas and then I figured out how to get those ideas implemented without actually having to do it myself and without stealing of course.

Ultra Hi-Res

Once you have your idea and the source material for that idea, you’ll need to make sure that the source material is as hi-res as possible. I found the New York map via Google Images and the pamphlet illustration via Flickr. Since I owned Scuffy the Tugboat I had no problem getting a hi-res scan of the page that I liked most.


The reason for a hi-res source is so you can extract out the part you want. The higher the resolution the more forgiving the extraction will be. You’ll want to open up your source graphic in Photoshop (or similar program) and then you’ll want to use the Magic Wand to select and delete out the background. I usually start with the following settings:

  • Tolerance - 30
  • Anti-alias - Checked
  • Contiguous - Unchecked

thumb thumb

Oftentimes there will still be some straggling color. Do your best to magic wand that out as well, but don’t sweat it too much. The next step will actually cover over a multitude of straggling background colors.


After you’ve deleted out the background and have the illustration left, you can slap this baby on top of whatever you want. The trick here is to experiment with color overlays, opacity and blending modes to get the desired effect you want.

Using a color overlay will get rid of any non-uniform color and gives a nice solid look to the illustration. But, changing the blending mode sometimes resolves this issue without having to put a color overlay on top. I use opacity mainly for aesthetics. In the following 2 photos I used all of these to achieve the desired look that I wanted.

thumb thumb

That’s all there is to it folks! If you’d like to practice with the assets I used, here’s a handy list of links. Some are free, some are not:

  Posted in Design & Illustrations

New Catechism of the Steam Engine

March 3rd, 2015

I don’t know how many more of these I’ll be doing, but this is the 4th installment of free illustrations (see also Valve Gears, Ernst Haeckel and Audubon) that I’m making available here. This particular set of mechanical illustrations is from the book New Catechism of the Steam Engine by Nehemiah Hawkins. You’ll find a slew of beautifully illustrated Corliss based steam engines in this set.

The one thing that really stuck out to me regarding the Corliss steam engines in this book are their monumental size. I found myself marveling at the engineering genius that went into developing and ultimately building these engines. I would have loved to walk into a giant steam engine building factory, or stand by the engine pictured in the header.

Nostalgia aside, marvel at and download all 170 illustrations for free.

  Posted in Illustrations

Client-Side View Caching ā€“ Part 1

March 2nd, 2015

I’ve been building a web-app call Chordin for a while now. It’s a work in progress and it has been letting me scratch an itch that I have related to programming an isomorphic app. There’s plenty of Google juice on what an isomorphic app is (in case you don’t know) and how it differs from a single-page app. The main draw for me is to be able to serve fully-formed HTML from the server for performance and SEO, while retaining the speed and flexibility of client-side application logic (paraphrased from Airbnb’s article on the topic).

To start, I decided that I wouldn’t use any tools that are already out there, tools like Meteor.js, Node.js, React, Angular, etc. Yes, I am crazy, but my main goal was to force myself to learn concepts, not rely on tools. I wanted to experiment with my own theories, even if they might fail. In the end I hoped to have a better understanding of the problems that these various tools are trying to solve. I by no means know what I’m doing, I’m definitely in way over my head, but it has been a lot of fun throughout the process.

The speed of an isomorphic app was my main concern. I knew that Chordin would be used on all devices and various internet connections and therefore it needed to be fast. As I said above, I purposely limited myself to what I could use, but I also had my own limitations as to what I knew. On the server side I decided to use PHP (it’s what I know, don’t hate), Memcached (for caching SQL queries) and ElasticSearch (for near instant song searches of large amounts of database data). This server setup gave me all the speed for the requests being made.

On the client-side of things I rolled my own Javascript to handle view loading, caching and uncaching. The code interfaces with the server and has its own layer of view caching. I was most interested in solving client-side caching as it can provide some of the best results in speeding up a user experience. Another reason is that caching on the client-side is a very complex beast, and unless I’m mistaken, Javascript frameworks don’t address this particular issue. There’s a lot of room to explore viable solutions. Most solutions that I’ve seen try to make the client ā†’ server, server ā†’ client communication as fast as possible. But in the end, there is still an exchange taking place somewhere. The logical next step in my mind is to eliminate those exchanges all together.

In subsequent posts I plan on describing in more detail the ideas that I have implemented in Chordin, as well as more conceptual ideas I hope to implement. Stay tuned for more!

  Posted in Programming

Valve Gears, Steam Engine Design, Steam Boiler Design

February 17th, 2015

In this 3rd installment of illustrations (see also Ernst Haeckel and John James Audubon) I bring you over 100 year old mechanical illustrations of valve gears, steam engines and boilers. These illustrations come from a 1908 I.C.S Reference Library book, Valve Gears, Steam Engine Design, Steam Boiler Design. I picked this particular book up from Shop Goodwill for a decent price.

It hurt me to scan this book as I had to open and push it down on the scanner to get the best scan. I could hear the brittle binding screaming in pain, but I managed to get 178 illustrations scanned from the book and made them available for you to download for free. I did a bit of minimal processing of the scans like cropping, sharpening and brightening, but other than that, they are as is from the book.

I hope you enjoy these illustrations and if you happen to use them, please give me some link love.

  Posted in Illustrations


February 11th, 2015

Sometimes I feel like my heart is frozen, but even frozen things will eventually melt.

  Posted in Photography

John James Audubon

February 10th, 2015

I’ve been slowly building up a collection of ultra hi-res images that would work really well for printing. I initially got inspired when I ran across the Ernst Haeckel prints. My goal is to decorate my office (whenever that gets completed) with prints. It was to my amazement and joy that I ran across the new Audubon website. They have made all of John James Audubon’s Birds of North America watercolor illustrations available as free hi-res downloads. It’s definitely worth your while to look through them all. If you’re looking to download all the images, made your life easy by making all 435 images available on Dropbox.

  Posted in Illustration

Gotham Sunrise

January 19th, 2015

The rising sun pierces through the metallic skeleton of New York City.

  Posted in Photography


December 10th, 2014

In case you missed it last night, I finally launched the beginnings of something that I hope becomes much bigger and eventually revolutionary. At the offset, Chordin is just a simple web-app that lets you search for guitar chords by song, album or artist on any device.

For the short-term, I plan on integrating favorites and playlists, allowing me to scratch an itch I’ve had with managing all the guitar music that I play.

In the long-term, I hope to bring a new, open standard for how guitar tablature is written. You might wonder why a new format is even needed, but take a look at any tablature site and you’ll see that we’ve been stuck with monospace fonts for as long as anyone can remember. There needs to be change and I have a scheme for that change.

In the meantime, enjoy my little web-app, follow along on Twitter and enjoy this fine December day.

  Posted in Internet

Battery Adapter for Vintage Film Cameras and Exposure Meters

September 29th, 2014

I have a vintage Pentax Spotmatic F that I inherited from my grandfather. When I first got it the batter for the light meter was working correctly. This is pretty surprising since the battery was an original PX625 mercury battery. After a good year or two of usage, it died on me. I did some preliminary searches on the internet and found this Wein MRB625 Cell replacement battery on B&H. Unfortunately, when it came in the mail it didn’t work. Google let me know pretty quick that this is common with these types of zinc-air batteries. I had a choice, I could buy more batteries and hope that they hadn’t died, or I could find a different solution.

Google was my friend again. I found someone who had mentioned buying an adapter that would convert the voltage of a common button battery to the voltage needed for the light meter. I was a bit skeptical since the adapter was created and sold in Thailand, but the person claimed that it was worth the price and worked well.

I decided to take the risk, bought the adapter and have had light meter success! The adapter that I purchased converts a normal Energizer 386/301 Silver Oxide (1.55V) button battery to the voltage of the MR-9 PX625 PX13 Mercury battery (1.35V). You can get the adapter on Amazon for about $30 and it arrives in around 2 weeks. I suppose the ultimate proof is in how accurately the light meter itself is registering. I’ll find that out after I get my first roll of film developed.

  Posted in Photography