Things that were not immediately obvious to me

The gloss gradient code we saw on Tuesday has got a lot of fairly arbitrary math in it – including both constants and functions – that “tunes” the final appearance of the gradient. Today I want to walk through some of that math, and see how it might be adjusted to dampen the caustic effect, and brighten the highlight.

Continue reading →

Editorial Note: I was planning to discuss the gloss gradient code in detail today, with an eye to showing how some of its more arbitrary elements could be adjusted to alter the appearance of the gradients that it produces. Unfortunately, that post is running a day late, so instead I’m going to talk about a different way to hack up shiny buttons.

There is a way to create shiny buttons built in to the iPhone API, aside from the unsupported UIGlassButton class. The segmented control class (UISegmentedControl) will render widgets of the UISegmentedControlStyleBar control style with a “glossy” appearance. There are certain drawbacks, of course.

Continue reading →

Today, we package the gloss gradient and rounded rect code we developed on Monday and Friday into a UIButton category, and take a quick look at adding labels to these buttons; the latter discussion is much simpler than I had anticipated.

Continue reading →

Today, we’ll actually get around to the business of drawing some shiny pictures. We’ll be using Matt Gallagher’s gloss gradients code as a base, with some minor adjustments to allow for porting to the iPhone, and for personal taste. We’ll combine this code with Friday’s rounded rect clipping code to generate a rough draft of our shiny buttons. Let’s get started.

Continue reading →

As promised, here are some test cases that exercise the rounded rect code presented yesterday. (If you want to study the results, click on the image to the left for a full-size screenshot.) Although only intended for testing, this code might also be useful for some simple homemade buttons.

Continue reading →

Today, we’ll see how to use Quartz 2D to generate rounded rectangles, either as outlines, or as clipped regions. We’ll begin with some background on Quartz technicalities, and then see some simple path generation code.

Continue reading →

One of the most striking elements of “modern” user interfaces is that half the buttons are so shiny that it’s a wonder magpies don’t break into your house and make off with your PC. This is all very pretty, but it can be a bit of a nuisance for the developer.

In particular, the iPhone’s built-in apps (e.g. Clock, Contacts) have some very nice, glossy, colored buttons that any developer would want to emulate. Unfortunately, there is no built-in API that allows a developer to conjure up similar buttons; you have to roll your own. To address this problem I’m going to spend the next several days walking through the process of creating the shiniest, happiest buttons imaginable. I hope you find it helpful.

Continue reading →