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 Adobe Community Professional

                  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 Adobe Community Professional

                      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 Adobe Community Professional

                            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 Adobe Community Professional

                              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