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!

up vote 0 down vote accepted

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

  • by "make the shapes match the pixel grid" you mean that I should remove the more transparent pixels or move the object on the those pixels? Should I do that on the png or original file? Thanks for your answer! – Tremah Dec 2 at 16:35
  • At the original Illustrator file, move the vector lines or points to match the pixel grid (answer updated with an animation). – Danielillo Dec 2 at 16:40
  • i did what you said it helped a great deal, thanks a lot. The exported png still is one px wider then the original, you can see that on the new picture on my original question. Do you have any idea where that one pixel is coming from? – Tremah Dec 2 at 17:33
  • Check the ends of the horizontal diamonds, make them to the edge limit or -1 pixel – Danielillo Dec 2 at 17:55
  • 1
    that did the trick now, i just erased those pixels and now its the same size. Thanks a lot! – Tremah Dec 2 at 18:09

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.