2

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!

Improve this question

1 Answer 1

Reset to default
0

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

Improve this answer
5
  • 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, 2018 at 16:35
  • At the original Illustrator file, move the vector lines or points to match the pixel grid (answer updated with an animation).
    – user120647
    Dec 2, 2018 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, 2018 at 17:33
  • Check the ends of the horizontal diamonds, make them to the edge limit or -1 pixel
    – user120647
    Dec 2, 2018 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, 2018 at 18:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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