Free Add Your Own Logo Step and Repeat Logo Virtual Background Mockup

— 3 minute read

Last time I wrote about virtual backgrounds, it was about having fun with them. Those funny, pop-culture backgrounds can make meetings a little bit more interesting. However, what if one wants to present a more professional image when delivering a talk or hosting an online event – perhaps a cool or fun virtual background might not be 100% appropriate?

Well, let's talk about the step and repeat banner!

A step and repeat banner is usually for event photography or social media spots. They are printed with a repeating pattern so that brand logos or emblems are visible in photographs of the individuals standing in front of it.

Step and repeat banner used at a conference.
Michael Fassbender in front of SXSW's step and repeat banner. (Photo Credit: Getty Images)

While more suited to photos, I think it's not too far of a stretch to bring it over to virtual backgrounds.

After writing about virtual backgrounds earlier in the week, I've done some experimenting with a step and repeat background with meetings – and, to be honest, I liked it so much, I thought I would create a Photoshop mockup for you to quickly make one.

Instructions permalink

Screenshot of Layers tab in Photoshop file.
Replace the logo within the "Place Logo in Here" Folder.
  1. Download step-and-repeat-virtual-background.psd file from the GitHub project and open the PSD open in Photoshop.
  2. Add your logo: Within the "Place Logo in Here" layer folder, double-click the Smart Layer, copy-and-paste your logo onto a new layer, hide the previous logo layer, save, and export the image. The new background should be generated.
  3. Export the background in your file format of choice.
  4. Set as your virtual background in video conference software. Use a green screen for better performance.

Optional permalink

  1. Adjust the shadows: You can also turn on or off the shadow
  2. Add your own brand colors, if you want.

I made a simple animation that shows a few variations that are possible:

Examples of step and repeat backgrounds.
Potential examples of step and repeat backgrounds. (Animation compression in the GIF makes the shadow effect less than ideal.)

Will this be useful? I'm thinking of using this at my next online engagement. If you end up using it, send me a screenshot.