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.

Sony Vaio SB Series Review

I just bought a new Sony Vaio SB series laptop, the VPCSB17GG. It comes with a Sandy Bridge Core i5 processor, 4 GB RAM and a 500 GB hard drive. Detailed specs are available here and an exhaustive review is available here. I just thought I'd share my initial impressions.

This is the first non Apple computer I have purchased in 5-6 years. I needed a Windows machine and have been having just a terrible experience with Apple's hardware lately. My 21.5 inch iMac for example keeps getting burn marks and dust behind the glass and I'm absolutely sick of sending it in for servicing. Hence the VAIO, otherwise I probably would have bought another MacBook Pro and installed Windows on it.

I've only been using the machine for a few days, and I quite like it. Out of box experience was a bit trashy and I had to manually un-install a lot of bloat ware. Some if it still remains, like the TrueSuite finger print crap. Other than that the restore disk creation etc. went smoothly and was not an issue.

The hardware is nice but I don't like the screen. I mean its alright, maybe I'm not used to matte screens any more but the viewing angles of this thing are definitely not good. I had read on a few forums that fan noise is a problem, its not for me and I compile 50 thousand line code bases in Visual Studio 2010 all day long and it works really well. I really, really, really like the keyboard. The track pad is smooth and I'm actually beginning to prefer the edge based single finger scrolling over the MacBook's two finger method. The build quality of the machine is good and it doesn't heat up unlike some of the MacBooks I've owned.

Over all I am quite happy with it.

Standing and working followup

So I posted last week about trying out standing and working here is the follow up post I promised. I should have posted this earlier but I have been crazy busy all week with a nasty nasty bug in GraphiteCharts for Silverlight that causes chart grids to vanish randomly. Startups man that shit will kill you. Anyway I digress. I don't have any money at the moment and am staying with my folks. When I set up the standing setup my father walked in and said you won't last an hour. He's a doctor, he also thinks I'm crazy for not getting a regular job and as he puts it wasting my life. Anyway. Next morning he walks in, I'm still standing there, yup still working. I half expected him to say something about me being crazy, but instead he puts on his serious doctor voice and says you'll get Varicose veins if you keep that up.

Umm what !

Yikes those things are ugly !

(I can't find a free domain picture so just use google or bing images).

So I google it some more, turns out this stuff is real and a lot of professions where people stand for long hours actively complain about this stuff, for eg. teachers. But initial googling has resulted in conflicting information where some articles say that standing and working triggers it others say it doesn't. I'm afraid I don't have time to read those articles in detail or read about this more. Here are a few

British medical journal says this is a real problem

Some random clinic says standing can accelerate it in people that have a certain valve defect

Another article discussing the hazards of standing and working

I see standing and working really picking up in computer science work, but I haven't found any articles discussing the potential problems of this. Man, so standing will give you ugly veins and sitting all day will kill your back. Another reason to hate computers.

Maybe I'll post this on HN someone out there ought to know whats happening. I went back to sitting a few minutes after I read those first articles.

Standing and working

I've been working seriously long hours trying to get GraphiteCharts up to scratch and its beginning to have an affect on my health. More specifically my back. So starting today I'm going to start working standing up. I got a new, smaller desk and have placed it over my existing desk. Seems to be working so far. But its just 2 hours in and too early to tell.

I had tried this earlier with stacks of CS books but the iMac isn't very stable on a stack of books. I've chanced upon a small desk and suddenly thought of giving this a new shot. Lets see how this goes hopefully it will work out and will also help me concentrate more rather than having to rest my back every so often (note to self: just lose weight you fat fool). I spend around 15 hrs a day in front of a computer of some sort (yeah I know, no life etc. etc.). This has been the case for a while now since the final years of my undergraduate degree through to my masters and now this charting library. I get cramps and pain in different parts of my back depending on different postures I try. So its not working out. Standing is worth a shot.

Obligatory picture below.

Will report back in a week or so about how its progressing.

Fixing iMac speaker sound when using Windows 7

The sound from the iMac speakers when using 64 bit Windows 7 is not as high quality as Mac OS X. Here are a few things you can do to fix the sound, or rather few settings that change the sound a little.

First make sure your Cirrus Logic drivers are up to date, you can download them here. Go to Device Manager (in Control Panel, as Administrator), select Sound, video and game controllers, select the Cirrus Logic driver and right-click and select Update driver software and then choose Browse my computer for driver software, pointing it to where you un-zipped the driver you downloaded. This step should make sure that Bootcamp did indeed install the latest drivers.

The second step is to change the the way Windows 7 thinks of your speaker organization. Select Sound (in Control Panel), in the Playback tab, select Speakers and click the Configure button on the bottom left. For me Surround works best, by default Quadraphonic was selected and changing this to Surround seems to work better.

Maybe I'm imagining things, but this does sound better to me, if you figure out something else do leave a comment.