Free bitmaps for iOS custom buttons and sliders?

Question

First, I'm not talking about icon libraries or mockup tools/libraries.

I'm familiar with various icon libraries that people have created, but other than the stuff from the example code like UICatalog, I'm wondering if anyone knows of anyone who has created free libraries of custom button bitmaps (stretchable button images), slider handle/track bitmaps, etc Basically bitmaps to customize the look of standard controls for those controls (like buttons and sliders) that allow you to specify such bitmaps.

I'm also interested in any photoshop tutorials/templates on/for creating stretchable custom button images, bitmaps for slider parts, etc. (Afraid I'm not a huge PS god or anything.)

Anyone know of any resources like this for fancying up the standard controls?

Answer 1

I've been able to find several stretchable buttons by searching through my collections of sample code for: "stretchableImageWithLeftCapWidth"

From the Apple sample code, the UICatalog, BubbleLevel, iPhoneMultichannelMixerTest, avTouch, AQOffilineRenderTest, and TouchCells sample code all contain buttons with stretchable images.

Hope this helps!

Answer 2

Stretchable buttons is no problem - there's nothing special you need to do in Photoshop. Just make the image of the button stretchable and set the radius to that of any rounded corners you have on the button graphic.

Slider parts - I'm pretty sure you'd have to make your own UIControl from scratch.

To make a button in Photoshop, create a new file with transparent background, select the Shape tool, rectangle near the bottom of the tools, drag out a rectangle. Size doesn't matter™. For a rounded rectangle, click and hold the same tool, choose the rounded rect shape and set a corner radies (same radius as in stretchableImage later).

Double-click the layer right of the layer name to get the layer style popup. Check Color Overlay and set the color you want. Check Inner Bevel and make its size somewhere below half the height of the rectangle - I think 90 degrees for the Global Angle works well. A lower opacity and larger size makes the bevel look less chunky.

Ctrl-click (option-click) the graphics rectangle in your layer to select the button's outline. Deselect the bottom half of it by using the marquee tool (M) at the top of the tools. Select a light gray foreground color, nearly white. Create a new layer with the square icon under the layer list (Windows->Layers if not visible). Fill the selection of the new layer with the paint bucket, and drag down opacity for the layer until the 'matte laquer' effect of it looks right.

A simple button, but that's the gist of it.