Skip to content
Cecil Coupe edited this page Nov 6, 2015 · 15 revisions

Icons are used when packaging a Shoes app (replacing the Shoes icon). It's not a trivial process and some folks really really care about these things.

How hard is it to draw a picture? If you are graphically challenged (me) thats one problem. Then you have to create the right number of icon sizes in the correct formats and you have to bundle them. Did I mention you need Linux, OSX and Windows icons and a way on your system to do all three?

In Shoes 3.2 Windows icons have to be 8 bit (not 32 bit). For now, pretend that will be fixed in 3.3

I'm going to change the Shoes icon for 3.3 (Walkabout) below. Icons are bit map images not vector graphics and OSX thinks you need a 512 x 512 (x 32) so I'll start there. So I found an image I like on the interwebs for the backgroup, loaded it into Gimp, resized in to 512 px on the smaller dimensions did an elliptical selection of 512x512, crop, invert selection, add alpha channel and hit the delete key (clear background). Mind you this took many hours of failure. I get this:

Which is freakishly large for an icon but we'll resize later. Now I want to add the word "Shoes" to the icon in a tasteful Shoes-ful color with a font size of pretty big.

That doesn't completely suck, but my tolerance is high. Perhaps imagine an elliptical type base line that bows downward with some feathering and a drop shadow. Which might take a trip into Inkscape (svg editor for Linux) and back. One could also imagine, it's good enough for now.

We have our big 32 bit png. Let's convert it to Windows .ico and OSX .icns and make little pngs for Linux.

I used https://iconverticons.com/online/ to do the conversion for png. This particular icon sucks at small sizes, but they all do down there. The website created .ico file has 6 icons including a large 256x265X32 the linux file command says its 256 bit colors. Gimp

What sizes do we really need and what are the tools we need. http://iconhandbook.co.uk/reference/chart/ http://www.visualpharm.com/articles/icon_sizes.html http://msdn.microsoft.com/en-us/library/ms997636.aspx http://msdn.microsoft.com/en-us/library/windows/desktop/dn742485.aspx https://developer.apple.com/library/mac/documentation/GraphicsAnimation/Conceptual/HighResolutionOSX/Optimizing/Optimizing.html

Clone this wiki locally