How to get better quality of addToolButton icon?

[tobias.wantzen]

Hello together,

I've generated and added my addToolButton icons as described here:

addToolButton - oIcon - Hexadecimal Value

Therefore I'm designing the icon in Photoshop 20 x 20 px, save it as png, render it to hex in Acrobat's console and feed this hex-stream into a variable. The result is a very poor image quality of the icon. Is there a better way to do this? Or have parameters changed and now it's a 256 x 256 px image or Acrobat takes svg or what is it to get a good icon quality?

Thanks,

Tobias

[try67]

The size of the icons in the toolbar is 20x20. That can't be changed.

[tobias.wantzen]

So there is no way, to increase the quality of addToolButton icons?

[Bernd Alheit]

We know nothing about the quality of your icon.

[tobias.wantzen]

You're right – I'm sorry. Here you'll find a screenshot (Mac, Acrobat DC) and my png-Files, from which I created the button icons, with it's corresponding hex string.

Is there any way to improve the quality?

Thanks, Tobias

"0af9f9f909ffffff0afefefe09f1f1f10df8f8f827f7f7f746d2d2d26fb5b5b594a3a3a3a99a9a9aaaa4a4a48aacacac6fc2c2c246dedede27e8e8e80df8f8f809fefefe09f4f4f40afefefe09ffffff09fdfdfd09f6f6f60af6f6f61af0f0f051c8c8c89c9b9b9bd8838383f0747474e27f7f7fdf7d7d7de0838383e7747474f06b6b6bd87e7e7e9aa2a2a24acfcfcf15f1f1f10afefefe0afcfcfc09f5f5f508f9f9f909f7f7f71fe9e9e970cacacacf888888ed707070c298989896a5a5a571bbbbbb6dbababa6cc8c8c877c5c5c599a7a7a7cd858585eb7c7c7cc592929268c2c2c21ff1f1f10afafafa09f1f1f109fbfbfb1bfafafa70bebebed7878787df787878969f9f9f48e3e3e319efefef0bffffff0affffff09ffffff0bf9f9f91cefefef52d5d5d59ba5a5a5e87e7e7ed68787876cc1c1c118eeeeee09ffffff0ef7f7f752d2d2d2cf818181da7d7d7d7ebcbcbc29e2e2e211f6f6f60cffffff0af0f0f004fefefe04fafafa0bf1f1f110f7f7f711fcfcfc2edddddd92acacace7797979c98c8c8c4dcccccc0effffff2de7e7e7a79b9b9be96f6f6f90afafaf27f2f2f264d2d2d284b7b7b72de3e3e334e5e5e502e7e7e701f3f3f312ffffff2febebeb84c0c0c065c8c8c82ee7e7e79aa4a4a4ec7878789a9f9f9f27f6f6f64cd5d5d5e2818181c18f8f8f46dedede10efefefa3a7a7a7e5747474b09c9c9c80cfcfcf05d5d5d501dddddd2cdfdfdfb1a6a6a6e4727272a0a8a8a80ffcfcfc51d7d7d7cd888888d982828246d5d5d57abebebeee7474748aacacac12f7f7f70efbfbfb62cececed9878787ef727272d186868675cacaca73d6d6d6a4a2a2a2ef6f6f6fd88484845dd0d0d00bf7f7f71bf0f0f0999e9e9ef17979796fbdbdbda6a3a3a3dd7e7e7e69c6c6c60af8f8f810ffffff19ececec65ccccccde777777f46b6b6bf0797979f0797979ed6d6d6ddd86868661cccccc16f9f9f90af5f5f50bffffff77b6b6b6e773737393a8a8a8ab9f9f9fcb9494944fd6d6d60aededed09ffffff0ff7f7f715f3f3f365dbdbdbe3848484fd727272fe6e6e6ed88f8f8f48c7c7c713f5f5f50affffff0af4f4f40af8f8f86dbebebee07a7a7aaaa3a3a3aba4a4a4cb8d8d8d4fd3d3d309f9f9f909fafafa88bcbcbcbca6a6a643d0d0d06ad9d9d9ed919191eb95959539e6e6e646e8e8e8b99b9b9b88a5a5a50affffff0af4f4f46dc6c6c6df808080aaa4a4a4a7a4a4a4dc76767668c4c4c40affffff0affffff9fa6a6a6f0696969da88888875bbbbbb13d0d0d010dfdfdf41cbcbcbda909090ef6a6a6a9e9f9f9f0afbfbfb0afcfcfc70c0c0c0e27b7b7b93aeaeae84b1b1b1ec78787884b2b2b211ededed09f9f9f940d7d7d7ba949494ef6a6a6aea757575a0b5b5b59fbcbcbcd8797979f0616161bb9d9d9d40dfdfdf09f6f6f618f8f8f897a7a7a7f271717170bcbcbc58cececee87d7d7dbb9090903dd6d6d60afcfcfc0affffff3fd2d2d2ba969696ee797979f3696969f3686868ec7e7e7eb5a2a2a241d1d1d109f7f7f70bffffff46d7d7d7c28c8c8cdf7c7c7c4ad0d0d02ee6e6e6ac949494e776767685b9b9b91df3f3f309ffffff0afafafa3fe5e5e5a79e9e9ee27b7b7be2828282a3afafaf30dadada0afefefe09ffffff24e6e6e692a5a5a5ea8181819ca5a5a527e9e9e910fafafa5fcacacada7a7a7ad982828276bababa1ce2e2e209fafafa09f8f8f825ededed77bcbcbc77c0c0c025e9e9e90afafafa0cffffff21e9e9e97bb8b8b8df818181cf83838352cdcdcd0efefefe09fafafa21eaeaea85b7b7b7e37c7c7cd979797984afafaf3ce2e2e210f2f2f20afefefe09ffffff0afcfcfc0afcfcfc12f7f7f747d6d6d690a5a5a5da868686d780808070bdbdbd1af4f4f40afefefe09f7f7f70afefefe2be9e9e986b2b2b2da818181e87c7c7cba97979784aeaeae68c3c3c34fd2d2d24fd3d3d369c4c4c48aabababc28d8d8dea7a7a7ad379797975c2c2c21ee3e3e30afefefe0afdfdfd0af1f1f10afbfbfb0affffff22f1f1f15fc6c6c6ac979797e77d7d7dec777777dd7b7b7bcb898989cb8a8a8adc7c7c7cee747474e37e7e7eaaa0a0a059c7c7c71ef5f5f509fafafa0afcfcfc0af9f9f90affffff0af6f6f60af6f6f60affffff0ffefefe2ee6e6e657c8c8c883b5b5b5a89e9e9eaaa5a5a5aba4a4a4a7a5a5a583b2b2b256c7c7c72fe2e2e20ffcfcfc09fefefe0af8f8f809f6f6f60af9f9f9"

[Thom Parker]

It looks like the poor image quality has to do with compression and scaling. What does the PNG (not the ps) file look like in PhotoShop?

[tobias.wantzen]

Thom, in my previous post, I'd put the original 20 x 20 px png file, too, that I used. It's the little one directly above the hex code.

Can somebody give an example of a very good icon quality and the steps how to get there? That would be extremely useful.

Thanks, Tobias

[Thom Parker]

Here's what it looks like when I converted the PNG to an icon with the util.iconStreamFromIcon() function.

I think it looks fine, but if you want the edges to be sharper, then you'll need to edit the original image, cause it does have slightly fuzzy edges.

[tobias.wantzen]

Hm. That looks good. Would you mind, pasting the hex code for the icon, that I could compare it?

[tobias.wantzen]

Or has this something to do with the retina display?

To get the hex string of the icon, I'm using the following code in console:

this.importIcon("myIcon", "/Users/xxx/Desktop/icon.png", 0); var oIcon = util.iconStreamFromIcon(this.getIcon("myIcon")); oIcon.read();

Tobias

[Thom Parker]

That's what I'm doing too, only I have an app that does it for me, cause I make a lot of toolbar buttons.

Here's the hex code:

0af9f9f909ffffff0afefefe09f1f1f10df8f8f827f7f7f746d2d2d26fb5b5b594a3a3a3a99a9a9aaaa4a4a48aacacac6fc2c2c246dedede27e8e8e80df8f8f809fefefe09f4f4f40afefefe09ffffff09fdfdfd09f6f6f60af6f6f61af0f0f051c8c8c89c9b9b9bd8838383f0747474e27f7f7fdf7d7d7de0838383e7747474f06b6b6bd87e7e7e9aa2a2a24acfcfcf15f1f1f10afefefe0afcfcfc09f5f5f508f9f9f909f7f7f71fe9e9e970cacacacf888888ed707070c298989896a5a5a571bbbbbb6dbababa6cc8c8c877c5c5c599a7a7a7cd858585eb7c7c7cc592929268c2c2c21ff1f1f10afafafa09f1f1f109fbfbfb1bfafafa70bebebed7878787df787878969f9f9f48e3e3e319efefef0bffffff0affffff09ffffff0bf9f9f91cefefef52d5d5d59ba5a5a5e87e7e7ed68787876cc1c1c118eeeeee09ffffff0ef7f7f752d2d2d2cf818181da7d7d7d7ebcbcbc29e2e2e211f6f6f60cffffff0af0f0f004fefefe04fafafa0bf1f1f110f7f7f711fcfcfc2edddddd92acacace7797979c98c8c8c4dcccccc0effffff2de7e7e7a79b9b9be96f6f6f90afafaf27f2f2f264d2d2d284b7b7b72de3e3e334e5e5e502e7e7e701f3f3f312ffffff2febebeb84c0c0c065c8c8c82ee7e7e79aa4a4a4ec7878789a9f9f9f27f6f6f64cd5d5d5e2818181c18f8f8f46dedede10efefefa3a7a7a7e5747474b09c9c9c80cfcfcf05d5d5d501dddddd2cdfdfdfb1a6a6a6e4727272a0a8a8a80ffcfcfc51d7d7d7cd888888d982828246d5d5d57abebebeee7474748aacacac12f7f7f70efbfbfb62cececed9878787ef727272d186868675cacaca73d6d6d6a4a2a2a2ef6f6f6fd88484845dd0d0d00bf7f7f71bf0f0f0999e9e9ef17979796fbdbdbda6a3a3a3dd7e7e7e69c6c6c60af8f8f810ffffff19ececec65ccccccde777777f46b6b6bf0797979f0797979ed6d6d6ddd86868661cccccc16f9f9f90af5f5f50bffffff77b6b6b6e773737393a8a8a8ab9f9f9fcb9494944fd6d6d60aededed09ffffff0ff7f7f715f3f3f365dbdbdbe3848484fd727272fe6e6e6ed88f8f8f48c7c7c713f5f5f50affffff0af4f4f40af8f8f86dbebebee07a7a7aaaa3a3a3aba4a4a4cb8d8d8d4fd3d3d309f9f9f909fafafa88bcbcbcbca6a6a643d0d0d06ad9d9d9ed919191eb95959539e6e6e646e8e8e8b99b9b9b88a5a5a50affffff0af4f4f46dc6c6c6df808080aaa4a4a4a7a4a4a4dc76767668c4c4c40affffff0affffff9fa6a6a6f0696969da88888875bbbbbb13d0d0d010dfdfdf41cbcbcbda909090ef6a6a6a9e9f9f9f0afbfbfb0afcfcfc70c0c0c0e27b7b7b93aeaeae84b1b1b1ec78787884b2b2b211ededed09f9f9f940d7d7d7ba949494ef6a6a6aea757575a0b5b5b59fbcbcbcd8797979f0616161bb9d9d9d40dfdfdf09f6f6f618f8f8f897a7a7a7f271717170bcbcbc58cececee87d7d7dbb9090903dd6d6d60afcfcfc0affffff3fd2d2d2ba969696ee797979f3696969f3686868ec7e7e7eb5a2a2a241d1d1d109f7f7f70bffffff46d7d7d7c28c8c8cdf7c7c7c4ad0d0d02ee6e6e6ac949494e776767685b9b9b91df3f3f309ffffff0afafafa3fe5e5e5a79e9e9ee27b7b7be2828282a3afafaf30dadada0afefefe09ffffff24e6e6e692a5a5a5ea8181819ca5a5a527e9e9e910fafafa5fcacacada7a7a7ad982828276bababa1ce2e2e209fafafa09f8f8f825ededed77bcbcbc77c0c0c025e9e9e90afafafa0cffffff21e9e9e97bb8b8b8df818181cf83838352cdcdcd0efefefe09fafafa21eaeaea85b7b7b7e37c7c7cd979797984afafaf3ce2e2e210f2f2f20afefefe09ffffff0afcfcfc0afcfcfc12f7f7f747d6d6d690a5a5a5da868686d780808070bdbdbd1af4f4f40afefefe09f7f7f70afefefe2be9e9e986b2b2b2da818181e87c7c7cba97979784aeaeae68c3c3c34fd2d2d24fd3d3d369c4c4c48aabababc28d8d8dea7a7a7ad379797975c2c2c21ee3e3e30afefefe0afdfdfd0af1f1f10afbfbfb0affffff22f1f1f15fc6c6c6ac979797e77d7d7dec777777dd7b7b7bcb898989cb8a8a8adc7c7c7cee747474e37e7e7eaaa0a0a059c7c7c71ef5f5f509fafafa0afcfcfc0af9f9f90affffff0af6f6f60af6f6f60affffff0ffefefe2ee6e6e657c8c8c883b5b5b5a89e9e9eaaa5a5a5aba4a4a4a7a5a5a583b2b2b256c7c7c72fe2e2e20ffcfcfc09fefefe0af8f8f809f6f6f60af9f9f9

[Thom Parker]

Looks pretty much identical to your hex code.

[Joel Geraci]

I found the way to get icons that are acceptable for me is to create the artwork as a vector drawing, I use Illustrator, and scale it to the exact size I need in pixels, I then use Acrobat to import the icon. I then get the hex bitmap from that vector icon. It works every time and I don't need to worry about alpha channels. It all just happens for me.

[tobias.wantzen]

That sounds nice. You're simply using ».ai« files?

[tobias.wantzen]

Hm. That doesn't work for me. I vectorized my icon, set Illustrator to 20 x 20 px document size, saved as ».ai« (pdf compatible), generated the hex code, and put it inside the script. The result looks very scattered ...

Can you please give some more details? Thanks!

[JR Boulay]

Hi.

You must create a 20x20 pixels layout for creating your icon (Photoshop, Illustrator) because downsampling/resizing always blur strokes and lines.

[Joel Geraci]

Upload the original vector art and I’ll take a look. I’m sure with the right process you can get good quality.

J-

[tobias.wantzen]

Thanks Joel, you can download the icon here: http://www.wantzen.com/icon.zip

I'm very curious ...

[tobias.wantzen]

I'd still be interested in this topic.

Thanks, Tobias