How to Make iPhone Style Button Graphics

Create graphics like those seen in iPhones by using the rectangle and gradient fill tools of imaging programs like Paint.NET, GIMP and Photoshop. The essence of this type of graphic is the illusion of three dimensions, which the gradient fill tool provides. This tool smoothly blends together two different colors by using a smooth continuum of other colors. This behavior simulates the lighting often seen on a button in the physical world. If you use another imaging program besides those mentioned here, be sure your program has layering features. Layers are virtual transparencies that form a composite image when stacked together. This behavior lets you easily swap out one drop shadow or button highlight, for example, for another.

Instructions

1. Click the "Tools" panel icon shaped like a rectangle, then drag on the canvas to draw a black square. If you're using GIMP, click the "Edit" menu's "Fill with foreground" color to complete the black square. This shape represents the button's shadow.

2. Click the "Layer" menu, then click the "Duplicate" command to make a copy of the square, which will form the actual button. Click the color you want for the button from the upper color swatch at the button at the bottom of the "Tools" panel, if you're using GIMP or Photoshop. Click the color from the "Color" panel if you're using Paint.NET.

3. Click the gray rectangle in the "Tools" panel to run the "Gradient fill" tool, then click a point below the square. Drag directly above until the mouse cursor is just above the square, then release the mouse to fill the shape with a gradient that blends white with the color you chose. This coloring creates the simulated lighting shown in iPhone button graphics.

4. Click the "Tools" panel icon shape like an ellipse to run the tool for drawing ellipses, then drag over the upper portion of the square to draw an ellipse representing the button's highlight.

5. Apply the same gradient fill to the circle you applied to the circle to complete the circular highlight, then click the "Tools" panel icon that displays the letter "A" or "T" to run the "Text" tool. Click the center of the button, then click the "Font" drop-down list above the canvas. Click the "Webdings" item from this list.

6. Press any keyboard key to insert a Webding graphic in the iPhone button.

References

• dotPDN: Paint.NET Geometric Shape Tool
• GIMP User Manual; GIMP documentation team; 2009
• Photoshop CS5 Bible; Lisa Dayley; 2010