Storyline: Befriending a Monstera Glassmorphism Template

Karlis Sprogis
Karlis Sprogis
2,974 Downloads
Download

You'll definitely want to grab this stunning plant guide template—it makes beautiful use of the glassmorphism effect.

Monstera_Karlis Sprogis_GIF

Explore this project.

24 Comments
Dave LeFevre
1 year ago02/24/21 at 6:48 pm (UTC)
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?
Karlis Sprogis
1 year ago03/03/21 at 8:34 am (UTC)
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/
Erin Emerson
3 months ago02/23/22 at 8:56 pm (UTC)
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?
Erin Emerson
3 months ago02/28/22 at 2:36 pm (UTC)
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.
ahssan moshref
24 days ago04/22/22 at 11:07 pm (UTC)
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.
Karlis Sprogis
3 months ago02/08/22 at 3:16 pm (UTC)
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/
Sign In to Comment