It is currently Thu Jun 07, 2018 8:53 pm

All times are UTC - 8 hours [ DST ]




Post new topic Reply to topic  [ 11 posts ] 
Author Message
 Post subject: Icon sizes
PostPosted: Sun Oct 04, 2015 1:40 pm 
Offline

Joined: Wed Aug 06, 2014 2:31 am
Posts: 50
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.


Top
 Profile  
Reply with quote  
 Post subject: Re: Icon sizes
PostPosted: Sun Oct 04, 2015 8:20 pm 
Offline
User avatar

Joined: Thu Jan 03, 2013 12:38 am
Posts: 5341
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.


Top
 Profile  
Reply with quote  
 Post subject: Re: Icon sizes
PostPosted: Sun Oct 04, 2015 8:55 pm 
Offline
User avatar

Joined: Thu Jun 13, 2013 12:07 pm
Posts: 1014
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!


Top
 Profile  
Reply with quote  
 Post subject: Re: Icon sizes
PostPosted: Sun Oct 04, 2015 9:09 pm 
Offline

Joined: Wed Aug 06, 2014 2:31 am
Posts: 50
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

:D


Top
 Profile  
Reply with quote  
 Post subject: Re: Icon sizes
PostPosted: Sun Oct 04, 2015 9:20 pm 
Offline
User avatar

Joined: Thu Jun 13, 2013 12:07 pm
Posts: 1014
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.


Top
 Profile  
Reply with quote  
 Post subject: Re: Icon sizes
PostPosted: Mon Oct 05, 2015 5:24 am 
Offline

Joined: Wed Aug 06, 2014 2:31 am
Posts: 50
juniper7 wrote:
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 :P


Attachments:
pictures.png
pictures.png [ 4.96 KiB | Viewed 4304 times ]


Last edited by davestewart on Mon Oct 05, 2015 12:02 pm, edited 1 time in total.
Top
 Profile  
Reply with quote  
 Post subject: Re: Icon sizes
PostPosted: Mon Oct 05, 2015 11:59 am 
Offline
User avatar

Joined: Thu Jun 13, 2013 12:07 pm
Posts: 1014
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. :)


Attachments:
Capture.PNG
Capture.PNG [ 23.12 KiB | Viewed 4283 times ]
Top
 Profile  
Reply with quote  
 Post subject: Re: Icon sizes
PostPosted: Mon Oct 05, 2015 12:05 pm 
Offline

Joined: Wed Aug 06, 2014 2:31 am
Posts: 50
Luckily some icons lend themselves to reduction better than others!


Attachments:
favorites icon.png
favorites icon.png [ 20.04 KiB | Viewed 4279 times ]
Top
 Profile  
Reply with quote  
 Post subject: Re: Icon sizes
PostPosted: Mon Oct 05, 2015 12:11 pm 
Offline
User avatar

Joined: Thu Jun 13, 2013 12:07 pm
Posts: 1014
Is that bicubic?
I was just thinking.
Maybe for 16x16 size, they don't need re-sizing. Just cropped to 16x16?


Top
 Profile  
Reply with quote  
 Post subject: Re: Icon sizes
PostPosted: Mon Oct 05, 2015 12:52 pm 
Offline

Joined: Wed Aug 06, 2014 2:31 am
Posts: 50
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!


Top
 Profile  
Reply with quote  
 Post subject: Re: Icon sizes
PostPosted: Mon Oct 05, 2015 1:07 pm 
Offline

Joined: Wed Aug 06, 2014 2:31 am
Posts: 50
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.


Top
 Profile  
Reply with quote  
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 11 posts ] 

All times are UTC - 8 hours [ DST ]


Who is online

Users browsing this forum: No registered users and 3 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB® Forum Software © phpBB Group, Almsamim WYSIWYG Classic Shell © 2010-2016, Ivo Beltchev.
All right reserved.