Creating Icons

Cecil Coupe edited this page Nov 8, 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?

Although some folks say you need really big icons (OSX retina) I'm going to stick with the lowest common denominator 256x256x32

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. I found an image I like on the interwebs for the background, loaded it into Gimp, resized it 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. That 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 an .ico file that has 6 icons. For OSX make sure you don't download the hqx, you want the .icns.

NOTE: the Linux file walkabout.ico command says it is 256 bit colors. That is incorrect. What's inside the file can be much different than what Linux reports. They are all 32 bit icons at small sizes which Windows handles just fine.

Windows

If you're reading this because you want a custom icon for the secondary or custom installer or you just want an icon for including in your app's directory so you can call `set_window_icon_path() then you've done enough. Stop reading. You have a png (your choice of size to put in the app dir) and you have an .ico if you want to drive a command line packaging script (you probably do want that - see those instructions is this section of the wiki)

If you are building your own Shoes or maintaining Shoes then changing the Shoes icon is, speaking politely, a bitch. You have to change the icons used by the NSIS installer (two+), the stub and you'll want to replace the installer background images and probably some other things.

app.yaml

First you need to change app.yaml or replace the icon there (my choice because I'm not creating a custom Shoes).

stub32.rc

In platform/msw/ is stub32.rc which you have to edit or you can just do the chicken thing and copy your new icon over that location (shoes/appwin32.ico) I chose copy over it because I don't want to fix shoes/appwin32.rc too.

You absolutely must rake stubs

It's very possible that Windows will keep using some copies of the old icon. It has a cache and sometimes it needs to be told to rebuild. This can be a problem for the desktop Shoes.lnk. For Win 7 you can use a dos command >ie4uinit.exe -ClearIconCache which clears Windows icon cache.

NSIS bmp

The NSIS installer has two .bmp files it uses for the installer opening left side bar (installer-1.bmp) and it's progress dialog (installer-2.bmp). You need to edit those. Caution: Gimp defaults to exporting a bmp that the NSIS installer can't use. When you get the little dialog for bmp options you need to set the 'do not add colorspace" option and make sure the bit depth is 24.

OSX

This is easy. Just use the .icns file for building Shoes or your custom package task.

Linux

Linux shares a icon cache update issue with Windows. Shoes 3.3 provides a desktop menu to Uninstall Shoes which does fix the problem so if you're changing the icon on Linux please install to get the menus and then uninstall gets the cache correct. Expect a few seconds delay on the install or uninstall.

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.