Skip to main content
F
futuremotion6798557
Inspiring
June 20, 2023
Question

Best workflow for designing a plugin's Panel Icon for illustrator? Where are the docs?

  • June 20, 2023
  • 1 reply
  • 1123 views

Photoshop UXP documentation says this:

There are two disparate locations where icons are shown. A plugin's icon (outside the entrypoints) is shown in the "Plugins panel". This icon has some automatically applied treatment, and is 24x24 (48x48 at 2x) in size.

A panel's icon (inside the entrypoints), however, is shown in the toolbars when minimized, and has no additional treatment supplied. It is 23x23 (46x46) in size, and can be transparent. It also should follow the Ps theme if you want to fit in with other tools and panel icons.

 
Illustrator has no "Plugins Panel", so I'll disgarde the first paragraph's advice. The second reccommends a 23x23px icon (46x46px @15739213). I've looked at other plugins' icon files and while some of them are pretty inconsistant - most of them use 23x23px icons.

So that's fine by me.

However they then state:

Design your icons with a border; for example for a 32x32 1x icon, design it at 23x23 and leave your icon a little border -- this will ensure best rendering. You can use larger sizes, but the results may be blurrier. Leave similar margins for the other sizes.


I'm trying to build a template for this complete with pixel grid, keyline shapes, and various guides. I'm not understanding what they mean above about leaving a little border. What is "little"? 1px? 2px?

Also, the docs seem to indicate that the icon will get scaled up to 32x32 at some point. Why would they do that? Why scale up to 32px from a 23px source instead of supplying a 32px icon in the first place?

The only thing I can think of is that they are taking the 2x version (46px), and then scaling that down to 32px.

Anyway, as a gift for reading through all my nonsense, I've put together four templates (ait files) that match the current spec:

VSYS Toolbar Icon Template 23px 1px Padding
VSYS Toolbar Icon Template 23px 2px Padding
VSYS Toolbar Icon Template 46px 1px Padding
VSYS Toolbar Icon Template 46px 2px Padding

Download is here (Adobe won't let me attach *.ait files here):
https://www.dropbox.com/sh/hdyhhc00n6shsgo/AAC4if4A-HAzU6N9y_nJy12Pa?dl=0

 


Any further input from anyone that knows more than me about this would be greatly welcomed. I'll update the templates as needed if my assumptions are incorrect.

Jay

    This topic has been closed for replies.

    1 reply

    Rick E Johnson
    Rick E Johnson
    Inspiring
    June 20, 2023

    This is a great topic that needs clarification and documentation. Thanks for starting it. I can't add much except to echo that I make my panel icons 23x23 and tool icons 22x18 following examples in other plugins, especially Adobe's.

     

    If you examine the contents of the Illustrator app for Mac you'll find SVG resources for tool icons 44x36 for a 2x image. I've been experimenting with SVG images in plugins, but they only show up in the Mac version, not for Windows. I'm using CORE, BTW, which is still based on the SDK. Hot Door says it helps to read the SVG resource as late in the initialization process as possible, but apparently postStartup isn't late enough.

     

    -- Rick

    A. Patterson
    A. Patterson
    Inspiring
    June 25, 2023

    I agree, it's an interesting topic. I've been doing the icons on our plugin for years (though we have other people who do that now) and it's always been a "try this and see how it looks". More explicit guidelines like what you're trying to do would have been useful to me years ago, and would probably still be useful us today (we do update the icons from time to time).

     

    I've had no luck either getting SVGs working for panel icons on Windows. I never bothered to try Mac at that point. It's not clear why that is; SVGs work for every other UI element just fine. Literally the only PNGs left in our plugin are for the panels. I'd love to replace them with SVGs too. To be fair, I haven't tried for a few years. Next time I find myself with someone from Adobe (this happens with some reasonable frequency!) I'll try and remember to ask about this.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices