Omlouváme se, informace na této stránce jsou k dispozici pouze anglicky. Použít překladač Přepnout do angličtiny

News, tips, advice, ideas, experience…

Designing Buttons in Pages [updated]

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…

Designing User Interface Buttons in Pages

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.

Call us Volejte
nám

+420 608 301 880

Obvykle jsme dostupní v pracovní dny mezi 8. a 18. hodinou

Pokud budete volat z viditelného čísla a nedovoláte se, zavoláme vám zpátky

Let us call you Voláme
zpět

Vyplněním a odesláním tohoto formuláře udělujete 24U s.r.o., IČ: 26152584, se sídlem Zvole u Prahy, Skochovická 88, PSČ 252 45, zapsané v obchodním rejstříku vedeném Městským soudem v Praze, oddíl C, vložka 74920 souhlas s využitím Vašich osobních údajů, které jsou obsaženy ve formuláři, k zasílání obchodních sdělení o nabídkách a novinkách 24U s.r.o. Poskytnutí osobních údajů je dobrovolné. Svůj souhlas můžete kdykoli odvolat. Podrobnosti o nakládání s Vašimi osobními údaji a Vašich právech s tím souvisejících jsou obsaženy v zásadách zpracovávání a ochrany osobních údajů.

Loader Image