Classic Shell: Forum

I've been working on a bunch of icons for my Windows 10 theme, and they're looking pin-sharp at 24px (the theme's "large icon" size):



However, I've realised I probably need to build a 16px set for small icons / submenus, AND make all of them work on high-density screens.

Does this mean I need the following sizes?

• 16px (small)
• 32px (small, high-res)
• 24px (large)
• 48px (large, high-res)

I don't want to do any more work that I need to, but after putting this much effort in I would like the skin to be fairly robust.

If someone could advise if my assumptions are correct or not, and what sets I need to create, that would be great,


Thanks.

Well Windows as you may be knowing supports all the way up to 256 px but icons up to 48 px will be good enough for a start. For 4K resolutions of today, some higher size than 48 px might look good. (Anyone have a 4K monitor to test?). Even a size like 64 px is used by the Classic Start Menu for the large icon it shows in place of the user picture when you hover over an item in the right side column in the Windows 7 style. But if you create only 256 px, it should be fairly easy to create the other small sizes.

_________________
Links to some general topics:

● Compare Start Menus

● Read the Search box usage guide.

I am a Windows enthusiast and did Classic Shell's testing and usability/UX feedback.

Wish I could have a 4k monitor to answer that question.
Using your 96 DPI setting with 24x24 size icon, as base,
Ivos' DPI overide settings, can go as high as 480 DPI,
so I guess icon sizes could go to 128x128 RGBA to keep proper proportion.

Just out of curiousity, I opened up a couple of standard program icons in PixelFormer.

Recuva has 6 images inside:
32x32 256 colors
16x16 256 colors
256x256 RGBA
48x48 RGBA
32x32 RGBA
16x16 RGBA

Firefox has 4 images inside:
16x16 RGBA
32x32 RGBA
48x48 RGBA
256x256 RGBA

I would gather the 256 size is for a desktop icon.
Looks like a one size fits all, does not apply for icons, if you want perfect sharp images.
That's a huge amount of work to make so many, and integrate them into icons!

Juniper, yep - it is!

Though in practice, only the smaller icon sizes require the hard work to make sure they don't look woolly.

Anything on and over 32px I suspect can be a resized from a larger version, so I'll probably create vectors than can be re-purposed.

I have a new MacBook Pro running Bootcamp, so I can probably test on there

Reading your posts, you are very talented, and will do it for sure.

That would be great if Windows could display vectors in icons.
That would truly be one size for all.

Actually, weirdly not!

The less pixels you have to play with, the more "iconic" your images have to be.

Take the "pictures" folder for example. At small image sizes you need to be really careful with your pixel-pushing.
Of course if it was larger you could get away with all sorts!

In a set of icons you might get away with the larger ones being resized, but for the very smallest sizes, you will often need to craft something by hand, pixel-by-pixel, sometimes even creating a new composition in order to make things legible when you only have 16 units to play with

You are right, davestewart.
Just wanted to see what it takes to resize your large picture, and touch up for 16x16 icon.
It's tough. I must have spent an hour to get to what's in the submenu screenshot.

Must be some program that can do it automatically with good results.
Happy painting. My eyes just gave out.

Luckily some icons lend themselves to reduction better than others!

Is that bicubic?
I was just thinking.
Maybe for 16x16 size, they don't need re-sizing. Just cropped to 16x16?

They'll for sure all need individual love and care at 16px, and if I'm building a set of 4, I'll need to work out a workflow that won't be too onerous.

Current thinking is...

Setup:

1. Build base PSD (as above)

Design (per icon):

1. Copy base PSD and rename
2. Copy and paste existing 24px icon
3. Create vectors for 48px+ icon sizes
4. Resize to complete 32px and possibly 24px icons
5. Manually paint 16px image

Creation (per icon):

1. Export all sizes using File > Quick Export as PNG
2. Use the online service Icon Convert to merge images and create icon frames

Editing (per icon)

1. Export as in previous step
2. Use IcoFX to import individual frames

Fingers-crossed that's covers everything!

Have just discovered that PHP's ImageMagick lib writes .ico files, so I'll probably write some kind of drag-and-drop multi-file, multi-resolution upload script to do all the hard work for me.