Shape tab
Shape tab
1) Use Background Color checkbox - if checked will display the background color for the active button state. Note: if a button has no transparency channel (i.e. a rectangular button with no drop shadow) this setting will not display any change as there is no transparency for the background to show through. In this case, leave it checked for correct rendering of saved ButtonSets.
2) Background Color button - click to change the color of the background for the active button.
3) Copy Background to All button - copies the background color of the active button to all the other visible button states (those that are currently checked 'on').
4) Show Image checkbox - if checked will display the 'current' loaded image for the active button.
5)L oad Image button - prompts the user for a JPG, GIF or PNG file to load as the 'current' image for the active button. If a GIF or PNG file with transparency is selected, then the transparency will be preserved in the 'current' image.
6) Capture Image - displays a cross hair which the user can than click and drag a small rectangle for use as the button base. After the capture is complete, the Capture Preview window is opened where you can resize or crop the image if you like. Pressing OK drops the image into the selected button state. Typically used in conjunction with the SmartStretch™ plugin to capture existing buttons for removal of the text and reuse.
7) Copy Image to All - copies the 'current' image of the active button to all the other visible button states (those that are currently checked 'on').
2) Background Color button - click to change the color of the background for the active button.
3) Copy Background to All button - copies the background color of the active button to all the other visible button states (those that are currently checked 'on').
4) Show Image checkbox - if checked will display the 'current' loaded image for the active button.
5)L oad Image button - prompts the user for a JPG, GIF or PNG file to load as the 'current' image for the active button. If a GIF or PNG file with transparency is selected, then the transparency will be preserved in the 'current' image.
6) Capture Image - displays a cross hair which the user can than click and drag a small rectangle for use as the button base. After the capture is complete, the Capture Preview window is opened where you can resize or crop the image if you like. Pressing OK drops the image into the selected button state. Typically used in conjunction with the SmartStretch™ plugin to capture existing buttons for removal of the text and reuse.
7) Copy Image to All - copies the 'current' image of the active button to all the other visible button states (those that are currently checked 'on').
SmartStretch
SmartStretch™ is one of the neat new plugins for ButtonGadget2. It is found under the Shape tab towards the bottom of the screen.
In order for SmartStretch to work, you need to have a specific button chosen. When opening SmartStetch, it will copy the existing button to its own window and there you can edit it with the various SmartStretch features.
SmartStretch is used for making existing buttons smaller or larger, either in height or width. To do this SmartStretch uses a non-destructive technique which copies or deletes rows of pixels.
Once SmartStretch is open, you’ll find at the top the buttons Import, Export, Reset. Import allows you to load a JPG or PNG graphic as a start image. Export will save the current image as a PNG (not JPG as JPG has no transparency channel). And Reset is used for going back to the original image which was loaded when first launched.
You can toggle the visibility of the guides, by clicking the Show Guides button at the top right of the Smart Stretch interface.
At the bottom you’ll see three fields: Width, Height and Delta. Width is the current width of the image you’re working with in pixels. Height is the height of the image, while Delta is only displayed when actually modifying the image.
The buttons at the bottom are Close and Apply. Use the Close button to close SmartStretch and the Apply button to apply the current changes to the chosen button state.
The main work in SmartStretch is done in either of two modes, Add or Subtract. When you are in Add mode you can increase the height and/or width of the image, when in Subtract mode you decrease the height/width of the image. You might want to think of it like adding or subtracting rows and columns from a spreadsheet. Think of where you want to start adding/subtracting and then how much you want to add or subtract.
In order to add/subtract, you have to first tell SmartStretch where you want to start. That is what the blue arrows are for. You can position the blue arrow anywhere you would like to add/subtract a row or column of pixels. Once positioned, you can add/subtract to image by clicking and dragging either of the orange arrows on either side of the blue arrow. While dragging, you’ll notice the amount you are adding/subtracting in pixels will be displayed in the Delta field below. This is helpful for remembering setting in case you wish to apply them to another button state.
In order for SmartStretch to work, you need to have a specific button chosen. When opening SmartStetch, it will copy the existing button to its own window and there you can edit it with the various SmartStretch features.
SmartStretch is used for making existing buttons smaller or larger, either in height or width. To do this SmartStretch uses a non-destructive technique which copies or deletes rows of pixels.
Once SmartStretch is open, you’ll find at the top the buttons Import, Export, Reset. Import allows you to load a JPG or PNG graphic as a start image. Export will save the current image as a PNG (not JPG as JPG has no transparency channel). And Reset is used for going back to the original image which was loaded when first launched.
You can toggle the visibility of the guides, by clicking the Show Guides button at the top right of the Smart Stretch interface.
At the bottom you’ll see three fields: Width, Height and Delta. Width is the current width of the image you’re working with in pixels. Height is the height of the image, while Delta is only displayed when actually modifying the image.
The buttons at the bottom are Close and Apply. Use the Close button to close SmartStretch and the Apply button to apply the current changes to the chosen button state.
The main work in SmartStretch is done in either of two modes, Add or Subtract. When you are in Add mode you can increase the height and/or width of the image, when in Subtract mode you decrease the height/width of the image. You might want to think of it like adding or subtracting rows and columns from a spreadsheet. Think of where you want to start adding/subtracting and then how much you want to add or subtract.
In order to add/subtract, you have to first tell SmartStretch where you want to start. That is what the blue arrows are for. You can position the blue arrow anywhere you would like to add/subtract a row or column of pixels. Once positioned, you can add/subtract to image by clicking and dragging either of the orange arrows on either side of the blue arrow. While dragging, you’ll notice the amount you are adding/subtracting in pixels will be displayed in the Delta field below. This is helpful for remembering setting in case you wish to apply them to another button state.
ButtonStudio Plugin
Unlike SmartStretch which starts with the existing button state button, ButtonStudio opens with a blank canvas. The purpose of ButtonStudio is to create buttons completely from scratch. Typically, ButtonStudio is used to build the base for buttons for themed websites or interfaces— in other words, buttons which match the color, look and style of existing projects. While this may seem difficult for other programs, with ButtonStudio it’s a snap to capture an image, then create a button for it.
Caveat: ButtonStudio plugin ONLY CREATES RECTANGLULAR BUTTONS. It will not work with any other button shape. It will not recognize the alpha channel transparency of any imported buttons.
Interface:
Along the top of ButtonStudio there are the buttons: Capture, Import, Export, and Reset.
The Capture button changes the cursor to a cross-hair so you can click and drag a region for any part of the screen you wish to take a picture for. If the picture is too large for ButtonGadget2, then you will receive an error message prompting you to try again. The Import button allows you to load a JPG or PNG image as a base image to start with. The Export button exports the current image as a PNG. The Reset button clears the canvas completely.
Along the bottom, you’ll find the Width and Height fields which display the current width and height of the image you’re working with. Also there are the Close and Apply buttons. The Close button closes ButtonStudio and the Apply button applies the current ButtonStudio image to the selected button state in ButtonGadget2.
The Choose Effect button popups a menu allowing you to choose from several effects which can be applied to the current image. The Apply button applies the chosen effect and it’s relevant settings to the current image. The Delete button removes the chosen effect from the current image.
Here’s the typical workflow for ButtonStudio. First you open the website or application you want to work with. Next you choose use the Capture button to chose an area which you want to be the background of the button. After capture is finished, you will see a Preview Capture window where you can resize or crop the capture. After pressing OK, you will see a rectangle within ButtonStudio of the recent screen capture.
From here you can begin to choose effects for your button. First, you may choose to apply a border to the rectangle. To do this, click the Choose Effect button and select Border. Next click the Apply button. Now you will see a border shown around the capture. If you wish to apply a 3D-Effect, then leave the border is outside checkbox checked. You can adjust both the size and color of the border by changing the settings to the right of the Border button.
You can also choose to apply a 3D-Effect to the button, by choosing 3D-Effect from the popup menu and pressing the Apply button. Once applied, you will see a series of 4 color swatches in the settings area. Each color swatch is a button and can be used to change the color for the left, right, top and bottom areas of the button. You can also change the 3D-effect size by changing the border size setting.
Selecting Gloss from the Effect popup menu gives you a number of options. The default is a 50% opacity gloss about 1/3 the way down the button, with bottom gloss turned off. You can adjust the position of both the top and bottom gloss by using the Position slider. You can also adjust the opacity of the gloss by using the Transparency slider.
The Highlight-Effect button is typically the last effect applied (of course the sequence of effects is up to you, and can be changed at any time). Highlight Effects are useful for creating other button states. The glow effect applies a central white glow to the button. If you check the use dark checkbox, it will apply a dark glow to the button. The amount of glow applied is changed with the slider control. The indent effect creates a inside drop shadow on the button, and can be used for MOUSEDOWN button states. The amount of drop shadow can be controlled by number.
Remember, at any time you can apply the current image from ButtonStudio to the chosen button state. This is helpful as typically you might want to create your NORMAL setting first, then apply a Glow Highlight-Effect and a apply it to the MOUSEOVER button state, and then use the Indent Highlight-Effect to create the MOUSEDOWN button state.
Caveat: ButtonStudio plugin ONLY CREATES RECTANGLULAR BUTTONS. It will not work with any other button shape. It will not recognize the alpha channel transparency of any imported buttons.
Interface:
Along the top of ButtonStudio there are the buttons: Capture, Import, Export, and Reset.
The Capture button changes the cursor to a cross-hair so you can click and drag a region for any part of the screen you wish to take a picture for. If the picture is too large for ButtonGadget2, then you will receive an error message prompting you to try again. The Import button allows you to load a JPG or PNG image as a base image to start with. The Export button exports the current image as a PNG. The Reset button clears the canvas completely.
Along the bottom, you’ll find the Width and Height fields which display the current width and height of the image you’re working with. Also there are the Close and Apply buttons. The Close button closes ButtonStudio and the Apply button applies the current ButtonStudio image to the selected button state in ButtonGadget2.
The Choose Effect button popups a menu allowing you to choose from several effects which can be applied to the current image. The Apply button applies the chosen effect and it’s relevant settings to the current image. The Delete button removes the chosen effect from the current image.
Here’s the typical workflow for ButtonStudio. First you open the website or application you want to work with. Next you choose use the Capture button to chose an area which you want to be the background of the button. After capture is finished, you will see a Preview Capture window where you can resize or crop the capture. After pressing OK, you will see a rectangle within ButtonStudio of the recent screen capture.
From here you can begin to choose effects for your button. First, you may choose to apply a border to the rectangle. To do this, click the Choose Effect button and select Border. Next click the Apply button. Now you will see a border shown around the capture. If you wish to apply a 3D-Effect, then leave the border is outside checkbox checked. You can adjust both the size and color of the border by changing the settings to the right of the Border button.
You can also choose to apply a 3D-Effect to the button, by choosing 3D-Effect from the popup menu and pressing the Apply button. Once applied, you will see a series of 4 color swatches in the settings area. Each color swatch is a button and can be used to change the color for the left, right, top and bottom areas of the button. You can also change the 3D-effect size by changing the border size setting.
Selecting Gloss from the Effect popup menu gives you a number of options. The default is a 50% opacity gloss about 1/3 the way down the button, with bottom gloss turned off. You can adjust the position of both the top and bottom gloss by using the Position slider. You can also adjust the opacity of the gloss by using the Transparency slider.
The Highlight-Effect button is typically the last effect applied (of course the sequence of effects is up to you, and can be changed at any time). Highlight Effects are useful for creating other button states. The glow effect applies a central white glow to the button. If you check the use dark checkbox, it will apply a dark glow to the button. The amount of glow applied is changed with the slider control. The indent effect creates a inside drop shadow on the button, and can be used for MOUSEDOWN button states. The amount of drop shadow can be controlled by number.
Remember, at any time you can apply the current image from ButtonStudio to the chosen button state. This is helpful as typically you might want to create your NORMAL setting first, then apply a Glow Highlight-Effect and a apply it to the MOUSEOVER button state, and then use the Indent Highlight-Effect to create the MOUSEDOWN button state.