YouTube is set up to keep people engaged and watching, and audiences are profoundly active: they’re searching, clicking, liking and commenting at the same time. Keeping your audience's attention is difficult to begin with, but with all the opportunities on Youtube to be drawn away actually getting someone to click on any link you provide is pretty hard. But not impossible!
Adding a card to your YouTube videos is one effective way to engage and focus your audience's attention. With this technique, you can point viewers to the links you want them to click, not the ones provided by YouTube's algorithms (goodbye, dancing cats!).
A card is a small interactive panel that slides out while your video is playing. Viewers first see a teaser line of text appear in the upper right hand corner of the screen. In this tutorial, you'll learn how to add cards to your videos to engage viewers.
YouTube is set up to keep people engaged and watching, and audiences are profoundly active: they’re searching, clicking, liking and commenting at the same time. Keeping your audience's attention is difficult to begin with, but with all the opportunities on Youtube to be drawn away actually getting someone to click on any link you provide is pretty hard. But not impossible!
Adding a card to your YouTube videos is one effective way to engage and focus your audience's attention. With this technique, you can point viewers to the links you want them to click, not the ones provided by YouTube's algorithms (goodbye, dancing cats!).
A card is a small interactive panel that slides out while your video is playing. Viewers first see a teaser line of text appear in the upper right hand corner of the screen. In this tutorial, you'll learn how to add cards to your videos to engage viewers.Adobe InDesign 2025 Updates | Adobe MAX 2024Envato Tuts+2024-10-16 | Meet the new InDesign features unveiled at Adobe MAX! With generative expand and seamless Adobe Express export, creating and sharing designs just got a whole lot easier.
► Subscribe to Envato Tuts+ on YouTube: youtube.com/tutsplus ► Follow Envato Tuts+ on Twitter: twitter.com/envato ► Follow Envato on Facebook: facebook.com/envatoAdobe Illustrator 2025 Updates | Adobe MAX 2024Envato Tuts+2024-10-15 | Adobe Illustrator just leveled up! From advanced text wrapping to color experimentation with generative recolor, these new features from Adobe MAX are here to unlock your creative potential.
► Subscribe to Envato Tuts+ on YouTube: youtube.com/tutsplus ► Follow Envato Tuts+ on Twitter: twitter.com/envato ► Follow Envato on Facebook: facebook.com/envato - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -Adobe Photoshop 2025 Updates | Adobe MAX 2024Envato Tuts+2024-10-14 | Discover the latest Photoshop 2025 updates straight from Adobe MAX 2024! From the new one-click Remove Tool to the Generative Workspace powered by Firefly, plus the streamlined Adjustment Brush – these features are here to level up your editing game. 🚀 Dive in and see what’s new!
► Subscribe to Envato Tuts+ on YouTube: youtube.com/tutsplus ► Follow Envato Tuts+ on Twitter: twitter.com/envato ► Follow Envato on Facebook: facebook.com/envato - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -BIG NEWS! Were starting a brand new channelEnvato Tuts+2024-10-14 | We've crunched the numbers, talked to the experts and looked at what you, our community are most passionate about and today we're excited to announce our brand new Video Creator focused channel - @Envato_Video
Envato Access an unrivaled range of high-quality assets and templates from our community of global artists, with one simple subscription. ► The broadest range of asset categories, all in one place: elements.envato.com/?utm_campaign=yt_tutsplus_Xp7uTf9xAJY&utm_medium=referral&utm_source=youtube.com&utm_content=description ► Subscribe to Envato Tuts+ on YouTube: youtube.com/tutsplus ► Follow Envato on X: twitter.com/envato ► Follow Envato on Facebook: facebook.com/envato - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -Web Design Trends 2025Envato Tuts+2024-10-09 | What is the state of web design in 2024? What comes next? We sat down with five designers to learn what’s inspiring them, what’s driving them crazy, and how web designers can prepare for a future influenced by AI and rapidly evolving tools.
00:00 Introducing the designers 00:26 AI makes an impact 02:52 Wabi-sabi 04:21 The unlimited creative subscription 04:36 3D, motion, brutalism, and not following trends 07:27 The influence of graphic design 09:43 Be curious, hungry, and uncomfortable
Featuring: - Andy Clarke—Web design troublemaker, Stuff & Nonsense - Maddie Nieman—Solo brand & web designer, Studio Madz - Yuji Sekiya—Senior product designer, Envato - Adi Purdila—Web designer. Animal lover. Avid tea drinker. - Jamie Marsland—Head of WordPress YouTube, Pootlepress
CREDITS Producers: Ian Yates & Joel Bankhead Video Editors: Gibran Gomez Flores & Marco Correa Limón
► Subscribe to Envato Tuts+ on YouTube: youtube.com/tutsplus ► Follow Envato on X: twitter.com/envato ► Follow Envato on Facebook: facebook.com/envato - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -How to Design Social Media Templates in FigmaEnvato Tuts+2024-10-03 | In this course you’ll learn how to design professional social media templates with Figma. Whether it’s Facebook posts, Instagram Stories, or seamless Instagram carousel posts, Figma can handle it all. The designs you’ll create will all be aligned with brand specifications—you’ll be designing for a dummy real estate brand, and seasoned Envato instructor Adi will show you how to integrate its brand colors, typography, and overall style.
00:00:00 Introduction 00:01:42 This video is brought to you by Envato 00:01:54 Why use Figma for social media templates? 00:04:07 Key design principles for social media 00:06:09 Instructor story 00:07:09 Choosing the right dimensions 00:08:50 Practical project: Facebook post template 00:33:45 Practical project: Instagram story 00:55:25 Practical project: Instagram carousel post 01:25:24 Key takeaways
Timestamps 00:00 Introduction 02:46 Opening up Adobe Fresco 03:51 Sketching process 14:13 Refining and taking it to the next level 18:13 Time to add some color 20:50 Choosing texture brushes from Envato 24:06 Shifting registration 25:22 Final result!
Don't forget to check out Chris' channel: @chris-piascik
Follow Adi and learn some pretty advanced prototyping techniques, like setting variables, using conditionals, and working with variable modes. Don't worry if you’re new to Figma prototyping—Adi explains each step clearly, so you can follow along no matter your skill level.
Here's what you'll learn:
00:00 Advanced Figma prototyping with variables 00:32 A quick look at variables and basic prototyping 00:44 Variables 03:35 Prototyping 06:17 Our Figma prototypes project 09:27 Envato, start creating now 09:35 Creating advanced prototypes with variables
Discover how to craft mesmerizing underwater scenes, perfect color grading, seamlessly blend textures, and apply eye-catching effects using creative LUTs.
Refine your text treatments, leverage the power of Camera RAW, and work with realistic mockups to present your designs in a way that resonates with discerning clients and peers alike.
00:00:00 Advanced Photoshop Techniques 00:00:39 Preparation 00:03:40 Composition 00:08:22 Creating an Underwater Effect 00:13:30 Retouching Underwater Elements 00:20:57 Balancing Color 00:24:29 Blending Texture 00:26:46 Adding a Sun Flare Highlight 00:33:18 Adding Water Splashes 00:37:19 Using a LUT 00:38:56 Adding & Blending Text 00:42:55 Enhancing with Camera RAW 00:45:34 Creating a Mockup
Don't forget to check out Dansky's channel: @ForeverDansky
CREDITS Video Creator: @ForeverDansky Producer: Joel Bankhead Video Editor: Marco Correa Limón
00:00:00 After Effects Motion Graphics in DaVinci Resolve 00:00:38 Bring Motion to Your Sequence 00:04:10 One Simple Subscription 00:05:53 Create a Motion Graphics Overlay
Follow along with Abbey as she shows you all the essential techniques in this photo manipulation tutorial. You'll master the basics, and towards the end you'll see some advanved photo manipulation techniques too.
00:00:00 Photo Manipulation Basics 00:01:00 How to Find Images 00:03:02 How to Prepare Images 00:05:19 How to Extract Images 00:19:34 Create Your Composition 00:25:39 How to Match Color 00:29:33 How to Match Contrast 00:33:39 How to Match Saturation 00:35:42 How to Create Light and Shadow 00:40:43 Finishing Touches 00:41:46 Advanced Compositing Techniques
You'll learn how to write components, work with state, and handle events and user input. By the end, you’ll have built your first React application.
Here's what the course covers:
00:00 Introduction 05:53 2.1 Examining the Project 12:22 2.2 Starting From Scratch 21:39 2.3 Fleshing Out the App Component 32:32 2.4 Passing Props to Components 41:11 2.5 Simplifying Markup Expressions 45:54 2.6 Handling Events and Working With State 56:15 2.7 Generating Multiple Components 1:04:08 2.8 Defining Functional Components 1:08:25 2.9 Handling User Input with Controlled Components 1:20:47 2.10 Referencing DOM Elements With ref 1:29:56 2.11 Handling User Input with Uncontrolled Components 1:38:45 2.12 Loading and Saving Data 1:46:27 Conclusion
Spline is a free online tool which makes 3D design easy for anyone. Learn how to get started, get a quick tour of the Spline interface, and discover how to move around in 3D space. You'll also get step-by-step instructions on building an animated Spline scene.
Here's what you'll learn:
00:00 Introduction 00:58 Spline Basics 09:55 Envato Promotion 10:47 Designing With Spline 35:50 Wrapping Up
00:00:00 Introduction 00:00:20 A Brief History of Motion Design 00:02:16 The Principles of Graphic Design 00:02:29 Hierarchy 00:02:44 Balance and Tension 00:02:57 Contrast 00:03:14 Negative Space 00:03:30 Repetition and Rhythm 00:03:59 Principles of Animation 00:04:33 Timing 00:06:05 Easing 00:06:51 Anticipation 00:07:29 Follow Through 00:07:55 Secondary Animation 00:08:31 Styling 00:09:00 Know the Rules to Break the Rules
The 90s were a true mashup of styles; music, entertainment, and technology came together to influence graphic design in major ways. Countercultures like grunge combined with mainstream culture like R&B, pop, and TV to inspire everything that came out of this decade, where being cool and getting attention was at the core of creative expression.
Learn all about 90s design and how you can use it today:
00:00 Intro 01:05 Evolution of the Style 02:48 Music Influence 04:33 Film Influence 05:43 Get Seriously Creative With Envato 06:05 Advertising in the 90s 06:51 90s Web Design and Y2K 07:22 A Style Defined 09:02 Conclusion
► Subscribe to Envato Tuts+ on YouTube: youtube.com/tutsplus ► Follow Envato on X: twitter.com/envato ► Follow Envato on Facebook: facebook.com/envato - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -What Is Matte Painting? | Photoshop TutorialEnvato Tuts+2024-05-30 | Curious about matte painting and how it shapes the worlds of sci-fi and fantasy films? In this video, we dive deep into the art of digital matte painting, exploring its evolution and how it's used today. Whether you're new to matte painting Photoshop or looking to understand what is matte painting, we'll break down everything you need to know about this fascinating craft.
► Subscribe to Envato Tuts+ on YouTube: youtube.com/tutsplus ► Follow Envato on X: twitter.com/envato ► Follow Envato on Facebook: facebook.com/envato - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -Procreate Dreams for Beginners | FREE COURSEEnvato Tuts+2024-05-29 | Wondering what is Procreate Dreams? Stick around and learn Procreate like a pro. Unlock your creativity with this Procreate Dreams tutorial! You'll learn how to use Procreate Dreams to bring your characters to life through mixed-media animation. Whether you're just starting or want to master new skills, this video will guide you step by step.
Julia will show you how to combine frame-by-frame animation with video footage to create a cool animation. She'll walk you through the whole process, from finding the right footage to designing characters that you can then bring to life with motion in Procreate Dreams.
Here's what you'll learn:
00:00 Introduction 00:41 Finding Footage 02:36 Getting Started in Procreate Dreams 04:06 Importing Media 05:15 Sketching Out Ideas 13:20 Creating Our First Character 19:32 Refining the Motion 20:53 Adding Character Details 25:24 New Character, New Techniques 29:48 Working Smarter, Not Harder 33:32 The Next Character! 41:49 Masking Techniques 46:31 Animating With Performance Mode 52:10 Adding Texture to Finish It Off
We’ll take this one step at a time. First, we’ll look at a Figma design and do some planning. Then we’ll set up all the necessary collections in Webflow. Lastly, we’ll build out the two templates that we need in Webflow. You’ll also learn how to import content from CSV files, create fields that reference other collections, filter results, add display limits, and much more. Let’s get started!
00:00 Introduction 01:06 Envato Elements 01:17 Planning the Blog 08:18 Setting up Collections in Webflow 22:21 Envato Elements 23:12 Create the Blog Page 39:07 Create a Blog Index Page
Based in the Forgotten Realms, a pivotal cornerstone of the Dungeons & Dragons universe, Baldur's Gate 3 by Larian Studios took the gaming industry by storm in 2023. This award-winning game invites adventurers to dive into a richly woven narrative full of intrigue, magic, and the complex morality of a world teetering on the brink of chaos.
This step-by-step guide is crafted for both beginners and intermediate users looking to learn how to draw the Baldur's Gate 3 logo. I'll guide you through all the different tools necessary for the job, including the Pen Tool and the gold text effect Photoshop style. So let's roll a D20 for creativity and create your very own piece of the Forgotten Realms with our guide to creating the Baldur's Gate 3 logo.
Here's what you'll learn:
00:00 Introduction 00:57 Create the Background Shape 02:55 Get Seriously Creative With Envato Elements 03:05 Did You Know? Part 1 04:13 Create the Text 08:18 Dealing With Creator’s Block 08:57 Did You Know? Part 2 09:36 Text Patterns 24:13 The Background 25:43 Conclusion
Lottie gives us lightweight, scalable, and interactive animations for use on websites, apps, ads, and social media. In this course, Adi Purdila will teach you everything you need to know when getting started with Lottie Animations.
Here's what you'll learn:
00:00 Introduction 01:05 What Is Lottie? 06:22 Using Lottie Animations 21:58 Get Seriously Creative With Envato Elements 22:56 Creating Custom Lottie Animations
You'll start at the beginning and work quickly into more exciting techniques. Learn how to use the Pen Tool, how to create parametric shapes, how to use global colors, how to add gradients, and how to add typography with the Artistic Text Tool in our full Affinity Designer tutorial.
00:00:23 2. Interface Tour 00:08:12 2.1 Get Seriously Creative With Envato Elements
00:08:31 3. Artboards and References 00:10:56 3.1 Creating an Artboard in Affinity Designer 00:14:19 3.2 Get Seriously Creative With Envato Elements 00:14:33 3.3 Add Reference Images
00:15:51 4. Basic Tools 00:15:53 4.1 How to Use the Move Tool in Affinity Designer 00:20:21 4.2 How to Use the Pen Tool in Affinity Designer 00:28:01 4.3 How to Use the Node Tool in Affinity Designer 00:29:23 4.4 How to Use the Corner Tool in Affinity Designer 00:33:34 4.5 How to Use the Pencil Tool in Affinity Designer 00:38:07 4.6 How to Clip Layers in Affinity Designer 00:41:28 4.7 Get Seriously Creative With Envato Elements
00:41:51 5 Layers and Shapes 00:41:52 5.1 How to Use the Vector Brush in Affinity Designer 00:45:34 5.2 How to Use Parametric Shapes in Affinity Designer
00:52:18 6 Color 00:52:53 6.1 How to Use the Swatches Panel in Affinity Designer 00:54:23 6.2 How to Use Global Colors in Affinity Designer
01:07:05 7 Shadows and Highlights 01:09:34 7.1 How to Use the Flood Fill Tool in Affinity Designer
01:17:06 8 Texture and Detail 01:17:16 8.1 How to Use the Brush Tool in Affinity Designer 01:22:32 8.2 How to Use Gradients in Affinity Designer 01:42:07 8.3 How to Use Compound Shapes in Affinity Designer 01:47:40 8.4 Adding Final Details to the Bear
01:48:33 9 Export 01:48:34 9.1 How to Use the Export Persona
01:52:16 10 Text 01:53:34 10.1 How to Use the Artistic Text Tool in Affinity Designer 02:04:19 10.2 How to Add a Mask in Affinity Designer 02:10:18 10.3 How to Use the Pixel Persona in Affinity Designer
02:14:02 11 Final Tips 02:14:13 11.1 How to Use the Resource Manager in Affinity Designer
00:00 Introduction 01:00 This video is brought to you by Envato Elements 01:12 The basics of Webflow Interactions 16:02 Creating mouse-triggered effects in Webflow 33:11 Sponsor Ad 34:10 Creating transitions in Webflow 38:42 Creating scroll animations in Webflow 52:12 Adding Lottie animations in Webflow
Now, JavaScript is the most popular and important programming language in the world, and with Node.js, you can build command-line and web applications completely with JavaScript.
In this comprehensive course, you'll learn everything you need to know about Node.js, from installation to working with a database, using Handlebars, and writing an HTTP server from scratch.
2 Getting Started 00:01:51 2.1 Installing Node.js 00:06:29 2.2 Using REPL 00:11:29 2.3 Working with REPL Commands 00:15:41 2.4 Working with Standard Input and Output 00:27:24 2.5 Using ReadLine as CommonJS Modules 00:36:33 2.6 Rewriting the Calculator with ES Modules
3 Writing a Command-Line Application 00:43:15 3.1 Working with Paths 00:53:02 3.2 Reading and Writing Files 01:00:06 3.3 Writing a Command Loop 01:10:56 3.4 Making HTTP Requests 01:22:42 3.5 Using Custom Events
4 Writing an HTTP Server From Scratch 01:33:00 4.1 Creating an HTTP Server 01:43:37 4.2 Using Nodemon and NPM Scripts 01:50:38 4.3 Generating Content 01:55:08 4.4 Extracting Query String Data 02:04:02 4.5 Handling URLs 02:11:33 4.6 Displaying a Form 02:19:19 4.7 Processing Form Data 02:28:19 4.8 Serving Static Files
5 Using Express 02:35:07 5.1 Getting Started with Express 02:43:09 5.2 Structuring the Project 02:50:39 5.3 Using Route Parameters 03:01:11 5.4 Introducing MVC 03:09:50 5.5 Writing a Simple View Engine 03:20:15 5.6 Handling Static Assets 03:26:07 5.7 Processing Creation Forms 03:38:05 5.8 Handling Edit Forms 03:48:55 5.9 Deleting Data
6 Processing Requests With Custom Functionality 03:52:48 6.1 Introducting Middleware 04:01:53 6.2 Creating and Processing Login Requests 04:08:32 6.3 Using Sessions
7 Using the Handlebars View Engine 04:16:46 7.1 Setting Up Handlebars 04:25:07 7.2 Generating Lists 04:30:56 7.3 Making Decisions 04:36:11 7.4 Defining Global View Variables 04:43:03 7.5 Using Different Layouts
8 Working With a Database 04:45:46 8.1 Getting Started with MongoDB 04:51:59 8.2 Storing Database Credentials 04:55:04 8.3 Creating Mongoose Models 05:03:13 8.4 Editing Documents in MongoDB 05:10:06 8.5 Creating and Deleting Documents 05:14:14 8.6 Discussing Security 05:23:47 8.7 Really Authenticating the User
The Central Perk logo invites you to have a cup of coffee in a pleasant atmosphere with friends. It displays the name of the New York cafe that became the key location in the Friends series. It was considered their meeting place that was always free; the atmosphere inside always remained unchanged, and the furniture remained the same. For this reason, both the cafeteria and the Central Perk logo became memorable.
Let's recreate this iconic logo together in Adobe Illustrator. Here's what you'll learn:
00:00 How to Create Your Own Central Perk Logo 01:12 Create the Green Plate 06:04 Create the Ribbon 11:55 Create the Coffee Mug 21:24 Choose Fonts From Envato Elements 22:11 Create the Central Perk Text 26:14 Conclusion
► Subscribe to Envato Tuts+ on YouTube: youtube.com/tutsplus ► Follow Envato on X: twitter.com/envato ► Follow Envato on Facebook: facebook.com/envato - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -Figma Multi-Edit (Awesome New Feature!) | TutorialEnvato Tuts+2024-03-19 | In Figma, you can now select and edit objects, in bulk, across multiple frames. You can change multiple text elements at the same time, simultaneously apply transformations to multiple objects, and much more. All of this is possible thanks to Figma’s new multi-edit feature, and in this video Adi Purdila will show you how it all works! ► Envato, the must-have subscription for any creative: elements.envato.com/?utm_campaign=yt_tutsplus_wwQxCc5lFMQ&utm_medium=referral&utm_source=youtube.com&utm_content=description
00:00 Introduction 00:54 What Is Figma Multi-Edit? 05:18 Multi-Editing Text 06:32 Multi-Edit and Object Alignment 08:29 Get Seriously Creative With Envato Elements 09:20 Multi-Edit and Object Transformations 11:56 Multi-Edit and Auto Layout 13:50 Multi-Edit and Components
Since its debut in the 1984 blockbuster, the Ghostbusters logo has been a symbol of paranormal fun. This step-by-step guide is crafted for both beginners and intermediate users looking to learn how to draw the Ghostbusters logo and its unforgettable "No Ghost" sign. Jonathan Lam will guide you through all the different tools necessary for the job, including the Pen Tool and the Type Tool, and he'll show you how to illuminate your design with a ghostly glow effect. So let's get ready to bust some ghosts, Adobe Illustrator style!
00:00 How to Draw the Ghostbusters Logo 01:11 Create the Red "No" Sign 04:20 Ghostly Musings + Envato Elements 04:49 Ghost Trivia 05:24 Draw the Ghost 09:59 Symbol Trivia 10:24 Add Ghoulish Detail 16:10 Spooky Typography + Envato Elements 18:45 Create the Text Glow Effect 23:08 Conclusion
00:00:00 Animate an Illustration 00:02:22 Get Seriously Creative With Envato Elements 00:02:44 Preparing Artwork in Photoshop 00:19:44 Preparing Artwork in After Effects 00:27:44 Adding a Camera in After Effects 00:35:30 Animating the Shadows in After Effects 00:41:34 Adding Creative Animation 00:51:19 Adding Background Grain 00:55:46 Deliver Your Best Work Faster With Envato Elements 00:56:17 Animating a Walking Man Shadow
► Subscribe to Envato Tuts+ on YouTube: youtube.com/tutsplus ► Follow Envato on X: twitter.com/envato ► Follow Envato on Facebook: facebook.com/envato - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -Figma Dev Mode Rocks 🤘 Full TutorialEnvato Tuts+2024-03-07 | Figma Dev Mode is an awesome tool for bridging the gap between design and code. It allows developers to inspect a design file in Figma, and get all the details and specs they need, simply by clicking and hovering over objects. It’s truly a game changer! And in this Figma tutorial, Adi will tell you all about it. ► The broadest range of asset categories, all in one place: elements.envato.com/?utm_campaign=yt_tutsplus_L5p9iX8wKos&utm_medium=referral&utm_source=youtube.com&utm_content=description
00:00 Introduction 01:04 What Is Dev Mode? 16:31 Working With Figma Dev Mode 35:14 Conclusion