Create
a new button design
|
To
create a new button design just pick a design from the Template
Library or start from scratch, by pressing New on the
Toolbar at the top of the window or New
on the File Menu. |
|
Specify
button text
|
After
creating a new button design you will have to specify the button
text. To do this open the Text
Options dialog box. To display this dialog box either click Text Options on the Toolbar
at the top of the window or choose Text on the Window menu or press
ALT+T. This dialog box provides a range of options
for changing the appearance of button text and navigation bar
options. More
details of the Text Options dialog box. |
|
Button and text Colors |
You can easily change all aspects of
the button design, including the most important button and
text colors.
To set Text Color open
the Text Options dialog box, and click on the color selector
there. If you change text color you will possibly have to change
text shadow color to match new text color. To set text
shadow color open the shadows options dialog box, select Text
Shadow in the dropdown list, and click on the color selector to
change shadow color.
To set Button Color open the Lighting Options dialog
box. You will see three different color selectors there for
three light sources which are shining on the button. Two of
these lights can be any position and color. Third light controls
self-illumination and can be any color. More
about Lighting Options Dialog Box... |
|
Button
image size
|
If
you are creating a single button and/or don't need you button to
be of a special Width and Height you may skip this step.
If you are creating NavBar and want that all NavBar
buttons be of the same size you will have to specify button size manually.
To do this open Image Options Dialog box. To display this
dialog box either click Image Options on the
Toolbar at the top of the window or choose Image
on the Window menu or
press ALT+I. More
details of the Image Options dialog box.
|
|
Button
design options
|
After
creating a button design from the library you may use this
design as your final button design o adjust some of the button
design options. You can adjust the button Lighting,
Texture, Button
and text Shadows, Material, Borders,
Shape and Extrusion
options.
|
|
Save
button design
|
To
save your button design either click Save on the
Toolbar at the top of the window or choose Save
on the File menu or
press Ctrl+S. This saves the document as an .cb file, and lets you reload it back into
Crystal Button in the future.
Please note: this command will
save project file (*.cb file), to save button image in a
file formats, which can be open by other applications you should
use Export Image or Bach export menu commands.
|
|
Export
button image / Batch Export
|
To
export button image(s) click Export Image on the
Toolbar at the top of the window or choose Export
on the File menu or
press Ctrl+E. This creates a jpg, bmp, gif, png, tga or ico file of the current document.
To specify the compression options such as
quality, transparency and compression level choose Export
Quality on the Edit Menu.
Note that
you cannot reload bitmaps back into Crystal Button so if you want to
make further edits in the future, save the document as an .cb file.
|
|
Export Images with
transparent background |
Crystal Button supports two image
file formats (GIF and PNG) which can be exported with
transparent background.
To export button image as a Gif file with transparent
background you have to set the transparency check mark on the Export
Quality Menu which is turned off by default.
Important: When you export button image as a transparent GIF you
will have to set correct
value for the background color in Crystal Button Image Options
menu. If you use a background image on your web page it
should be an average color of this image. If you use button
shadows in your project you will have to set shadow blur value
to 0% or turn shadows off.
To export button image as a PNG file with transparent
background you have to set the PNG32(ALPHA) check mark on the Export
Quality Menu which is not set by default.
Important: PNG file
format with alpha channel (transparent background) - PNG32 is
not supported by Internet Explorer so don't use it
on your web pages! However transparent PNG files can
be easily imported in almost any other graphics software like Adobe
Photoshop with preserved transparency (8-bit transparent
channel) |
|