Parallax Effects flicker and blurry buttons

[Patrick_Pfeiffer]

Hello there,

first i have to say that i'm completely new to webdesign (used to be a graphic designer for print) and this is my first website ever. I was really happy when i found out about Muse and that i could layout my page without any programming or coding but now that i'm done there are a few problems...

Kosmetikstudio & Parfumerie Monika <- so here is the page

First of all I noticed some flickering on the images where i used parallax effects. It depends on the browser i tried, with Mozilla I have no problems at all (or not much at least) but on IE for example its just awful. For Example you can see it very clearly when you go down to the Product section where i put the logo banner. When you scroll up and down in this area, the next header (pricing - unsere Preise) will flicker and "jump" up and down. Sometimes even the Headbanner from the starting section will appear and "pop out" in the background (noticed this on IE).

So is there anything that I could do to fix this problem or is it maybe better to remove all of the scrolling motion effects to guarantee a better user experience? So that even persons with older devices can use it correctly and that it doenst matter what browser the user is using.

Ok, so i come to my second question which is even more bothering me. I noticed that all of my buttons are a little bit blurry and not 100% sharp. I placed them as PSD files but also tried to do it as .pngs and even .jpegs with the same result. I even tried to change the imagesize, the dpi and so on, but the result is always the same. On smaller screens, my smartphone for exampe, its even worse. Even the color from the buttons isnt exactly the same as its on the banner in the background (same RGB of course).

I really hope you can help me to solve my problems (not to big of a deal if i would have to remove the parallax though, but the button problem needs to be solved).

I really appreciate your help and i want to thank you in advance.

Greets Patrick

[Günter Heißenbüttel]

Could you attach one of these original(!) buttons (exactly as you placed them) as a JPG file and tell us which one it is on your site, so we can see, about what we are talking.

[Patrick_Pfeiffer]

Ok so I replaced the "Über Uns" Button and the Facebook button in the right corner. But it still looks the same, some kind of blurry...

[Günter Heißenbüttel]

Please could you attach one of the original button here (if possible as a JPG), then we’ll see.

There are good, valid way to analyse and compare the Muse input and output files.

[Patrick_Pfeiffer]

[Patrick_Pfeiffer]

I hope this is what you meant, i found no other way to attach the button... i really appreaciate your help. Thanks a lot.

[Günter Heißenbüttel]

Could you please help me with one more image?

Please export your site to HTML (File menu), go to the exported „images“ folder, and look for exactly this image. Could you attach this too?

I think, the main problem is, that the original image is about double the size as displayed on your homepage. That means, you have to scale the image within Muse, and Muse has to sample down this image to the effectively used size. In general, this can’t be done in a good quality, if the images are small and contain such fine structures as characters.

In this case, it would really be the best to follow Pavel Homeriki’s​ suggestion and recreate the images in SVG format.

Second best solution: Recreate the icons in Photoshop using exactly(!) the size they ere placed in Muse.

And one more idea: If you look, which pixel dimensions one menu entry exactly has: Why not create 2 simple images – one with a white and one with apink border –, assign these rectangle to the single single states of the menu buttons, and build the test (text!) directly within Muse? Sems to be more flexible and simple to me …

[Patrick_Pfeiffer]

First of all thank you so much Günter and Pavel.

I tried a few things now... First i recreated the buttons as SVG, which (have no clue why) didnt work as well. It was even more blurry and unsharp. But then i had the same thought as you did and rescaled all my PSD Files to the effectively used size which seems to help a lot. Its still not 100% sharp but a whole lot better. I will continue doing this and change all the buttons and icons and then i will upload it again. Maybe you could give me your opinion

To your last point...Definitely correct, but it only helps me with the textbuttons, but the Homebutton for instance i still would have to make it in PS or Illustrator.

Again i cant thank you enough for beeing so helpful. Do you maybe have any ideas how i could solve the parallax problem or is as Pavel said just a bug and cant really do anything against it?

[Günter Heißenbüttel]

Patrick_Pfeiffer One more way to create exactly your menu completely within Muse without using any images or any other application! Wouldn’t this be an alternative: http://styled-menu.businesscatalyst.com/index.html

The .muse file may be downloaded directly from the sample site. If you have questions -> just ask!

[Pavel_Homeriki]

https://forums.adobe.com/people/G%C3%BCnter+Hei%C3%9Fenb%C3%BCttel  написал(а)

Patrick_Pfeiffer One more way to create your menu completely within Muse without using any other application! Wouldn’t this be an alternative: http://styled-menu.businesscatalyst.com/index.html

The .muse file may be downloaded directly from the sample site. If you have questions -> just ask!

I suggested this in the first place. For menu, no images are required at all. Everything is done only inside the Muse.

Patrick, as I understand you tried to make svg in Photoshop? Photoshop is not suitable for creating svg. It renders from png to svg because it is a raster, graphic editor. Only a vector graphics editor, such as Illustrator, can create a real svg. If you put svg in Muse, it will not look very good, because svg is the code. But this is not worth paying attention to. In the browser everything will look great.

You can download svg on this site Free vector icons - SVG, PSD, PNG, EPS & Icon Font - Thousands of free icons  and try how they look.

[Pavel_Homeriki]

Patrick_Pfeiffer   wrote (a)

First of all I noticed some flickering on the images where i used parallax effects. It depends on the browser i tried, with Mozilla I have no problems at all (or not much at least) but on IE for example its just awful. For Example you can see it very clearly when you go down to the Product section where i put the logo banner. When you scroll up and down in this area, the next header (pricing - unsere Preise) will flicker and "jump" up and down. Sometimes even the Headbanner from the starting section will appear and "pop out" in the background (noticed this on IE).

Unfortunately this is a bug. I have long reported this on the beta forum. But there is no response when it will be fixed.

Patrick_Pfeiffer   wrote (a)

Ok, so i come to my second question which is even more bothering me. I noticed that all of my buttons are a little bit blurry and not 100% sharp. I placed them as PSD files but also tried to do it as .pngs and even .jpegs with the same result. I even tried to change the imagesize, the dpi and so on, but the result is always the same. On smaller screens, my smartphone for exampe, its even worse. Even the color from the buttons isnt exactly the same as its on the banner in the background (same RGB of course).

Png and jpg Images behave as expected. Try using Illustrator to create buttons instead of Photoshop. From Illustrator make export to svg.

If something can be done by means of the Muse, then it must be done. For example, your menu does not require the participation of Photoshop or Illustrator. This is easily done with the help of standard Muse tools.

[Patrick_Pfeiffer]

Thanks for the response. I already thought that the parallax effect issue might be some kind of bug and that there will unfortunately be no other choice then to remove them and wait for an update or so...

Ok i get to point to do the buttons on top in Muse, but other buttons like the ones in the contact section (the phone, the mail button and so on) need to be done in photoshop or illustrator. And i just dont get it why they are blurry and not sharp...