Maxvoltar

Flip Mino icon

Being a proud owner of a Flip Mino HD, I started Googling for a nice icon to replace the default Disk Image icon. When my search didn’t return any results, I decided to create one myself. Because, how hard could it possible be to design an icon?

Turns out it is hard to design one, and it involves a lot of work. You also need to know which tools to use. Note: this is the first time I create an icon to be used in Mac OS X, I’m just sharing what I’ve learned from my first experience with it.

Tools

Design

To design the icon, I used Photoshop. It’s a pretty rectangular icon, so I could design it entirely in one app. Besides designing the icon at a large size, you have to design all the different sizes (512, 256, 128, …) to make sure your icon looks crisp no matter what size it is displayed in. For more information about designing icons, I suggest you take a look/listen at a presentation Jon Hicks gave at Geek in the Park 2008: Pixel Pushing: An Introduction to Icon Design (includes audio transcript and his slides).

Creation

Icon Composer

A while back, I heard about the excellent Icon Builder. Unfortunately, the Photoshop plugin isn’t updated (yet?) for CS4. Then I remembered an app I found while browsing through the developer folder on my Mac: Icon Composer. It is installed ~~when you install the entire iPhone SDK~~ with every Mac dev tool bundle (thanks, Stephen). It’s free, and works like a charm. You just drop all your different sizes in it (.png format work best I guess), hit CMD + S, and it creates you a nice little .icns file.

Applying the icon

To use the icon for a folder (or in our case, the Flip), you’ll need Panic’s Candybar. Just hit “Quick Drop” after you’ve imported the .icns file, and you’re done!

Download

Download Icon flip-mino-white.zip (86 KB)

To apply the icon, just select the folder named “Flip Mino HD White”, and hit CMD + I. Click on the icon (top left), and copy it. Then select the Flip (or any other folder), open the info panel, click on the icon, and paste it. Simple as that.

Composition

15Comments

Mr K

4894 days ago

Very clever … and fantastic detail for your first icon.

I’d never seen Icon Composer before, guess I’m going to have to download the whole iPhone SDK and reinstall

Great post, thanks!!

glenn

4894 days ago

Nice, it’s good to see friends learning new things. Congrats.

Jon

4894 days ago

Thanks for sharing :)

Tom Belmans

4894 days ago

Hello Tim, very nice work but I wonder if you have it in black also ?

cheers,
Tom

Elliot Jay Stocks

4894 days ago

Nice one, Tim – it looks great!

And I never knew that about the Icon Composer in the iPhone SDK. That’ll certainly come in handy.

(One thing it might be worth clarifying for readers: in ‘applying the icon’, the first method you describe is for users with Candybar, but you don’t have to use Candybar; the second method you describe is the alternative for those without the app. In that sense, it might be worth putting the basic version first.)

John Sutherland

4894 days ago

Really nice looking icon—now if only I had a Flip Camera :)

Stephen Allred

4893 days ago

Lovely icon.
For reference, Icon Composer is installed with any of the developer tools bundles, not just the iPhone one.

Tim Van Damme

4893 days ago

Tom Belmans: A black one will be released soon!
Elliot Jay Stocks: Sometimes, a simple copy/paste doesn’t work. I’ve Googled for the issue, and some people can’t do it. Hence the Candybar way.
Stephen Allred: Thanks, changed!