I am by no means a Photoshop expert, so there doubtless better ways to do this. With that disclaimer out of the way, hopefully this will help someone.
Yesterday I needed a nice-looking dot, like the one next to unread email messages in the iPhone Mail client. At first I tried lifting the dot from the phone directly, taking a screenshot. But that gave me a 13 x 13 pixel dot that was antialiased to white, and I needed it antialiased to transparent, so that it would work against any background. This is the dot I wanted (the final result is at the bottom):
So I tried my hand at creating it from scratch in Photoshop, and it turned out to be surprisingly easy (even easier when I reproduced the steps in order to create the screenshots here). The Photoshop tools are very well designed for exactly this sort of graphic.
For this, I used Photoshop CS3 for Mac OS X. This article assumes you have a basic familiarity with Photoshop, but I try to be specific in how to carry out the operations. I glossed over the configuration of the Marquee tool a bit, but hopefully you'll get it.
Start by creating a new document of the overall size you want. I wanted a 13 x 13-pixel dot, so I created a 13 x 13 document. It's important that it be RGB, and have a transparent background:
Zoom way in on the document, by typing Command-+ a few times. I worked at 3200% zoom. Then choose the colors you'll want to use. I used just two shades of blue, lifted right from the screenshot of the Mail dot. You'll need three, one for the border color, and two for the gradient start and end.
For this step, make sure the darker color is the front color:
With the Ellipse Tool, create a circle by clicking in the very upper-left corner of your document, and dragging to the lower-right:
It should fill in a nice antialiased circle of the chosen color:
Then choose the Elliptical Marquee Tool:
And create a circular selection that's smaller than the circle you filled before. I did this by holding down the Option key as I clicked in the center of the image, and dragging toward the lower-right. Holding the shift key while you do this will constrain the proportions to be square:
When you let go, it'll change shape to show the actual pixels that are selected:
At this point, you want to fill in the circle with the gradient, to give it a highlight. On Mac OS X and iPhone OS, lights are always directly above the graphic.
To fill the gradient, Photoshop needs a layer into which it can draw. Click the New Layer button in the Layers utility window:
Set up the colors for the gradient fill. Since I chose the colors I was going to use already, I just had to make sure the light color was on top:
Then select the Gradient tool:
And make sure the tool is set up to do radial gradients. At the top of the screen, there's a tool bar that lets you configure the gradient tool. Set it up so it looks like this:
At this point, you should have a selection of pixels and a new layer selected that match the steps above, and the colors you want your gradient to be. Then use the gradient tool by clicking near the top-center of your dot, and dragging downward, not quite all the way:
When you let go, you'll have a nice gradient filling just the selected pixels, and properly antialiased, to boot, although that's not as noticeable here since we painted over the same blue color:
Now you can use "Save for Web & Devices…" from the File menu to save this as a 24-bit PNG file with transparency, and it'll be ready for use in iPhone apps. Here's the result (it might be ever-so-slightly different, as this is the dot I got from my first run through these steps, and the screenshots above are from the second run through them I made to write this):
