Creating Your Own Highslide Outline Graphics

Introduction

Highslide JS comes with several stock outline graphics that can be used to highlight your popup image. Click on the thumbnails below to see just a few.

You can create your own custom outline graphics and place them in the highslide/graphics/outlines directory. Highslide JS for Joomla will include your outline for use along with those supplied with the plugin.

Custom outlines can add that personal touch to the popup images on your website. Take a look at some of the outlines available with Highslide JS for Joomla.

Creating Your Own

The custom outlines provided with Highslide JS for Joomla were created with a small Joomla module called the 'Highslide Outline Graphic Generator'. This module takes a single jpg, png or gif image of arbitrary size and creates a png image suitable for use with Highslide JS.

You can use this same module to create your own outlines by either going to the Highslide Outline Graphic Generator page or downloading the module itself for use on your own site.

What You Need

To create a Highslide outline graphic, you will need a jpg, png or gif image. There are many graphic editing programs available that can be used to create the image. Photoshop, Gimp, Photoimpact... etc.

The image must be a minimum of 40x60 pixels. Other than that it can be of any size, however, only portions of the image, as you will see below, are of any importance. To illustrate, the following image was used to create the 'picture-frame5' outline used above.

It is a 100x100 pixel png image created with PhotoImpact. A color-coded magnified view of the image reveals the parts of the image used to create the outline graphic.

The outline graphic is a 40x3000 pixel png file created from the sections depicted above.

• The four corners. 20x20 pixels.
• The top and bottom edges. These are 40x20 pixels in size and are taken from the center of their respective edge. Highslide JS will repeat these sections across the top/bottom edges of the popup to fill the edge to the necessary width.
• The right and left sides.  These a 20 pixels wide. Their height is the height of the image less the corners. The outline generator will repeat the left/right edges to fill the graphic out to the necessary height.

A magnified view of the outline graphic created from the image above would appear as follows:

Though gradient colors and textures are tempting to use in your source image, the resulting outline tends to highlight the fact that repetition is used to create the edges.

Conclusion

Creating your own outline graphics is fairly easy way to personalize your website and get the most out of  Highslide JS.