Adobe Community: Cut off PNG edges when zooming in?

Currently Being Moderated

1. Nancy O.,

Apr 12, 2012 2:23 PM in reply to otorinac

Report

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:

Currently Being Moderated

2. otorinac,

Apr 13, 2012 5:49 AM in reply to Nancy O.

Report

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

Thanks!

|

Mark as:

3,731 posts
Oct 15, 2010

Currently Being Moderated

3. Sudarshan Thiagarajan,

Apr 13, 2012 6:22 AM in reply to otorinac

Report

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!' ) -

Zoomed in Image -

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:

Currently Being Moderated

4. otorinac,

Apr 13, 2012 6:57 AM in reply to Sudarshan Thiagarajan

Report

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

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

|

Mark as:

3,731 posts
Oct 15, 2010

Currently Being Moderated

5. Sudarshan Thiagarajan,

Apr 13, 2012 7:16 AM in reply to otorinac

Report

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:

3,731 posts
Oct 15, 2010

Currently Being Moderated

6. Sudarshan Thiagarajan,

Apr 13, 2012 7:24 AM in reply to otorinac

Report

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

7. Nancy O.,

Apr 13, 2012 12:23 PM in reply to otorinac

Report

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.

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.

Hope this helps,

Nancy O.

Alt-Web Design & Publishing

Web | Graphics | Print | Media Specialists

http://alt-web.com/

|

Mark as:

Currently Being Moderated

8. Jacob Bugge,

Apr 13, 2012 3:06 PM in reply to otorinac

Report

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:

Web design

Cut off PNG edges when zooming in?

Apr 12, 2012 1:27 PM

More Like This

Bookmarked By (0)

Answers + Points = Status