Pixelart messed up

[Muvuth]

Hi everyone,

I'm having a problem with the development of an app.

The looks of the app are in a NES-inspired, 8-bit style, with tiles making up every sprite. We had to create all the files in vector format as the developers will be using Adobe XD to create the actual app, and we just didn't know how to do that with anything outside Adobe Illustrator.
Each single square is a definite size (5x5px) to ensure that the design is consistent throughout the app.

We have characters and elements with, say, a black outline and colored fillings. Outlines, fillings, everything is based on these 5x5 squares.

PROBLEM
To place that into different mobile sizes (into Adobe XD), some resizing occurs and that's pretty much inevitable. But when resizing, the 5x5 squares are heavily affected, so that now squares will look different in each part of each sprite.
Attaching screenshots of the looks before and after resizing. You'll notice that the change in looks is different for each object (= each square), resulting in a messy sprite.

What we've tried:
- grouping before and after resizing. No difference.

- making compound paths. Sizes are compromised, so an object that was originally intended as 50x50 becomes 50.12x49.8. The difference is so tiny I could live with that, but the problem is that outlines and fillings are separate objects anyway, so the changes always result in odd looks.
- constraining proportions when resizing. This results in some blanks between outline and filling, so you can see the background "inside" the objects.

The final solution would be to redesign the original AI files, to downsize them, but we have hundreds and that would be a huge task.

I would be super happy to hear some ideas from someone here.

Thank you in advance to anyone who's willing to share some wisdom!

Muvuth

{Related question but not urgent: everything is pixel-aligned in AI, but the resizing obviously causes all squares to be at pixel-fraction sizes. This causes some other problems, like blurry edges (I posted about this recently). My question is: why is this a problem I can only see with my pixel art, and not with any free-shaped objects? I can resize most shapes without problem, but these tiles will be totally messed up.}

[Monika Gause]

So on the left of that image is what you don't want?

When does the distortion happen? Inside Illustrator?

[Muvuth]

Hi Monika, thanks for your reply.

It happens in both Illustrator and XD, although in Illustrator it's only visible in Pixel Preview, while Print Preview is flawless.

Adobe XD presents the problem in any case. I'm guessing that since it's a software to make apps it only has Pixel Preview?

A quick update, although not a solution: downsizing everything to 60% or 40% of the original size solves the blurry edges and the shape distortion issue. It's not ideal because the perfect downsizing would be about 52.1%, which would obsiouvly solve nothing. But at least I have hopes that most of the files can be downsized and still look decent.

[Monika Gause · Accepted solution]

When making things pixel aligned, you have to draw them in 100%.

Don't ever rely on resizing, beause that will almost always mess things up.

And since pixel alignment is only really relevant for horizontal/vertical lines, it also doesn't affect freeform shapes.

[Muvuth]

Thanks for confirming my impression. I guess it won't be easy...

My original idea was to create them in 100%, but I wasn't given a chance to discuss the final size of objects until now, and it turns out they should have been made in a different size. I hoped that there would be a solution to avoid redesigning everything.

As a follow up on your comment about freeform shapes, I also noticed (and this should have been guessed from the start but I never really thought about it) is that I usually make my design way bigger than what is happening this time. I'm working with 5*5px squares, so even just a single pixel makes a huge difference. I believe this is the first time I'm using such a small size for a single object. In fact, when I copy and paste these pixels into some other design I made, even relatively large objects in the app are but tiny sprites.

So, all this combined is causing me trouble and here's my takeaway: if one has to create an app for the first time, they should INSIST on speaking to an app design specialist first, because there are many things that are app specific and don't necessarily apply to non-software environments.

Thank you for your comment, anyway.