Icon

First things first.

ClickSliver needs an icon.

After creating an Xcode project, pretty much the first thing one needs is to create an application icon.

I had resolved to try to make things code rather than data as much as possible — so I had been trial’ing PaintCode — an app which takes vector graphics and generates code therefrom.  It has very rudimentary editing capabilities; the idea is to import some graphics and then spit out code.

It turns out that Graphic.app (from Picta) — a vector drawing app — has a hidden feature:  under the Edit menu, there is a Copy As… submenu which contains “Core Graphics Code”.  Yes, that’s right.  Draw something, select it, pick “Copy As Core Graphics Code” and paste into Xcode.  Don’t look for this feature under “Export As…” or “Save As…”.   Picta also has an iOS version of the app — I can use the iPad as a design tool.  I decide that’s the way to go.

So, armed with my new copy of Graphic, I

  • create a 1024×1024 document,
  • take a large C and S (for Click Sliver) in Bookman Old Style,
  • pick Modify > Convert Text to Outlines,
  • reposition the letters for make them “iconic”,
  • select both letters,
  • pick the first “Combine Paths” option (Union) on the Properties Window: PathTools
  • apply a gradient to the resulting shape,
  • and, voila!

ClickSliver

I have an icon.

Well, almost.  I can export my Graphic document as a png, but I need to convert it to an icon by generating a bunch of different sizes.  There are lots of apps for that.  I settle on Asset Catalog Creator.  Drop my png into the app, pick “Mac App Icon” and export an asset catalog containing my appicon asset which I can drag into my Xcode project.

Now I have an icon.

I go ahead and “Copy As Core Graphics Code” and paste into Xcode.  The Preferences… in Graphic let one select Mac or iOS, Swift or Objective-C.  (Strangely, the preference is under “import/export”, but the actual menu item to do it is not.)  

NewImage

I get about 200 lines of Swift code.

I’m not ready for this yet, but when I want to create some effect or animation in which I morph this image, I’ll have a place to start.