locked
Exporting pixel-perfect slices to PNG RRS feed

  • Question

  • Hello,

    I'm creating icons of dimension 16x16 and I'd like to export these icons to PNG using slices. Unfortunately, the result of the export is useless because I can't control how the vector graphics get translated to pixels closely enough.

    I'm actually vectorizing an existing icon which means that I know precisely how the rendered output *should* look. My graphics match the pixels of the template perfectly. The borders of the bitmap correspond with the borders of the export slice. I've taken care to align my vectors to pixel boundaries (using a pixel grid and manual positioning). Unfortunately, this doesn't seem to help.

    The following shows how the graphic is shown in the designer, along with the template image in the background and the slice outlines.



    The slice itself looks as follows, once exported (here in preview):

    The inner part of the speech bubble is completely off position. Surprisingly, the rest of the speech bubble is impeccable.
    Sunday, October 5, 2008 1:38 PM

Answers

  • Thanks for sharing the file, Konrad. I'm going to file a bug on this and see what our developers say about it. Again, I suspect that it's related to the one-off pixel issue that Annie mentioned earlier but I'll get confirmation from the developers.

    Whatever the issue, I agree that it's not intended behavior!

    Will Buffington
    Microsoft Expression Support
    Tuesday, October 7, 2008 2:36 PM
    Moderator

All replies

  •  That's very odd. I know there's a "one pixel off" issue but this is more than one pixel. Have you tried grouping the objects before creating and exporting the slice?
    Annie
    Sunday, October 5, 2008 11:53 PM
    Moderator
  • Hi Annie,

    the objects shown are in fact grouped. On the other hand, the shape in the middle isn't really off by more than one pixel, is it?

    Actually, I've had the same problem with other icons as well and your hint about the "one pixel off" issue have prompted me to move the affected shapes half a pixel in the desired direction. This seems to work more or less well, thanks. Hopefully this gets fixed in the next version.
    Monday, October 6, 2008 7:16 AM
  • I've been checking the bug database and I found the issue Annie is referring to. I've also zoomed the bitmap output - it looks to me like it might still be the one pixel-off issue, but the pixelized stroke around the middle of the dialog box was either antialiased to the same color as the background or not at all. It appears missing. 

    As a test, what happens if you make the center the same color as the outline?

    Will Buffington
    Microsoft Expression Support  

    Monday, October 6, 2008 7:37 PM
    Moderator
  • Can ED/ED2 do 0.5 pixel grids?

    Reason I ask that a 16 x 16 px canvas with a 0.5 px grid means a (skilled) user can make 1 px horizontal or vertical strokes that follow odd numbered gridlines.

    Speculative answer based on an apparent offset of less than 1 px.  Even if a 0.5 px grid was merely a notional concept it might allow one to create paths with a 1 px stroke so that stuff neatly fits into integer based single px grid?
    Monday, October 6, 2008 11:43 PM
  • BBB said:

    Can ED/ED2 do 0.5 pixel grids?

    Yes. However, the above example already uses half pixels anyway.

    I've created an example that uses all possible combinations of integer and half pixels (the center has the same colour as the outline, as requested by Will):



    The icons are numbered 1–4 from top left to bottom right.
    • Icon 1 has an export slice aligned at a 0.5 pixel. The image itself is aligned at an integer pixel.
    • Icon 2 has an export slice aligned at a 0.5 pixel. The image is also aligned at a 0.5 pixel.
    • Icon 3: Export slice aligned at an integer pixel, image aligned at an integer pixel.
    • Icon 4: Export slice aligned at an integer pixel, image aligned at a 0.5 pixel.
    Now, when exporting these icons, all look awry:

    What surprises me is that the preview you get when exporting the slices looks actually quite fine for all icons:



    (Mind, only the preview in the export dialog looks good. The preview in the slice properties window looks the same as the final result.)

    I've placed the example file online so you can play with it. I've already “solved” this particular problem by replacing the inner filling by a gradient, which actually looks better anyway. However, perhaps this is still interesting for the Microsoft team when analysing this problem. Also, I would still be interested in a better solution because I've got the same problem with other icons as well.
    Tuesday, October 7, 2008 9:43 AM
  • Thanks for sharing the file, Konrad. I'm going to file a bug on this and see what our developers say about it. Again, I suspect that it's related to the one-off pixel issue that Annie mentioned earlier but I'll get confirmation from the developers.

    Whatever the issue, I agree that it's not intended behavior!

    Will Buffington
    Microsoft Expression Support
    Tuesday, October 7, 2008 2:36 PM
    Moderator