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...

GIMP Layers

Last Saturday (30 March 2013), I was in Bellevue visiting the Temple built by the Church of Jesus Christ of Latter-Day Saints.  I enjoy opportunities photographing this structure, since the landscaping changes often, and it does not move.  On very sunny days (like last Saturday), the most difficult part of the structure is the golden angel statue atop the spire; the reflections are unbelievably bright:

The details are completely washed out, and although you can tell that this is indeed a statue of a man with a trumpet, it looks terrible.  Additionally, the building is very white, and bright sunlight creates exceedingly harsh shadows when the scene is properly exposed.  In essence, three photos are necessary to obtain a desired final product that (hopefully) looks good.

Photo 1 - A good exposure of the stature, with minimal glare, and reasonable detail.

Photo 2 - A good exposure of the sky and daffodil foreground that is rich with color and details.

Photo 3 - A good exposure of the building, that minimizes the harshness of the shadows created by the hard sunlight without washing all the detail from the white surfaces

I am using a Nikon D300s with a Nikon 14-24 mm lens, attached to a Manfrotto Ballhead atop a Manfrotto Tripod.  Setting the camera to ISO 200, I find that Photo 1 is good at a shutter speed of 1/500 at f11.  Photo 2 is 1/250, and Photo 3 is 1/125.  All images are in Nikon RAW (NEF) format.  I use iPhoto as my primary organizing and preliminary editing tool.

My plan is to use GIMP to manually blend the portions of the three photos together into a single composite image, then do the final adjustments for color, saturation, sharpness, etc. on the completed product.  Let's see how that works out.

In iPhoto, the only changes I make before exporting are to images 1 and 3.  For image 1, I fully recover all highlight details in the RAW image, and subsequently fully darken the highlights.  This produces acceptable detail and depth to the statue.  For image 3, I also fully recover all highlight details, and darken the highlights about 60%.  This reduces the overexposed portions of the white building to more acceptable levels, and does not darken the shadows much at all.  Here are the three images side by side (in iPhoto):

Yeah, you can't see much like this, but hey, it's a blog.  Oh well.

Anyway, time to bring these images into GIMP and see what I can do to combine them.  I use an AppleScript I designed myself to "export" them as linked files, so that I do not have to burn up more hard disk space.  The link is set to the JPG files that iPhoto creates after I do the mini-manipulations, so it is those JPGs that I will open up in GIMP.  Magically, GIMP has a nifty command entitled Open as Layers:

I then select the three files, and each file is placed in its own layer:

I renamed each layer to correspond to the photo numbers I defined earlier.  All I want from Photo 1 is the statue, so I put that at the bottom of the stack to act as the background layer.  I will need to mask out the statue in both upper layers so that the statue from the bottom is fully visible.  Of course, I also need to mask out the sky and daffodils in Photo 3 as well, so that only the building from Photo 3 is visible.

First, we just need to create a layer mask, starting with Photo 3, the uppermost layer.  To quickly get rid of the sky, and preserve the building, I start with the Fuzzy Select Tool, and set the threshold to 35.  (I got that with a lot of experimenting to see how well the edges of building were selected.)

The selection was not perfect, but it is close enough to start with, since we can edit the mask manually later on.  Now, the tricky part; the selection has to both be inverted AND converted to a layer mask.  With the selection still active, I click on Layer --> Add Layer Mask...   Then, check both the Selection and Invert mask boxes:

Boom!  Not perfect, but now we can edit the mask directly with a paintbrush.  First, it is necessary to click onto the mask portion of the layer, to be sure that it is highlighted.  It is also a reasonable idea to make sure that Edit Layer Mask is checked, indicating that you are actually about to edit the mask, not the image:

I want a hard brush, so that I can make a nice (freehand) mask edge along the left side of the building:

I painted everything black, so that the mask completely blocked it out, allowing Photo 2's sky to be visible throughout, including over the statue atop the steeple.  I went back with white, and then grey over the evergreens along the left so that they were visible as depicted in Photo 3.  I still want the daffodils to be from Photo 2, but I don't want to use the hard edge brush for that, so I select a brush with a hard center, and very soft radius (the one just above the hard brush) and do the entire daffodil section.

The big problem is on the right side, where the tree branches were not all selected as part of the mask.  Holy cow, what a mess!!  That is going to be time consuming to try to repair.

For the statue on Photo 2, I just created a layer mask, and blacked out the brightest portions.  That worked as well as trying to select the thing precisely and completely mask it to allow Photo 3 to be visible.

And, here is the finished product (with the iPhoto spread for comparison), except for all that annoying stuff on the right, in the branch/sky mixture.  I have removed all the spots from the sky, but I still have not done any color saturation, sharpening, or noise reduction: