Sliding menu
Creating tree icons
Graphics for tree type I (with horizontal scrolling) and tree type II
(with line-wrapping) follow an identical format. If you are creating
your own graphics, we recommend you start by editting the sample files
we provide. While the format below may look less than simple, it is actually
both simpler and faster than using separate images. A set of images like
that below would result in 36 server requests (!) if the images were
kept separate, and would require you to upload and check each image
independently. Combining the images into one graphic file speeds up download
and makes site maintenance much simpler - so it's worth spending some time
using this format.
1. Editting our samples.
Editting our sample graphics is the best way to make your own. They
are nothing more than simple GIF/JPG files - so changing the content
of the images won't hurt the applet in the least. Experimentation is
recommended. But one thing you should watch out for: size is very
important! Try not to change the overall graphics width and height, or the size
of the individual images. And if you do add extra columns, or use differently
sized images, then make sure you get the navigation page generator to
automatically reset the applet parameters for you. If the navigation
page generator won't accept your graphics file, chances are that it's a size problem.
2. General points.
All the images are separated by a one
pixel space, which can be used to draw a grid to help make the bounds of each image
clearer when drawing it. Do not try to save your file with transparency activated.
Instead, use a solid background colour, and enter this colour as the "transparent
colour" in the navigation page generator. The applet will then convert this colour
in a manner that is more reliable for java.
3. Tree structure.
The first two columns of the grid specify the tree structure, which can
also be redrawn to create both restrained and dramatic effects.
The images, from top to bottom and left to right, specify: (i) blank space where
a blank space would normally be required (this is actually drawn! so you can
change it...); (ii) vertical link; (iii) link to a menu entry from a vertical
line; (iv) end of folder L-piece; (v) plus-sign for closed folders; (vi) minus-sign
for open folders; (vii) & (viii): underlays for icons ensuring that they are
properly joined to the tree structure.
4. Icons.
The file is arranged in a grid with any number of equal sized columns and 4 rows.
In the case of FOLDERS, the rows specify, from top to bottom: (i) the closed
appearance, (ii) the open appearance, (iii) the highlighted closed appearance,
(iv) the highlighted open appearance. In the case of PAGES, the rows specify, from
top to bottom: (i) the normal appearance, (ii) the "active" appearance, (iii)
the "visited" appearance, (iv) the "highlighted" appearance. The sample above
only show one set of folder images, but you can have different folder icons
too. Just ensure that when you write the index file (using the special editor
for this purpose), you asign the appropriate stylesheet index number to the
folders whose icons you want to change.
5. How to make really cool icons.
This assumes you have a decent graphics programme like PaintShop Pro.
(1) Increase the colour depth of one of our samples to 16 million.
(2) Take your favourite cool pic from your site (e.g. company logo) and
resample it down to the size of our icons - that's not resizing, but
resampling, which produces a much better mini-representation of your logo.
(In PaintShop Pro 5 this is called "resizing with bicubic or bilinear
resampling").
(3) Paste the result over one of our images.
(4) Decrease colour depth back to 256 colours for GIF saving and save it.
Simple, sometimes fiddly, depending on your graphics, but really, really
cool results. The images below were created with such resampling techniques.
|
