0

app store image

The new version of the Facebook iPhone app has embossed toolbar images in the UINavigationItem's titleView. It's hard to see in that image, but basically there's an inner shadow and then a mild outer glow, and when you tap on them they have a full-on glow like regular bar buttons.

They have sort of a stamped or embossed look, rather than the white mask of regular bar buttons.

Any ideas how to do that? Much appreciated, thanks.

xtravar
  • 1,321
  • 11
  • 24

2 Answers2

2

Hire a graphic designer to create button images for the various states. :)

XJones
  • 21,959
  • 10
  • 67
  • 82
0

So far, I'm well on my way, though I haven't optimized my drawing code yet. It's taken me far more time than I'd have liked, but I hope this pays off in the end. I suspect that Facebook's app simply uses images.

Step 1: clip to bounds and draw tint color (some alpha transparency)

Step 2: draw inner shadow using this code (remove path parameters for image parameter)

Step 3: CGContextBeginTransparencyLayer, set shadow = white, draw your image, then draw it again with kCGBlendModeDestinationOut

At this point it's just a matter of tweaking the color (step 1) and the shadow parameters (steps 2 and 3).

After this, I suspect the tap & glow effect will be easy. It's been some good core graphics practice!

Community
  • 1
  • 1
xtravar
  • 1,321
  • 11
  • 24
  • I want to draw toolbar icons in the style of Facebook app's. I don't want to actually draw their icons! :) – xtravar Dec 16 '11 at 21:59