Icons Archives

DingBit

Posted at 10:50 AM

I’m pleased to announce a new product shipping today over at the IconShoppe. Chameleon16 is a new pixel font for Mac and Windows, hand-crafted using only the finest pixels available. It’s based on the Chameleon Original icons that we’ve been hocking over here to support our growing latte addiction.

Initially, I’d thought to just convert the GIF images to a bitmap font so that the customer could change the color and add effects at will. The minimalist nature of the icons begs of it, and having the 16×16 icons in font format would sure be handy. But while I was at it, why not create new alphanumeric characters to go along with it, and create a real font in the same style?

As the name suggests, Chameleon16 is designed to be used at 16px. And like its pixel font predecessors, it also works at multiples of that base (32px, 48px, 64px, etc.) for retro, extra blocky goodness.

Since each character is a 16×16 tile, it admittedly has limited use for setting large chunks of text. You’re not going to use this font to display client invoices or proposals. But interesting things can happen when you start playing with kerning and line height, and I’m excited to see some interesting applications where it could be used creatively.

The TrueType font includes standard alphanumeric characters as well as the entire Chameleon Original icon set as alternate characters and costs just $39 bucks. As a special promotion, the first three orders also get a free copy of Bulletproof Web Design, Second Edition that hit store shelves last month First three orders received!.

Special technical geek notes

The process of creating the font was a learning experience, and I would compare it (at times) to removing stubborn wallpaper. I first created the characters in Photoshop, then used a program called BitFonter to turn those into a bitmap font, assigning each character, adjusting metrics, etc.

Over the course of the last six months or so I began chipping away it, navigating the spotty documentation, and teaching myself the wonders of font metrics, character encoding and more. In the end, I needed to create additional outlines of the bitmap characters and export these into TypeTool which could then generate a proper TrueType file (after having problems letting BitFonter do this). If I knew what I was doing this wouldn’t have taken long.

I avoided using something like Fontographer (also by FontLab) because I was creating a bitmap font and BitFonter’s pixel editor seemed a natural choice — and for creating and editing pixel fonts, it’s great (or at least slightly more intuitive). It’s the output and documentation that was confusing, and my respect for real type designers has grown tenfold after this little project.

So, my advice for those looking to create their own pixel fonts: learn Fontographer, or remember that you’ll need TypeTool in order to generate a TrueType file from BitFonter’s outlines.

New Chunky Icons T-Shirt

Posted at 2:25 PM

Just in time for Spring, the all-new Chunky Icons Tee is available, selling fast, and shipping immediately! This is a limited-editon run that includes a numbered, signed letterpressed card and free stickers. The shirt is printed by the fabulous folks at Acme Prints on “Army” American Apparel (of course). You will love it.

On the front are five icons lined up in a row (from the Chameleon Chunky stock icon set over at our IconShoppe). Your task is to come up with what they mean. Best answer added as a comment here wins a free shirt (comment before April 7, 2007 to enter). On the back yoke is a small SimpleBits logo mark. Just because.

More detailed views of the shirt are available in this Flickr photo set.

41 Comments

An Event Apart Boston

Posted at 12:37 PM

Don’t wait for An Event Apart to come to your city — just make plans to catch the next one wherever it is (Seattle is next). AEA Boston was probably the first two-day, single-track conference where I felt like every session was extremely valuable. I came away from each presentation either inspired or educated (or both). The easy, 20 mile commute to Boston didn’t hurt either, and having Kerry and Jack see me speak for the first time was fantastic (at one point up on stage, I could hear “Dada!” from the back, and I’ll tell you … that calms the nerves).

I had fun talking about “Interface Design Juggling” — a potpourri of color, typography, favicons (yes, favicons!), microformats and bulletproofness. This was the first run through of this particular set of ideas, but I think it went pretty smoothly. I was relieved to hear several people thank me for devoting time to favicons — a fun topic that I think deserves more attention. And I’m looking forward to expanding that segment in the future.

The latest updated versions of the slide deck can be found here (in PDF form) for those that were in attendance. As usual, they might not make sense without the commentary — and more importantly some of the transitions are muddled into a single slide (Keynote kept crashing when I tried to export each transition into its own slide).

Thank you to Jeffrey and Eric for inviting me to speak — it was quite an honor to share the bill with such an amazing group.

IconShoppe Grand Opening

Posted at 3:32 PM

Without fail, I get more done when the work is piled on. When stress is at a max and there are a million to-do items. But this was long overdue, and something I’ve been meaning to set up for a while for reasons I’ll go into in a minute. So, before I pack for Austin, I’m happy to have finished this off enough to flip the switch.

Today, IconShoppe opens it’s doors. I’ve finally spun off the stock web icons I’ve been selling here at SimpleBits into their own, proper digs. It’ll motivate me (hopefully) to put more time into more icon sets and some other ideas I’ve had brewing for a while. This “setting up shoppe” was the first necessary step.

That said, they’re the same simple little web icons I’ve been selling here for the last few years. But they now have a better framework in which to grow and a more easily maintainable system behind them (Wordpress, customized).

Stay tuned for more, and grab the RSS feed to be alerted of new stuff happening over at the ‘Shoppe. I can’t say it’ll be updated often, but this is just a start, my friends.

35 Comments

New Icons: Chameleon Chunky and SuperPack

Posted at 2:20 PM

While I was putting together an hCard example for next week’s Web Directions North presentation a while back, I whipped up a few icons that were Chameleon in spirit — but doubly thick. And so, Chameleon Chunky was born: the newest addition to the color-changing family of stock icon sets.

The extra-thickness of this style was a bit more challenging for some shapes, but the ability to add single pixel details makes for good contrast when using just one color. Like all the Chameleon sets, these are royalty-free stock icons that are customizable to fit your site’s color pallette. Just punch in a hex color, hit a button and we’ll magically generate a custom-colored set for you immediately. Ah, the wonders of technology, and all for $25 USD.

If you’re feeling lazy or indecisive, a Ready-Made Pack is also avaible that includes 6 pre-selected colors for $35 USD.

Chameleon SuperPack

In addition to the new Chunky style, I’ve also put together a SuperPack of all four Ready-Made Packs in one convenient (and low-priced) bundle. For just $85 USD, you’ll get all four styles in 6 different colors — 1,680 icons in all. That’s a lot of pixels folks.

Hope you dig ‘em!

Re-Brand New

Posted at 8:41 PM

For the first time ever, SimpleBits has a logo! Roughly six years ago, I took a stab at creating an isometric set of three boxes (cardboard, to be specific). It was really an icon — and one that sat in the header alongside my personal site at the time, the now-defunct cederholm.org. Over the years, it’s always been there, and I’ve probably overdone it in terms of branding: I put the boxes everywhere. It became the brand. But it was always awkward, and highly inflexible. It worked terrible in print, where at small sizes, the pixelated blocks looked more like botched clip art.

Several months ago, I finally started on a new logo design — something I’d been meaning to do for years. It went rather quickly, playing with four curly brackets set in Avenir that created a frame around a hand-drawn cube (vector this time!). I finally had something I didn’t hate the next day. I’m excited to have a mark that’ll be flexible going forward, and it was crucial for me to create one that could be any size, or color (even looking intact using a single color).

I owe Greg Storey thanks for suggesting Whitney for the logo’s type, after I realized that the previously-utilized Triplex just wasn’t working.

It was the logo refresh that forced me to rework the site design as well. I’m not one to change things for the sake of changing things, but the new logo was a good excuse to update the templates as well. And what you see now is the result of several weeks of tinkering.

Much of the structure and layout of the site remain the same. Nothing earth-shattering here. This time around, I’m trying out an elastic em-based layout. If you’re unfamiliar, try resizing the text in your browser to see what happens. For this particular site, I think it works well. If I had the need/desire/requirement for an additional column, then I would’ve explored other fluid or variable fixed-width options. But for this simple, two-column set-up, I thought it’d be interesting to try something with ems.

I’m hoping the revised logo will help swing the rest of the company forward. I have a lot of ideas and things in mind for the future, and this is merely step #1. Here goes nothing. But first, new business cards need ordering.

New Chameleon Icon Sets

Posted at 4:32 PM

It’s been almost exactly one year since releasing Chameleon, a customizable stock icon set for the web. It’s been really successful, and later spawned additional ideas for color changing goods. Then life happened, and most of those ideas fell by the wayside.

I’m happy to announce today, at least a small portion of those grand ideas in the form of two new Chameleon icon pack styles:

Chameleon Graphite

A reversed version of the original, the graphite style has a shiny silver container for the tiny shapes that change color inside.

Chameleon Mini

Just the tiny shapes without the container. I’d been meaning to get this set finished since releasing the original and just never got around to it. These miniature icons are especially great for embellishing links inline.

Just like the original style, each of these new sets is available in a “Ready-Made” pack of six pre-selected colors ($35 USD), or as a single set using the hex color of your choosing ($25 USD). Hope you dig ‘em.

Color Trends

Posted at 2:43 PM

It’s been just a few months since Chameleon was released. The response has been fantastic, and I thought it’d be cool to share a sampling of some of the custom colors that people are purchasing.

It’s interesting to see very specific colors being chosen (in general, as opposed to web-safe). To me, that’s a sign that the custom engine thingy was a good idea. It’s also fun to imagine how these specific colors are fitting into their designs. Would love to see examples out in the wild, should anyone want to share.

And for what it’s worth, endless shades of blue seem to be far more popular than any other color. Hooray blue.

41 Comments

Chameleon: a new icon set that changes color

Posted at 3:00 PM

I’m excited to finally announce a little something I’ve been working on for quite awhile. Chameleon is a unique stock icon set for the web that features simple, friendly, universal shapes designed and hand-crafted by SimpleBits. The set contains 70 royalty-free icons, each weighing in at a standard 16x16 size (perfect for favicons) in GIF format. Chameleon is unique in its ability to change color, allowing you to custom match the set to your own site’s color pallette.