Search Phrase = Overlay
Logo
This video demonstrates how to format your logo for optimal mobile performance. You will learn to create a landscape version of your logo that minimizes vertical space, ensuring more room for your content. You will also discover techniques for making your logo transparent, allowing it to Overlay seamlessly on different background colors. Finally, you will explore methods for optimizing your logo's file size to ensure fast load times, even for users on slower connections.
Here are the key things you will be able to do after you watch this demo:
Design a logo with a landscape layout to minimize vertical space
Create a transparent logo that can be overlaid on different background colors
Prepare multiple file formats and sizes of a logo, optimizing for fast load times
Integrate a favicon icon into a web page
Optimize image file size to balance quality and load speed
Provide a mobile-friendly user experience through well-formatted logos
Formatting Logos for Mobile Use Cases [0:02]
Josh Lomelino emphasizes the importance of designing logos that are optimized for mobile use cases, as most users will access the learning experience via mobile devices.
He demonstrates a portrait logo from Create Mode Media and explains the need to reformat it for better mobile visibility, suggesting a layout with the mark on the left and the text on the right.
Josh recommends creating a landscape version of the logo to minimize vertical space, ensuring more room for content like videos, text, PDFs, and audio files.
He advises handling transparency in the logo design, suggesting the use of a transparent background that can Overlay on different background colors, such as white, to enhance flexibility.
Handling Transparency and Use Cases [2:18]
Josh explains the process of creating a transparent logo using tools like Photoshop, which allows for the removal of the background and saving the file as a PNG with a transparent background.
He discusses the importance of having a variety of use cases for the logo, such as different foreground colors and background colors, to ensure flexibility in different contexts.
Josh mentions the use of a checkerboard pattern in PNG files to indicate a transparent background, ensuring the logo can be rendered correctly on different web pages.
He highlights the need for a favicon icon, which can be saved as a PNG or ICO file, and integrated into the browser for better visibility.
Optimizing File Size for Faster Load Times [4:58]
Josh stresses the importance of optimizing the file size of the logo to ensure fast load times, especially for users on slower connections.
He provides an example of a highly optimized logo with dimensions of 767 by 158 and a file size of nine kilobytes, which loads quickly and maintains high quality.
Josh contrasts this with a less optimized logo that has a larger file size, highlighting the need to balance resolution and file size to avoid slowing down the user experience.
He explains that factors affecting file size include dimensions and compression, with tools like Photoshop offering quality sliders to adjust the image's resolution.
Final Considerations for Logo Formatting [6:35]
Josh summarizes the key points to consider when formatting a logo for optimal mobile performance, including minimizing vertical space, handling transparency, and creating a variety of use cases.
He reiterates the importance of optimizing file size to ensure fast load times, especially for users on slower connections.
Josh emphasizes the need for a balanced approach that maintains high quality while minimizing the impact on load times.
He concludes by highlighting the goal of providing the best user experience through well-formatted logos that load quickly and look great on mobile devices.
Header Images Component Tutorial
In the video above you can use the chapters menu to jump to main chapters of the video or use the time code references below to manually jump to parts of the video. The video also has searchable transcripts in the video player. These features are shown below.
If you are looking for a quick tech demo of how to integrate the Header Image Component simply start at 1:18 in the video demo above and you will get a full breakdown of the essentials in less than two minutes.
Then continue on for the remainder of the demo to get a variety of creative design strategy tips and techniques to help provide a world-class visual experience for your site.
The header image component provides a versatile and visually impactful way to set the tone and context for web page content. This demo will show you how header images can be used in either a fixed width or full browser width layout, allowing for creative flexibility in design.
The technical steps for using the Header Image Component are very simple and straight forward. As such, the primary focus of this demo is to show a variety of creative strategies of you can use image styles to set the tone and mood of your user experience. If you are looking for the technical steps you can jump straight to 23:10 in the video above. You will see the steps completed in just a few clicks.
This demo covers various creative strategies like using blurred images, color saturation, and logo Overlays to establish the desired mood and branding. The process for implementing header images was shown to be straightforward, leveraging Photoshop templates to easily size and export assets. The demo emphasizes the importance of coordinating header imagery with body content to create a cohesive user experience. The demo highlights the power of the header image component to elevate the visual design of a website through a simple yet effective implementation.
Header Image Component Overview [0:01]
Josh Lomelino introduces the header image component, emphasizing its optional nature but noting its importance for design aesthetics and consistency.
The header image can be used for various purposes, such as Success Path diagrams, and is flexible across different form factors (mobile, tablet, desktop).
The header image can occupy either a fixed size or full screen width, adapting dynamically to the device's size.
Josh demonstrates how the header image component adjusts its size and position on different devices, including mobile and desktop.
Fixed vs. Full Width Header Images [3:21]
Josh explains the two primary ways to use the header image component: fixed width and full width.
A fixed width image is useful for Success Path diagrams, showing the user's progress through content.
The full width image spans the entire browser width, providing a dynamic and adaptive look.
Josh shows examples of both fixed and full width images, highlighting their respective uses and benefits.
Creative Strategies for Header Images [6:58]
Josh discusses various creative strategies for using header images, including blurred images, color saturation, and logo Overlays.
Blurred images can set the tone and texture of the page, while color saturation can enhance the mood of different sections.
Logo Overlays can be used to show product or company logos, or sub-brands within an organization.
Photographic images, including cropped photography, can create visual interest and set the stage for the content.
Implementation and Exporting Images [10:59]
Josh provides a step-by-step guide on implementing header images, including the best image sizes for full width and fixed width images.
For full width images, the recommended size is 2300 pixels wide by 240 pixels tall.
For fixed width images, the recommended size is around 1448 by 308 pixels.
Josh demonstrates how to export images from Photoshop, ensuring they are the correct size and quality for the header component.
Using Templates and Media Manager [22:49]
Josh explains the use of templates for header images, including full width and fixed width templates.
The templates are structured to allow easy drag and drop of images, with layers for different elements like logos and header images.
Josh shows how to use the media manager to upload and manage images, emphasizing the importance of consistent file organization.
He also discusses the flexibility of using open-source image editing software like GIMP and Procreate.
Coordinating Header and Body Images [36:04]
Josh demonstrates how to coordinate header images with body images to create a unified look and feel.
He explains the process of exporting and uploading images, ensuring they are the correct size and quality.
Josh highlights the importance of file naming conventions to avoid issues with server caching.
He shows how to update and replace images in the media manager, ensuring the new images are correctly integrated into the page.
Creative Freedom and Customization [36:20]
Josh encourages users to explore different creative strategies for header images, including using stock imagery from sites like Unsplash.
He emphasizes the importance of having a clear license for any content used.
Josh demonstrates how to use different effects and adjustment layers in Photoshop to enhance the look of header images.
He shows how to create a visual content brainstorm spreadsheet to plan and organize images for different pages or classes.
Handling Image Caching and Updates [45:00]
Josh explains how to handle issues with image caching, including clearing browser cache or renaming files to force updates.
He demonstrates the process of updating and replacing images in the media manager, ensuring the new images are correctly integrated.
Josh highlights the importance of testing and refreshing the page to ensure the new images are visible.
He provides tips for managing and organizing images in the media manager to maintain consistency and efficiency.
Final Thoughts and Best Practices [49:17]
Josh summarizes the key points of the tutorial, emphasizing the flexibility and creative freedom of the header image component.
He encourages users to explore the examples and templates provided, using them as inspiration for their own designs.
Josh highlights the importance of consistent file organization and proper image sizing for optimal performance.
He concludes with a reminder to always test and refresh the page to ensure new images are correctly displayed.
Automated Video Production Pipeline
This video guides you through setting up an automated video production pipeline, from selecting and testing brand voices using Eleven Labs to pairing them with digital avatars in HeyGen. By following the steps, you'll learn how to catalog and integrate voices, match them with visual characters, and generate preview videos for evaluation. Once you complete the video, you'll be able to efficiently create, test, and organize multiple spokesperson options for your brand's automated content generation. This process empowers you to streamline video production and build a scalable library of branded video assets.
Following are the key things you will be able to do after you watch this demo:
Identify suitable brand voices using generative AI tools.
Catalog and organize voice and avatar options for efficient selection.
Integrate third-party voices into video production platforms.
Pair voices with digital avatars to create compelling spokesperson combinations.
Generate and preview automated video content for evaluation.
Document and track production assets for streamlined workflow.
Select and finalize top spokesperson options for automated content generation.
Introduction to Automated Video Production Pipeline (00:00:00 – 00:00:59)
Josh kicks off the demo by outlining the goal: selecting brand-aligned voices and digital doubles (either your own clone or hired actors), organizing those assets, and laying out the end-to-end steps needed to spin up a fully automated video production pipeline.
Content Sequencing Concept and Cloning (00:00:59 – 00:02:20)
He explains the core idea of building a repeatable sequence of content—cloning a finished production over and over—so you can continually generate new videos by plugging different scripts into the same automated workflow.
Defining Digital Doubles and Voice Types (00:02:20 – 00:03:11)
Josh clarifies terminology (digital twin vs. digital double), walks through the two main “buckets” of voice assets (personality-based clones vs. spokesperson avatars), and discusses how to mix and match them depending on your brand needs.
Selecting Platforms for Generative AI and Deployment (00:03:11 – 00:04:00)
He emphasizes the importance of vetting your generative-AI tools—voice engines and video avatars—and making sure they’re compatible with your target platforms before committing to any given solution.
Brand-Focused Workflow and SRT Utilization (00:04:00 – 00:05:25)
Josh decides to focus on one streamlined method for this demo, using a single SRT transcript file as the “source of truth” for automation—underscoring that a clean, well-formatted SRT is absolute gold when you’re architecting an automated pipeline.
Importing SRT and Leveraging Automation (00:05:25 – 00:07:40)
He shows how to import the SRT into the voice-generation platform, highlighting how the time-coded script drives every subsequent step—from audio rendering to scene assembly.
Setting Up Voice Design in ElevenLabs (00:07:40 – 00:11:49)
A step-by-step walkthrough of testing voice presets, tweaking text lengths, integrating third-party voices, and crafting voice-design prompts to nail down the exact tone and style you want.
Managing Credits and Reviewing Generated Audio (00:11:49 – 00:15:46)
Josh demonstrates how to monitor and conserve your generation credits, preview the rendered audio, swap out placeholder text, and ensure you’re only spending resources on polished clips.
Applying Voiceover and Text Overlays to Video (00:15:46 – 00:19:08)
He attaches the finalized voice track to the video timeline, adds and styles text Overlays (centering, contrast adjustments), and assembles the basic video composition ready for export.
Enhancing Prompts with AI Tools for Voice Design (00:19:08 – 00:22:04)
Introduces additional AI utilities for brainstorming and refining your voice-design prompts—showing how to iterate until you get a sample that truly matches your brand voice.
API Key Handling and Asset Export Configuration (00:22:04 – 00:27:28)
A practical guide on securely copying your ElevenLabs API key, configuring export settings (e.g., 4K output), and organizing all generated files into branded folders for easy access.
Frame Rate Considerations and Quality Checks (00:27:28 – 00:31:42)
Notes the default 25 fps setting, explains how frame rate impacts perceived motion, and walks through checking your export quality to avoid any unexpected artifacts.
Avatar Adjustments, Project Naming, and Fallbacks (00:31:42 – 01:05:16)
Josh covers fine-tuning avatar scale and positioning, updating project names for consistency, and setting up fallback workflows if you need to swap voices or visuals mid-pipeline.
Avatar Replacement and Cataloging (00:31:42 – 00:34:06)
Pair your chosen voice with visuals by replacing the default avatar, browsing through the 21 “looks” in each category, using the snipping tool to capture promising thumbnails, and logging each candidate’s name and category in your tracking spreadsheet.
Avatar Testing and Video Formatting (00:34:07 – 00:36:24)
Brainstorm voice–visual combinations (e.g. “August”), select a portrait-mode avatar, preview the static image, upload any custom avatars into the pipeline, drag your source video beneath the avatar layer, and confirm the composition and framing.
Voice-Avatar Sync and Quality Comparison (00:36:24 – 00:37:39)
Generate audio samples to compare HeyGen vs. ElevenLabs quality, force-refresh the clip to confirm it’s using the intended voice (e.g. Ryan Kirk), and watch for the spinning indicator to verify successful render.
Preview Generation and File Labeling (00:38:10 – 00:39:11)
Render a 4K preview of the voice-avatar pairing, then label the export asset with your convention (e.g. 001_RyanKirk_CharlieAvatar) so each test remains organized and easily identifiable.
Pipeline Duplication for Variant Testing (00:39:11 – 00:41:15)
Duplicate the entire sequence to create “Test 002,” swap in a new avatar (such as Colton), explore lifestyle/UGC categories, and note how background removal and frame size affect the final look.
Background Removal and Frame Adjustments (00:41:15 – 00:42:32)
Apply the background-remover tool to avatars with built-in backgrounds, observe any cut-offs (like arms being cropped), tweak the canvas framing, and decide between static vs. transparent backgrounds based on brand needs.
Third-Party Voice Integration Workflow (00:42:32 – 00:44:03)
In the “My Voices” tab, toggle on integrated voices (e.g. Charlie), heart your favorites so they surface first, preview each sample, and ensure the API integration is active before proceeding.
Voice Audition Labeling and Mood Board Documentation (00:44:03 – 00:47:09)
Name each audition (e.g. 002_CharlieAvatar), update your mood board with snipped thumbnails, record which browser tab or category each came from, and keep this documentation up to date for reproducibility.
Frame Rate and Credit Management (00:47:09 – 00:48:06)
Note the default 25 fps setting—mismatches can cause audio sync issues—toggle off “Avatar 4” if you’re on an unlimited plan, and monitor your generation credits to avoid unexpected limits.
Styling and Folder Organization (00:48:06 – 00:49:29)
Adjust text Overlay colors to maintain contrast (match your brand palette), create new folders for each batch, and standardize your output directory structure so you know exactly where each rendered clip lives.
Option Preview and Cataloging Workflow (00:49:30 – 00:55:51)
Refresh thumbnails, scroll through voice-avatar combos, assign option numbers, screenshot grids of candidates, and log each pairing’s status (“Yes,” “Maybe,” “No”) in your spreadsheet.
Iteration Process and Consistency Notes (00:55:51 – 00:57:23)
Always regenerate every variation (never reuse stale renders), note any limitations (e.g. animated text can cover on-screen elements), and keep your naming and documentation consistent so the pipeline remains bullet-proof.
Ranking Options and Visual Separators (00:57:24 – 01:02:40)
Introduce visual separators in your catalog (e.g. blank rows), rank the top voice-avatar combos, screenshot your “definite yes” list, and preserve those as templates for future batches.
Additional Voice Integration: Amelia (01:02:40 – 01:04:33)
Search for “Amelia” in your voice library, verify whether it’s built-in or needs third-party integration, add it to favorites, preview the sample, and record its ID for consistent reuse.
Final Voice Candidate Integration (01:04:33 – 01:05:16)
Confirm Amelia’s render, then search for any last candidates (e.g. “Analore”), heart and test them, catalog the results, and ensure each new voice is fully integrated into the pipeline.
Final Pipeline Recap and Scale Duplication (01:07:40 – 01:08:34)
Recap how you’ve selected your final set of voices and avatars, finalize your naming conventions, and highlight that you can now duplicate this entire automated workflow to churn out an endless library of on-brand social-media videos.
Related Link Network Component
The video demonstrates how to use the related link network feature in AMP to create powerful connections between content items. Viewers will learn to quickly and easily add related links, both internal and external, to any content page, allowing users to navigate the content in a seamless and flexible manner. The video also highlights advanced features like bi-directional linking and filtered search, empowering users to manage and organize their content knowledge base with minimal effort. By the end of the video, viewers will be able to leverage the related link network to enhance the discoverability and user experience of their content.
Explain the concept of related links and their importance in enhancing learning and knowledge building.
Identify the issue of isolated content in many learning systems and the need for creating meaningful connections between ideas.
Describe the use of a sequence of content as a method to create relationships between content items.
Demonstrate the ability to create a related link network, a user interface that visualizes the connections between content.
Utilize AMP's related link network feature to quickly and easily create complex related link structures with minimal effort.
Apply the flexibility of the related link network to create both sequential and asynchronous content paths.
Implement the process of adding related links, including internal and external resources, to a content page.
Manage and reorganize related links to ensure a clean and easy-to-navigate user interface.
Leverage the advanced features of the related link network, such as bi-directional linking and filtered search, to enhance the organization and discoverability of content.
Modify and update related links, including changing titles and URLs, and observe the real-time updates to the user interface.
Related Link Network Overview [0:00:00 - 0:10:09]
Introduces the concept of related links and their power in enhancing learning and knowledge building
Highlights the issue of isolated content in many learning systems, preventing meaningful connections between ideas
Suggests using a sequence of content as one method to create relationships
Introduces the idea of a related link network, a user interface that visualizes these connections
Creating a Related Link Network [0:10:09 - 0:14:09]
Explains that AMP's related link network is designed to be a low to no-code solution
Provides an example of building a demo on SEO best practices, breaking it down into related topics
Emphasizes the flexibility of the related link network, allowing for both sequential and asynchronous content paths
Live Demonstration of Related Link Technology [0:14:09 - 0:18:04]
Demonstrates the process of adding related links to a test page
Shows how to add external resources, such as blog articles or links to other websites
Explains how to reorder and manage related links, ensuring a clean and easy-to-navigate user interface
Advanced Features and Filtered Search [0:18:04 - 0:20:00]
Introduces bi-directional linking, allowing content to be linked in both directions
Demonstrates the filtered search feature, which allows users to quickly find specific content items in large databases
Explains how to modify and update related links, including changing titles and URLs, and how these changes are reflected in real-time
Reiterates the power and flexibility of the related link network, emphasizing its ability to create seamless connections across different content types and form factors
Image Slider Component Demo
This video provides a comprehensive guide on how to set up and optimize image sliders for websites with a focus on mobile-first design. Viewers will learn how to leverage pre-designed slider templates, properly size and export slider images, and integrate the sliders into a content management system (CMS) while ensuring optimal responsiveness across different devices and form factors. By following the steps demonstrated, users will gain the skills to create high-quality, mobile-friendly image sliders that provide an engaging and seamless experience for their website visitors.
1172 pixels wide by 580 pixels tall (1172 x 580) are the best dimensions for the billions of devices on the market. That's what we have found is ideal and will work everywhere. With the template linked on this page in the supplemental resources (also shown in this demo) you can drag and drop images into sliders. Or you can make your very own images from scratch using the concepts shown in the demo.
Understand the importance of mobile-first design and responsive layout considerations when setting up image sliders on a website.
Identify the safe zones and optimal image dimensions for creating mobile-friendly sliders that avoid text and content cutoff.
Utilize developer tools to test and analyze the responsiveness of image sliders across different device form factors and orientations.
Access and leverage pre-designed slider templates to quickly create high-quality, mobile-optimized sliders.
Effectively edit, export, and optimize slider images for web performance, ensuring fast loading times and minimal bandwidth consumption.
Integrate and manage slider images within a content management system (CMS), including uploading, cropping, and linking functionality.
Apply best practices for maintaining the recommended slider image dimensions and safe zones when directly editing and modifying images in the CMS.
Setting Up Image Sliders on Websites (0:00)
Josh Lomelino introduces the topic of setting up image sliders on websites, emphasizing their use on the home page and other pages.
He highlights the importance of mobile responsive design, showing how sliders can be clicked through and swiped on different devices.
Josh explains the concept of mobile-first design and how to use developer tools to toggle between different device formats.
He mentions the importance of optimizing sliders for various form factors, including landscape and portrait modes.
Optimizing Sliders for Mobile Responsive Design (2:01)
Josh discusses the challenges of ensuring text visibility and avoiding text cutoff in sliders.
He demonstrates how to test sliders using developer tools and highlights the importance of keeping key information within the safe zone.
Josh shows an example of a slider that is not optimized and compares it to a well-optimized one, emphasizing the need for proper image cropping.
He explains how to use developer tools to analyze the responsiveness of sliders on different devices.
Using Templates for Image Sliders (4:28)
Josh introduces templates linked on the page that help users create amazing sliders with minimal effort.
He explains how to use the home page slider design template in Photoshop or other applications like GIMP or Canva.
Josh demonstrates how to open the PSD file, turn visibility on and off for different slider layouts, and add text Overlays.
He emphasizes the importance of safe regions and proper image dimensions for optimal display on various devices.
Implementing and Optimizing Sliders (10:13)
Josh shows how to drag and drop images into the template and export them for use on the website.
He explains the importance of optimizing images for mobile to ensure fast loading times and minimal bandwidth consumption.
Josh demonstrates how to export images using Photoshop's "Save for Web" feature and adjust file sizes for optimal performance.
He shows how to upload and integrate the exported image into the CMS, ensuring proper linking and formatting.
Managing Images in the CMS (13:22)
Josh explains how to modify existing sliders or create new ones in the CMS.
He demonstrates how to specify the number of items in a slider and link images to specific pages.
Josh shows how to upload images directly into the CMS and ensure they are properly formatted and linked.
He explains how to use the CMS to crop and modify images directly, maintaining the recommended dimensions for mobile responsiveness.
Keywords: Overview, Demo, Audio, Recording, Process, Tracks, Methods, Production, Manual, AI, Generated, Voices, Automatically, Instructional, Aid, Synthesizing, Information, Guide, Instruct, Persuade, Sales, Potential, Catalyst, Automating, Content, Creation, Recorded, Serve, Presentation, Slides, PowerPoint, Canva, Animated, Effects, Virtual, Camera, Overlay, Automated, Execute, Fundamentals, Vocal, Performance, Techniques, Apply, Screen, Captures, Principles
This video provides a comprehensive overview of audio production techniques, teaching viewers how to create powerful audio tracks through manual recording and AI-generated voices. Participants will learn to leverage audio as a versatile tool for instructional content, sales support, and multimedia creation, including automated slide generation and virtual presentations. The demonstration will equip learners with fundamental vocal performance skills applicable to screen captures, on-camera presentations, and various content creation scenarios. By mastering these techniques, viewers can transform their approach to creating engaging, professional-quality audio and visual content.
This video provides a comprehensive overview of audio production techniques, teaching viewers how to create powerful audio tracks through manual recording and AI-generated voices. Participants will learn to leverage audio as a versatile tool for instructional content, sales support, and multimedia creation, including automated slide generation and virtual presentations. The demonstration will equip learners with fundamental vocal performance skills applicable to screen captures, on-camera presentations, and various content creation scenarios. By mastering these techniques, viewers can transform their approach to creating engaging, professional-quality audio and visual content.
Here are the key things you will be able to do after you watch this demo:
Record high-quality audio tracks manually
Generate AI-powered voice narrations from text scripts
Use audio as an instructional and persuasive communication tool
Automate presentation slide creation using audio tracks
Create virtual on-camera presentations with overlaid audio
Apply vocal performance techniques to screen captures
Synthesize information effectively through audio narration
Leverage audio for sales and instructional content development
Transform text scripts into multimedia presentations
Develop professional-grade content using both manual and AI-driven audio production methods
Overview of Audio Recording Process 0:08
Josh Lomelino introduces the demo, focusing on the process of recording audio tracks.
He mentions that the overview video will demonstrate two methods for audio production: manual recording and AI-generated voices.
The video aims to outline various uses of audio, emphasizing its role as an instructional aid and its potential in automating content creation.
Josh highlights that audio can synthesize information to guide, instruct, persuade, and support sales.
Applications of Audio in Content Creation 0:51
Josh explains that audio tracks can be used directly as instructional aids, providing guidance and support.
He elaborates on audio's role in automating multiple aspects of content creation, whether recorded manually or generated with AI.
An audio track can create presentation slides in applications like PowerPoint or Canva, complete with animated effects.
The audio can also be used to generate virtual on-camera presentations that Overlay on automated slides.
Upcoming Demos and Techniques 1:40
Josh mentions that upcoming demos will show how to execute both methods of audio production: manual recording and AI-generated voice production.
He emphasizes the importance of mastering the fundamentals of delivering a strong vocal performance.
These techniques can be applied to various areas, including live screen captures and on-camera presentations.
Josh concludes the high-level overview, stating that he will see the audience in the next video.
Keywords: Screen,recording,audio,capture,on-camera,presentation,production,challenges,lighting,consistency,studio,lights,color,temperature,LED,panels,backlights,kicker,light,digital,double,4K,webcam,system,performance,green,screen,Camtasia
In this video, Josh Lomelino demonstrates Method Three for creating engaging screen recordings that combine on-camera presence, screen capture, and audio. Viewers will learn how to set up professional lighting using LED panels, choose the right camera equipment, and optimize their recording environment for high-quality video production. The tutorial covers essential techniques for maintaining visual continuity, managing lighting color temperatures, and using tools like Camtasia and green screens to create polished, professional-looking video content. By following Josh's guidance, content creators will be able to produce dynamic, natural-looking screen recordings with improved technical quality and visual appeal.
In this video, Josh Lomelino demonstrates Method Three for creating engaging screen recordings that combine on-camera presence, screen capture, and audio. Viewers will learn how to set up professional lighting using LED panels, choose the right camera equipment, and optimize their recording environment for high-quality video production. The tutorial covers essential techniques for maintaining visual continuity, managing lighting color temperatures, and using tools like Camtasia and green screens to create polished, professional-looking video content. By following Josh's guidance, content creators will be able to produce dynamic, natural-looking screen recordings with improved technical quality and visual appeal.
Here are the key things you will be able to do after you watch this demo:
Manage on-camera and screen recording simultaneously
Maintain visual continuity during video recordings
Set up professional lighting using LED panels
Adjust color temperature and brightness for optimal video quality
Create a three-point lighting setup with key, fill, and kicker lights
Select and configure appropriate camera equipment for video production
Optimize system performance for screen and camera recording
Use a Wacom tablet for digital whiteboarding
Implement green screen techniques for background removal
Combine multiple video takes into a seamless recording
Export and render high-quality video files
Create digital double avatars for reusable content
Troubleshoot common video production challenges
Select and position lighting equipment safely
Integrate on-camera performance with slides and screen recordings
Method Three Demo and Challenges 0:08
Josh Lomelino introduces method three, which involves screen recording, audio, and on-camera capture, emphasizing its ability to capture natural, unscripted moments.
He highlights the challenges of managing both screen and camera presence simultaneously, including the need to maintain a consistent camera angle and expression.
Josh explains the importance of resuming recording with a neutral expression to ensure visual continuity.
He mentions the difficulty of pausing and resuming recording without noticeable edits when on camera.
Lighting Considerations for On-Camera Work 1:46
Josh discusses the significance of lighting in on-camera work, including the need to keep lighting consistent between takes.
He recommends using affordable studio lights, such as LED lights, which stay cool and are suitable for longer sessions.
Josh explains the concept of color temperature, noting that outdoor light can affect indoor lighting and cause color shifts.
He suggests using LED lights that allow adjustments in brightness and color temperature to manage lighting effectively.
Setting Up Lighting Equipment 3:02
Josh shares his preference for the Spectro Essential 360 LED panels, which range from 3250 to 6000 Kelvins and are dimmable.
He describes his typical setup, which includes stacking four LED panels in front and sometimes behind him to create soft, even light.
Josh emphasizes the importance of using back lights to create a "kicker light" effect, which helps outline the subject and makes them stand out from the background.
He advises adding weight to light stands to prevent them from tipping if bumped.
Camera and Recording Equipment 6:07
Josh talks about using a full-frame camera like the Canon 5D Mark III for high-quality recordings, but notes that a good 4K webcam can also deliver excellent results.
He recommends Logitech webcams, such as the Logitech 1080P cam, for their affordability and performance.
Josh explains the benefits of recording screen and camera separately, especially if the system can't handle 4K video and screen capture simultaneously.
He mentions the use of digital double avatars for reusing lighting and performance footage.
Optimizing System Performance and Audio Settings 8:15
Josh advises optimizing the graphics card and operating system for better system performance.
He recommends setting the microphone to 48,000 hertz and ensuring phantom power is turned on through the sound interface.
Josh suggests using a Wacom tablet for live whiteboarding, either with the Cintiq for direct drawing or a more affordable tablet for drawing on a pad.
He emphasizes the importance of setting pen lines thick enough to show clearly in high-resolution recordings.
Using Camtasia and Green Screens 9:20
Josh highlights Camtasia's ability to combine multiple takes into one smooth recording and Overlay on-camera performance videos on PowerPoint slides.
He explains the use of green screens for added flexibility, including the need to light the green screen evenly and separately from the face lighting.
Josh mentions the built-in removal tool in Camtasia for easily removing the green screen background.
He advises fine-tuning the green screen setup to avoid issues with hair and shoulder edges.
Exporting and Backing Up Videos 10:17
Josh recommends exporting videos as MP4 files using the H.264 format with a rendering quality around 75%.
He advises keeping files organized and backed up for potential updates.
Josh mentions the use of green screens for recording digital double avatar videos, which can be easily removed from the background later.
He concludes the demo by encouraging viewers to invest in high-quality audio and video assets for better results.
Keywords: Automated, performance, audio, file, high-quality, microphone, digital, avatar, recording, Camtasia
Automate Performances from Audio
Learn how to create a professional automated performance using digital avatars by recording high-quality audio and seamlessly integrating it with a virtual presenter. This technique allows you to transform audio recordings into engaging video content, whether from live presentations, scripts, or screen recordings. You'll discover how to export audio files, align a digital avatar's movements, and use chroma key technology to place your virtual presenter on any background. By mastering this workflow, you can produce polished, context-rich video dem
Following are the key things you will be able to do after you watch this demo:
Record high-quality audio using professional recording software
Export audio files in multiple formats (WAV and MP3)
Upload audio recordings to a digital avatar platform
Align digital avatar movements precisely with audio tracks
Render video performances from audio recordings
Remove background using chroma key techniques
Integrate digital avatars into various visual backdrops
Repurpose existing audio from presentations or demos
Create automated video content without on-camera performance
Optimize audio files for different digital platforms
Creating an Automated Performance Using Audio 0:08
Josh Lomelino explains two options for creating an automated performance: using a text-to-speech generated audio file or recording the performance using a high-quality microphone.
He emphasizes that recording with a high-quality microphone yields the best results and will demonstrate this method in the demo.
Josh mentions that the next demo will cover creating a fully automated performance using text, automating the entire process from audio capture to video production.
He notes that while the automated process is efficient, it may not match the quality of a live performance.
Preparing and Exporting Audio Recordings 1:09
Josh discusses the importance of using a high-quality audio file for the best results and mentions uploading the audio recording to a digital avatar.
He explains the need to export an uncompressed WAV file and an MP3 file optimized for web use, highlighting the importance of having both options ready.
Josh typically records his audio directly into Camtasia, which he finds to be the fastest way to capture high-quality audio for quick editing.
He demonstrates how to export a local file and choose between saving it as a WAV or MP3 file, noting that other audio editing tools can also be used.
Generating Video Performance with Digital Avatar 2:29
Josh explains the process of generating a video performance by dragging and dropping the audio file into the project and adjusting the start and end times of the digital avatar.
He mentions exporting the production to render the performance into an MP4 file and downloading it into the project.
Josh highlights the use of the chroma key or ultra key function to remove the background and seamlessly integrate the digital avatar into any backdrop.
He provides examples of using this technique for reading from a script, repurposing audio from live presentations, and creating matching visuals with on-camera performances.
Combining Performance Modalities and Future Demos 3:54
Josh discusses the challenges of managing all three performance modalities (screen recording, audio, and digital avatar) simultaneously and the importance of practicing beforehand.
He explains how to export the audio from a demo, generate a digital avatar, and Overlay it onto the video, showing the versatility of combining these elements.
Josh mentions upcoming demos that will cover generating audio using generative AI from text alone, creating a fully automated workflow.
He will also demonstrate automating the creation of slides and the precise timing of each slide's animation, allowing for a completely hands-free production system.
There are no Main Site search results.