UPDATE:
I did what @Danielillo suggested and it worked but the width of the exported .png is still one pixel wider then the original:
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:
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:
Then I exported the cube as a .png and opened the .png again in Illustrator:
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:
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!