How does it work?
The first thing you will see when launching the application, apart from the splash screen, will be the Main screen
. From this point you will have total control over the creation and development of your buttons.
On the Button preview pane you will find a button with default appearance settings: in order to change its appearance, use the Tabs available on the lower half of the application window.
You can change the button size (expressed in video pixels) by filling the Width and Height fields and pressing the Update button or, in alternative, dragging the eight handles visible around the button.
Note that the button inside the Button preview pane is not an image but is a real button that will behave according to the options you have selected when you press it or pass over its surface with the mouse pointer. This allows you to preview exactly what will be exported.
On the image below you will find a summary of the main parts of the application:
The main goals of this application are:
Editing the displayed button through the set of available properties
Exporting the button under editing in the form of one or more picture files that you will use inside your web pages.
The first task is very easy and what you need to do is simply using the available Settings Tabs displayed on the lower half of the application screen: every change will be immediately reflected on the button under editing inside the Button Preview pane.
Before exporting the button picture files, you should check your preferences (graphic format, compression quality, destination folder for the exported picture files and which of the button's states to export) selecting from the application Main menu
item and then choosing the Options
sub-item: the Options dialog box
will be displayed: details about the available settings can be found inside the Options dialog box
You are now ready to export the pictures of the button under editing to one or more files: from the application Main menu select the Button item and then the Save to file item.
If you have defined a caption text for the button under editing, it will be automatically used as the image filename, if not, you will be prompted to enter a filename. The filename extension will be based on the chosen graphic format (PNG, JPG, BMP or GIF)
If in the Export options
dialog box you chose to export other button states pictures, the following suffixes will be added between the caption text and the file extension:
"_pr" for Pressed state: if the caption text is "Support", you will obtain a filename support_pr.xxx in which xxx depends upon the graphical format you chose (it could be for example png).
"_mo" for Mouse Over state.
"_di" for Disabled state.
In some case it can be useful exporting the button pictures on the clipboard instead of inside a file: in this case on the Main menu select the Button item and then the Export to clipboard item. You will be prompted to enter the state of the button you want to export through the following dialog box:
Once you have chosen the state you want to export and you have pressed the Export button, go to the graphics application you want to export the picture to and use the Paste item that is usually in the graphical application Edit menu. (These commands are valid for English versions of Windows and may vary when using a different language).
Note that you can reach the same feature also selecting from the application Main menu the Edit item and then selecting the Copy sub-item.
As you may know, pictures are always stored as rectangular, while our buttons could have a non rectangular shape: as you can see on the image below, by default the corners of the picture reflect the color of our application:
You can change the color that will be used as the background of the exported image by choosing the Colors Tab
, selecting the Container background
item and changing the color pressing the Change
button; further details about changing the button colors can be found inside the Colors Tab
Sometime you could need to manage more than one button, for example to create a set of buttons or to create a web page navigation bar like in the picture below:
Creating each button separately would be time consuming so the management of button collections can help you speed up the creation of this kind of navigation bar.
From the application Main menu select the Collections item and then the Edit collection sub-item: the Collection management dialog box will be displayed.
Further details about the editing of a Button Collection
can be found inside the Collection management
You can see a report of the last performed operation or a summary of all the operations performed since the application was started selecting the Report item inside the application Main menu.