Determine correct RGBA value for bar tint color given a client's design image?

Question

I often get given mockup images that define how an iPhone app is supposed to look. These can come from as many different methods as there are projects, sometimes balsamiq or even hand-drawn, sometimes Photoshop. One thing that is common is a bar tint color specified usually to match some corporate branding or overall app design.

If I open one of these design images in an app and use the paint dropper tool to get the RGB value for a color there are many places to do it, from the darkest regions at the lower edge of included buttons to the lightest regions at the top of the bar. I can't find a place to sample the color where the programmed result matches the mockups, it is always wrong in some regard leading to me squinting at two images trying to tweak one or more color values so they match well enough.

Given an sample of how a client imagines a navigation bar should appear*, how do you determine the right UIColor to apply to a bar's tintColor attribute?

*ignoring mockups containing rainbow effects, misapplied gradients and other flights of fancy. Matching color and brightness along the centre line would be good enough. That's at least a defensible position - "What you ask for just isn't how iOS works!"

Answer 1

Set up an app with a UINavigationBar/UIToolbar and three sliders to set the tintColor. Move the sliders around until it looks right.

If you also bring the image into the app somehow (UIPasteboard or stick it in a resource), using -[CALayer renderInContext:] and some CoreGraphics magic (kCGBlendModeDifference and something to multiply the differences; I forget what I used) you can even compare the two images.

Simulator note: You will first need to do Cmd-C to "paste" from the Mac pasteboard into the simulator pasteboard.

What I found was that you can't reproduce the default gradient on both the iPhone and iPad except with a tintColor = nil (the iPad default also has no "shine"). You can get reasonably close, but then the Done button colour is all wrong.

Usually I sample in the middle of the mock-up nav bar.

Answer 2

Excellent question which I don't have a direct answer for, but do have a solution.

Usually when I get designs the navigation bar doesn't really look like the iPhone's nav bar with a tint. The gradient is usually different as well. The way I see it, there are two ways to go:

1. Get the app sort of like the design
2. Get the app exactly like the design

Most of the times I get it almost like the design, which usually means sampling the color used in the mockup and using it as a tint color (or maybe a slightly lighter version of it).

If I really want to get it exactly right the way is to replace the default nav bar drawing with an image.

Just create a category for UINavigationBar and override drawRect. This works surprisingly well and most times the default buttons will be the color you need and blend right in without extra work.

In any case in my experience getting your app to look exactly like the designer's work is a lot of work that's usually overlooked. But when done properly it's totally worth it.

In the example below I needed to support two different nav bar looks for two different sections of the app, so I used the view's tag property to check which version to use.

@implementation UINavigationBar (CustomImage)
- (void)drawRect:(CGRect)rect {
UIImage *image=nil;
if (self.tag == 0)
    image = [UIImage imageNamed: @"navBarDesign1.png"];
else if (self.tag == 1)
    image = [UIImage imageNamed: @"navBarDesign2.png"];

[image drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
 }

 @end

Answer 3

Elaborating on tc.'s answer, here's a free app in the AppStore I found for doing just this, called "BarTint"

http://www.appstore.com/bartint

Answer 4

I always put the style to "Black Opaque" (if I work with Interface Builder) and then sample the darkest color in the design (usually regions at the lower edge) and put that color as tint. This gives me something really similar, BUT of course doesn't allow me to control the light (reflection) side. If the client really wants the exact gradient, I use a image (unfortunately)...