Difference between revisions of "ReactOS Icon Guidelines"
(→What the icon needs) |
|||
| (8 intermediate revisions by 2 users not shown) | |||
| Line 6: | Line 6: | ||
Community Edition is using the Faenza icon theme | Community Edition is using the Faenza icon theme | ||
| − | ReactOS will | + | 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 and color depths when working with the shell as well as applications or control panel applets: |
| − | 48 pixel | + | #48 pixel - 256 color and 32-bit |
| − | 32 pixel | + | #32 pixel - 256 color and 32-bit |
| − | 16 pixel | + | #16 pixel - 256 color and 32-bit |
| + | |||
| + | When working with icons inside an application, determine what size the icon is and then follow these guidelines. For example, if I was writing a control panel applet and I want a 32 pixel icon on the main page, I would do the following (Substitute the icon size in for 32): | ||
| + | #32 pixel - 256 color and 32-bit | ||
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 | + | 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. | 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 == | == Summary == | ||
| − | + | Making icons for ReactOS can be easy to do. I hope this quick article makes it easier to make them and not have minor issues with them. The links below should hopefully provide more information if you need some more help. | |
== Examples == | == Examples == | ||
| − | This is what icons should | + | This is what icons should '''NOT''' look like: |
| + | |||
[[File:Icon no.PNG]] | [[File:Icon no.PNG]] | ||
| + | |||
| + | This is what icons '''SHOULD''' look like: | ||
| + | |||
| + | [[File:Icon yes.PNG]] | ||
| + | |||
| + | See the difference between the 2? The second set looks much nicer. This is what we try to strive for in ReactOS. | ||
== Tools and links == | == Tools and links == | ||
| Line 35: | Line 45: | ||
[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]] | ||
Latest revision as of 13:13, 20 July 2017
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 and color depths when working with the shell as well as applications or control panel applets:
- 48 pixel - 256 color and 32-bit
- 32 pixel - 256 color and 32-bit
- 16 pixel - 256 color and 32-bit
When working with icons inside an application, determine what size the icon is and then follow these guidelines. For example, if I was writing a control panel applet and I want a 32 pixel icon on the main page, I would do the following (Substitute the icon size in for 32):
- 32 pixel - 256 color and 32-bit
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
Making icons for ReactOS can be easy to do. I hope this quick article makes it easier to make them and not have minor issues with them. The links below should hopefully provide more information if you need some more help.
Examples
This is what icons should NOT look like:
This is what icons SHOULD look like:
See the difference between the 2? The second set looks much nicer. This is what we try to strive for in ReactOS.
