Glassmorphism Chat Bubble illustration Tutorial - Free UI Design Tutorial | Summary and Q&A

23.6K views
February 22, 2021
by
Malewicz
YouTube video player
Glassmorphism Chat Bubble illustration Tutorial - Free UI Design Tutorial

TL;DR

Learn how to create translucent glass morphic chat bubbles in Sketch or Figma using simple steps.

Install to Summarize YouTube Videos and Get Transcripts

Key Insights

  • 😎 The tutorial offers a step-by-step guide to creating translucent glass morphic chat bubbles.
  • 👁️‍🗨️ Users can customize the shape, size, color, and transparency of the bubbles.
  • 👁️‍🗨️ Adding background blur and shadows enhances the 3D effect of the bubbles.
  • 🙃 Context can be added to the bubbles by incorporating the clay mock-ups from a separate tutorial.
  • 👤 Users are encouraged to personalize the design with their own colors and shadows.
  • 👀 The tutorial is ideal for UI designers looking to enhance their portfolios with visually appealing illustrations.
  • 👤 The tutorial emphasizes experimentation and invites users to share their creations with the creator.

Transcript

hey guys so if you follow our instagram account you've probably seen that diane has made a beautiful translucent glass morphic chat bubble tutorial and here is the video version of that but instead of orange we're going to be using blue i will be using sketch to create this but it's gonna be exactly the same in figma so don't worry just follow alon... Read More

Questions & Answers

Q: What software can be used to follow along with the tutorial?

The tutorial demonstrates the process in Sketch, but it can also be replicated in Figma.

Q: How can I customize the shape and size of the bubbles?

The tutorial suggests using a 48 corner radius, but users can choose any corner radius they prefer.

Q: How can I adjust the transparency and color of the bubbles?

Users can create a linear gradient with the desired color and adjust the opacity for a translucent effect.

Q: How can I create a shadow effect for the bubbles?

By duplicating the shape and applying a Gaussian blur, users can create a shadow effect for the bubbles.

Summary & Key Takeaways

  • The tutorial teaches how to create chat bubbles with a translucent glass effect using Sketch or Figma.

  • Users start with an empty artboard and create a rectangle with rounded corners.

  • The technique involves manipulating points, creating gradients, adding blur effects, and giving depth to the bubbles.

Share This Summary 📚

Summarize YouTube Videos and Get Video Transcripts with 1-Click

Download browser extensions on:

Explore More Summaries from Malewicz 📚

Summarize YouTube Videos and Get Video Transcripts with 1-Click

Download browser extensions on: