Skip navigation
otorinac
Currently Being Moderated

Cut off PNG edges when zooming in?

Apr 12, 2012 1:27 PM

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!

 
Replies
  • Currently Being Moderated
    Apr 12, 2012 2:23 PM   in reply to otorinac
    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/

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 13, 2012 6:22 AM   in reply to otorinac

    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.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 13, 2012 7:16 AM   in reply to otorinac

    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.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 13, 2012 7:24 AM   in reply to otorinac

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 13, 2012 12:23 PM   in reply to otorinac

    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/

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 13, 2012 3:06 PM   in reply to otorinac

    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.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points