Skip to main content
Participating Frequently
December 28, 2021
Answered

Pixelart messed up

  • December 28, 2021
  • 1 reply
  • 641 views

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.}

This topic has been closed for replies.
Correct answer Monika Gause

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.

1 reply

Monika Gause
Community Expert
Community Expert
December 28, 2021

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

 

When does the distortion happen? Inside Illustrator?

MuvuthAuthor
Participating Frequently
December 28, 2021

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
Community Expert
Monika GauseCommunity ExpertCorrect answer
Community Expert
December 28, 2021

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.