Highlighted

strange image-shadow crop

Explorer ,
Jul 26, 2017

Copy link to clipboard

Copied

Hi guys,

has anyone out there some idea to the strange behaviour of muse rotating imageframes.
Please take a look at the attached PNG how my placed images behave.

What might be the reason for this? What is my mistake or is it a bug?

Thanks,

Ralf
Muse-Imageframe.png

Views

403

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

strange image-shadow crop

Explorer ,
Jul 26, 2017

Copy link to clipboard

Copied

Hi guys,

has anyone out there some idea to the strange behaviour of muse rotating imageframes.
Please take a look at the attached PNG how my placed images behave.

What might be the reason for this? What is my mistake or is it a bug?

Thanks,

Ralf
Muse-Imageframe.png

Views

404

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 26, 2017 0
LEGEND ,
Jul 26, 2017

Copy link to clipboard

Copied

Did you try a circle image frame? Rounded corners to mimic circles aren’t necessary any more.

I can’t replicate this behaviour. What is the original and placed size of these images? Did you zoom the above images?

Is this a Muse or a browser view?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 26, 2017 1
Jul 26, 2017

Copy link to clipboard

Copied

Hello heyix07,

Even I am unable to reproduce your issue, so it might also be a visual glitch at a particular system or browser.

However, Agreeing to what our ACP has suggested, why don't you try drawing and filling a circle by ellipse tool instead of making rounded corner rectangle?

Please give it a try and let us know if that helps.

Regards,

Ankush

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 26, 2017 1
Explorer ,
Jul 26, 2017

Copy link to clipboard

Copied

Hi Günter and Ankush,

thanks for your quick answers and suggestions. As you recommended I tried the same with native circles and circle-imageframes. And, I'm sorry to tell, there is no difference in the crop of the shadow (column 4).

I tested the preview in many browsers (Firefox, Chrome, Edge, Safari). In every browser the shadow behaves the same and is cropped. But in all others than FF the "white line" (column 3) is gone. So this is a visual glitch (of only one browser) and not a bug.

But in Safari a new problem got obvious: Using the circle-imageframe as you both mentioned displays the image in front of its frame (without cropping it). So for now using rectangles with large rounded edges might be the better way...

And I could discover the reason for the "loss of imagequality" (column 4). This is a "4K-problem". Setting the site to HiDPI renders the image correctly, but I'm wondering why this happens only in column 4 (not in col. 3 - also rotated)?

The image below is a new screenshot of Safari.

I think the Museteam should take a searching look at circle-imageframes and especially the different behaviour of rotated imageframes in combination with shadows...

Thanks, Ralf

Screenshot of Safari:

Muse-Imageframe-02-safari.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 26, 2017 0
LEGEND ,
Jul 27, 2017

Copy link to clipboard

Copied

As you didn’t answer my questions regarding image size (original, placed), zooming and view (Muse/browser): I made some test by my own:

  1. Showing images in front of the image frame instead of within, isn’t reproducible here. Could it be, that you inadvertently placed a rectangle instead of an image frame (the „crossed out“ rectangle in the tool bar)? If no, please, give us a .muse file showing the issue.
  2. If you place an image without any scaling (= 100% pixel size), Muse won’t touch it at all. The output quality will be exactly the input quality.
  3. If you rotate an image container, Muse doesn’t touch the image and tells the browser to use a CSS command to rotate the element. This causes the expectable losses of rotated images. Normally this is not really visible in browser (, as long as you don’t zoom in).
  4. If you rotate the image within its frame, you change the game (I think, this can’t be reproduced by CSS): Muse has to „re-construct“ the whole element and converts the complete(!) object (image, round frame, shadow) to one image and convert it to a PNG, because the resulting image has transparent (round!) and semitransparent (shadow) areas. This causes quality losses and – as a „bug“ – the clipped shadow:

Screen.jpg

Therefore one should remember the old „layout rule“: Never rotate an image within a layout application. If you need rotation, do it in your image processor.

Fortunately, in this case, the problem isn’t a real problem: If you want to rotate images within Muse, rotate the container, not the image within.

Here https://www.dropbox.com/s/6myvxv1bhj2hj9n/rotated-image-frame.zip?dl=0​ you find a .muse file demonstrating the whole problem. If you export as HTML to your computer, look into the exported „images“ folder and compare the images you’ll see what I described above.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 27, 2017 0
Explorer ,
Jul 27, 2017

Copy link to clipboard

Copied

Sorry Günter - I replied this morning to both answers (yours and Ankush's). But I did it in only one thread so that you might got not informed by the system. Sorry, this was my mistake.

Yes, it is the problem with the PNG you are showing above. Rotating the frame (not the within placed image) "solves" it. But using the circle-frame as suggested is not a reliable option. Take a look to my grafic of today - these circles cause strange behaviour in Safari.

Thanks, Ralf

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 27, 2017 0
LEGEND ,
Jul 27, 2017

Copy link to clipboard

Copied

And again: These „effects": Are they visible at normal browser view or after zooming? Or are you talking about the „uncropped“ images? I beg one more time: Give us a .muse file to have a look at.

Would be really nice, if questions are answered, …

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 27, 2017 0
Explorer ,
Jul 27, 2017

Copy link to clipboard

Copied

These effects are visible in all browser views (100% or zooming in/out)


You can find all files at Dropbox - Muse-Imagetest

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 27, 2017 0
LEGEND ,
Jul 27, 2017

Copy link to clipboard

Copied

• You know, that you „magnify“ your issue be using an image of 1000 x 1500 px size?

• Your image frame is 165 x 165 px. That means that your image has to be heavily downsampled by muse to save loading time after output:

For a „normal“ site your image simply should have 165 x 165 px (optimised in Photoshop), so Muse won’t touch it during output.

For a „HiDPI“ site your image simply should have 330 x 330 px (2x), so Muse won’t pass it through unmodified.

The „white line“ you mention is an antialiasing line and becomes more ore less visible depending on the opacity/density of the shadow. Antialiasing normally is used to soften the transition between different elements (graphic, images, fonts). In terms of web design, Antialiasing is completely under control of the browser (every browser uses its own routines) and/or the respective algorithms of your operating system. This issue even is visible in every PDF, in every vector application and appears, when elements (especially vector elements, but not only) „touch" another vector/pixel element. Adobe Acrobat for example has a toggle to switch antialiasing on or off.

I think, there is nothing, Muse can do against it.

Nevertheless, you found one bug:

If you reposition one of the placed (not filled) images within its frame, it seems to become uncropped (as you said). This happens reproducible, when a outline is applied. In this case, if you toggle the background color of the image frame from „None“ to „Transparent“ (and/or back), this redraw issue disappears. On output (Preview, browser preview, export, publish), it isn’t shown at all.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 27, 2017 0
Explorer ,
Jul 27, 2017

Copy link to clipboard

Copied

"...If you reposition one of the placed (not filled) images within its frame, it seems to become uncropped (as you said). This happens reproducible, when a outline is applied. In this case, if you toggle the background color of the image frame from „None“ to „Transparent“ (and/or back), this redraw issue disappears. On output (Preview, browser preview, export, publish), it isn’t shown at all..."

--> Changing the background color does not affect this behavior in my environment, but toggeling the border on/off displays the cropped image correctly again.

But the circle imageframes were displayed wrong in Safari. The (un)cropped image is shown in front of it's frame (look at my latest graphic above - this is a view of the exported HTML in browser). This doesn't happen with rounded rectangles. Here might be another bug while exporting the files (or does Apple make their own rules?)...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 27, 2017 0
LEGEND ,
Jul 27, 2017

Copy link to clipboard

Copied

heyix07  schrieb

--> Changing the background color does not affect this behavior in my environment, but toggeling the border on/off displays the cropped image correctly again.

Look this screencast: https://www.dropbox.com/s/g33xqn8dxanjxl3/Image-clipping.mov?dl=0

heyix07  schrieb

But the circle imageframes were displayed wrong in Safari. The (un)cropped image is shown in front of it's frame (look at my latest graphic above - this is a view of the exported HTML in browser).

Screenshot latest Safari, latest Chrome, macOS 10.12.9, Muse 2017.0.4.8( I opened your .muse file, exported as HTML, and opend the site in Safari and Chrome.):

screen.jpg

Can’t do more …

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 27, 2017 0
Explorer ,
Jul 28, 2017

Copy link to clipboard

Copied

Finally it looks to me like a WIN/MAC (displaying in browser) problem. As I can read above you are on MAC with OS 10, I'm on a PC with WIN10. Both screenshots of the same HTML file (exported from Muse 2017.0.4.8, CL 805099) look on my workstation like this:

Chrome  60.0.3112.78                                                         Safari  5.34.57.2 for WIN (latest Version / no update til today)

Muse-Imageframe-02-chrome 60-0-3112-78 WIN10.pngMuse-Imageframe-02-safari 5-34-57-2 WIN10.png

I think we can't find a solution for this... Thanks!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 28, 2017 0