Skip to main content
Latest news: [[ newestAnnouncement.title ]] Learn more
InVision Support Home Page
Sign in
InVision ambassador ambassador
Matt
Matt Updated

How can I create a blurred background fixed footer?

Making a sticky footer with transparent background is easy, but what if I want the background of the fixed footer to be semi-transparent AND have a background blur (using sketch's background blur style)?

This post is associated with a known feature request: [[ problemTicketSubject ]]. Let our Product team know that you’re interested in this feature.

Sign in to add your vote

Thanks for taking the time to share your feedback about making our product better. We’ve let our Product team know that you’re interested in this feature so they can factor that into their product strategy.

1

comments

Sort by

Ashima Sood
InVision ambassador Ashima Sood , ambassador

Hi Matt, 

While this is a more Sketch specific question and you may find a better answer in a forum pertaining to Sketch App (maybe these ones could be a good start: https://blog.sketchapp.com/, https://www.sketchappsources.com/tutorials-tips.html, https://www.sketch.com/docs/) I'm happy to talk about how I'd go about it in the following steps!

1. Select the element you'd like to edit.

2. Change the transparency (under the fill color section)

3. Scroll down to the 'Blur' section, select it and use the drop down to select 'Background Blur'. Here you can decide the degree to which you'd like to blur the element or the saturation of the blur.

4. Once that's done, you can follow this simple adjustment to your prototype.

I hope that helped!

0
Matt
InVision ambassador Matt , ambassador

Thanks for the insight, but that much I already knew. 

The issue is when you create a rectangle that will be your fixed footer, then you apply the background blur to it... then upload it to invision and set the fixed footer hotspot... the background blur doesn't show up. Invision just doesn't recognize it, so it just shows the rectangle with opacity, but no blur. 

0
Ashima Sood
InVision ambassador Ashima Sood , ambassador

I see, I'm sorry to hear this. I tried recreating this issue and wasn't able to. Our support team will be in touch with you. In the meanwhile would you be able to provide the details for -

  1. The version of sketch you are using
  2. The version on craft you are using.
  3. Mac OS version

 

0
Laura Cunha
InVision ambassador Laura Cunha , ambassador

Hi Matt,

Laura from the InVision team here — so sorry about the trouble viewing the background blur in your fixed footer! To help us understand this issue a bit better, could you please share a few additional details?

  1. Could you please send a screenshot showing the missing blur in your fixed footer?
  2. Which Sketch version are you using?
  3. Are you syncing this screen using Craft? If so, which Craft version are you using?
  4. Which macOS version are you using? e.g. macOS Mojave 10.14.6

Thank you in advance!

Laura

0
Charles Yuen
InVision ambassador Charles Yuen , ambassador Edited

I think everyone misunderstood Matt's question. It has nothing to do with the Sketch, Craft or the OSX version.

His question is:

How does one create an interactive blur background image in an Invision prototype? 

Matt, I don't think Invision web app has the feature. You could try the Invision Studio app instead. Although, I have a feeling that doesn't do it either.

Sorry my reply came so late. I too am looking for that feature.

0
Raynor B
InVision ambassador Raynor B , ambassador

Hi Charles,

Thanks for adding your comment to this thread! 

The details that Laura requested from Matt are valuable information that we use when troubleshooting or gathering feedback to get a clearer idea of the context, scope, and impact of possible issues or feature requests. In Matt's case, it's possible that they were encountering a possible issue relating to background blur settings in Sketch being recognized after syncing the prototype. 

As for your own use of a background blur, are you looking for the ability to blur the background screen behind a screen overlay within the InVision Cloud web app? 

If so this is a potential feature that our Product team are tracking interest for, and I'll be happy to pass this feedback on for you. 

If this isn't the use case that you're describing, if you could provide some further details and screenshots regarding this, I'll be happy to look into it further for you. 

Best,
Raynor

0

join the conversation

To comment, sign up or sign in.