18 Replies Latest reply on May 31, 2017 11:14 PM by tobias.wantzen

    How to get better quality of addToolButton icon?

    tobias.wantzen Level 1

      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

        • 1. Re: How to get better quality of addToolButton icon?
          try67 MVP & Adobe Community Professional

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

          • 2. Re: How to get better quality of addToolButton icon?
            tobias.wantzen Level 1

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

            • 3. Re: How to get better quality of addToolButton icon?
              Bernd Alheit Adobe Community Professional & MVP

              We know nothing about the quality of your icon.

              • 4. Re: How to get better quality of addToolButton icon?
                tobias.wantzen Level 1

                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

                 

                Screenshot-Acrobat-DC.png

                AllDocsNextPage.png

                "0af9f9f909ffffff0afefefe09f1f1f10df8f8f827f7f7f746d2d2d26fb5b5b594a3a3a3a99a9a9aaaa4a4a48 aacacac6fc2c2c246dedede27e8e8e80df8f8f809fefefe09f4f4f40afefefe09ffffff09fdfdfd09f6f6f60af 6f6f61af0f0f051c8c8c89c9b9b9bd8838383f0747474e27f7f7fdf7d7d7de0838383e7747474f06b6b6bd87e7 e7e9aa2a2a24acfcfcf15f1f1f10afefefe0afcfcfc09f5f5f508f9f9f909f7f7f71fe9e9e970cacacacf88888 8ed707070c298989896a5a5a571bbbbbb6dbababa6cc8c8c877c5c5c599a7a7a7cd858585eb7c7c7cc59292926 8c2c2c21ff1f1f10afafafa09f1f1f109fbfbfb1bfafafa70bebebed7878787df787878969f9f9f48e3e3e319e fefef0bffffff0affffff09ffffff0bf9f9f91cefefef52d5d5d59ba5a5a5e87e7e7ed68787876cc1c1c118eee eee09ffffff0ef7f7f752d2d2d2cf818181da7d7d7d7ebcbcbc29e2e2e211f6f6f60cffffff0af0f0f004fefef e04fafafa0bf1f1f110f7f7f711fcfcfc2edddddd92acacace7797979c98c8c8c4dcccccc0effffff2de7e7e7a 79b9b9be96f6f6f90afafaf27f2f2f264d2d2d284b7b7b72de3e3e334e5e5e502e7e7e701f3f3f312ffffff2fe bebeb84c0c0c065c8c8c82ee7e7e79aa4a4a4ec7878789a9f9f9f27f6f6f64cd5d5d5e2818181c18f8f8f46ded ede10efefefa3a7a7a7e5747474b09c9c9c80cfcfcf05d5d5d501dddddd2cdfdfdfb1a6a6a6e4727272a0a8a8a 80ffcfcfc51d7d7d7cd888888d982828246d5d5d57abebebeee7474748aacacac12f7f7f70efbfbfb62cececed 9878787ef727272d186868675cacaca73d6d6d6a4a2a2a2ef6f6f6fd88484845dd0d0d00bf7f7f71bf0f0f0999 e9e9ef17979796fbdbdbda6a3a3a3dd7e7e7e69c6c6c60af8f8f810ffffff19ececec65ccccccde777777f46b6 b6bf0797979f0797979ed6d6d6ddd86868661cccccc16f9f9f90af5f5f50bffffff77b6b6b6e773737393a8a8a 8ab9f9f9fcb9494944fd6d6d60aededed09ffffff0ff7f7f715f3f3f365dbdbdbe3848484fd727272fe6e6e6ed 88f8f8f48c7c7c713f5f5f50affffff0af4f4f40af8f8f86dbebebee07a7a7aaaa3a3a3aba4a4a4cb8d8d8d4fd 3d3d309f9f9f909fafafa88bcbcbcbca6a6a643d0d0d06ad9d9d9ed919191eb95959539e6e6e646e8e8e8b99b9 b9b88a5a5a50affffff0af4f4f46dc6c6c6df808080aaa4a4a4a7a4a4a4dc76767668c4c4c40affffff0afffff f9fa6a6a6f0696969da88888875bbbbbb13d0d0d010dfdfdf41cbcbcbda909090ef6a6a6a9e9f9f9f0afbfbfb0 afcfcfc70c0c0c0e27b7b7b93aeaeae84b1b1b1ec78787884b2b2b211ededed09f9f9f940d7d7d7ba949494ef6 a6a6aea757575a0b5b5b59fbcbcbcd8797979f0616161bb9d9d9d40dfdfdf09f6f6f618f8f8f897a7a7a7f2717 17170bcbcbc58cececee87d7d7dbb9090903dd6d6d60afcfcfc0affffff3fd2d2d2ba969696ee797979f369696 9f3686868ec7e7e7eb5a2a2a241d1d1d109f7f7f70bffffff46d7d7d7c28c8c8cdf7c7c7c4ad0d0d02ee6e6e6a c949494e776767685b9b9b91df3f3f309ffffff0afafafa3fe5e5e5a79e9e9ee27b7b7be2828282a3afafaf30d adada0afefefe09ffffff24e6e6e692a5a5a5ea8181819ca5a5a527e9e9e910fafafa5fcacacada7a7a7ad9828 28276bababa1ce2e2e209fafafa09f8f8f825ededed77bcbcbc77c0c0c025e9e9e90afafafa0cffffff21e9e9e 97bb8b8b8df818181cf83838352cdcdcd0efefefe09fafafa21eaeaea85b7b7b7e37c7c7cd979797984afafaf3 ce2e2e210f2f2f20afefefe09ffffff0afcfcfc0afcfcfc12f7f7f747d6d6d690a5a5a5da868686d780808070b dbdbd1af4f4f40afefefe09f7f7f70afefefe2be9e9e986b2b2b2da818181e87c7c7cba97979784aeaeae68c3c 3c34fd2d2d24fd3d3d369c4c4c48aabababc28d8d8dea7a7a7ad379797975c2c2c21ee3e3e30afefefe0afdfdf d0af1f1f10afbfbfb0affffff22f1f1f15fc6c6c6ac979797e77d7d7dec777777dd7b7b7bcb898989cb8a8a8ad c7c7c7cee747474e37e7e7eaaa0a0a059c7c7c71ef5f5f509fafafa0afcfcfc0af9f9f90affffff0af6f6f60af 6f6f60affffff0ffefefe2ee6e6e657c8c8c883b5b5b5a89e9e9eaaa5a5a5aba4a4a4a7a5a5a583b2b2b256c7c 7c72fe2e2e20ffcfcfc09fefefe0af8f8f809f6f6f60af9f9f9"

                • 5. Re: How to get better quality of addToolButton icon?
                  Thom Parker Level 3

                  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?

                  • 6. Re: How to get better quality of addToolButton icon?
                    tobias.wantzen Level 1

                    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

                    • 7. Re: How to get better quality of addToolButton icon?
                      Thom Parker Level 3

                      AcroButtIcon.png

                      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.

                      • 8. Re: How to get better quality of addToolButton icon?
                        tobias.wantzen Level 1

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

                        • 9. Re: How to get better quality of addToolButton icon?
                          tobias.wantzen Level 1

                          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

                          • 10. Re: How to get better quality of addToolButton icon?
                            Thom Parker Level 3

                            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:

                             

                            0af9f9f909ffffff0afefefe09f1f1f10df8f8f827f7f7f746d2d2d26fb5b5b594a3a3a3a99a9a9aaaa4a4a48a acacac6fc2c2c246dedede27e8e8e80df8f8f809fefefe09f4f4f40afefefe09ffffff09fdfdfd09f6f6f60af6 f6f61af0f0f051c8c8c89c9b9b9bd8838383f0747474e27f7f7fdf7d7d7de0838383e7747474f06b6b6bd87e7e 7e9aa2a2a24acfcfcf15f1f1f10afefefe0afcfcfc09f5f5f508f9f9f909f7f7f71fe9e9e970cacacacf888888 ed707070c298989896a5a5a571bbbbbb6dbababa6cc8c8c877c5c5c599a7a7a7cd858585eb7c7c7cc592929268 c2c2c21ff1f1f10afafafa09f1f1f109fbfbfb1bfafafa70bebebed7878787df787878969f9f9f48e3e3e319ef efef0bffffff0affffff09ffffff0bf9f9f91cefefef52d5d5d59ba5a5a5e87e7e7ed68787876cc1c1c118eeee ee09ffffff0ef7f7f752d2d2d2cf818181da7d7d7d7ebcbcbc29e2e2e211f6f6f60cffffff0af0f0f004fefefe 04fafafa0bf1f1f110f7f7f711fcfcfc2edddddd92acacace7797979c98c8c8c4dcccccc0effffff2de7e7e7a7 9b9b9be96f6f6f90afafaf27f2f2f264d2d2d284b7b7b72de3e3e334e5e5e502e7e7e701f3f3f312ffffff2feb ebeb84c0c0c065c8c8c82ee7e7e79aa4a4a4ec7878789a9f9f9f27f6f6f64cd5d5d5e2818181c18f8f8f46dede de10efefefa3a7a7a7e5747474b09c9c9c80cfcfcf05d5d5d501dddddd2cdfdfdfb1a6a6a6e4727272a0a8a8a8 0ffcfcfc51d7d7d7cd888888d982828246d5d5d57abebebeee7474748aacacac12f7f7f70efbfbfb62cececed9 878787ef727272d186868675cacaca73d6d6d6a4a2a2a2ef6f6f6fd88484845dd0d0d00bf7f7f71bf0f0f0999e 9e9ef17979796fbdbdbda6a3a3a3dd7e7e7e69c6c6c60af8f8f810ffffff19ececec65ccccccde777777f46b6b 6bf0797979f0797979ed6d6d6ddd86868661cccccc16f9f9f90af5f5f50bffffff77b6b6b6e773737393a8a8a8 ab9f9f9fcb9494944fd6d6d60aededed09ffffff0ff7f7f715f3f3f365dbdbdbe3848484fd727272fe6e6e6ed8 8f8f8f48c7c7c713f5f5f50affffff0af4f4f40af8f8f86dbebebee07a7a7aaaa3a3a3aba4a4a4cb8d8d8d4fd3 d3d309f9f9f909fafafa88bcbcbcbca6a6a643d0d0d06ad9d9d9ed919191eb95959539e6e6e646e8e8e8b99b9b 9b88a5a5a50affffff0af4f4f46dc6c6c6df808080aaa4a4a4a7a4a4a4dc76767668c4c4c40affffff0affffff 9fa6a6a6f0696969da88888875bbbbbb13d0d0d010dfdfdf41cbcbcbda909090ef6a6a6a9e9f9f9f0afbfbfb0a fcfcfc70c0c0c0e27b7b7b93aeaeae84b1b1b1ec78787884b2b2b211ededed09f9f9f940d7d7d7ba949494ef6a 6a6aea757575a0b5b5b59fbcbcbcd8797979f0616161bb9d9d9d40dfdfdf09f6f6f618f8f8f897a7a7a7f27171 7170bcbcbc58cececee87d7d7dbb9090903dd6d6d60afcfcfc0affffff3fd2d2d2ba969696ee797979f3696969 f3686868ec7e7e7eb5a2a2a241d1d1d109f7f7f70bffffff46d7d7d7c28c8c8cdf7c7c7c4ad0d0d02ee6e6e6ac 949494e776767685b9b9b91df3f3f309ffffff0afafafa3fe5e5e5a79e9e9ee27b7b7be2828282a3afafaf30da dada0afefefe09ffffff24e6e6e692a5a5a5ea8181819ca5a5a527e9e9e910fafafa5fcacacada7a7a7ad98282 8276bababa1ce2e2e209fafafa09f8f8f825ededed77bcbcbc77c0c0c025e9e9e90afafafa0cffffff21e9e9e9 7bb8b8b8df818181cf83838352cdcdcd0efefefe09fafafa21eaeaea85b7b7b7e37c7c7cd979797984afafaf3c e2e2e210f2f2f20afefefe09ffffff0afcfcfc0afcfcfc12f7f7f747d6d6d690a5a5a5da868686d780808070bd bdbd1af4f4f40afefefe09f7f7f70afefefe2be9e9e986b2b2b2da818181e87c7c7cba97979784aeaeae68c3c3 c34fd2d2d24fd3d3d369c4c4c48aabababc28d8d8dea7a7a7ad379797975c2c2c21ee3e3e30afefefe0afdfdfd 0af1f1f10afbfbfb0affffff22f1f1f15fc6c6c6ac979797e77d7d7dec777777dd7b7b7bcb898989cb8a8a8adc 7c7c7cee747474e37e7e7eaaa0a0a059c7c7c71ef5f5f509fafafa0afcfcfc0af9f9f90affffff0af6f6f60af6 f6f60affffff0ffefefe2ee6e6e657c8c8c883b5b5b5a89e9e9eaaa5a5a5aba4a4a4a7a5a5a583b2b2b256c7c7 c72fe2e2e20ffcfcfc09fefefe0af8f8f809f6f6f60af9f9f9

                            • 11. Re: How to get better quality of addToolButton icon?
                              Thom Parker Level 3

                              Looks pretty much identical to your hex code.

                              • 12. Re: How to get better quality of addToolButton icon?
                                Joel_Geraci Adobe Community Professional

                                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.

                                • 13. Re: How to get better quality of addToolButton icon?
                                  tobias.wantzen Level 1

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

                                  • 14. Re: How to get better quality of addToolButton icon?
                                    tobias.wantzen Level 1

                                    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 ...

                                    Bildschirmfoto 2017-05-24 um 06.03.06.png

                                    Can you please give some more details? Thanks!

                                    • 15. Re: How to get better quality of addToolButton icon?
                                      JR_Boulay Adobe Community Professional

                                      Hi.

                                       

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

                                      • 16. Re: How to get better quality of addToolButton icon?
                                        Joel_Geraci Adobe Community Professional

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

                                         

                                         

                                         

                                        J-

                                        • 17. Re: How to get better quality of addToolButton icon?
                                          tobias.wantzen Level 1

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

                                           

                                          I'm very curious ...

                                          • 18. Re: How to get better quality of addToolButton icon?
                                            tobias.wantzen Level 1

                                            I'd still be interested in this topic.

                                            Thanks, Tobias