Skip to content

Guest Blog Post: Iconographer from Ohanaware

Sam Rowlands has been developing Xojo apps since 1997. He and his wife, Joy Sha, make up Ohanaware and they have been building award winning apps since 2008, notably Funtastic Photos, HDRtist and Shine. Sam is an active Xojo developer and he also offers App Wrapper, which simplifies the process of preparing applications for submission to the Mac App Store and deploying on web sites, in the Xojo Third Party Store.

I’d like to introduce you to Ohanaware’s latest Made With Xojo application we’ve created for us Xojo developers. It’s called “Iconographer” and it is designed to simplify the process of creating stunning and platform-consistent icons for Mac, Windows & iOS.

iconspread

The idea behind Iconographer, is to be able to take the same set of elements and produce app icons, document icons, folder icons, disk icons and web icons that are all consistent with their intended target, while retaining the application identity.

macosiconandeditorHere we have our Iconographer icon in the Iconographer editor, a quick look at the interface and you’ll notice that we have an “Icon” selector, a “Target” selector, a “Style” selector, Layers and then layer properties.

I’m not going to show you how I made the Iconographer icon, instead I’ll demonstrate how to take this fine work of art and create all the other icons that we may need.

Before we begin, I just want to see what the icon will look like in the Mac App Store, to do that, I’ll select “Mac App Store” from the “Preview Icon in” menu, from the “Preview” button in the bottom right hand corner of the editor. Note: The preview pulls the other application icons from your applications folder, so this also doubles as a way of comparing with existing apps.

macappstorepreviewClicking on the “Windows” target will change the editor to the Windows application icon. From here I chose the “Windows Tile” style, but it doesn’t look anything that I might like. Note: part of this is how I chose to build the Iconographer icon.

windowsblanktileThere’s only two layers for this icon, I need to import the rest. Simply clicking on the “+ Layer” button, I can select and add in the shared graphics and the shared label.

windowslayers1

Now you can see that the layers list has more layers and all the elements are loaded, but it looks like a mess. I’ll start by re-arranging the layers to get a more pleasing layout.

windowslayers2

That’s a bit more like it, now the layout looks more pleasing, I’ve tweaked the font & size of
the text, also enabled “All Caps” so it automatically displays in capital letters. Still one problem…

windowslayers3

Much better; Windows 10 icons are white silhouettes on a plain colored background. Iconographer features a really nifty “Color” function where it will replace the colors of an icon with either a chosen solid color or a gradient. In this case we’re using the Badge color. Iconographer uses shared colors (as well as shared graphics and shared labels), when you adjust a color in one icon, it updates all your icons. If I set the “Badge Color” to be orange, all the elements using the Badge color get updated.

windowslayers4

Clicking on the “Preview” button again (the one in the bottom right hand corner), and selecting “Contact Sheet”, will show a contact sheet with the various sizes that a Windows icon can feature.

windowscontactsheetSort out the iOS icon. Clicking on the “iOS” target icon in the left hand column, shows me the following icon. I should point out that your default will vary, mine is very weird because of the elements I’ve used to create the Iconographer icon.

iosdefault

Again, once all the layers have been added, like it was done for Windows, it starts to resemble more of what we’d like.

iosstep2

Getting there, rearranging the layers, colorizing some and fixing the text, gives a far more pleasing result.

iosstep3

Now if we check out the “Preview” menu, we can even see what it will look like on the home screen of an iPhone or iPad and the App Store.

iospreviewNext, I simply select “Build all selected icons…” from the “Build Icon” button in the bottom left hand corner, choose a folder and let Iconographer do its job. It’s important to note that each icon can be customized as to what elements are included and some targets even have a file format option.

alltheapps

Wait… That’s not all Iconographer can do…

By selecting “Document” from the icon selector in the top left, there’s a perfect document file icon just waiting for me to export. If I change to Windows, there’s one there too and the Windows one is automatically using the Windows icon we adapted earlier.

documentscreenshotIf you study the screenshot, you’ll notice an option on the Label called “Increase readability”, we use a number of different options to make the text more readable as it gets smaller. It doesn’t work in all cases, but it is perfect for the label on a document file icon.

One more thing…
Clicking on the “Web icon” from the Icon selector, will allow you to create “Favicon.ico”, PNG versions and the Apple Touch variations.

I want to make the favicon.ico similar to the Windows icon as I think that will work better at smaller sizes. First; I go to the Windows application icon and select “Copy” from the “Edit” menu, then I go back to the Favicon target under the “Web Icon” and select “Paste icon style” from the “Editor menu. Since the favicon is tiny, I’ll also select “Overview” from the “View” menu, then click on the action icon in the “Overview” section and choose “16 x 16”.

faviconstep1After some tweaking of the sizes, changing the elements to use “Doc Label” color instead of “Badge Color” and even removing some layers, I’m happy with this icon as my favIcon. Very simple and clean.

faviconstep2

For the Apple Touch Icon, I’m going to wimp out and cheat. I select the third style and choose “iOS” as the icon. That’s right, I’ve remapped it to use the iOS icon, any changes I make to the iOS icon will also get updated here.

webpreview

Select “Safari” from the preview icon in the bottom right hand corner, and there we go, we get a Safari preview where you can see the favicon and the Apple Touch Icons in action.

To export these icons, simply select “Build all selected icons…” from the “Build icons” button.

There you have it, a quick walkthrough on how we took our Mac Iconographer icon and not only converted the icon for other targets, but we also made document icons and more in just a few minutes.

Give it a try yourself, get the trial version.