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.

Simple iOS icon

I am finally making some real progress on my first iOS application, and I thought up a nice, simple icon design (just wait, you will see it soon) as well as a color pattern.  I have never actually submitted an iOS application to Apple, so I do not know the guidelines off the top of my head.  Fortunately, that information is easy to find.

Unfortunately, it is not as simple as using the Icon Composer App on the Mac OSX system.  I will need to generate all the icon sizes I want (depending on the app target) myself.  They all need to be square, and the biggest must be 1024 x 1024 pixels.  Since I want the app to be both usable on iPhone and iPad, I will also need 57 x 57, 72 x 72, 114 x 114, and 144 x 144.  Whew.  At least iOS does all the heavy lifting of creating round corners, drop shadows, and the reflective shine.  So kind.

I will only need three colors (two, if you don't count black), and since this app is based upon the tremendous education I received at Washington State University, I decided to use their color scheme of crimson and gray, with the following specific color details:

CRIMSON
RGB 152/30/50
CMYK 0/100/65/34 

GRAY
RGB 94/106/113
CMYK 11/0/0/65 

I would like to set up both of those as part of my Inkscape palette, just in case I feel the need to use them again in the future.

One would think that making a nice square, all one color, would be straightforward.  Well, if it is, I cannot figure it out.  First, I made a new Inkscape document using the Desktop template, since one of the dimensions was 1024 pixels.  I then went into the Document Properties, and made it 1024 by 1024. So far, so good.

Since I could NOT figure out how to color the background, I decided to make a square shape the exact dimensions of the document.  I clicked on the Rectangle button, and drew a shape on the page, adjusting the dimensions to 1024 and 1024:

Of course, it needs to line up perfectly with the document, so I clicked the Select and Transform button, and entered 0 (zero) in each of the X and Y windows:

That lined everything up famously.  Now, in the Object --> Fill and Stroke panel, I entered the RGB data for CRIMSON (see above), and put the alpha to 255:

 Resulting the background that I wanted:

For the actual icon image, all I want is a perfect circle with a small slice cut out of it.  Don't ask me why.  It's just what I want.

I selected the circle object, changed the fill to match the GRAY RGB data (above), entered 20 in the Start angle box, and clicked on the segment tool:

Holding the control key, I drew a quick circle, then I adjusted the dimensions to 900 x 900, filling most of the background.  Subtracting 900 from 1024 resulted in 124, and half of that made 62, which I entered into the X and Y registers, after clicking on Select and Transform.  That centered the circle nicely:

I could not discover any clever method to get one segment to point directly and straight  upwards, so I just kept rotating it until it looked right.

I think the 900 is too big, so I reduced it to 800:

Hmmmm.  No, still too big.  How about 700?

Much better.  I had originally planned to add black lines (like clock hands) to the radii, but I think I will leave it like this.  I do believe that the gray is too dark as well.  I do not know enough about color to change it, so I will do some reading and see what I find.  At this point, the gray works out to be hexadecimal 5e6a71ff.  That is probably a clue to lightening it up a bit.

Replacing the hex with c5c5c5ff, it was just a bit too light.  Using c0c0c0ff, I get this:

A reasonable compromise.  Now, for the exporting into different sizes.  Export Bitmap works fine, but is a bit clunky.

Changing the size works fine, but I did not mess with the dpi. The clunkiness comes when changing the filename every time the size is changed.  Instead of trying to type into the Filename text field, I kept clicking Browse, because it highlighted the filename directly.  I could then change the filename right then.  However, then I had to go back and click Export to make it happen.

I only need to put the icons in the app and see how they look.

Adding Gradient to Arrow

I wanted to make  a gradient on the arrow I built in a previous post.  I located a basic tutorial that helped me choose the colors I wanted, but I had a LOT of difficulty figuring out how to edit the direction and slope of the gradient.

I eventually stumbled upon the solution.  Simply click on the gradient tool:

Once that tool is active, it is a simple matter of drawing a line with a drag across the object:

There is a square and a circle on each end of the line, and by moving those ends, the gradient changes:

I decided on this for the final product:

And, joy of joys, getting it exported as PNG was a complete snap, from File --> Export Bitmap:

Of course, I also need one that goes the other direction, so I clicked on the arrow to select it, and navigated to Object --> Flip Horizontal:

Another export, and it is ready to add to my application.

Now, however, what about a 180° arrow?  Can I simply modify this to create one?  And, that, it appears, would be a big NO.  It looks like I will need to start all over with a new project.  Even so, I wonder how much of the parameters can be copied directly?  Hmmmmm...

Inkscape Arrow, Version 2

The arrow produced in the previous post was acceptable, but not what I want to use as a basis for a button image in my application.  Specifically, I want something that fits into a space 300 by 300 pixels, and is a perfect 90° arc.  I also think I want a blue shade rather than red.

I have also been exploring other useful features, specifically, using a background grid for the working document.  I had hoped that I could set the default for the grid to be visible in Preferences:

 However, all that is allowed there is to alter the properties of the grid; you still have to turn it on & off manually at the document level:

Just pressing the # key (Shift-3) works fine as a toggle.

Creating the 300 x 300 pixel workspace takes a bit more effort.  As of this version of Inkscape (0.48.2), I cannot locate a custom option when creating a new Document:

Neither can I locate any way to customize the Default in Preferences.  The DVD cover options present a square document, and accessing File --> Document Properties gives one the opportunity to switch the units to pixels, in addition to re-sizing the document, and toggling the border shadow on & off (along with other things):

Now that I have a palette the size that I want, I can click on the circle/ellipse shape, and set up the arc just how I want it.  I want a nice, fat curve that turns precisely 90 degrees, so I set up the control panel thusly:

I initially assign a value of 200 to the stroke width, ensure that the Stroke cap is set to Square,

and then draw the arc inside the 300 x 300 region:

At first, I spent a LOT of time being frustrated and upset that this arc was NOT exhibiting a true 90° curve.  I searched the internet, and found a forum post from August 2011 explaining that in order to acheive a perfect corner, one must needs convert the stroke to a path:

And now it looks nice and square:

I now rotate it so that it points to the right, and prepare to form the point and the tail.  This time, I want to reduce the corners to form the point, instead of pulling the point forward, so in addition to adding a new path node in the middle of the end, I also add a new node to each side, by selecting the corner nodes, and the nodes closest to the curve.  Here is the original node layout:

And after adding the extra nodes:

Now, it is a simple matter of moving the corner nodes down the sides to the two new nodes on the side, creating a point:

I use the same method as in my first post to build the tail, and then I return to the point to sharpen it a bit by moving the nodes further down the sides for the final, much more satisfying arrow:

Inkscape Arrow

My first need is for a pair of arrows, preferably two that look related, but one turns 90° and the other turns 180°.   I need these for the interface for PDFRotator.

I started with Inkscape's built in tutorials, which are accessed via the Help menu that is present on each Document window, not the main app menu bar:

This screen shot brings up another unique observation; Inkscape runs under the X11 module, and although it is an app in its own right, whenever an Inkscape document is active, one see the X11 menu bar, not the Inkscape bar.  I don't think it matters, since there is nothing there anyway:

OK, back to the tutorials.  The first one is helpful to see the variety of keystroke controls available (making me very happy; I am a keystroke guy anyway), and some other basics.  The second one deals with shapes, a major component of the product, and the third (entitled Advanced) introduces paths.  So far, the most useful thing I have learned is how to use a shape to construct a path.  Let's start with an ellipse:

Clicking on the little pinkish circle on the left side allows us to create a shape:

You can see the little circle control on the right side; this will allow editing the arc of the ellipse, like so:

Once you have it where you want it, You just need to be sure that the stroke has some paint or thickness, so you can see it:

Now, it is simply a matter of transforming the object (the arc, derived from an ellipse) into a path:

 And there we have a nifty curved line!!!

 Which can now be edited via the nodes.  As far as I can tell, the nodes are wherever along the path one clicks, but I am not 100% sure about this.

The stroke thickness and color can then be altered as desired (Object menu):

The path is now a lot thicker, but still only has two nodes, I believe.  By accessing Path's submenu entitled Stroke to Path, we have many more nodes to work with:

We need one end of the curve to have a sharp point, so we zoom into that end, select the two corner nodes (by holding down the Shift key while clicking), and click the icon on the upper left entitled Insert nodes into Selected Segment:

This creates a conveniently placed node in the middle of the selected segment:

A simple click-drag on the center node creates a nice point:

Repeating the sequence on the other end of the curve, but dragging inward gives us a matching tail to the arrow:

Overall, not bad for an initial effort.