Getting Started
Download this Guide as a PDF
You can view or download this user guide as a PDF document if you like. It's a little bit larger than 1 MB.
Introduction
Welcome to the ButtonGadget2™ user guide. ButtonGadget2 is a powerful program able to create professional looking buttons with only a few mouse clicks. If you used the original ButtonGadget program, you will find the basic workflow for creating buttons is pretty much the same, even though there are quite a few enhancements. This user guide should help you learn more about how each feature in ButtonGadget2 works.
What is ButtonGadget2 and what’s it used for?
ButtonGadget2 is a software desktop application which runs on both Mac OSX Tiger and above as well as Windows XP. It’s primary use is to create professional buttons quickly. Buttons can be in a variety of shapes and sizes, have different labels with both text and icons, and be rendered with or without a background color. There are a number of button‘states’ you can create, including the NORMAL, MOUSE OVER, MOUSE DOWN and DISABLED states. The collection of states for a given button, along with the button images, type style and icon is called a ButtonSet. With ButtonGadget2 you can create new ButtonSets, save them then load them again later for further customization.
One of the best features of ButtonGadget2 is the ability to load pre-existing designs of ButtonSets. Once loaded, new text can be added with little more than typing and a press of a button to apply it to all the button states. Then, a simple build and export and you’re finished. This ease of use is called workflow and is something ButtonGadget2 excels at.
Welcome to the ButtonGadget2™ user guide. ButtonGadget2 is a powerful program able to create professional looking buttons with only a few mouse clicks. If you used the original ButtonGadget program, you will find the basic workflow for creating buttons is pretty much the same, even though there are quite a few enhancements. This user guide should help you learn more about how each feature in ButtonGadget2 works.
What is ButtonGadget2 and what’s it used for?
ButtonGadget2 is a software desktop application which runs on both Mac OSX Tiger and above as well as Windows XP. It’s primary use is to create professional buttons quickly. Buttons can be in a variety of shapes and sizes, have different labels with both text and icons, and be rendered with or without a background color. There are a number of button‘states’ you can create, including the NORMAL, MOUSE OVER, MOUSE DOWN and DISABLED states. The collection of states for a given button, along with the button images, type style and icon is called a ButtonSet. With ButtonGadget2 you can create new ButtonSets, save them then load them again later for further customization.
One of the best features of ButtonGadget2 is the ability to load pre-existing designs of ButtonSets. Once loaded, new text can be added with little more than typing and a press of a button to apply it to all the button states. Then, a simple build and export and you’re finished. This ease of use is called workflow and is something ButtonGadget2 excels at.
Installing ButtonGadget2
Typically ButtonGadget2 will comprise of only a single file after first downloaded. This file is called ButtonGadget2, but it’s only purpose is to launch the main application. But, you may ask, where is the main application? Well, it’s not there yet. When you first startup ButtonGadget2, it goes to our server and downloads everything you need to run ButtonGadget2, and places it in a folder called ButtonGadget at the same level as where the original ButtonGadget2 application is.
You can look inside that folder and see two other folders: Plugins and ButtonSets. The Plugins folder contains resource code for running ButtonGadget2, and you really never need to enter that folder unless you're adding a font for BittyFont. The folder called ButtonSets is the default place all your ButtonSets are stored. We’ll talk more about that later.
ButtonGadget2 is designed to be a Portable Application. This means you can take the folder ButtonGadget2 is installed in and move it to a USB drive if you like, then use it on any other computer. Everything is self-contained, so you don’t have to worry about special registry settings or any other files which may be needed. This is different from the original ButtonGadget, and we think much better. The ButtonGadget2 license is specifically for the individual, not the computer. However, if you decide to use ButtonGadget2 as a portable app, you may need to register it on new computers.
You can look inside that folder and see two other folders: Plugins and ButtonSets. The Plugins folder contains resource code for running ButtonGadget2, and you really never need to enter that folder unless you're adding a font for BittyFont. The folder called ButtonSets is the default place all your ButtonSets are stored. We’ll talk more about that later.
ButtonGadget2 is designed to be a Portable Application. This means you can take the folder ButtonGadget2 is installed in and move it to a USB drive if you like, then use it on any other computer. Everything is self-contained, so you don’t have to worry about special registry settings or any other files which may be needed. This is different from the original ButtonGadget, and we think much better. The ButtonGadget2 license is specifically for the individual, not the computer. However, if you decide to use ButtonGadget2 as a portable app, you may need to register it on new computers.
About ButtonGadget 3 minute tutorial
Welcome to the About ButtonGadget2 section of the manual. After installing ButtonGadget2, open it to the main screen.
Before we discuss the interface controls, let's quickly build some buttons and see how easy it is! Just click on the Load Button Set button (at the top) and click on the Online Buttons tab. This will load a limited set of buttons (registered users have access to many more!). Next choose the Metal Button button from the scrolling list and press the OK button. This will download it and place it in your local ButtonSets folder, then load it into ButtonGadget2.
First, Let's change the brushed metal button to say Hello World. So, highlight the text Metal Button in the Button Text field and type Hello, press return and type World. Press tab to render the text to the selected button state (indicated by the orange vertical line next to it). Press the Copy Text to All button and watch as all button states are rendered to their respective positions.
Next, let's change the background color. Select the Shape tab and click the Background Color swatch (square button next to Background Color). This will launch the ButtonGadget2 color picker. You can choose a color in one of two ways. You can place your mouse cursor over anyplace on the screen and choose the color directly beneath the cursor by pressing the space bar; Or you can click directly on the color square in the color picker and it will launch the basic system picker. Choose a medium blue color and press OK.
The active button state will now display the newly selected color in the background. Notice the drop shadow is now blue and not grey. This is a feature called alpha masking which allows you to create higher quality images with more subtle effects! Click the Set Color for All button to apply the background color settings to all the buttons.
Let's say we only want to use the Normal, Mouse Over, and Mouse Down states for this button. Uncheck the Disabled checkbox to hide the Disabled button. Now, the Disabled button will not be rendered or exported.
To render the button, select the Build tab and press the button, Build Button. The screen will refresh as the various button states are composited. After a few seconds, the button is built. You can now interact with the button. Roll your mouse over it and press down on it.
Let's now save the buttons as JPG's. Click on the Export Images button and choose a folder to put the images in. You will be prompted if you would like to create javascript to go with the buttons you are exporting. Select Yes.
That's all there is to it. You've just built custom professional looking buttons in only a few seconds! There are more powerful and advanced features in ButtonGadget, such as the ability to make your own ButtonSets from scratch. To learn more about these, the new ButtonGadget2 plugins and the ButtonGadget interface, please refer to the manual on the ButtonGadget website.
Button thoughts
So, what are buttons and how do you use them? ButtonGadget renders various button states. This includes: Normal, Mouse Over, Mouse Down and Disabled. A ButtonSet is a file, which contains one or more of the button states. Some ButtonSets contain all four button states, others contain one or two- it depends on the who authored them and their intended use. Most people designing webs will use only two button states, Normal and Mouse Over. Why then four states? In some websites, the Mouse Down state is also used. Application interface designers often need a fourth Disabled state for buttons.
So, how does one use them? Well, a web designer would render Normal and Mouse Over button states as two separate images, then upload to a server and use javascript to swap the images when the cursor rolled over it. In any case, it is beyond the scope of this manual to describe all situations and techniques for using custom rendered buttons. It is sufficient to say that ButtonGadget2 can solve most all button rendering tasks.
Before we discuss the interface controls, let's quickly build some buttons and see how easy it is! Just click on the Load Button Set button (at the top) and click on the Online Buttons tab. This will load a limited set of buttons (registered users have access to many more!). Next choose the Metal Button button from the scrolling list and press the OK button. This will download it and place it in your local ButtonSets folder, then load it into ButtonGadget2.
First, Let's change the brushed metal button to say Hello World. So, highlight the text Metal Button in the Button Text field and type Hello, press return and type World. Press tab to render the text to the selected button state (indicated by the orange vertical line next to it). Press the Copy Text to All button and watch as all button states are rendered to their respective positions.
Next, let's change the background color. Select the Shape tab and click the Background Color swatch (square button next to Background Color). This will launch the ButtonGadget2 color picker. You can choose a color in one of two ways. You can place your mouse cursor over anyplace on the screen and choose the color directly beneath the cursor by pressing the space bar; Or you can click directly on the color square in the color picker and it will launch the basic system picker. Choose a medium blue color and press OK.
The active button state will now display the newly selected color in the background. Notice the drop shadow is now blue and not grey. This is a feature called alpha masking which allows you to create higher quality images with more subtle effects! Click the Set Color for All button to apply the background color settings to all the buttons.
Let's say we only want to use the Normal, Mouse Over, and Mouse Down states for this button. Uncheck the Disabled checkbox to hide the Disabled button. Now, the Disabled button will not be rendered or exported.
To render the button, select the Build tab and press the button, Build Button. The screen will refresh as the various button states are composited. After a few seconds, the button is built. You can now interact with the button. Roll your mouse over it and press down on it.
Let's now save the buttons as JPG's. Click on the Export Images button and choose a folder to put the images in. You will be prompted if you would like to create javascript to go with the buttons you are exporting. Select Yes.
That's all there is to it. You've just built custom professional looking buttons in only a few seconds! There are more powerful and advanced features in ButtonGadget, such as the ability to make your own ButtonSets from scratch. To learn more about these, the new ButtonGadget2 plugins and the ButtonGadget interface, please refer to the manual on the ButtonGadget website.
Button thoughts
So, what are buttons and how do you use them? ButtonGadget renders various button states. This includes: Normal, Mouse Over, Mouse Down and Disabled. A ButtonSet is a file, which contains one or more of the button states. Some ButtonSets contain all four button states, others contain one or two- it depends on the who authored them and their intended use. Most people designing webs will use only two button states, Normal and Mouse Over. Why then four states? In some websites, the Mouse Down state is also used. Application interface designers often need a fourth Disabled state for buttons.
So, how does one use them? Well, a web designer would render Normal and Mouse Over button states as two separate images, then upload to a server and use javascript to swap the images when the cursor rolled over it. In any case, it is beyond the scope of this manual to describe all situations and techniques for using custom rendered buttons. It is sufficient to say that ButtonGadget2 can solve most all button rendering tasks.