Difference between revisions of "Website Create Icons"
(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...") |
Marc.maier (talk | contribs) (→Create Standard Icon) |
||
| (2 intermediate revisions by the same user not shown) | |||
| 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: | 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, | To create a new icon for the website, | ||
| Line 7: | Line 7: | ||
* Create standard icon (light-green colour). | * Create standard icon (light-green colour). | ||
* Create rollover icon (full colour). | * Create rollover icon (full colour). | ||
| − | |||
=== Create Standard Icon === | === Create Standard Icon === | ||
* Open downloaded icon in Paint.NET. | * 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. | * Add one layer. | ||
* Copy the icon from background layer into the new layer. | * Copy the icon from background layer into the new layer. | ||
| Line 23: | Line 22: | ||
* Select the background layer and go to ''Adjustments>Black and White'' to turn the icon in the background layer shades of grey. | * 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. | * 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. | * Merge all layers to background layer. | ||
* Save in PNG format as 32-bit. | * Save in PNG format as 32-bit. | ||
Latest revision as of 01:11, 14 January 2012
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.
