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.
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.
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
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.
|
