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