Website Create Icons

Each icon on website consists of two icons, one standard icon and one rollover icon that is displayed when mouse pointer rests over the icon. Here is an example:

To create a new icon for the website,

• Download iconset function_icon_set.zip.
• Create standard icon (light-green colour).
• Create rollover icon (full colour).

Create Standard Icon

• Open downloaded icon in Paint.NET.
• Go to Image>Resize and set width and height to 30px.
• Add one layer.
• Copy the icon from background layer into the new layer.
• With the top layer select, go to Adjustments>Curves and pull the Luminosity curve to the bottom right corner to turn the icon black.
• Duplicate the layer.
• Go to Adjustments>Invert Colors to change the icon in the newly created top layer white.
• Go to the middle layer and select Hex 048A74 (green) as foreground colour and Hex 000000 (black) background colour.
• Use the recolour tool to replace the black with the green.
• Open the properties of the new layer and select mode Overlay.
• Select the background layer and go to Adjustments>Black and White to turn the icon in the background layer shades of grey.
• Go to the top layer and open the layer properties.
• Select Normal mode and change the opacity to match brightness (about 20).
• Merge all layers to background layer.
• Save in PNG format as 32-bit.

Create Rollover Icon

To create the rollover icon (with all colours):

• Open downloaded icon in Paint.NET.
• Go to Image>Resize and set width and height to 30px.
• Save in PNG format as 32-bit and append -rollover.png to file name of the standard icon.