About component icons

Hi all,

I've read numerous times that the icons for a GH component in the ribbon is 24x24. But if I try to create such an image at 24x24, there is no way I am getting crisp, clear lines that are on a lot of custom node icons. I admit I know nothing about graphic design. Anyways, can I make a higher resolution icon and have it somehow scale down to 24x24 while maintaining that crispness?

Thanks!

Replies to This Discussion

Permalink Reply by David Rutten on April 2, 2016 at 12:04pm

Hi JR,

24x24 is such a small format that any amount of fuzzyness will definitely be visible. Scaling images down is not the best way to achieve crispness, the best approach is to draw the graphics with the exact resolution in mind. Make sure that lines are exactly 1, 2, or 3 pixels thick. Make sure that lines are aligned exactly to pixel edges or centres (depending on the thickness). Make sure that lines are not nearly vertical of horizontal, that always results in fuzzy anti-aliasing.

There's basically three main approaches to creating icons:

pixels
vectors
algorithms

Using Paint.NET, MS Paint, Photoshop, the Rhino toolbar icon editor, or some other pixel editor you can manually set individual pixels in a 24x24 image.

Using Illustrator, XaraX (what I use), Inkscape, or some other vector editor you can compose shapes that eventually get rendered to a bitmap. When taking this approach you have to be careful to make sure your shapes are aligned with the pixel grid.

Using code, you can create bitmaps on the spot using System.Drawing methods.

Permalink Reply by JR Swift on April 3, 2016 at 11:30am