When developing a software (FileMaker solutions, iOS apps in my case) we often need nice looking user interface elements such as buttons.

I’m not sure about you, but I do not always have time to wait for a designer to create them, neither do I want to learn how to use a professional graphic editor. Now I don’t have to, because I have discovered I can easily and quickly do that using Apple’s Pages and Preview.

As an example for you, I have created this beautiful button that looks like a real computer keyboard key:

It took me only 2 minutes to design this button. See how you can do the same…

Just for your information, I have designed the Numeric Keypad layout for 24U Net Remote completely this way in Pages.

Important note for the ones who really want to use this technique: Dealing with the pixels per inch value in Preview is actually the most tricky part of this technique. If you watch the end of the video carefully you’ll notice that even thought I have saved the document as PNG at 72 pixels/inch the button still does not have the right size (remember I have set its size in Pages to 200×100 points). To be honest I have not yet found a 100% reliable way to deal with this. What works for me in most cases is this:

1. Quit the Preview app
2. Copy the graphics to clipboard in Pages
3. Run the Preview app
4. Create a new document
5. Save the new document as PNG, making sure to specify 72 pixels per inch
6. Close the document
7. Reopen the just-saved PNG
8. Select Adjust Size… item from the Tools menu
9. If the size of the document matches size in points you see in the Inspector in Pages, you have won

Well, the pixels thing is usually not a big issue, but if you get it right especially the borders of your button will look a little bit cleaner in the resulting image.

As always, if you have any questions, ideas, or comments, please leave a note below this article. If you use this technique and have some buttons or other graphics you designed in pages, feel free to share a link.