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
- 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?
- Hello Erin, if you mean the four boxes in the menu page, which work as chapter buttons, then those are Storyline objects.
- 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.
- I have the same question. I like the blur effect. Is this effect something that can be accomplished within Storyline itself?
- That would make a good feature request...
- This is an amazing project! I love it!
- Hi Laurens, thank you!
- This is fantastic! I’m always thinking - looking for ways to present concepts and this provides great exploration options.
- Hi Karlie, great job, can i ask what font is used? Roboto ?
- Hi, thanks! Yes, we used Roboto Condensed for this template.
- Wow! I'm new to this and visited your smashing page whilst working from home in Killin, Scotland and for this I thank you.
- Thank you John!
- 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.- Thanks Katie, this is one of our favorite examples as well.
- 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?
