It's a very nice effect. It appears, however, that the larger glass overlays are done in a video editor, with the smaller boxes and text content on the menu being added in Storyline; same with the text and buttons on the individual content pages overlaying the still images (but done in an image editor). I don't see a way in Storyline alone to create that blurred effect of the glass overlaying the background video, so that has to be at the video and image level. Is that correct?
We are happy you enjoy our example. :)
Unfortunately, as Dave said, this effect can't be achieved in Storyline because it doesn't have functionality for background blur. Indeed, that would make a good feature request ;)
Given that the example needs working with the image editor, we have also created a blog post about how to recreate the glassmorphism effect in Figma. You can use Figma for free and it is quite a powerful browser-based design tool. You can read the step by step guide here: https://fastercourse.com/how-to-create-glassmorphism-effect-in-figma/
Thanks for sharing this Karlis! I read later on that you designed the video with the glassmorphism shape together. But I did notice in the Storyline file that the four boxes on the main slide are shapes. How did you save those as JPG files? I have tried to save just the shape from Figma, but it is a white box when I insert it into my Storyline file. Any ideas?
Thank you for clarifying, I actually just noticed that this morning! But now I am curious as to how you get the glassmorphism box over the video? I am using Camtasia for video editing and while I can create the box in Figma, how do I get the image into Camtasia so that it lays on top of the video using Camtasia?
Hi Erin, as I wrote in another reply in this thread - the first page, is just a video and we created the glassmorphism effect by editing video in video editor, and then just added the naviagation buttons in Storyline, it was created for E-learning heroes challenge, and challenge it was :). Sorry if this does not help much.
Hi Karlis, thanks for the information. When you say you created the glassmorphism effect by editing video in video editor, which program were you using to do that? We are trying to replicate this effect for one of our videos and are unsure how to get the image from Figma onto a video. Did you use Camtasia, an Articulate360 product? Appreciate any information you can provide.
Every technology has some limitations. But if it give room to use one's creative energy to create better visual design through use knowledge of typography and assistance of other application then it is all good. Because in the end, the end-user only cares about the experience. And visually that first cover image is aesthetically very pleasing.
Only other feedback I have is:
The titles of each thumbnail could be make a few fonts and with and error at the end of it be the button ( kind of like the "Post comment >" button on this page) . Then the "read more" could be replaced with a time stamp ( i.e. "5 min read") to indicate a functional info) .
Thanks for sharing the design.
This comes a bit late but I just saw this convo string. I have used created blurred effects for backgrounds in PowerPoint. Just putting it out there that it can be done with an external tool that may be more generally available to everyone.
This is really lovely! You made something that terrifies most people seem very simple.
And thanks for identifying those little root type things growing out of the bottom of my monsteras.
Hi! Love this! So beautiful! I saw your tutorial for creating the glass blocks, but curious how you overlaid the rectangle on the video image. Did you use a gif? I couldn't figure out how to export from Figma as anything other than a standard image.
Hi Alicia, the first page, is just a video and we created the glassmorphism effect by editing video in video editor, and then just added the naviagation buttons in Storyline, it was created for E-learning heroes challenge, and challenge it was :). Easier way is just to use our blog post about glassmorphism and images in Figma, and just use an image in the first page. Here is the link to the blog post just in case:
https://fastercourse.com/how-to-create-glassmorphism-effect-in-figma/
This is a great product. I thought I would create a Fire Safety short course with it! I have Flames as the video; However I can't figure out to change the pictures in the menu as they are attached to the images. Once I change the picture, I get a message stating: The slide target of this link is not available in this preview. Not sure what I am doing wrong!
Hello Donna, perhaps it is easier if you drop us an email: service@fastercourse.com so we can try to help you. But basically if you open the Menu page, and then Open the groups related to the menu items, then there you will see a picture in each group and you can just replace it with another image (Format tab in Storyline). Do you know what I mean?
29 Comments