Wednesday, May 22, 2013

Generate a set of buttons for game in FXG format using Adobe Illustrator

We already mentioned importance and convenience of using "artboards" in Adobe Illustrator. Now we'll tell you how to make a set of buttons you need from a single *.ai file right in FXG format.

Buttons usualy have Up and Down states. We suggest you to make 2 rows of artboards in Adobe illustrator file. First row for Up button state, second row for Down button state. Common thing for each row is shape and design. So you need to draw different button templates for Up state and Down state. Each one should be in different artboard.




 Fig.

Detailed information about creating and naming artboards you can find in our previous post. Usefull tip to make your life easier is to do a symbol from a button design and copy it to all artboards in a row. When you did it, all you need is to Edit Symbol of any button-as-a-symbol design and the same changes will apply for all buttons in a row automatically.
To make a Symbol from a designed button you should:
- make a button design
- open Symbols window in Adobe Illustrator (Fig. 1 - Symbols button or Shift+Ctrl+F11 (Windows))
- select your design and move it to Symbols window field (Fig. 1 - Symbols panel)
Now you can copy symbol that you have just made to all artboards in a row. Do all the same with a new design for a second row or just use our template .

How to easily make separate FXG files from each artboard by specialy made script you can find in our post here.

1 comment:

  1. Hi,
    Its a very nice article having good information ,worth to read this article .
    Thank you.
    oracle R12 training

    ReplyDelete