GET IN TOUCH
+1-732-668-8002
+91-62843-00850
info@penthara.com
LOCATIONS
USA
131 Continental Drive
Suite 305
Newark, DE 19713
United States
India
SCO 515, Third Floor
Sector 70, Mohali
Punjab, 160055
Follow Us on Social -
24.11.2023

Create and Publish custom Teams Together Mode Backgrounds using Canva and Scene Studio

Want to learn how to design, build, and publish a custom together mode background for Microsoft Teams? Our blog provides step-by-step instructions on how to make and publish custom-together mode Teams backgrounds using Canva and Scene Studio Editor in a matter of hours.
CATEGORIES:
SHARE THIS BLOG:

Introduction

Ever found the out-of-the-box Microsoft Teams backgrounds to be too generic for your brand? Want a more custom-themed Teams background for your brand? Don’t fret. This blog will guide you exactly on how to do that. Our workflow combines Canva and Scene Studio editor to easily create custom-branded together mode Teams backgrounds in a matter of hours.

The design process comprises of 5 steps as listed below:

  1. Designing the MS Teams backgrounds
  2. Exporting images to be imported to scene studio
  3. Arranging the people placeholders
  4. Publishing the Teams Background in Microsoft Teams App
  5. Testing the Teams Background in Microsoft Teams App

Design Process

1. Designing the MS Teams backgrounds in Canva

We start by first designing the background of the environment in Canva. Our designs are generally inspired by futuristic, space exploration, and modern technology themes. There are many free elements you can use, as well as the pro-ones in case you have a paid subscription to Canva. I love to play around with lighting to create different moods. Here’s an example of our latest “Penthara HQ” Microsoft Teams background. I’ve also mentioned the keywords I used for searching these elements on Canva.
In this scene -

  1. The background image is a readily available image from Canva

Keywords for Background Image: Futuristic City, Sci-fi

  1. The little spaceships were separate elements that I’ve repeatedly used in the background while varying their size in perspective to the image. Keywords for Spaceships: Spaceship, Sci-Fi, UFO
  2. The suspended glass board signs are also separate elements available in Canva. To add our branding, I’ve added text box with company messaging on one glass banner on the right and our company’s logo on the one on the left.

Keywords for Transparent Banner: Transparent Glass Fonts Used:

    1. Big Shoulders Display (Heading)
    2. HK Modular (Bullet Points)
  1. For creating a single seat, choose an element with flat top surface. If the color of the element doesn’t match the overall theme, you can adjust it by using the tool bar on the top. Navigate to Edit Image -> Adjust.

Keywords for Seat element: Podium, Blue, 3D shape

  1. Then add details and lighting to enhance the look as shown in the video below.
  2. After that replicate the seats, arrange them in a row and group them. We repeat the same process for any further rows that we make.
  1. We manage the z-index of the rows by using the moving the seats to the back or to the front. The second row is behind the first one and the third row with two seats only is behind the third row. To access the option to move elements to the back or front, follow these steps:
  • Go to “Position” option in the tool ribbon bar.
  • A side panel will open on the left.
  • Adjust the z-index of elements by using the “Forward”, “Backward”, “To front” or “To back” options.
  • An alternate way to achieve the same is to change the order of elements by rearranging the order of layers in the layers tab of the side panel via drag and drop.
  1. Then add details and lighting to enhance the look.

Keywords for lighting between seats: Light Glow
Keywords for light rays coming from the top: Light Ray, Spotlight

And we have now successfully completed the designing part of the background. Now we move on to the making and testing part of this task.

2. Exporting images from Canva
  1. First, download the image from Canva in 1920 x 1080 px resolution.
  2. The total size limit for a scene in scene studio editor , so optimize these PNGs for a lighter file.
  3. If you have Canva Pro Subscription, you can select the “Compress File” option while downloading the file.
3. Arrange the people placeholders in scene studio

The scenes for the Teams Backgrounds are made in a platform provided by Microsoft called the scenes editor. Here’s a link to read more about it - Custom Together Mode Scenes - Teams | Microsoft Docs.

Now to begin, go to Scenes Editor - Teams Developer Portal. Then

  1. Click on “Create a new scene” from the options in the ribbon menu and select “Blank Scene”.
  2. Start by inserting the environment background.
  3. Click on “Add images” in the right panel and choose your background.
  4. Lock the image so that we don’t accidentally move it while arranging other elements.
  1. After you’ve placed the background, Click on the “participants button” on the right panel. Enter the number of participants you want to fill in this scene.
  2. Go ahead place them.

Note: Make sure that you scale the placeholders to above 150% otherwise, when in use, people will look really tiny in together mode.

  1. First set the scale percentage for the placeholders on the edge.
  2. Then accordingly adjust the scaling of the rest of the placeholders in the row.

Note: It’s okay for the placeholders to overlap with each other. Microsoft Teams manages to automatically centre people on its own during calls. Change to just points. Remove storytelling.

  1. Finally select the “mirror participants” option in the settings menu on the right side-panel.
4. Publishing the Teams Background to Microsoft Teams App
  1. Name your custom background and save it.
  2. After saving, click on “View in teams” on the top right corner of your screen.
  3. Follow the on-screen prompts to successfully publish your background in teams.
5. Testing the Teams Background in Microsoft Teams App

Once that is done and dusted do the following steps –

  1. Create a dummy MS Teams meeting on your calendar.
  1. Join the meeting and navigate to the together mode.
  2. Click on “Change the scene” option on the bottom left corner of your screen.
  3. Select your custom together mode background which should be visible in the pop up menu.
  1. Click Apply.
Lo and behold! Your very own custom together mode background is now ready for you and your team to bounce around on Microsoft Teams. Before exporting the scene for publishing, ask your team to join in and test the background. See whether you need to adjust the placement of people, if their size is proportionally correct to the background, and other nitty-gritty details.

Exporting the scene studio file as a ZIP folder

The scene gets published as an app to your organization’s teams application. For that, you will have to export all the data and code pertaining to this scene as a ZIP folder. To do that, follow these steps:

  1. Click on the downwards-pointing chevron on the right side of the save button.
  2. A dropdown menu opens up with two options – share and export.
  1. Click on export.
  2. The scene gets downloaded as a ZIP folder.

Future Steps

Other team members can upload this zip file to scene editor from their accounts and add this background to their teams by following the steps mentioned in “Publishing the Background to Microsoft Teams App”.

Note: In this mode of publishing teams background, the option to apply this background will only be visible to those who publish it to their teams individually. It won’t be commonly visible to your entire organization.

Additionally, you can also publish this background as an app in your organization’s teams so that it’s commonly available for everyone to apply. This will require technical assistance from your IT team.

AUTHORED AND GRAPHICS DESIGNED BY
Sanika Sanaye
sanika sanaye
Creative Design Director
peer reviewed By
Akkhil Ohri, M365 Architect at Penthara Technologies
Akkhil Ohri
M365 SOLUTION ARCHITECT
Recommended Content

Email Insights

Get the latest updates from Penthara right in your mail box.
Sign Up

LinkedIn Newsletter

Monthly updates, news & events from Microsoft to help  your business grow.
Subscribe To Newsletter

Leave a Reply

Your email address will not be published. Required fields are marked *

More From This Category

Penthara Org Chart for your Microsoft Teams – an alternative to inbuilt Microsoft Org Chart

Explore the alternative to in-built Microsoft Org Chart - Penthara Org Chart for MS Teams. Discover its capabilities, such as seamless integration with SharePoint user profiles and Azure AD, advanced search functionality, and customizable user cards. Enhance collaboration with clear hierarchy views and enjoy simple installation.

Read More
Creating reminder Adaptive cards in Microsoft Teams for upcoming events from a SharePoint calendar list

Learn how to create an Adaptive Card in Power Automate that posts a summary of upcoming events like Birthdays, Work Anniversaries and Holidays to an MS Teams Channel. The source of these events is the SharePoint legacy calendar app. Advanced Dynamic JSON Adaptive Card implementation has been covered extensively in this example.

Read More
Creating interactive adaptive cards in MS Teams with dynamic data from SharePoint Lists

Do you want to learn how to create adaptive cards in Microsoft Teams that can interact with SharePoint lists and respond to user actions? In this blog, we will show you how to use Power Automate to send dynamic data from SharePoint to Teams as adaptive cards. You will also see how to customize the adaptive cards for different departments and provide them with relevant rejection reasons. This way, you can avoid hard-coding the adaptive cards and make them more flexible and user-friendly. Read on to find out how to achieve this with some simple steps and screenshots.

Read More
chevron-down