Putting raster images at precise positions
-
Backstory: My go-to program for images is Adobe Animate. Seriously.
With that tool, I can quickly and easily snap objects and shapes to endpoints or midpoints of lines, or the bounding rectangles of other objects.
I'm not an artist of any kind, and I'm mostly interested in having a quick tool that allows me to express ideas graphically. I have been looking for alternatives, and VectorStyler is the most promising so far since its approach to drawing shapes is halfway between traditional vector tools like FreeHand and SmartSketch/FutureSplash/Flash/Animate/whateveryoucallit.
And now, the main topic: one thing I want to do is to make a collage of raster images. It may feel weird to look for vector drawing programs for this, but these are better for quick drag-and-drop operations due to the corner snapping. It's also easier to mix raster and vector in a vector tool.
VectorStyler doesn't play well with moving things to the exact pixel I tell them to, though. I don't know if it's a program limitation or if it's me.
Here's an example:
I import this image, a 1280×720 PNG image of a 1×1 pixel checkboard pattern, to a VS document. The first thing I noticed is that the image is 33% larger than expected, even though the PNG file and the VS document are both set to 96 dpi.
I then manually match the image size to the canvas, and exported the image. And I got this:
Zoomed in:
Yep. Misalignment.
There are also no apparent options for smoothening (resampling) these raster images if resized.
I would like to know if there is any way to add a raster image on an artboard and export it, pixel-for-pixel. Or if this is out of scope and I shouldn't be expecting raster images to work well here. Or that VS is a paper graphics editor and screen design isn't a priority here.
(Don't get me wrong; this is $95 very well-spent, but I'd like to know if I'm doing/thinking anything wrong or if VS could use some changes in raster graphics handling.)
Test image: 0_1727801457735_Test.vstyler
Equivalent Animate document: 0_1727801925574_Test.zip
-
@nocturnalYL I 'm trying to replicate this bug. When importing the first image (included in the post) I get a 72 dpi image and exporting that at 72 worked fine.
I see the attached vstyler file, where the image is indeed scaled up.
Can you send me the original png file that was imported into this VS file?
-
That is the file I imported. Maybe I got something wrong; MS Paint reported it's 96 dpi.
After checking the image, I think I got it wrong. Looking at the PNG file, it doesn't have a pHYs (Physical pixel dimensions) chunk, which I believe means it actually doesn't have a dpi value stored.
EDIT: After importing a PNG file with a pHYs chunk, I found that VS does recognise it as a 96 dpi image.
EDIT 2: But the Transform panel in VS says its dimension is 1279.8 by 719.9 px.
The updated PNG file in question:
-
@nocturnalYL I will test with this image
-
Now that I think about it, the PNG format stores the resolution as pixels per metre. 3780 pixels per metre is 96.012 dpi, so by that format's limitation, it should be impossible to map a PNG image to a 96 dpi document pixel for pixel.
https://stackoverflow.com/questions/44949926/preferred-value-to-encode-96-dpi-within-png
And if I export a PNG file from VectorStyler, the resulting file will have a resolution of 3779 pixel per metre.
Now I'm inclined to think that VS is working as intended in my scenario, and the rounding error is unavoidable. Still curious about my first case with a PNG file with unspecified dpi though. If I import a file of a specific pixel dimension, force it to scale to that dimension and export to a PNG of that same dimension, shouldn't the resulting image still be one-to-one in terms of pixel data?
-
@nocturnalYL said in Putting raster images at precise positions:
and the rounding error is unavoidable
Yes, this this case it is possibly that it is caused by rounding (I will have to test this more).
I will also test the first case (without resolution), but this one reported 72 dpi for me.BTW: for the precise line / node positioning (not related to pixels), try the various snapping options.
