A New Icon for OddCal

My most popular application for the Mac Desktop is OddCal.  It was the second app that I posted for sale in the Mac App Store (3 February 2011) and is my own personal favorite as well.

The icon, as you can see via the link, is quite lame.  It was the best I could conjure back then, but my oldest son has given me a fresh idea to work with, now that the app is maturing, and I have a new release ready to upload.  The concept is simply a group of three curved arrows of different colors and lengths, perhaps even widths.  I am relying heavily upon this blog post to get started.

As per usual for a Mac app icon, I launch InkScape and start with a 1024 x 1024 palette.  As per instructed in the blog post above, I click on the grid (View --> Grid) and zoom into about 70%.  I then created a quick rectangle (holding down the shift key to lock onto the grid) and dragged it to about 2/3 of the workspace.  I then filled it with RGB 8776dfaa:

This should leave me plenty of room to generate the arrowhead.

At this point, the blog author advises one to press P to highlight the Pen tool, which works, but InkScape calls it Draw Freehand Lines:

However, I found that the tool just beneath that icon is probably what was meant:

It is entitled Draw Bezier Curves and Straight Lines.  I also found that ensuring that the settings were adjusted thusly helped immensely:

Now I needed to make a second rectangle, same width as the first, but not quite as long.  It took longer than I had anticipated, since I wanted no fill, and just a black stroke outline.  Somehow, I had switched on the rounded corners (Ry), and needed to set that to 0:

With some experimentation, I was able to successfully create a second rectangle, maneuver it next to the triangle, and by Shift-clicking with the Select tool, and got them both selected simultaneously, and chose Path --> Union to make them a single object:

As per the instructions, this new shape is dragged so that the edges are butted against one another:

Now it gets interesting.  The arrow portion needs to be rotated to create the curve effect.  The blog instructions have you make a copy first, intending the original to be used as a shadow.  I am only making a 2D icon, and so will skip that portion.

To achieve the rotation, the arrowhead needs to be selected in rotate mode, so that the center point is visible.  Two clicks on one of the lines does it.   (The grid has been turned off to more easily see the rotation point.):

The rotation point needs to be dragged to outside of the bottom left of the selected object, then it is simply a matter of using the handle in the upper right corner to achieve serious rotation:

With the rotated portion still selected, Shift-clicking the purple rectangle (thus selecting both) and choosing Path --> Union creates the wacky figure that will be the basis of the icon:

To smooth this creature out, we make a couple extra nodes along the short segment, just down from the arrowhead by using the Edit Paths by Node tool, and + node button:

Since I rotated my arrowhead further than recommended, I got a bunch of extra nodes on the bottom corner:

First, I select a single node, then hold down the shift key to select all the others that need to go:

With all of them selected, I click on the delete node button:

And get the funky curved arrow:

After changing the color, adjusting the nodes some more, and adding a gradient, my first attempt ends up like this:

Not exactly what I was looking for, but at least now I know the major steps to get what I want.  I could not get the 3D effect that the blog author was recommending to function at all.  I got a message instead about a python script not having been installed.