Quick Tip: iOS and web graphics in Illustrator

by Martin Westin in

I wanted to make a note of one of these things I keep forgetting in Adobe Illustrator. It is very simple, obvious and keeps me sane while drawing UI elements.

Make sure "Align to Pixel Grid" is actually selected!

That gets you out of so much trouble. Problem is, you need to keep an eye on the transform pane since this is a per-object setting. It is nog global to everything on your canvas.

Of-course the old-school technique of placing the strokes outside (or inside) the object bounds still works and can actually help you in transferring dimensions from the canvas into CSS (which puts borders "outside" when working correctly).

(I can't believe they still haven't fixed the rounding errors that randomly occur when drawing and moving objects around.)

Implementing GUI persistence in an iPhone App

by Martin Westin in ,

With iOS 4, Apple pushes everyone to build our apps so that we preserve the state of the application when it terminates. This is because to the normal user there is no difference between an app being "pushed" to the background and an app being terminated. Apple want the users to feel like our apps never terminate. That they just leave them in the background a while. I'll explain how I implemented this behaviour using NSUserDefaults in my app, Extraction. It may not be the most advanced technique or the best in any way. I just know it works for me.

Read More

Developing my first iPhone App

by Martin Westin in

While my friends were playing Red Dead Redemption I finally got my feet wet in the iPhone SDK. My first app is available on the App Store after a surprisingly short development time. The app is called Extraction and it is a simple Espresso timer for coffee nerds like myself. You can read more about it at extraction.eimermusic.com. Describing the app is not what this post is about.

What I wanted to write about was the design, development and the resources that got me going. I have never before coded in Objective-C or any C-based language for that matter. The closest environment I have developed in is Flash. Kind of ironic considering the current Apple - Adobe relationship.

I got from 0 to a submitted app in about 2 weeks... And to that I should add that I could only read, watch and code briefly every now and then. I was taking care of my 1 year old son full time during these weeks. I estimate I coded, designed and tinkered for around 15 - 20 hours total.

So what helped me get started and actually complete a real application with navigation controller, camera support and data persistence?

The Idea

Being an espresso nerd I had a look around for a timer application that would let me time my shots and mark that "lap time" for when the coffee first starts flowing. The ones I looked at didn't do it for me. A bas example is the built-in stopwatch on the iPhone. Marking a lap time makes the "main" timer start over from 0. Good for running laps but bad for marking the pre-brewing of an espresso extraction.

Developing an app that did this was just my best excuse to try developing for the iPhone. I have been wanting to do that ever since I first got my original iPhone in Feb 2008.

The Design

The initial idea had been brewing for a long time. By contrast, everything about both the design and the development was very quick and intuitive.

The feature set, or "interaction design" if I want to be posh, was arrived at by a bit of iterative trial and error. My initial thought was completely flawed once I started using it. So flawed I wont even go into it. I quickly realised I could store the times. Once that was working I realised I would want to add some notes about the particular shot. And then the obvious thing was to add camera support to allow for a photo of the shot to be saved along with the times and notes.

Once the 1.0 features were sort of working I started to look into the visuals of the app. It started with raw GUI elements in Interface Builder which I sized and placed until they felt ok. Then I basically just imported a screenshot into Illustrator and drew vector graphics for each element and exported them as png files. It is a good thing I prefer Illustrator to Photoshop since making high resolution graphics for the iPhone 4 was simply a matter of exporting from Illustrator @ 200%. Done!

The logo was just a manual vector trace of the first hit on Google images when searching for coffee beans. I am sure you can find the same image by searching now.

I got the colors for the application and the logo from the gallery at Color Schemer. I chose a scheme called Cold Espresso which looked and sounded appropriate.

The Development

Downloading the SDK and opening Xcode frankly got me nowhere. There is a certain amount of implied knowledge needed. I aquired this knowledge mainly from the following sources.

Lynda.com has a very nice video series on the subject that a friend of me downloaded and let me watch. Thanks Mikael. These videos are very short and to the point. Nothing like the sleep inducing Stanford lectures on iTunes. You quickly get a feel for how to code in Xcode and important elements in UIKit are exemplified one by one. Very nice.

iPhone Programming: The Big Nerd Ranch Guide, released only a few months ago was my other main source of knowledge. This one goes a lot deeper than the video series but still keeps the information grounded in the code and not too abstract and philisofical. From this book you really learn a lot of good practices and essential things you need to know to actually make a finished iPhone app for the App Store. Highly recommended.

I did buy another SDK book but I haven't even opened it and can't remember the name. It cost a lot though. I remember that part.

When I got lost on some detail Google almost always directed me to stackoverflow.com. They got the answers to everything there. A few specific problems had their answers at iphonedevsdk.com. They have a great forum there.

After embracing Objective-C and all its square brackets and very long verbose method names... I love it. Objective-C is pretty cool but Cocoa Touch is amazing. Rubyists usually joke that you can do almost anything in Ruby with one line of code... I feel the same about Cocoa Touch. And messaging in Obj-C is really wonderful. you never have to wonder what an argument is doing since they are all labeled as part of the method name. Strange at first but fantastic now.

The Website

Just as I was ready to submit to the App Store I noticed that I needed to have a support website for the app. I uploaded the app and gave myself a very tight deadline to complete a decent looking one-page website for my little app. I'd say the website looks OK at first glance. But look a little closer and you can clearly see it was conceived, designed, copy-written and coded in about 3 hours.

That is all I can think of writing. Anything you want to know more about?

Extraction 1.0 and 1.1

by Martin Westin in

Version 1.0 of Extraction, my first iPhone app, was released on the App Store yesterday. I am very excited about the whole thing. Duh!

Version 1.1 has already been submitted for review. It adds iOS4 compatibility and iPhone 4 high-res graphics.

Extraction is a simple timer and records-keeper for espresso brewing. You may need to be unhealtily interested in making coffee to get the purpose the app. You can read a bit more about the features on the extraction website and you can download the app and check it out on the App Store.