Using Inkscape for designing for iPhone, iPod and iPad

Below is a collection of resources and design practice material that I have found useful when learning how to use Inkscape, with a focus on designing for iOS devices. You can of course use the skills you gain for other development efforts, Microsoft's fabulous Windows Phone comes to mind.

Inkscape reference
Inkscape is a vector shape drawing program, similar to Adobe's Illustrator. I personally prefer Inkscape to both Illustrator and Photoshop (but I know literally nothing about design, so please try the others out before you take my word for it). A great resource for beginners to get familiar with Inkscape is of course the Inkscape documentation page. I particularly recommend Tavmjong Bah's book.

Practice drawing
Becoming good at drawing is practice. You need a lot of it. Most of the really brilliant UI designers out there have probably been at it for years. Here are a few interesting tutorials to get you started, after which I guess the sky is the limit. One site in particular I would recommend anyone interested in seriously improving their UI skills is Dribbble; see how the masters do it and try replicating their ideas and designs.
Practice material:
1. Learn how to design a simple light bulb icon - Vector Tuts Article.
2. A nice tutorial on building stamps.
3. A fun post on building Pac-Man baddies.
4. Excellent video tutorials on YouTube by Tutor4u and HeathenX.
5. KalaaLog another nice blog by Mahesh with some interesting Inkscape designs.
6. 3d objects in Inkscape. There are few more nice tutorials on this site.
7. Another blog with some nice tutorials.
8. Another nice collection on this site.
9. Don't just restrict yourself to English language posts, there are a lot of good ones in other languages. For example, this post in German.
10. Excellent 2d game art tutorials.

Icon design tutorials
The window to your users; your display on the marketshelf. Icons are extremely important. A few interesting articles on designing these.
1. Icon design for iOS from Cocoa with love (absolutely brilliant articles).
Part 1.
Part 2.
2. Here's a sitepoint article on creating iPhone icons using Adobe Illustrator. You can do pretty much everything in Inkscape as well. Here's another that uses Photoshop, try doing this in Inkscape.

Tab bar icons
A lot of iOS apps need tab bars, here are a few tutorials to help you with icons for these tab bars.
1. Two excellent articles on tab bar icons using Inkscape.
Part 1.
Part 2.
2. This is done using Omni-Graffle. Try it in Inkscape.

Creating wireframes
An article on mocking up your UI's with Inkscape.

Exporting images
Inkscape is a vector shape drawing tool, which differs from raster based tools like the GIMP in the fact that you can scale your drawings to any size you want. This is great when doing art work for iOS and other mobile platforms where you have a variety of screen sizes to cater to. Vector shapes do however have a drawback in that sometimes scaling art work results in images that are sometimes blurry and not as crisp as raster images. Inkscape sadly does not allow you to re-touch individual pixels like Photoshop. Moreover Inkscape anti-aliases images when it exports them as bitmaps; this is what causes blurry images. You can however snap your image elements to pixel boundaries when drawing them for clearer exports. Miguel de Icaza explains exactly how to do this. This becomes particularly important when exporting images for high resolution displays like the Retina display.

These links are just to get you started. There are a lot of sites dedicated to design out there. In your searches do not restrict yourself to searching for Inkscape, but look for ideas created using Photoshop, Illustrator etc. and then try getting them down in Inkscape. For example Bjango has some excellent articles. These talk about Photoshop primarily, but the ideas are easily assimilated. Here's another great collection of design tutorials. Here's another collection of videos. Here's a site that focuses on the GIMP. There are a lot of these blogs and collections out there just search for them, and keep practicing.

Syntax Highlighting Objective C code on your blog

Update: 2nd January 2016 The Objective C brush no longer works easily, haven't managed to fix it so for this blog have changed all Objective C snippets to use the C++ (cpp) brush.

Syntax highlighting code in your blog posts is a great way to increase the visibility and readability of your posts. Since I have been working with Objective C a lot nowadays and hope to spit out a lot of blog posts about developing using Objective C and Cocoa Touch I went ahead and set up syntax color highlighting for the code snippets. Here's how you can do it for yourself on Google's Blogger (blogspot).

You need to install Syntax Highlighter for blogger. Syntax Highlighter comes with brushes for different languages, Objective C however is not one of them. An open source Objective C brush written by Scott Densmore is what I use. Add this brush to your Syntax Highlighter brush collection. Using this brush is similar to how you would use any Syntax Highlighter brush. Here's an example.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {    
    
    // Override point for customization after application launch.
    
    // Converting RGBA color for use with UIColor
    UIColor *colorFromRgba = [UIColor colorWithRed:23/255.0f green:45/255.0f blue:145/255.0f alpha:1];
    NSLog(@"converted rgba color is: %@", colorFromRgba);
                             
    [self.window makeKeyAndVisible];
    
    return YES;
}

Basically you include your code segments inside a pre block and set its (CSS) class to the Objective C brush. The above snippet, for example, was created with the following

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {    
    
    // Override point for customization after application launch.
    
    // Converting RGBA color for use with UIColor
    UIColor *colorFromRgba = [UIColor colorWithRed:23/255.0f green:45/255.0f blue:145/255.0f alpha:1];
    NSLog(@"converted rgba color is: %@", colorFromRgba);
                             
    [self.window makeKeyAndVisible];
    
    return YES;
}

Using RGB and Hex color with UIKit

UIKit on iOS provides a UIColor class for managing and using colors in your application. Most developer's are however used to RGB or Hex color notation when using colors. Your color palettes are likely in one of these formats. If you use tools like Pixie on Windows or DigitalColor Meter on OS X you are also using RGB and Hex colors. The nearest method UIColor provides for these are initWithRed:green:blue:alpha: and colorWithRed:green:blue:alpha:. The problem is though these methods take float values in the range from 0.0 to 1.0. Converting RGB and Hex colors to this format is discussed below with examples. It's a good idea to roll your own helper methods to make it easier for you to use your existing color palettes. You could even add an extension method to NSString.

Converting RGB color is simple. Each component in RGB (i.e. red, green and blue) is a color from 0 to 255 (i.e. one byte each). Thus to convert these for use with UIColor we need to map colors in the 0 to 255 range to colors in the 0.0 to 1.0 range, in other words divide by 255.0. An example shows how to do this in code.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {    
    
    // Override point for customization after application launch.
    
    // Converting RGBA color for use with UIColor
    UIColor *colorFromRgba = [UIColor colorWithRed:23/255.0f green:45/255.0f blue:145/255.0f alpha:1];
    NSLog(@"converted rgba color is: %@", colorFromRgba);
                             
    [self.window makeKeyAndVisible];
    
    return YES;
}

Using colorWithRed:green:blue:alpha: gives you an auto-released UIColor object. If you use initWithRed:green:blue:alpha: then you are responsible for releasing the object once you are done.

The converted color is

[Session started at 2011-07-05 18:55:21 +0400.]
2011-07-05 18:55:22.455 RGBHexUIColor[301:207] converted rgba color is: UIDeviceRGBColorSpace 0.0901961 0.176471 0.568627 1

Converting from Hex colors is slightly more involved. You could for example first parse your hex string and convert it to RGB byte color and then divide each component by 255.0 as discussed above. You can also use bit masks to separate your hex string components. An excellent discussion is available here.

Listing font names on iOS

A single line of code is all that's needed to display the fonts available to your code base,

NSLog(@"%@", [UIFont familyNames]);

Add this anywhere, in your application delegate's initial call back for example,

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {    
    
    // Override point for customization after application launch.

    // Add the view controller's view to the window and display.
    [self.window addSubview:viewController.view];
    [self.window makeKeyAndVisible];

    // testing font names
    NSLog(@"%@", [UIFont familyNames]);
    
    return YES;
}

This lists all available fonts, for example the iOS simulator 4.2 shows

[Session started at 2011-07-01 16:54:50 +0400.]
2011-07-01 16:55:11.370 PRDigitalClock[2754:207] (
    Zapfino,
    "Arial Hebrew",
    "Oriya Sangam MN",
    Cochin,
    Baskerville,
    Palatino,
    "Chalkboard SE",
    "Gurmukhi MN",
    Verdana,
    "Tamil Sangam MN",
    "Marker Felt",
    "Courier New",
    Courier,
    "Trebuchet MS",
    "DB LCD Temp",
    "Apple Color Emoji",
    "Arial Rounded MT Bold",
    "Bangla Sangam MN",
    "Telugu Sangam MN",
    "American Typewriter",
    Arial,
    Kailasa,
    AppleGothic,
    "Hiragino Kaku Gothic ProN",
    "Heiti SC",
    "Malayalam Sangam MN",
    Thonburi,
    Helvetica,
    "Gujarati Sangam MN",
    "Heiti K",
    Futura,
    "Devanagari Sangam MN",
    "Heiti TC",
    "Sinhala Sangam MN",
    "Kannada Sangam MN",
    Georgia,
    "Heiti J",
    "Times New Roman",
    "Snell Roundhand",
    "Geeza Pro",
    "Helvetica Neue"
)

Changing VAIO SB Series RAM

The vaio SB series (my review is here) comes with 4GB installed RAM and a single slot. Yes, I found only one slot on opening the back panel, it seems the pre-installed RAM is on-board. I'm not complaining though, the maximum this machine can work with is 8GB and 1 free slot is perfect. In fact its a lot less irritating that most machines that have 2 slots, but put in 2 2GB RAM modules; what a waste. I added another 4GB Corsair 1333 MHz SO-DIMM module; works really well. The amount Windows 7 can do with 8 GB RAM is simply amazing, on OS X I was always running out of RAM even when I had 8 GB installed.