Exporting isometric cube to png results in incorrect sides and rough edges of the cube

UPDATE:

I did what @Danielillo suggested and it worked but the width of the exported .png is still one pixel wider then the original:

enter image description here

The blue outline is from Illustrator. You can see the one pixel on the left side of the cube. I am still trying to figure out where that is coming from. If someone knows what happens here, please let me know. 🙂


Original Question:

I recently started to make isometric art for a video game. I made a 2:1 ratio isometric grid (26,565° for shearing and rotating) in Illustrator, where each cell is 128px by 64px. Then i turned the grid into guides and drew a simple rectangular cube:

enter image description here

This worked as expected, resulting in a rectangular cube being 128px wide and 192px high. A close up zoom without the grid shows that the edges and corners are perfectly aligned as well:

enter image description here
enter image description here

Then I exported the cube as a .png and opened the .png again in Illustrator:

enter image description here

There are a couple of problems here which I cant really explain to myself.

  • The dimensions changed from 128px by 192px to 129px to 192px. I really don’t know why that happens
  • The middle part where the two walls meet the floor doesn’t fit together anymore
  • The edges and corners are very rough, especially on the diagonal parts on the top and bottom. This probably happened because i turned of anti-aliasing in the export settings. I read in another post that it is better to turn it off since it could correct pixels and change dimensions of the exported image.

I used the following export settings:

enter image description here

This is my first art project and i probably made a mistake building or exporting the object. I tried to find information on the internet but most people seem to get blurry output, which doesn’t happen in my case.
What i want is the exported .png to look the same and have the same dimensions then the original object in Illustrator, so i can take the .png and use it to make a tile set for an isometric video game.
If someone knows a better way, tool or workflow to create isometric (2:1 ratio) art, I am very open for suggestions since i don’t know much about making/designing graphics.

I included the .ai file so maybe someone can take a look at it and clarify what i did wrong. Sorry for the amount of pictures but i thought its better to provide more screenshots to clarify my problem.

Thank you in advance!

Answer

From Menu View, activate Pixel Preview and make the shapes match the pixel grid

  • Before making the next shapes activate the Align art to pixel grid
    icon

matching pixel grid

When exporting choose an anti-aliasing type:

antialiasing

This is the new .png placed in Illustrator, note the right edge of the green shape is not fixed.

enter image description here

Attribution
Source : Link , Question Author : Tremah , Answer Author : Community

Leave a Comment