You'll definitely want to grab this stunning plant guide template—it makes beautiful use of the glassmorphism effect. Explore this project.
Published 4 years ago
Version 1.0
Blog Post
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/
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?
- Hello Erin, if you mean the four boxes in the menu page, which work as chapter buttons, then those are Storyline objects.
- 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?
- 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.- Hello Ahssan,
thank you for your feedback :) and nice idea about the "5min read" functionality! Something to think about in the next version.- 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.
