Graphic Sprites Sizing

I made these animated sprites that the person wants exported a certain way.
They want each individual png as 256x256 pixels. Except when I export a 256x256 from indesign at 300dpi it comes out 1067x1067. And when i export them at 72dpi its low quality but the right dimensions 256x256.Same thing goes for Photoshop.

How can I make them so they are 300dpi and 256x256 pixels?

well, dpi means nothign when it comes to digital formats. Dpi is dots per inch. PPI is pixels per inch. However, at the end of the day, 256pixels by 256 pixels is always 256 x 256 pixels. You could change your PPI to 10 or 1000 and you still only have 256x256 pixels.

You mentioned exporting-from InDesign? if you’re trying to do pixel perfect designs, you may be better off in Illustrator or even Photoshop. My guess is your InDesign design has points, shapes, etc. that aren’t aligning perfectly to a pixel grid, which when exported will cause them to be blurry.

This video explains it pretty well.

I’m sort of wondering why’re you using InDesign for something like this? It’s a product designed for print, which means export options that incorporate things like dots per inch or pixels per inch are irrelevant.

As @CraigB said, 250x250 pixels is just that regardless of whether or not 72 or 300 of them are used per inch. This makes a difference to print output when those pixels are converted to halftone dots or inkjet dots, but on your monitor, it’s irrelevant. And since these are animated sprites, I’m assuming they’re not going to be printed, so that 300dpi (which is ppi — dpi is something altogether different) is irrelevant.

When i export my vector from illustrator as a png 256x256 artboard 300ppi the end result is not 256x256 it’s 1068x1068. is there a way i can export to keep the 256x256 dimensions at a high quality?

as @Just-B and I have said. There is no high or low quality. 300 ppi means nothing. You have a fixed amount of pixels. You cannot cram more pixels into a pixel. Did you watch the video I linked to earlier? Turn on pixel grid and align your artwork to the pixel grid.

In a 256x256-pixel image you’re working with 65,536 pixels. With 1068x1068, you’re working with 1,140,624 pixels, which is what, over 17 times more pixels. In other words, you’ll never get the detail in the smaller image with fewer pixels that you got in the larger one with more pixels. However, since the sprites will, I assume, be viewed on a display, that large image will appear exactly the same as the small image when the allocated space in the browser or app or whatever is specified to be 256x256 pixels.

All that considered, I don’t really know what you mean by the quality deteriorating with the smaller image. It could be just the result of fewer pixels, like I mentioned above, or it could be the result of some other thing that’s happened that has just messed up the image somehow, like jpeg compression or something along those lines.

What you likely could do, if you like the way the larger image looks, is to just sample it down to 256x266 pixels in Photoshop. In other words reduce the size of the larger image to that of the smaller image in Photoshop. However that ends up looking, is probably the best you’re going to get.

©2020 Graphic Design Forum | Contact | Legal | Twitter | Facebook