Website Create Icons

From CCCWiki
Revision as of 01:11, 14 January 2012 by Marc.maier (talk | contribs) (Create Standard Icon)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

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:

Download.png Download-rollover.png

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

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.