Return To Website Management Console

Using the site builder button image maker

Normally to make buttons for a menu, you would need to make them one at a time as images. However, the system allows you to make a page full of buttons with a single click.

Understanding Buttons
The buttons are images usualy in the form of a push type button, that users click to access key pages. The page buttons are normally images either gif or jpg allowing for infinate possibilities.

Keep It Simple
Everyone want to make their site special, and with over 20,000 fonts to choose from for your buttons, it is easy to get out of control. The best fonts for buttons are clear readable and simple fonts such as Verdana, Arial or ComicSansMS. If you choose a special font, make sure the text is cear and visable. Remember, everyone has a different size screen and resolution. So images may apper smaller on other computers and should be big enough to work on every computer. Color contrasts should also be crisp and clear. Use strong contrasts so text is highly visable and dominmat on the button.

Graphic Terms and Language

Text Color - Color of text on the buttons.

Font - The actual font used for the text. You can use any of the 20,000 included fonts.

  • Text Color - The color of the text on your button image. You can selext any of the color samples given or define your own color using the hexidecimal code.

  • Font Size - The number of pixels high the font will be on the button. same as type pt. A 10pt type size would be approximatly 10 pixels. The actual value varries based on the individual font, however that is the general rule.

  • Font Outline - A border defined in pixels that will suround the font. Using an outline will allow you to use a border with a fill color of the actual text color. Most fonts wil not work well below 18 pixels with a border, however some look very nice.

Border Color - A border surounding the button of a particular color. The actual thickness in pixels is defined by border size. Using a border that is the same color as the page background will simply appear to space out the buttons. Using a blue border of 1 or 2 will make the image appear to have a link border.

  • Border Size - The thickness in pixels of the button border.

Bevel - The bevel is the edge thickness of the button. A bevel will make the button appear as a 3D image. A bevel of 0 will appear otally flat but a higher number of 8 would bring the edges 8 pixels inward tward the front of the page.The table below shows samples of several bevels of the same image.

Bevel 1 3 5 7
Sample

You will see that increasing the bevel will increase the 3 Dimensional look of the image.

Use Image
Some template have buttons that are part of the design of the template. If you are using a template of that type, an image will be given as an option to add your text to.

Here is a sample for template #tmpl_s_la0124

Sample

The sample shows how the text is added to the center of the button so the template is seemless and the page appears as one big image of a tree with boards nailed to it. You could use a hand written font or paint brush type font to make the image look more like an actual tree with hand painted signs.

You do not have to use the image supplied with the template, but in most cases, it looks better if you do. You can also use the bevel tool with the image for a more buttony look. You will see how the second button has beveled edges and appears to pop out of the page.

Upload Your Own Image
Maybe you are very creative or just have a great clipart collection and you have an image you want to use for the buttons. You can upload the image as your base image and let the system render all the buttons for you. This gives you total control of buttons and menus.

Use Gallery Image
For your convience we have provided a gallery of thousands of button images. You can choose any of the images, click the "Add Button" button, and it will become the default image for your buttons.

This button was rendered using one of the button images provided in the blank button gallery. Thousands of images are provided with unique designs and possibilites.

Image Frame - a frame outside the image border similar to a picture frame. The frame can also be beveled indepenadntly of the image bevel and can use a diffrent color than the image or border. Shown below some are samples of using Image Frames.


We start off with a basic image and make some changes to show some of the possible options you have with your button building tool using the 3D Effects and Frame Options.

The first step will be to take the flat button and give it some depth by selecting an Image Bevel of 3.

Now we will add an Image Frame Border 8, Image Border 1, Frame Bevel 3.

By changing the border color to black and eliminating the image border we get a 3D frame around the flat yellow area.

By adding a small image border the same color as the image and adjusting the Image Bevel to 2 the inside of our button appears to protrude out from the middle.

By increasing the Image Bevel and Border to 5 we can exagerate the effect for better viewing.

There are so many possible combinations it is impossible to even begin showing the diversity of the tool. You should play with it, making suttle changes to your image as we have and tweaking the button to exactly what you want.

You can use any colors you like and choose from over 20,000 font options. You can also change the size of the buttons or even apply the 3D effects to any of the thousands of button blanks.

Use a button with the same color as the page background to use the fonts as text on your page. Since HTML is limited to only a few standard fonts, to have a menu with fancy fonts you need images. The samples below are fancy fonts on a white image with no effects. It blends into the page as if you just typed the text on the page. This technique can also be used with the banner builder to build images for other sections of the page in larger sizes.

The button tool is very dynamic and often makes choosing the right design difficult. But if you are not interested in spending time building buttons, you can use a default image or settings to quickly build profesional buttons.


You will likely stumble through the button building process, but pesistance will result in quality buttons and a great personal look for your website. Below are more samples of buttons you can build, just to give you some fresh ideas.

With thousands of fonts, colors and options, you can build millions of different buttons. The hardest part will be choosing the one you want.

NOTE: If you are making changes to buttons but continue to see the old images, click here for instructions to update your browser settions.

main sitebuilder help editing web pages adding photos to web pages adding programs to web pages managing email managing your shopping crt used car dealer tools building custom templates advanced webmaster tools