Free bitmaps for custom iOS buttons and sliders?

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

I am familiar with various icon libraries created by people, but in addition to material from example code such as UICatalog, I wonder if anyone knows about those who created free libraries of custom button bitmaps ( stretch button images ), slider bitmaps / tracks etc. Basically, bitmaps to adjust the appearance of standard controls for these controls (such as buttons and sliders) that allow you to specify such bitmaps.

I am also interested in any tutorials / templates for Photoshop in / for creating stretchable custom button images, bitmaps for slider details, etc. (I'm afraid I'm not a big god PS or anything else.)

Does anyone know of any resources like this for familiarizing themselves with standard controls?

+7
user-interface ios iphone ipad photoshop
source share
2 answers

Buttons with stretch marks are not a problem - there is nothing special in Photoshop. Just make the button image extensible and set the radius equal to any rounded corners that you have on the button graph.

Parts of the slider - I'm sure you have to make your own UIControl from scratch.

To make a button in Photoshop, create a new file with a transparent background, select the Shape tool, the rectangle next to the tools, draw a rectangle. Size doesn't matter. For a rounded rectangle, click and hold the same tool, select a rounded rectangular shape and set the corner radii (the same radius as in stretchableImage later).

Double-click the layer to the right of the layer name to get a style popup. Check the color of the overlay and set the desired color. Check the Inner Cone and make its size somewhere below half the height of the rectangle - I think 90 degrees for the Global Angle work well. Lower opacity and larger size make the bevel less shorter.

Ctrl-click (select-click) the graphic rectangle in your layer to select the button outline. Remove the bottom half with the selection tool (M) at the top of the tools. Choose a light gray foreground color, almost white. Create a new layer with a square icon in the list of layers (Windows-> Layers if not visible). Fill the selection of the new layer with a bucket of paint and drag the opacity of the layer until the β€œmatte varnish” effect looks right.

A simple button, but its essence.

+2
source share

I was able to find some stretchable buttons by searching my code sample collections: "stretchableImageWithLeftCapWidth"

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

Hope this helps!

+4
source share

All Articles