Website Create Icons - Revision history

Marc.maier: /* Create Standard Icon */

2012-01-14T01:11:12Z

‎Create Standard Icon

Marc.maier at 01:04, 14 January 2012

2012-01-14T01:04:41Z

Marc.maier at 01:02, 14 January 2012

2012-01-14T01:02:46Z

188.220.64.218: Created page with "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: [[File:Download..."

2012-01-14T01:00:04Z

Created page with "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: [[File:Download..."

New page

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:

[[File:Download.png]] [[Download-rollover.png]]

To create a new icon for the website,
* Download iconset [http://wefunction.com/blog/wp-content/uploads/2008/06/function_icon_set.zip 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 about 20.
* Merge all layers to background layer.
* Save in PNG format as 32-bit.

[[File: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.

@@ Line 22: / Line 22: @@
 * 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 about 20.
+* 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.

@@ Line 7: / Line 7: @@
 * Create standard icon (light-green colour).
 * Create rollover icon (full colour).
 === Create Standard Icon ===

@@ Line 1: / Line 1: @@
 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:
-[[File:Download.png]] [[Download-rollover.png]]
+[[File:Download.png]] [[File:Download-rollover.png]]
 To create a new icon for the website,
@@ Line 12: / Line 12: @@
 * Open downloaded icon in Paint.NET.
-* Go to Image>Resize and set width and height to 30px.
+* Go to ''Image>Resize'' and set width and height to 30px.
 * Add one layer.
 * Copy the icon from background layer into the new layer.