Under the Bridge

Tip: Grayscale UIImage

Here’s a handy routine to easily convert an UIImage to grayscale, like this:

grayscale.png

- (UIImage *)convertImageToGrayScale:(UIImage *)image

{

  // Create image rectangle with current image width/height

  CGRect imageRect = CGRectMake(0, 0, image.size.width, image.size.height);

  // Grayscale color space

  CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceGray();

  // Create bitmap content with current image size and grayscale colorspace

  CGContextRef context = CGBitmapContextCreate(nil, image.size.width, image.size.height, 8, 0, colorSpace, kCGImageAlphaNone);

  // Draw image into current context, with specified rectangle

  // using previously defined context (with grayscale colorspace)

  CGContextDrawImage(context, imageRect, [image CGImage]);

  // Create bitmap image info from pixel data in current context

  CGImageRef imageRef = CGBitmapContextCreateImage(context);

  // Create a new UIImage object

  UIImage *newImage = [UIImage imageWithCGImage:imageRef];

  // Release colorspace, context and bitmap information

  CGColorSpaceRelease(colorSpace);

  CGContextRelease(context);

  CFRelease(imageRef);

  // Return the new grayscale image

  return newImage;

}

That would be a stylish effect for a “please wait” pause or the like, we figure.

Continue Reading →
1

BarTint

Here’s a handy-looking little tool called BarTint for playing with your interface colours:

BarTint is a tool for developers and designers of iPhone apps, to assist in the visualization of the various bar-type objects (toolbars, navbars, segmented controls) when a tint color has been applied to them.

Because of the gloss and caustic shader applied to these objects, when you specify a color, you don’t necessarily get what you think you’re going to get. BarTint takes the guesswork out, letting you see exactly what a color combination looks like on the device, and allows you to forward the Objective-C required to produce that UIColor to yourself over email…

BarTint.jpg

Very nice, very nice. And FREE, no less!

Continue Reading →
3

Labyrinth Soccer

Oh hey, look what we missed a couple weeks back: The latest little bauble the Trollwerks foundries clanged out for those fine Wayz fellows (no one shows you a better time in Tokyo, we guarantee it), Labyrinth Soccer, is out in the App Store!

mzl.esuwojxo.320x480-75.jpg

It’s a trivial little diversion, but it’s a trivial little diversion that you can actually play between two people with one iPhone, which is something we haven’t seen as much of as you’d think. Is it just us that only really ever plays games when we’re standing in line somewhere with an iPhone-less friend?

A technical note of mild interest is how easy it was to integrate the cocos2d + Chipmunk physics game screen into a UIView-based structure — as a matter of fact, that’s a standard UINavigationBar you see at the top of the screenshot. Good job that cocos2d, and getting better all the time, yes it is!

[POST-MORTEM: Now withdrawn from store…]

Continue Reading →
5

Generating Barcodes

So, you want to generate barcodes on your iPhone screen?

OK, well neither do we at the moment, or any time in the past for that matter; but just in case the idea ever comes up, here’s a new library (well, a new port) for you:

Cocoa-Touch-Barcodes

This is a fork of Jeff Lamarche’s Cocoa Barcodes project, with the code modified to work on the iPhone and iPad. In my testing, a CCD and laser scanner can read UPC and Code 128 barcodes directly from the screen w/ no issue…

Handy if you need it!

Continue Reading →
1

Icon template

[UPDATE: Now points to the iPhone 4 savvy version!]

Here’s a handy template for your iPhone and iPad icon design needs:

ists
iPhone-4-icon-PSD.png

- 512 pixels, iTunes Store style (Caution: very ugly. Talk to Apple about that, not me.)


- 512 pixels, iPad style (either have different overlays. Who’d have thought?)


- 512 pixels, iPhone style.


- 72 pixels for iPad home screen.


- 57 pixels for iPhone home screen.


[UPDATE: -114 pixels for iPhone 4 home screen!]

- 48 pixels for iPad Spotlight (with Spotlight background).


- 29 pixels for iPad / iPhone Settings and iPhone Spotlight (with both backgrounds).

Yes, it is getting complicated these days, isn’t it?

h/t: MacFanatic!

UPDATE:

And here is a post about another icon template for Illustrator CS 5; and if you’re wondering about appropriate sizes for icons for Android, Linux, Windows, Safari, or anything else, check out their

Icon Reference Chart

And here is a script, iPhone-Photoshop-JSX-Icon-Exporter, to create all the needed sizes from one 512×512 icon.

And here is iOS Icon Template for Perfectionists, reputedly correcting a corner issue with the above template.

And finally, QA1686 App Icons on iPad and iPhone is where you should go for the current Final Word™!

Continue Reading →
1

Data Entry Screens

Here’s a worth reading post on how to make data entry screens that center the current entry field above the keyboard by simply using a UIScrollView, instead of the mess of hardcoded animation blocks that we’ve been using up ’til now:

How To Create A Data Entry Screen

Couple problems with the code as presented, but read to the end of the comments and apply the keyboard notification responses there and you’re just about good!

Continue Reading →
1

Tip: UINavigationBar Background

So you’ve got this design from the artists for your new navigation-based app, and they want the navigation bar to look exactly like the artwork, a close gradient just doesn’t cut it. What to do? What to do? And if you look around, there are a number of suggestions on how to accomplish this, which are mostly overly complicated and in some places just plain wrong.

But, assuming that all the bars in the app are supposed to look the same which is most likely a safe assumption, why indeed there is an extremely simple way — just make a category to override UINavigationBar’s -drawRect! Easy once you think of it, indeed. And set the bar’s tint color appropriately for your image there too and buttons will respect that; so in our case here, the simple category

@implementation UINavigationBar (TWXUINavigationBar)
- (void)drawRect:(CGRect)rect
{
UIImage *img  = [UIImage imageNamed: @"customnavigationbar.png"];
[img drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
UIColor *topColor = [UIColor colorFromHexValue:0x910011];
self.tintColor = topColor;
}
@end

where the tint color was taken from the top pixel of the .png file, results in

tintedbar.png

Very nice looking, yes? Now that’s a seriously easy way to satisfy those picky artistic types!

Continue Reading →
2

UITableViewCell from nib warning

If you’ve been reading for a while you might recall this post about loading your UITableViewCell layout from a nib. Or perhaps you stumbled across that somewhere else, or even came up with it on your own; well, if you have been doing that, turns out there’s an additional wrinkle you need to be aware of:

… The key here is that the CellIdentifier value must also be entered into Interface Builder, like this:

UITableViewCell-Identifier.png

If you don’t do this, then UITableViewCells will not be reused. (A telltale sign of this is that you’ll see lots of “creating a new cell” log messages.) There is no compiler or runtime warning if you fail to enter this critical piece of information into Interface Builder. So that log statement can be a useful warning…

Yes. Yes, indeed, if you have several thousand items in your list, and you’re loading directly from the nib each time, that could be very very bad. Be careful out there!

Continue Reading →
2

Compleat UI Design

OK, we’ve mentioned various UI design helpers here and there before: but this, this is veritably canonical.

iPhone and iPad Development GUI Kits, Stencils and Icons

Within this post you will find complete GUI kits and stencils, iPhone GUI elements and PSDs and finally a collection of the best icon-sets perfectly suited for the iPhone…

Right up to date with the iPad GUI PSD we mentioned a little while ago, so looks like that’s the best current reference to point your Photoshop-using artist friends at.

h/t: @mattgemmell!

UPDATES:

How about Apps-on: Post-It notes for your iPhone design? (h/t: iPhoneFlow!)

Or MobileSketchbook.com’s iPad Stencil, to go with their iPhone version?

Or just download some iPad & iPhone Sketch Paper PDFs.

Or try iPhone Wireframe Kit – Google Docs online.

Like to do your prototyping on the actual phone? Check out Dapp.app.

And here’s a newer roundup: 11 UI Kits for iPhone and iPad Development!

And one to start out 2011: 50 Free iPad, Iphone Icons, Tutorials and PSDs

These Keynote/Powerpoint templates look interestlng: Keynotopia

This presentation/prototyping tool could be good for client work: Realizer

20 Free UI Kits For iPad Development

iOS 5 GUI PSD (iPhone 4S)

Useful Collection of iOS Tools and Resources for Designers

30+ tips to improve your iOS design workflow (in Photoshop)

Rounded Rectangle Radius Resizer

Continue Reading →
1

Libraries & Frameworks

So if you’ve tried to create static libraries and/or frameworks to share between your iPhone and desktop app versions, no doubt you have noticed that the process is fraught with peril, to put it mildly. Here are a couple of fine tutorials to help you out with that:

Universal Static Libraries

Making Your Own iPhone Frameworks

We’d manage to puzzle out non-universal static libraries on our own, but the frameworks, ah now that is the really tricky bit. We do rather like the closing comment

… I find this whole thing really fascinating and once you understood the parts to the whole process it does not feel that difficult any more …

Well, we’ll agree that following the provided instructions isn’t that difficult, yes. Compared to how difficult it should be to do this, that’s another story!

Continue Reading →
1
Page 70 of 118 «...4050606869707172...»