3D Button Creator Gold


	Table of Contents Product Info System Requirements Open, Open Last, Save, Save As Real View / Sketch View Shape Color Light Text Icon Texture Export HTML FAQ Support

Welcome to the tutorial about 3D Button Creator Gold ! I will try to demonstrate every function and to elaborate all the possibilities of this program. 3D Button Creator, as the name says, is a tool for calculating 3D-looking buttons to improve the graphical impression of your homepage or to be used in your own program as customized graphical buttons. The usage is very easy. Just open the program and adjust all the parameters of your button with graphical real-time control and if you think that it looks perfect, just export the button as a bitmap or gif/jpeg (for web use). If you want to insert the button (either animated or not) to your homepage just use the HTML TAG function to create and export the ready HTML source code. It can't be more simple. Now start over with the parameters itself, as described below...

System Requirements
Windows 9x/ME/NT/2000/XP 16 MB RAM 3 MB of free harddisk (recommended: 5 MB) a True Color enabled graphic card (adjust your color depth in Windows graphic settings to at least 24bit)

Open, Open Last, Save, Save As
The Open button is used to load a previous saved button face and settings back into the Program for further changes. The actual button in the editor is being overwritten without warning.
Press the Save As button to save all the settings (size,color,text...) you made to the actual button to a file format that can be recovered (only) by 3D Button Creator Gold. You can use the save function if you want to make some changes to your button later or if you want to make several similar looking buttons.	The Open and Save As buttons require you to enter file names to dialog boxes wheareas the Open Last button directly opens the last file you saved either in the same or in an earlier session. If you didn't save a button skin at all an error message occurs saying that you have to save a button skin first before trying to reload it.

Real View / Sketch View
The Sketch View is a graphical simplification mode. It is used on slow computers to save processor time and to increase the speed of calculation. You can activate the Sketch View by clicking on the button shown here located at the corner of the button preview. Once the Sketch View is switched on, only the outlined button is shown with a dash line in it showing the highest level of the button (to show the depth impression). A white dash circle shows the light radius when lighting is enabled. This should give you an impression of illumination. The texture and light are not calculated. When you finished adjusting your parameters in Sketch View simly return to Real View mode to see the result. If you want to leave the Sketch View and return to Real View simply click on the button once again, which now shows the caption "Sketch View".
In Real View everything is calculated in real time as it would be exported. This mode is started automatically when you start the program or when you export your button picture. This mode is recommanded for fast machines.

Let's start with button editing. First select the buttons outer shape. You can create buttons of the following 3 shapes: rectangle, ellipse or circle buttons, and round rect shaped buttons.

When you select ellipse or roundrect as outer shape a Smooth Button option is available. This Option, when activated, smoothes the edges of your button.

If you select round rect shape, the roundness slider enables you to adjust the roundness of the corners. Just try some slider adjustments!

Now adjust the dimensions of your button. There are three sliders to alter Width, Height and Depth. Depth means the Z-dimension if the button. You can Create flat buttons or Windows-looking 3D buttons or even pyramides. Remember: The more you increase the dimensions the more your computer has to calculate and button-preview could get slower and slower. If you want to create a really big button first leave the size small and adjust all the other parameters before increasing it's size.

Now adjust the colors used on your button. You can use any color. To adjust the color values you have two possibilities: either use the Red, Green and Blue sliders or you pick a color from the windows color palette by clicking on the "pick color" button with the pipette symbol.

The top section on this page is for selection of the buttons surface color.

The second section is for adjusting the text color if you selected the usage of text on your button. If the "3D-Text" Option is activated the text color automatically changes to the surface color.

The third section is for adjustment of background color. This is very important when you want to export the button in a non-transparent format such as bmp or jpg. This is also very importent if you use the "smooth" option because it uses a median effect to wash away the edge pixels. It is recommended to adjust the background color to the color you want to put the button on when it is finished. (e.g. homepage background color)

The lowest section changes the menu color of the 3D Button Creator Program. This color information does not effect the button you edit at all. It is just for your comfort. The menu color is saved when you exit the program and it is restored again when you restart it later on.

The light adjustment contains 5 values:

The Light Position section allows you to select the origin of the spotlight. You can use eight fixed positions: left, right, top, bottom, upper-left, lower-left, upper right and lower-right.

The Light Radius slider adjusts the dimension of the spot. It can't go bigger than the smaller size of width or height.

Light Intensity means the factor of brightness increasment within the lights radius. If you want to switch the light off then simply put this slider to 0% !

The Border Fadeout Slider is used to adjust the Brightness of the buttons borders. This is helpful if you want to make a really bright and shiny button on a black page, then you have to increase this factor to make the borders fade to black and not fade to grey. This looks much better ;)

Lighten The Front Too is a selector that allows you to virtually switch the light behind the button so that it doesn't effect the front side with the text. In some cases this can help adjust the border lighting or for testing the 3D-text function.

This is the section that defines the later function of your button. You can place a text on the button by activating Use Text. Then type in your text string and press Apply. If you want to use a special Font for the Text press the Choose Font button and select your Font and it's look (bold,italics,both..). When you select a size in the dialog the actual size is changed and the Font Size slider is adjusted to this size automatically. Additionally you can choose the size of the text with the slider witch allows you to see proof the text size directly on the button.

The 3D Text Function adjusts the text color to the button surface color and makes it look like it was engraved. This Function works best with big or bold text.

The Text Position Sliders allow manual moving of the text on the button. You can use them to correct the position if it's not exactly in the middle of the button or you can place the text on the left or right of the button which makes the best effect when you use some similar buttons and place them one above another.

Tip: the button text is being antialiased when you select text smooting at windows display preferences. This makes the text looking much better. Just try it !

In this Section you can add an icon image to your button. The Picture you choose after activating the Use Icon Image option is placed onto the buttons next to the text. The Icon Image shall help visualizing the function of your button. (like the windows-icon on the "Start"-button).
The preview window shows the source picture.

The Choose button opens an open dialog for selecting another Windows bitmap for use as your icon.

You can set a transparent color specific to your icon by using the pick color button at the bottom. This is the color of your source bitmap that marks the area which should not be printed on the button. So you can use this option to mark the background of your icon as transparent.

The two sliders are used to set the horizontal and vertical position (in pixels) of the icon on your button.

This section adds a texture to your button. The Picture you select after activating the Use Texture Picture option is placed onto the buttons surface like a skin on a face. Remember that the picture must be in Windows bitmap format and that it is placed not continiously but only once on the button. This means it isn't duplicated like the Windows Wallpaper "mosaic" effect. This means the picture has to be at least as big as the button shall become. Else the buttons dimensions are limited to the pictures dimension.
The preview window shows the source texture picture. You can activate the Stretch Preview option to fit its dimensions to the preview window. This is helpful for big pictures.

The brightness slider can be used to adjust the brightness of the texture bitmap. This does not effect your texture image file.

The Choose button opens an open dialog for selecting another Windows bitmap for use as your texture.

Finally you want to export the button you have created for use on your homepage or in other instances. First select the file format to export using the BMP, GIF or JPG selector. BMP - Windows Bitmap is recommended for further editing with paint programs. This format is also compatible with most programming languages. The JPG - JPeG Encoded Picture format is used for online publishing in HTML. You may to select this format if you want to use the button on your homepage (see HTML section).GIF - Graphics Interchange is a format that is also used at homepages. The gif file size is much smaller compared with jpg or bmp. This format does support background transparency but only 256 colors export. This means that your buttons color depth is decreased to 8 bit automatically.

Then you choose a path to store your file and the file name for your button Picture e.g. "mybutton1". Use the

button at "Button Image Filename" section.
If you want to create an animated button that looks different when the mouse mouse slides over it (HTML effect) then select Export Pressed Button Too and choose a file name for this button too as described above (e.g. "mybutton1pressed"). Finally you can go for it and press the

button at top of the window. Now your file(s) are saved.
If you select JPG and uou are familiar with the JPG format then you can change the JPG Options at the bottom of the section. This function is used to adjust the comression rate dependend on the picture quality to decrease the files size(s). More compression means smaller size and less quality.

This feature is helpful for those of you who are not used to write HTML manually or are not familiar with javascript. The program can create the string for image link usage in HTML source code for you to copy and paste into your homepage. It is even able to export the so called "TAG" to a HTML file so that you can test the button you have created just before in a few seconds. And this is how it is done:
First you have to export your button and/or the second (pressed) image using the export Function. It is important for web and export usage that you have exported it/them as JPG or GIF images.
Then you just click Create HTML Tag and the source code is created in the bottom box. Now you can adjust the link's destination by exchanging "www.youradress.com" with the adress you want the button to direct the user too. This changes can be done directly in the text box.
If you can edit your homepage sourcodes with an text editor use the Copy To Clipboard button and hand over to your sourcecode and press "Ctrl+V" or choose Paste at the Edit menu of your Homepage editor or text editor. Remember to set the cursor to the place the button should be paste into first.
If you want to create a new HTML file with your button then use the Save To File... button and choose a file name for your page e.g. "index".
If you have saved the HTML code and want to see the result simply click on Open In Browser and your default browser will show your button in use.

Frequently Asked Questions

Q: What does the small text on the bottom left of my button mean?
A: You have downloaded the shareware version of 3D Button Creator Gold. The only limitation is this text on your button that is exported too. Please go to www.toolstransmission.com to get your registration code for this program.

Q: When I make the buttons surface white or black it gets kinda dirty or transparent. What can I do ?
A: Just adjust the color options of your Windows Desktop Settings. Set the color depth to 24 bit at least. Then it should work.

Q: I can't create the HTML Tag. An error message appears. What's wrong ?
A: First: Before you can create HTML code the button image(s) must be exported to disk. Try to export it once again. The HTML function is specific for the button you are editing and it needs the file names of your image files. So don't shut the program down after exporting if you need to create HTML codes else the file names are lost.
Second: You can't use BMP buttons in HTML. Be shure that you have selected GIF or JPG before exporting. If not then choose JPG or GIF and export the file once more.

Q: Button calculation is very slow on my machine. What can I do ?
A: If you want to make huge buttons then pixel-for-pixel calculation gets slower about proportional to the surface dimensions. The main part of calculation time is used for the light. So try to set the light intension to zero first and edit your button till it looks good and finally set the light intention back up. If it still is too slow for effective work try to use the fast edit mode by pressing on the button at the buttom left of the window.

Q: I have suggestions for improvement of your program or i have huge difficulties with it. How can I contact you ?
A: Use the forum at our homepage. We will try to answer your questions and we would be happy to get feedback about this program.

If you have problems or suggestions head over to the message board on our homepage. If you have Questions concerning HTML go to the Introduction of HTML.

Feel free to directly link the download of 3D Button Creator Gold on your page but please also link to this page for help and support.

If you want to contact me personally then write an email:
mail@toolstransmission.com

3D Button Creator Gold tutorial and help file. written by toolstransmission 2004.