Difference between revisions of "ReactOS Icon Guidelines"

From ReactOS Wiki
Jump to: navigation, search
(What the icon needs)
m (+cat, reduce usage of html)
Line 6: Line 6:
 
Community Edition is using the Faenza icon theme
 
Community Edition is using the Faenza icon theme
  
ReactOS will <big>NOT</big> be switching to a new icon theme anytime soon.
+
ReactOS will '''NOT''' be switching to a new icon theme anytime soon.
  
 
== What the icon needs ==
 
== What the icon needs ==
 
The icon needs to contain the following image sizes:
 
The icon needs to contain the following image sizes:
48 pixel
+
#48 pixel
32 pixel
+
#32 pixel
16 pixel
+
#16 pixel
  
 
24 pixel images are not needed and these are only needed for toolbar bitmaps.
 
24 pixel images are not needed and these are only needed for toolbar bitmaps.
  
The Tango Project also states that "Each of these sizes needs to be treated separately, simple scaling of a larger icon doesn't work and ends up looking fuzzy and unclear." This is one of the biggest issues when people create icons: For the 16 pixel icon, they simply scale down the 32 pixel icon. Sometimes, they even scale down 48 pixel icons to 32 pixel images. This then causes the icons to look blurry and as a result, the entire icon looks like garbage and ReactOS looking terrible.  
+
The Tango Project also states that "Each of these sizes needs to be treated separately, simple scaling of a larger icon doesn't work and ends up looking fuzzy and unclear." This is one of the biggest issues when people create icons: For the 16 pixel icon, they simply scale down the 32 pixel icon. Sometimes, they even scale down 48 pixel icons to 32 pixel images. This then causes the icons to look blurry and as a result, the entire icon looks like garbage and ReactOS looking terrible.
  
 
After adding the images, the icon then needs to have 256 color and 16 color versions added along with the 32 color images.
 
After adding the images, the icon then needs to have 256 color and 16 color versions added along with the 32 color images.
Line 26: Line 26:
  
 
== Examples ==
 
== Examples ==
This is what icons should <big>NOT</big> look like:<br />
+
This is what icons should '''NOT''' look like:
[[File:Icon no.PNG]]<br />
+
 
This is what icons <big>SHOULD</big> look like:<br />
+
[[File:Icon no.PNG]]
 +
 
 +
This is what icons '''SHOULD''' look like:
 +
 
 
[[File:Icon yes.PNG]]
 
[[File:Icon yes.PNG]]
  
Line 39: Line 42:
  
 
[https://msdn.microsoft.com/en-us/library/windows/desktop/dn742485(v=vs.85).aspx MSDN Article about icons]
 
[https://msdn.microsoft.com/en-us/library/windows/desktop/dn742485(v=vs.85).aspx MSDN Article about icons]
 +
 +
[[Category:Documentation]]
 +
[[Category:Design]]

Revision as of 20:22, 14 September 2015

It seems that lately people are forgetting and having issues with making icons for ReactOS.

Current icon themes

Trunk is using the Tango icon theme

Community Edition is using the Faenza icon theme

ReactOS will NOT be switching to a new icon theme anytime soon.

What the icon needs

The icon needs to contain the following image sizes:

  1. 48 pixel
  2. 32 pixel
  3. 16 pixel

24 pixel images are not needed and these are only needed for toolbar bitmaps.

The Tango Project also states that "Each of these sizes needs to be treated separately, simple scaling of a larger icon doesn't work and ends up looking fuzzy and unclear." This is one of the biggest issues when people create icons: For the 16 pixel icon, they simply scale down the 32 pixel icon. Sometimes, they even scale down 48 pixel icons to 32 pixel images. This then causes the icons to look blurry and as a result, the entire icon looks like garbage and ReactOS looking terrible.

After adding the images, the icon then needs to have 256 color and 16 color versions added along with the 32 color images.

For the start menu, the icons used are 32 pixels, but the image is actually a 24 pixel image CENTERED. The sub items however, are 16 pixels.

Summary

Icons created for ReactOS will need to follow these guidelines otherwise they will need to be fixed before getting committed. If not, someone has to come along later and fix them resulting is unnecessary work. As you can see, it's not that hard to make icons for ReactOS if you follow these guidelines.

Examples

This is what icons should NOT look like:

Icon no.PNG

This is what icons SHOULD look like:

Icon yes.PNG

See the difference between the 2?

Tools and links

Tango Icon Theme Guidelines

Tutorial on making icons for ReactOS

MSDN Article about icons