8 Replies Latest reply: Apr 13, 2012 3:06 PM by Jacob Bugge RSS

    Cut off PNG edges when zooming in?

    otorinac

      I'm using CS4 Photoshop and Illustrator to make small size icons for the web.

       

      When I export the image as PNG it looks reasonable on actual size,

      but as soon as you zoom in a bit - the edges seem to be cut off !?

       

      It looks like the icon is squeezed in a small frame!

       

      Why does this happen?

      What can I do to fix it?

      Please someone...

       

      Thanks!

        • 1. Re: Cut off PNG edges when zooming in?
          Nancy O. MVP
          When I export the image as PNG it looks reasonable on actual size,

          but as soon as you zoom in a bit - the edges seem to be cut off !?

           

          What are using to zoom in -- a web browser, Photoshop, Illustrator??

           

          Can you upload your test page to your web space & post a link?

           

           

           

           

          Nancy O.

          Alt-Web Design & Publishing

          Web | Graphics | Print | Media  Specialists 

          http://alt-web.com/

          http://twitter.com/altweb

          http://alt-web.blogspot.com/

          • 2. Re: Cut off PNG edges when zooming in?
            otorinac Community Member

            Hi Nancy!

             

            The thing is - what ever I make ( even a simple 24pix circle) in Illustrator,

            - when I export as PNG,

            - open in a browser

            - zoom in a  bit...has cut off bottom and right side

             

            Since I have to design a set of small 16x16 pix icons - this is a big problem!

            Here is an image of a suitcase i made so you can see the problem

             

            example.png

            Thanks!

            • 3. Re: Cut off PNG edges when zooming in?
              sudarshan.t Community Member

              Hi,

               

              The icon you've shared with us here seems to be fine when I zoom in in my web browser (Firefox 11.0 for OSX). Here's a screenshot:

              Original Image (Ignore the thin black line below it as my screenshot included bit of the 'T' from your 'Thanks!' ) -Screen Shot 2012-04-13 at 6.49.49 PM.png

              Zoomed in Image -Screen Shot 2012-04-13 at 6.48.46 PM.png

               

              Could you share a screenshot of the Zoomed in image from your browser for us to see what the issue may be? And does this issue happen to you only when you zoom in to the image on your browser? Also, do let us know what browser you're using.

              • 4. Re: Cut off PNG edges when zooming in?
                otorinac Community Member

                Picture 3.png

                I'm using Google Chrome, and here is a screen shot I've made.

                 

                Maybe you can see the problem better on this example:

                - I've made a 16x16 pix circle in Illustrator

                - exported it as png 72 dpi

                opened it in a browser

                - and this is how it looks, zoomed in

                Picture 4.png

                How can i get a nice, smooth, normal circle?

                • 5. Re: Cut off PNG edges when zooming in?
                  sudarshan.t Community Member

                  Are you creating a 16x16px circle inside a 16x16 artboard? Or do you have a bigger artboard? This may sometimes help as Illustrator ignores details to an image (especially with transparency).

                   

                  Also, have you tried 'Save for Web & Devices' and selecting PNG-24 instead of PNG-8 that comes in Export? This may sometimes resolve the issue. A higher PNG bit rate means higher depth while the PNG is exported. And since you mentioned you're creating icons for the web (specifically), you must ideally use 'Save for web & devices' rather than the 'Export' feature as you get a smaller size image and it is optimized for the web.

                  • 6. Re: Cut off PNG edges when zooming in?
                    sudarshan.t Community Member

                    One other thing, you should note that PNG is a raster format and some loss of information is inevitable.

                     

                    You could also save time that you take to export and test on a browser by creating your Illustrator File with Preview Mode as 'Pixel' instead of 'Default' when you're doing 'Cmd + N' or 'Ctrl + N'. This will show you how the image/ artwork will look like when you add pixels to them instead of outlines (Raster vs Vector).

                     

                    Trust this helps.

                    • 7. Re: Cut off PNG edges when zooming in?
                      Nancy O. MVP

                      There a lots of ways to do things.  I suspect no 2 designers use the exact same workflow.  That said, I mainly use Illustrator for print and vector graphics; Photoshop for web graphics.

                       

                      Below is a Twitter icon I made in Photoshop (see screenshot).  Notice that the layout area is larger than the icon.

                       

                      transparent-Twitter.jpg

                       

                      I scaled the entire image to 32px x 32px.  Then Saved for Web & Devices as a PNG24 with alpha-transparency. 

                      Below is the resulting web icon.

                       

                      Twitter-ball.png

                       

                       

                      Hope this helps,

                       

                       

                      Nancy O.

                      Alt-Web Design & Publishing

                      Web | Graphics | Print | Media  Specialists 

                      http://alt-web.com/

                      • 8. Re: Cut off PNG edges when zooming in?
                        Jacob Bugge MVP

                        otorinac,

                         

                        Are you sure your circle is without a stroke?

                         

                        In Illustrator, unless you tick Edit>Preferences>General>Use Preview Bounds, the outer half of your stroke weight, if any, will be outside the Bounding Box at the top/bottom/sides and therefore cut off.

                         

                        So a simple circle should only have a fill.

                         

                        In the newest version(s), you may set the stroke to be inside, and you may use the Align to Pixel Grid which will align the outer boundaries, stroke or no stroke, to the grid of whole pixels on the Artboard.

                         

                        Otherwise, if you need a stroke, the size of the path should be reduced by the Stroke Weight, or the image size should be increased by it.