Please Help - Scaling issue within canvas - PixelMator Pro

Talk about Pixelmator Pro, share tips & tricks, tutorials, and other resources.
User avatar

2018-05-14 10:35:52

Macbook Pro. Computer all good, lots of ram / space etc

Haven't changed any settings on PMR

I create the canvas size i need for web and set at 72dpi.
I pull in the image(s) (a v hi res image from a photo shoot.)
And then as i scale the image down to fit and position in the canvas the image quality slowly but surely decreases.
Even if i scale and move once or do it 5/6 times the image goes from being perfect quality to very poor so i can't save out / export to upload.
I've tried testing different canvas sizes, different images etc but the same thing happens - the image quality drops once the image is pulled into canvas.

Right now i'd like a refund and to uninstall the app.

How do i speak to someone from the company to get my money back or to help sort the issue.

Many Thanks
User avatar

2018-05-14 12:00:58

(post deleted as what Andrius says below supercedes what I said).
User avatar

2018-05-14 12:31:30

Hi Freddie, I've taken a look at the video you sent in and the issue here is actually pretty simple — you're starting out with something like a 6000x4000 pixel image (the default for most DSLRs, perhaps larger) and you're scaling it down to 700 pixels at the longest edge. A pixel is a colored square and is the basic building block of every image. So, if you've scaled it down to 700 pixels, the image has 700 of those colored squares to represent whatever is contained within it. As you zoom in on a small area of the image, those squares will become visible, because there simply aren't that many of them. Almost 10 times fewer than the original, in fact.

If you'd like to see what the image looks like at its actual size, you can choose View > Actual Size from the View menu at the top of your screen. This will show you the size at which the image can be displayed at a decent quality online. This isn't really a problem as such, it's simply how digital images work. For a comparison, you could open the image in the Preview app, choose Tools > Adjust Size, do the same rescaling there and you'll get pretty much identical results (save for any differences between the scaling algorithms).
User avatar

2018-05-14 12:53:22

Hi Adrius i have sent you a new video. A friend sent me a psd template he created in PS and when i use this template and scale the image up and down and re-positoin it is ok. I then create a new template in PM and the same issue happened - the quality and focus of the image is distorted. The video clearly demonstrates the issue. Thank you for replying i hope we can get to the bottom of this .
User avatar

2018-05-14 13:30:48

Thanks for the video — I can see the size of the template is 3240x1080 pixels and your original image is 2400x1600 pixels. One important thing is that layer resizing in Pixelmator Pro is nondestructive, which means you can scale images up and down without losing the data in your original hi-res image. However, once you scale an image down, it will be rendered (displayed) at the smaller size. So when you zoom in, you'll start seeing pixels. The reason for that is Pixelmator Pro always shows you the finished image because that's what you'll get after exporting it. What you see on the canvas is identical to the finished image.

Now, the reason why it looks like there's more quality in the second (PS template) file is that it's larger. In fact, it's fairly close to the size of the original image. And when you scale the image up and down in that file, you're practically looking at the original image. Now, when you bring that same large image onto a small canvas and resize it, you do one of two things. You either view a 700x572 pixel block of the original image. This is the first state when you've got the small block of the image visible. It doesn't look all that good because it's only a small block. The other thing you can do to fit your large image into a smaller image is resize it to be 700x572 pixels. That's what you do when you drag the handles. When you do this, you have a pretty poor quality image because you've taken the large one and got rid of a bunch of pixels.

I think I'm not explaining this particularly clearly but it's quite a fundamental concept in digital imaging. I do think it's a little tricky before it kind of starts making sense on a conceptual level but if any part of what I've written is confusing or raises any questions, please do ask and I'll do my best to explain.
User avatar

2018-05-14 13:36:51

Hi Adrius it's actually the other way around in my vid. The fist version is the PS template and there are no issues with re-sizing/positining the image within the canvas. The quality remains. The second part of the video is the PM template that i create there and then in the vid and then import the image into in order to be able to work.

However you can see in the second template (PM) that the image after rendering in the canvas clearly looses focus and quality. Yet it doesn't with the original PS template....

Even when exporting the image is still poor quality. I don't see how i possibly make this work? The second an image is decreased in size to fit into a canvas the image quality drops....

What do you think?
User avatar

2018-05-14 13:42:22

just skip to the last 15 secs of the video and you will see the PM template the image inside it loosing focus when rendering. when being moved around its fine and then sets in the canvas and is fine for a fraction of a second and then bang it goes out of focus (after rendering i presume.) look at the clarity of the logo and the white numbers on the ceramic bezel.....thanks
User avatar

2018-05-14 14:28:34

OK, I might be getting confused here — there may be some rendering inconsistencies while you're resizing if the original hi-res image hasn't been yet rendered at its new smaller size, but that seems to be pretty much instantaneous and after that, they should be more or less identical. To put this to rest, if you'd like to compare the resized image in the template file to the resized image in the small canvas file, you'd need to do this:

1. Open the template file
2. Insert the image
3. Choose the Arrange Tool, then enter 572 as the Height value in the Size field to resize the inserted image to be 572 pixels tall
4. Export the image
5. Create a blank new 700x572 image
6. Insert the image
7. Resize it the same way as before (to make sure it's 572 pixels tall)
8. Export the image
9. Open both exported images in one document, layer one over the other, and change the visibility of the upper image to compare it to the lower one.

Those steps would definitively show whether the two images are different. I just did this with a couple images myself and the exported versions were more or less identical — minutely different due to positioning differences but both equal in terms of quality.
User avatar

2018-05-14 14:35:35

ImageImage

attached. as you can see def quality difference fro original versus resized - both processes re-sized with the same quality so choose your original suggestion
User avatar

2018-05-14 14:37:52

the point is im not trying to re-size the entire image. i need to re-position the image (and slightly zoom in on the watch) within a certain canvas size so it fits into a specific panel on the website. i can't even do that without the quality of the image dropping massively.....i just don't understand how it looses such sharp focus with the smallest bit of re-sizing / zooming

as my video showed it doesn't seem to render properly

?
User avatar

2018-05-14 14:39:24

it's plain to see on the watch detailing this is what is looking its crispness and focus. paid £55 for this and it just doesn't work properly? or am i doing something fundamentally wrong? ( i don't think so)
User avatar

2018-05-14 14:53:54

I downloaded both images you've attached — the first is 700x572 and 369KB in size and the second is 2400x1600 and 1.8MB in size. That is a very distinct difference in size and quality. In addition, on the forum, the first image has been scaled up by the browser from a size of 700x572 pixels to a size of 1400x1144 because it is being displayed on a Retina display. This is why it looks blurry. The second image has been scaled down from 2400x1600 to 1840x1226. So it retains all its quality.

I understand you're probably super frustrated now because this is all rather confusing, so if you'd like to just get a refund, you can get one via Apple Support and if you bought Pixelmator Pro recently, there's an automatic way to get refunds through the Report a Problem page here: https://reportaproblem.apple.com. If I've correctly understood the problem you're having, you'll have it in all image editors. If not, then I'm sorry for not being more helpful and I wish you the best in getting the results you're after.
User avatar

2018-05-14 14:58:27

P.S. Stef, if you can chime in with something, please do There must be a simpler way to explain pixels and how they work and I reckon I'm massively overcomplicating this.
User avatar

2018-05-14 15:13:26

Hi Andrius.

I've download the two images (thanks for posting those, Freddie).

I'll have a look to see if the lower definition in the smaller image is due to some artifact created by Pixelmator Pro or if it's just a consequence of having fewer pixels.

Shouldn't take me long...
User avatar

2018-05-14 15:49:43

(post 1 of 2)

Hi Freddie, Andrius.

I've taken the second image (2400×1600) and cropped it to the same aspect ratio as the first. This gives me an image of 1859×1600 of exactly the same quality.

I then resized this crop to the size of the first image (700×572) with Pixelmator, Pixelmator Pro, Preview and another Image Processing app to compare them.

A blown up section of each of the four is shown below.
Image
Other than minute differences caused by different scaling algorithms and a possible colour cast caused by a reckless approach to colour profiles, they look identical to me.

Conclusion: lower definition in the smaller image is just a consequence of having fewer pixels.

- Stef.
(part2 to follow)
User avatar

2018-05-14 16:08:54

(part2)
Downsizing an image will always lose information. Always.
On a plus side it makes the file smaller and faster to load over the web, which is why we do it.
If I take the watch image downsize it to 1400×1143, then 700×572, then 350×286, then 175×143 you can (if you zoom in) see the image gradually degrade in quality:
Image
Image
Image
Image

If you're losing too much quality then you're downsizing too much. This means that 700×572 may well be too small for your requirements.

Due to the weird and clunky way retina (and other hi-res displays) are dealt with on the web, if I'm asked for a 700×572px image for the web, I'll supply both the 700×572 image and one at 1400×1144. This allows web server to supply the first to standard res displays and the second to retina displays.

(edit) I've just realised that the above paragraph may be the solution to this problem. I'm going to put it in bold.

I hope this helps.

- Stef.
User avatar

2018-05-15 06:24:37

Stef, you're a legend — thanks for the in-depth analysis!

Freddie, Stef's point about Retina displays is also very important if you want your images to look good (i.e. sharp) on hi-res displays. For example, each image on every Pixelmator page is available in so-called 1x and 2x. The 1x images load on standard displays and the 2x images are shown on Retina and other hi-res displays. This is standard on pretty much all modern, optimized websites.

As an aside, Pixelmator Pro is optimized for Retina, while web browsers will load images at the same size on both 1x and 2x displays unless explicitly told otherwise in the HTML/CSS. This means, on Retina, they take an image and blow it up to 200% to make sure it appears the same size as on non-Retina. And that means the image will be blurry. Preview is also a bit weird in this regard as the Actual Size option isn't the Retina-optimized one, but, to change that, you can go to Preview > Preferences > Images and change the "Define 100% scale as" setting.
User avatar

2018-05-15 10:34:00

@Andrius You're welcome.

@freddie Good or bad I'd love to know how this ends. Can you post back and let us know? Or, if the above brings more questions to mind, just post them below.